/* container */
.variant-selects{
max-width:500px;
margin:40px auto;
}

/* label */
.form__label{
font-weight:600;
margin-bottom:10px;
color:#fff;
display:block;
}

.form__label__value{
color:#888;
font-weight:500;
}

/* fieldset */
.product-form__input{
border:none;
margin-bottom:25px;
padding:0;
}

/* hide radio buttons */
.product-form__input input[type="radio"]{
display:none;
}

/* size buttons */
.product-form__input label{
display:inline-block;
padding:10px 16px;
margin:6px 6px 0 0;
border:1px solid #fff;
border-radius:6px;
color:#fff;
cursor:pointer;
transition:0.2s;
font-size:14px;
background:#000;
}

/* hover */
.product-form__input label:hover{
    border:1px solid #000;
background:#fff;
color:#000;
}

/* active */
.product-form__input input:checked + label{
background:#f5202063;
color:#fff;
border:1px solid #fff;
}

/* color options */
.product-form__input--color label{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 14px;
}

/* color circle */
.product-form__input--color label::before{
content:"";
width:14px;
height:14px;
border-radius:50%;
background:var(--option-color);
border:1px solid #ddd;
}

/* color selected */
.product-form__input--color input:checked + label{
background:#f5202063;
color:#fff;
border:1px solid #fff;
}