.lpl-swatches{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0 22px}
.lpl-swatch{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:50%;padding:3px;box-sizing:border-box;position:relative;text-decoration:none!important;flex-shrink:0}
.lpl-swatch.is-active{border-color:var(--lpl-outline,#e9b65b)}
.lpl-swatch__circle{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.lpl-swatch__circle>.lpl-swatch__circle{width:68%;height:68%}
.lpl-swatch:focus-visible{outline:2px solid #111;outline-offset:3px}
.lpl-swatch__tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);background:#222;color:#fff;font-size:12px;font-weight:400;line-height:1.3;white-space:nowrap;padding:7px 10px;border-radius:4px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s,transform .12s;z-index:20;max-width:260px}
.lpl-swatch:hover .lpl-swatch__tooltip,.lpl-swatch:focus-visible .lpl-swatch__tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:767px){.lpl-swatches{gap:9px}.lpl-swatch{width:36px;height:36px}.lpl-swatch__tooltip{display:none}}