.card__inner.ai-has-swatches{z-index:2;pointer-events:none}.ai-swatches{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1rem 1.2rem;background:rgba(var(--color-background),.55);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);color:rgb(var(--color-foreground));border-bottom-left-radius:calc(var(--border-radius) - var(--border-width));border-bottom-right-radius:calc(var(--border-radius) - var(--border-width));pointer-events:auto;opacity:0;transform:translateY(.8rem);visibility:hidden;transition:opacity var(--duration-short, .2s) ease,transform var(--duration-short, .2s) ease,visibility var(--duration-short, .2s)}.ai-swatches__label{font-family:var(--font-body-family);font-size:1.3rem;letter-spacing:.04rem;line-height:1}.ai-swatches__list{display:flex;align-items:center;gap:.7rem;list-style:none;margin:0;padding:0}.ai-swatches__list li{display:flex}.ai-swatches .ai-swatch{display:block;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background-color:rgba(var(--color-foreground),.12);background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(var(--color-foreground),.15),0 0 0 1px #ffffffb3;outline:1px solid transparent;outline-offset:2px;transition:outline-color var(--duration-short, .2s) ease}.ai-swatch:hover,.ai-swatch:focus-visible,.ai-swatch.is-active{outline-color:rgb(var(--color-foreground))}.ai-swatches .ai-swatches__more{display:inline-block;font-size:1.2rem;line-height:1;color:rgba(var(--color-foreground),.75);text-decoration:none}.ai-swatches__more:hover{color:rgb(var(--color-foreground))}.card-wrapper:hover .ai-swatches,.card-wrapper:focus-within .ai-swatches{opacity:1;transform:none;visibility:visible}.ai-has-swatches:has(.ai-swatches) .card__content .card__badge{transition:transform var(--duration-short, .2s) ease}.card-wrapper:hover .ai-has-swatches:has(.ai-swatches) .card__content .card__badge{transform:translateY(-3.6rem)}.card-wrapper.ai-sw-active .media.media--hover-effect>img:first-child{opacity:1!important;transform:none!important}.card-wrapper.ai-sw-active .media.media--hover-effect>img+img{opacity:0!important}@media(hover:none){.ai-swatches{opacity:1;transform:none;visibility:visible;padding:.7rem .9rem}.ai-has-swatches:has(.ai-swatches) .card__content .card__badge{transform:translateY(-3.2rem)}}@media screen and (max-width:749px){.ai-swatches__label{font-size:1.2rem}.ai-swatches__list{gap:.5rem}.ai-swatches .ai-swatch{width:1.4rem;height:1.4rem}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/ai-card-swatches.css.map */