.card-color-swatches{display:flex;flex-direction:row;gap:6px;align-items:center;flex-shrink:0;z-index:3;position:relative}.card-color-swatch{--swatch-size: 12.4px;display:block;position:relative;width:var(--swatch-size);height:var(--swatch-size);padding:0;border:none;background:transparent;cursor:pointer;border-radius:50%;transition:transform .15s ease;flex-shrink:0;z-index:3;text-decoration:none}.card-color-swatch:after{display:none!important;content:none!important}.card-color-swatch:hover{transform:scale(1.1)}.card-color-swatch:focus{outline:none}.card-color-swatch:focus-visible{outline:1px solid rgba(var(--color-foreground),.5);outline-offset:1px}.card-color-swatch__visual{display:block;width:100%;height:100%;border-radius:50%;background:var(--swatch--background);background-position:center;background-size:cover;background-origin:border-box;border:1px solid rgba(0,0,0,.1);box-sizing:border-box;pointer-events:none}.card-color-swatch__visual--text{display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:600;text-transform:uppercase;background-color:#f0f0f0;color:#333}.card-color-swatch--active .card-color-swatch__visual{border:1.5px solid #333}.card-color-swatch--unavailable{opacity:.35}.card-color-swatch--unavailable .card-color-swatch__visual{position:relative}.card-color-swatch--unavailable .card-color-swatch__visual:after{content:"";position:absolute;top:50%;left:-1px;right:-1px;height:1px;background-color:#00000080;transform:rotate(-45deg)}img.card-variant-image,img.card-img-primary{transition:opacity .25s ease-in-out}img.card-img-secondary{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s ease-in-out;z-index:2}.card__media:hover img.card-img-primary,.media--hover-effect:hover img.card-img-primary{opacity:0}.card__media:hover img.card-img-secondary,.media--hover-effect:hover img.card-img-secondary{opacity:1}@media screen and (max-width:749px){.card-color-swatches{gap:5px}.card-color-swatch{--swatch-size: 10px}}@media screen and (max-width:480px){.card-color-swatch{--swatch-size: 9px}.card-color-swatches{gap:4px}}
/*# sourceMappingURL=/cdn/shop/t/209/assets/card-color-swatches.css.map */