.card__color-swatches{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}.card__color-swatch{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:1.6rem;height:1.6rem;border-radius:50%;border:.1rem solid rgba(var(--color-foreground),.15);padding:0;margin:0;cursor:pointer;box-shadow:0 0 0 .1rem rgb(var(--color-background)) inset}.card__color-swatch:hover,.card__color-swatch:focus-visible{border-color:rgba(var(--color-foreground),.6);outline:none}.card__media-primary{transition:opacity .2s ease}.card__color-image{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;object-fit:cover;pointer-events:none;transition:opacity .2s ease}.card:has(.card__color-swatch:nth-of-type(1):hover) .card__media-primary,.card:has(.card__color-swatch:nth-of-type(1):focus-visible) .card__media-primary{opacity:0}.card:has(.card__color-swatch:nth-of-type(1):hover) .card__color-image[data-swatch-preview="1"],.card:has(.card__color-swatch:nth-of-type(1):focus-visible) .card__color-image[data-swatch-preview="1"]{opacity:1}.card:has(.card__color-swatch:nth-of-type(2):hover) .card__media-primary,.card:has(.card__color-swatch:nth-of-type(2):focus-visible) .card__media-primary{opacity:0}.card:has(.card__color-swatch:nth-of-type(2):hover) .card__color-image[data-swatch-preview="2"],.card:has(.card__color-swatch:nth-of-type(2):focus-visible) .card__color-image[data-swatch-preview="2"]{opacity:1}.card:has(.card__color-swatch:nth-of-type(3):hover) .card__media-primary,.card:has(.card__color-swatch:nth-of-type(3):focus-visible) .card__media-primary{opacity:0}.card:has(.card__color-swatch:nth-of-type(3):hover) .card__color-image[data-swatch-preview="3"],.card:has(.card__color-swatch:nth-of-type(3):focus-visible) .card__color-image[data-swatch-preview="3"]{opacity:1}.card:has(.card__color-swatch:nth-of-type(4):hover) .card__media-primary,.card:has(.card__color-swatch:nth-of-type(4):focus-visible) .card__media-primary{opacity:0}.card:has(.card__color-swatch:nth-of-type(4):hover) .card__color-image[data-swatch-preview="4"],.card:has(.card__color-swatch:nth-of-type(4):focus-visible) .card__color-image[data-swatch-preview="4"]{opacity:1}.card:has(.card__color-swatch:nth-of-type(5):hover) .card__media-primary,.card:has(.card__color-swatch:nth-of-type(5):focus-visible) .card__media-primary{opacity:0}.card:has(.card__color-swatch:nth-of-type(5):hover) .card__color-image[data-swatch-preview="5"],.card:has(.card__color-swatch:nth-of-type(5):focus-visible) .card__color-image[data-swatch-preview="5"]{opacity:1}.card:has(.card__color-swatch:nth-of-type(6):hover) .card__media-primary,.card:has(.card__color-swatch:nth-of-type(6):focus-visible) .card__media-primary{opacity:0}.card:has(.card__color-swatch:nth-of-type(6):hover) .card__color-image[data-swatch-preview="6"],.card:has(.card__color-swatch:nth-of-type(6):focus-visible) .card__color-image[data-swatch-preview="6"]{opacity:1}@media screen and (max-width:749px){.card__color-swatch{width:1.4rem;height:1.4rem}}
/*# sourceMappingURL=/cdn/shop/t/31/assets/component-card-swatch.css.map */