.mcs-swatches{--mcs-ring:#22d3ee;margin:2px 0} .mcs-swatches select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.mcs-swatch-list{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mcs-swatch{
display:inline-block;width:34px;height:34px;border-radius:50%;
background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f3f3f3;
border:1px solid rgba(0,0,0,.18);cursor:pointer;position:relative;
box-shadow:0 0 0 2px rgba(255,255,255,.85) inset;transition:transform .12s ease,box-shadow .12s ease;outline:none
}
.mcs-swatch--image{border-radius:8px;box-shadow:none}
.mcs-swatch:hover{transform:translateY(-1px)}
.mcs-swatch:focus-visible{box-shadow:0 0 0 2px #fff inset,0 0 0 3px var(--mcs-ring)}
.mcs-swatch.is-selected{box-shadow:0 0 0 2px rgba(255,255,255,.85) inset,0 0 0 2px var(--mcs-ring),0 0 12px rgba(34,211,238,.45)}
.mcs-swatch--image.is-selected{box-shadow:0 0 0 2px var(--mcs-ring),0 0 12px rgba(34,211,238,.45)}
.mcs-swatch.is-disabled{cursor:not-allowed;opacity:.4}
.mcs-swatch.is-disabled::after{
content:"";position:absolute;left:50%;top:-3px;width:1px;height:calc(100% + 6px);
background:rgba(0,0,0,.45);transform:rotate(45deg);transform-origin:center
}
.mcs-swatch--empty{background-image:linear-gradient(45deg,#e9e9e9 25%,transparent 25%,transparent 75%,#e9e9e9 75%),linear-gradient(45deg,#e9e9e9 25%,#fff 25%,#fff 75%,#e9e9e9 75%);background-size:10px 10px;background-position:0 0,5px 5px}
.mcs-swatch-selected{display:inline-block;margin-left:4px;font-size:.9em;color:inherit;opacity:.8;vertical-align:middle}
.mcs-swatch-selected:empty{display:none}
@media (max-width:480px){.mcs-swatch{width:38px;height:38px}}