.card-color-swatches{display:flex;flex-wrap:wrap;width:100%;gap:.8rem;padding:1.4rem 0 .4rem}.card--card .card-color-swatches{gap:8px}.color-swatch{display:block;height:20px;width:20px;border:1px solid rgba(var(--color-foreground),.2);position:relative;z-index:2;transition:border-color var(--duration-short) ease}.color-swatch:not(.color-swatch--active):hover{border:1px solid rgba(var(--color-foreground),.4)}.color-swatch.color-swatch--active{border:2px solid rgba(var(--color-foreground),.8)}.color-swatch--title:before{content:attr(title);position:absolute;bottom:calc(100% + 4px);left:50%;height:fit-content;transform:translate(-50%);background-color:rgb(var(--color-foreground));border-radius:4px;font-size:var(--font-size-sm);color:rgb(var(--color-background));padding:4px 6px;line-height:1;opacity:0;transition:opacity .2s ease-in-out;z-index:5;pointer-events:none;white-space:nowrap}.color-swatch--title:hover:before{opacity:1}.color-swatch--title-top:before{bottom:calc(100% + 4px)}.color-swatch--title-bottom:before{top:calc(100% + 4px)}.color-swatch[data-swatch-out]{display:none;opacity:0}.color-swatch[data-swatch-out].open-animation{display:block;opacity:1;animation:openSwatches .3s ease-in-out}.color-swatch[data-swatch-out].close-animation{display:none;opacity:0;animation:closeSwatches .3s .1s ease-in-out}.card-color-swatches.expanded .color-swatch[data-swatch-out]{display:block;opacity:1}.color-swatch.is-active{border:2px solid rgb(var(--color-foreground))}.color-swatch--sm{width:16px;height:16px}.color-swatch--md{width:20px;height:20px}.color-swatch--bg{width:32px;height:32px}.color-swatch--square,.color-swatch--square .color-swatch__color{border-radius:0}.color-swatch--rounded-square,.color-swatch--rounded-square .color-swatch__color{border-radius:25%}.color-swatch--circle,.color-swatch--circle .color-swatch__color{border-radius:50%}.color-swatch__color{pointer-events:none;display:block;background:var(--color-swatch);width:100%;height:100%;border:none;background-position:center;background-size:cover}.color-swatch__color--inner-border{border:2px solid rgb(var(--color-background))}.color-swatch--action{cursor:pointer;font-family:var(--font-body-family);background:none;color:rgba(var(--color-foreground),.75);border:none;font-size:var(--font-size-xm);line-height:1;font-weight:400;order:1;display:flex;justify-content:center;align-items:center;z-index:2;padding:0;padding-left:.2rem;width:unset;order:0}.color-swatch--action__label{display:flex;flex-direction:row;align-items:center;justify-content:start;gap:.6rem}.color-swatch--action__label .icon{width:1.2rem;height:1.2rem}.color-swatch--action .color-swatch--action__label--more{display:flex}.color-swatch--action .color-swatch--action__label--less,.card-color-swatches.expanded .color-swatch--action .color-swatch--action__label--more{display:none}.card-color-swatches.expanded .color-swatch--action .color-swatch--action__label--less{display:flex}.card-wrapper--swatches .card__media .media img{transition:opacity .2s ease-in}.card-wrapper--swatches:hover .media.media--hover-effect img{opacity:1;transition:transform var(--duration-long) ease;transform:scale(1.03)}.card-wrapper--swatches .card__media .media.media--hover-effect img{transition:transform var(--duration-long) ease,opacity .2s ease-in,background .2s ease-in-out}@keyframes openSwatches{0%{display:block;opacity:0}to{opacity:1}}@keyframes closeSwatches{0%{opacity:1;display:block}99%{opacity:0;display:block}to{display:none;opacity:0}}.card-color-swatches__image{position:absolute;top:0;left:0;right:0;aspect-ratio:var(--media-aspect-ratio);opacity:0;z-index:1;transition:opacity var(--duration-medium) var(--duration-medium) ease}.card-color-swatches__item:hover+.card-color-swatches__image{opacity:1;transition:opacity var(--duration-medium) ease}.card-color-swatches__image img{width:100%;height:100%;object-fit:cover;display:block;position:static!important}.card-color-swatches__background{position:absolute;display:block!important;top:0;left:0;right:0;aspect-ratio:var(--media-aspect-ratio);background-image:var(--original-image);z-index:1;background-size:auto 103%;background-position:center;opacity:0;pointer-events:none;transition:opacity var(--duration-long) ease,background-image var(--duration-long) ease}.card-color-swatches__item[active]~.card-color-swatches__background{opacity:1}
/*# sourceMappingURL=/cdn/shop/t/2/assets/card-color-swatches.css.map */