.hpm-product-options{
    margin:18px 0 20px;
    padding:18px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:12px;
    background:transparent;
    color:#fff;
}
.hpm-product-options,
.hpm-product-options label,
.hpm-product-options .hpm-option-label,
.hpm-product-options .hpm-swatch-name,
.hpm-product-options .hpm-live-price,
.hpm-product-options .hpm-live-price-label,
.hpm-product-options strong{
    color:#fff;
}
.hpm-option-group{margin-bottom:18px}
.hpm-option-group>label,.hpm-option-label{display:block;margin-bottom:8px}
.hpm-product-options .required{color:#fff}
#hpm_size{
    width:100%;
    min-height:44px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:8px;
    background:transparent;
    color:#fff;
}
#hpm_size option{
    color:#000;
    background:#fff;
}
.hpm-color-swatches{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.hpm-swatch{
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 10px 7px 7px;
    border:2px solid transparent;
    border-radius:999px;
    cursor:pointer;
    background:rgba(255,255,255,.08);
    color:#fff;
    transition:.15s ease;
}
.hpm-swatch:hover,
.hpm-swatch.is-selected{
    border-color:#fff;
}
.hpm-swatch input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.hpm-swatch-circle{
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--hpm-color);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.25),
        0 0 0 1px rgba(255,255,255,.35);
}
.hpm-swatch-name{
    font-size:14px;
    line-height:1;
}
.hpm-live-price{
    margin-top:5px;
    font-size:1.12em;
}
.hpm-live-price strong{font-size:1.12em}
.hpm-live-price-label{margin-right:5px}

@media(max-width:480px){
    .hpm-product-options{padding:14px}
    .hpm-swatch{padding-right:8px}
}