.color-swatches-widget{margin:20px 0}.color-swatches-widget .swatches-title{font-size:14px;font-weight:600;color:#333;margin-bottom:12px;display:flex;align-items:center;gap:8px}.color-swatches-widget .swatches-title .current-color{font-weight:400;color:#666}.color-swatches-widget .swatches-container{display:flex;flex-wrap:wrap;gap:10px}.color-swatches-widget .swatch-item{position:relative;display:block;text-decoration:none}.color-swatches-widget .swatch{width:36px;height:36px;border-radius:50%;border:2px solid #e0e0e0;cursor:pointer;transition:all .2s ease;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}.color-swatches-widget .swatch:hover{transform:scale(1.1);border-color:#999;box-shadow:0 2px 8px #00000026}.color-swatches-widget .swatch-item.active .swatch{border-color:var(--swatch-active-color, #333);border-width:3px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--swatch-active-color, #333)}.color-swatches-widget .swatch-item.out-of-stock .swatch{opacity:.4}.color-swatches-widget .swatch-item.out-of-stock .swatch:after{content:"";position:absolute;top:50%;left:-10%;width:120%;height:2px;background:#999;transform:rotate(-45deg)}.color-swatches-widget .swatch-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;pointer-events:none;z-index:10}.color-swatches-widget .swatch-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#333}.color-swatches-widget .swatch-item:hover .swatch-tooltip{opacity:1;visibility:visible}.color-swatches-widget.style-square .swatch{border-radius:4px}.color-swatches-widget.size-large .swatch{width:48px;height:48px}.color-swatches-widget.size-small .swatch{width:28px;height:28px}.color-swatches-widget .swatch.swatch-image{background-color:#f5f5f5}.color-swatches-widget .swatch.swatch-color{background-color:var(--swatch-color, #ccc)}@media (max-width: 640px){.color-swatches-widget .swatches-container{gap:8px}.color-swatches-widget .swatch{width:32px;height:32px}.color-swatches-widget.size-large .swatch{width:40px;height:40px}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-color-swatches.css.map */