.wcvp {
margin: 14px 0 18px
}
.wcvp-attr {
margin-bottom: 14px
}
.wcvp-label {
font-weight: 700;
margin-bottom: 8px;
display: flex;
gap: 6px;
align-items: center
}
.wcvp-label .wcvp-current {
font-weight: 700
}
.wcvp-options {
display: flex;
flex-wrap: wrap;
gap: 10px
} .wcvp-opt {
position: relative;
appearance: none;
border: 2px solid #d9d9db;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: border-color .12s ease, box-shadow .12s ease
}
.wcvp-opt:hover {
box-shadow: 0 1px 5px rgba(0, 0, 0, .06)
}
.wcvp-opt.wcvp-opt--selected {
border-color: #04bcd4
}
.wcvp-opt.wcvp-opt--disabled {
opacity: .35;
cursor: not-allowed;
pointer-events: none;
filter: grayscale(1)
} .wcvp-swatch {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid #e1e1e1;
background-size: cover;
background-position: center
}
.wcvp-opt--tx .wcvp-text {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
font-size: 12px;
line-height: 1;
white-space: nowrap
} .wcvp-check {
position: absolute;
right: -5px;
top: -5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #111;
color: #fff;
display: none;
align-items: center;
justify-content: center;
border: 2px solid #04bcd4
}
.wcvp-opt.wcvp-opt--selected .wcvp-check {
display: flex
}
.wcvp-check svg {
fill: #fff
} .wcvp-vh {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0
}