.product-variant_options-wrap--swatches{display:flex;flex-wrap:wrap;gap:10px}.product-variant-option--swatch{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;cursor:pointer;transition:transform .18s}.product-variant-option--swatch:hover{transform:translateY(-1px)}.product-variant-option--swatch input[type=radio]{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;opacity:0;margin:-1px}.swatch-tile{width:56px;height:56px;border-radius:4px;border:1.5px solid #ddd;position:relative;overflow:hidden;transition:border-color .18s,box-shadow .18s;background-size:cover;background-position:center;background-repeat:no-repeat}.product-variant-option--swatch:hover .swatch-tile{border-color:#999}.product-variant-option--swatch input[type=radio]:checked~.swatch-tile{border-color:#1a1a18;box-shadow:0 0 0 2px #f5f4f0,0 0 0 3.5px #1a1a18}.product-variant-option--swatch input[type=radio].disabled~.swatch-tile{opacity:.35}.product-variant-option--swatch input[type=radio].disabled~.swatch-tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top right,transparent calc(50% - .5px),#888 calc(50% - .5px),#888 calc(50% + .5px),transparent calc(50% + .5px));pointer-events:none}.swatch-tile.fabric:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.045) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);pointer-events:none}.swatch-name{font-size:11px;color:#1a1a18;text-align:center;line-height:1.2;max-width:64px;word-break:break-word}.product-variant-option--swatch input[type=radio]:checked~.swatch-name{font-weight:500}.product-variant-option--swatch input[type=radio].disabled~.swatch-name{opacity:.5}.product-variant-option--swatch[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#1a1a18;color:#fff;padding:5px 10px;font-size:11px;white-space:nowrap;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10}.product-variant-option--swatch:hover[data-tooltip]:after{opacity:1}.swatch-selected-value{font-weight:400;color:#666}@media(max-width:767px){.swatch-tile{width:48px;height:48px}.swatch-name{font-size:10px;max-width:52px}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-color-swatches.css.map */