.ws-variations-block {
display:flex;
flex-wrap: wrap;
margin-bottom: 10px;
}
.ws-variations-title {
color: #303031;
margin-bottom: 10px;
}
.ws-variations-title .ws-variations-value { font-family: 'Baskervville',serif;
font-weight: normal;
font-size: 18px;
line-height: 21px;
}
.ws-variations-title .ws-variations-value.pa_color {
text-transform: lowercase;
}
.ws-variations-title .ws-variations-value.pa_color .ws-empty {
text-transform:none
} .ws-variations-block .ws-variation-radio {
margin-right:5px
}
.ws-variation-radio > input[type="radio"].ws_wc_variations_radio_buttons {
opacity: 0;
width: 0;
position: relative;
z-index: 2;
} .ws-variation-radio {
position:relative
}
.ws-variation-radio.v-exists {
cursor: pointer;
}
.ws-variation-radio:not(.v-exists) {
cursor: not-allowed; }
.ws-variation-radio:not(.v-exists):before, .ws-variation-radio:not(.v-exists):after {
position: absolute;
content: ' ';
width: 1px;
background-color: #bbb;
}
.ws-variation-radio.pa_color:not(.v-exists):before, .ws-variation-radio.pa_color:not(.v-exists):after {
top: -2px;
height: 32px;
left: 15px;
z-index: 2;
}
.ws-variation-radio.pa_color:before {
transform: rotate(45deg);
}
.ws-variation-radio.pa_color:after {
transform: rotate(-45deg);
} .ws-variation-radio.pa_size:not(.v-exists):before, .ws-variation-radio.pa_size:not(.v-exists):after {
left: 31px;
height: 62px;
top: -16px;
}
.ws-variation-radio.pa_size:before {
transform: rotate(65deg);
}
.ws-variation-radio.pa_size:after {
transform: rotate(-65deg);
} .ws-variation-radio.pa_length:not(.v-exists):before, .ws-variation-radio.pa_length:not(.v-exists):after {
left: 31px;
height: 62px;
top: -16px;
}
.ws-variation-radio.pa_length:before {
transform: rotate(65deg);
}
.ws-variation-radio.pa_length:after {
transform: rotate(-65deg);
} .ws-variation-radio.pa_color input[type="radio"] + span {
position: relative;
width: 28px;
line-height: 28px;
height: 28px;
display: inline-block;
color: #fff;
overflow: hidden;
border-radius: 50%;
border: 1px solid #CCBD9F;
transition: border-color .5s;
}
.ws-variation-radio.pa_color input[type="radio"] + span::after,
.ws-variation-radio.pa_color input[type="radio"] + span::before {
display: inline-block;
vertical-align: middle;
position: absolute;
}
.ws-variation-radio.pa_color input[type="radio"] + span::after {
width: 24px;
height: 12px;
background-color: #fff;
border-radius: 0 0 50% 50%/0 0 100% 100%;
left: 1px;
bottom: 1px;
z-index:1;
}
.ws-variation-radio.pa_color input[type="radio"] + span::before {
content: '';
width: 24px;
height: 24px;
left: 1px;
top: 1px;
background-color: #fff;
border-radius: 50%;
z-index: 1;
}
.ws-variation-radio.pa_color.v-exists input[type="radio"]:checked + span,
.ws-variation-radio.pa_color.v-exists:hover input[type="radio"] + span {
border-color: #303031;
} .ws-variation-radio.pa_size input[type="radio"] + span,
.ws-variation-radio.pa_length input[type="radio"] + span {
display: inline-block;
min-width: 60px;
padding: 0 5px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #F0ECE2;
background: #fff;
color: #000;
transition: background .5s
}
.ws-variation-radio.pa_size.v-exists input[type="radio"]:checked + span, .ws-variation-radio.pa_size.v-exists:hover input[type="radio"] + span,
.ws-variation-radio.pa_length.v-exists input[type="radio"]:checked + span, .ws-variation-radio.pa_length.v-exists:hover input[type="radio"] + span {
border-color: #303031;
background: #303031;
color: #fff;
}
.ws_reset_variations {
display: flex;
align-items: center;
margin-bottom: 25px;
text-decoration: none;
}
.ws_reset_variations svg {margin-right:5px}
.ws_reset_variations:hover svg {
fill:#C8BFA1;
}