.color-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}@media screen and (min-width:750px){.color-swatches{gap:8px}}.color-swatch-wrap{width:24px;height:24px;cursor:pointer;position:relative;display:inline-block;flex-shrink:0}@media screen and (min-width:750px){.color-swatch-wrap{width:28px;height:28px}}.color-swatch-wrap{border-radius:50%}.color-swatch-wrap.is-active{outline:1px solid #B09B5B;outline-offset:1px}.color-swatch-wrap.is-unavailable{cursor:default}.color-swatch{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px #00000024;transition:box-shadow .15s ease;position:relative}.color-swatch.is-unavailable{opacity:.6}.color-swatch.is-unavailable:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(180,180,180,.9) calc(50% - .5px),rgba(180,180,180,.9) calc(50% + .5px),transparent calc(50% + .5px));pointer-events:none}.swatch-label-value{text-transform:capitalize}.product-form__item--swatches{flex-basis:100%!important;padding:0!important}.product-form__item--swatches .color-swatches{margin-bottom:6px}card-color-swatches{display:block;position:relative;z-index:5;margin-bottom:8px}card-color-swatches .color-swatch-wrap{width:18px;height:18px}@media screen and (min-width:750px){card-color-swatches .color-swatches{gap:6px}}@media(hover:hover)and (pointer:fine){.color-swatch-wrap:before{content:attr(data-value);text-transform:capitalize;position:absolute;bottom:calc(100% + 7px);left:50%;transform:translate(-50%);background:#161616cc;color:#fff;font-size:11px;line-height:1.3;padding:4px 6px 2px;border-radius:4px;white-space:nowrap;z-index:30;letter-spacing:.03em;pointer-events:none;opacity:0;transition:opacity .15s ease}.color-swatch-wrap:hover:before{opacity:1}variant-swatches .color-swatch-wrap:before{font-size:12px;padding:5px 10px 3px;bottom:calc(100% + 8px)}}.cs-variant-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}.product-card--has-hover-image .product-card__hover-image{z-index:2}.color-swatches-select--hidden{display:none}
/*# sourceMappingURL=/cdn/shop/t/9/assets/color-swatches.css.map */