.card__media{position:relative}.card-color-swatches{position:absolute;bottom:10px;right:10px;z-index:2;display:flex;flex-direction:row;gap:6px;align-items:center}.card-color-swatch{--swatch-size: 22px;position:relative;width:var(--swatch-size);height:var(--swatch-size);padding:0;border:none;background:transparent;cursor:pointer;border-radius:50%;transition:transform .2s ease,box-shadow .2s ease;flex-shrink:0}.card-color-swatch:hover{transform:scale(1.15)}.card-color-swatch:focus{outline:none}.card-color-swatch:focus-visible{outline:2px solid rgba(var(--color-foreground),.5);outline-offset:2px}.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:2px solid rgba(255,255,255,.9);box-sizing:border-box;box-shadow:0 1px 3px #0003;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.card-color-swatch__visual--text{display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;text-transform:uppercase;background-color:#f5f5f5;color:#333}.card-color-swatch--active .card-color-swatch__visual{border-color:#fff;box-shadow:0 0 0 2px #0000004d,0 2px 4px #0003;transform:scale(1.05)}.card-color-swatch--unavailable{opacity:.5}.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)}.card-color-swatch:not(.card-color-swatch--active):hover .card-color-swatch__visual{border-color:#fff;box-shadow:0 0 0 1px #0003,0 2px 4px #00000026}.card-wrapper .card__media .media img.card-variant-image{transition:opacity .25s ease-in-out}.card-wrapper .card__media .media img.card-variant-image.fade-out{opacity:0}.card-wrapper .card__media .media img.card-variant-image.fade-in{opacity:1}@media screen and (max-width: 749px){.card-color-swatches{bottom:8px;right:8px;gap:5px}.card-color-swatch{--swatch-size: 20px}}@media screen and (max-width: 480px){.card-color-swatch{--swatch-size: 18px}.card-color-swatches{gap:4px}}.card-color-swatches--limited{max-width:calc(100% - 20px)}.card-color-swatches__more{display:flex;align-items:center;justify-content:center;width:var(--swatch-size);height:var(--swatch-size);font-size:9px;font-weight:600;color:#333;background-color:#ffffffe6;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 3px #0003}.card-color-swatches,.card-color-swatch{pointer-events:auto}
/*# sourceMappingURL=/cdn/shop/t/62/assets/card-color-swatches.css.map */