/*!
 * DS Card swatch media
 *
 * The card swatches and the selected state ds-card-swatch-media.js switches between.
 *
 * Figma node 1598:18026 (desktop) and 1598:19052 (mobile): a 23.5px circle (16.8px on
 * a phone) with a white rim, a 1px ring and the colour as a dot of ~71% inside. The
 * ring is the full foreground on the current swatch, 30% on the others. 5.2px between swatches (3.7px on a phone), 16px under the price (10px).
 *
 * Drawn on `::before`, which theme.css already lays over the whole swatch: two inset
 * shadows paint the rim and ring over the edge of the swatch's own background, so the
 * dot works the same for a colour or an image swatch. The stock 2px `::after` ring,
 * offset outside the box, is dropped — its offset is not in the layout, so the design's
 * gaps could not be held with it. Variant-image swatches keep the stock look.
 */.product-card .product-card__bottom{--ds-swatch-size: clamp(1.0484rem, 1.632vw, 1.4687rem);--ds-swatch-ring: rgb(var(--color-foreground) / .3);padding-block-start:clamp(.625rem,1.11vw,1rem)}.product-card .product-card__bottom .swatches:not(.swatches--variant){gap:calc(var(--ds-swatch-size) * .22)}.product-card .product-card__bottom .swatches:not(.swatches--variant) .color-swatch{--swatch-size: var(--ds-swatch-size)}.product-card .product-card__bottom .swatches:not(.swatches--variant) .color-swatch:before{box-shadow:inset 0 0 0 1px var(--ds-swatch-ring),inset 0 0 0 calc(var(--swatch-size) * .145) #fff;transition:box-shadow var(--animation-short)}.product-card .product-card__bottom .swatches:not(.swatches--variant) .color-swatch:after{display:none}.product-card .product-card__bottom .color-swatch[aria-current=true],.product-card .product-card__bottom .color-swatch.ds-swatch-current{--ds-swatch-ring: rgb(var(--color-foreground))}.product-card .product-card__bottom .swatches:not(.swatches--variant) .color-swatch.ds-swatch-unavailable:before{background:linear-gradient(to bottom right,transparent calc(50% - .5px),rgb(var(--color-red-200)) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}.ds-product-card .color-swatch[aria-current=true]:after,.ds-product-card .color-swatch.ds-swatch-current:after{opacity:1}.ds-product-card.ds-variant-media .product-card__carousel{display:none}.ds-product-card.ds-variant-media .product-card__carousel~img{opacity:1;visibility:visible;border-radius:inherit}.ds-product-rating-slot{display:contents}
/*# sourceMappingURL=/cdn/shop/t/23/assets/ds-card-swatch-media.css.map */