.card__variant-slot{min-height:3.4rem;display:flex;align-items:center;gap:.5rem}.card-color-variant{--card-swatch-visible: var(--card-swatch-visible-mobile, 3);--card-swatch-gap: .5rem;--card-swatch-item-size: 2.8rem;margin:.6rem 0;flex:1 1 auto;min-width:0;position:relative}@media screen and (min-width:750px){.card-color-variant{--card-swatch-visible: var(--card-swatch-visible-desktop, 5)}}.card-color-variant__scroll-hint{display:none;border:0;margin:0;background:none;font:inherit;cursor:pointer;transition:opacity var(--duration-default) ease,transform var(--duration-default) ease}.card-color-variant__list{display:flex;flex-wrap:wrap;gap:var(--card-swatch-gap)}.card-color-variant__item{--swatch-input--size: 2.2rem;position:relative;z-index:2;display:block;padding:.2rem;border:.1rem solid transparent;border-radius:50%;background:none;cursor:pointer;outline-offset:.2rem;transition:border-color var(--duration-short) ease}.card-color-variant__item .swatch{border-radius:50%}.card-color-variant__item:hover{border-color:rgba(var(--color-foreground),.4)}.card-color-variant__item.is-active{border-color:rgb(var(--color-foreground))}.card-color-variant__item.is-static{cursor:default}.card-color-variant__item.is-static:hover{border-color:transparent}.card-color-variant__quick-view{display:flex;flex:0 0 auto;margin-left:auto;position:relative;z-index:2}.card-color-variant__quick-view:before{content:attr(data-tooltip);position:absolute;right:0;bottom:calc(100% + .7rem);z-index:3;padding:.45rem .7rem;border-radius:.3rem;background:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:1.1rem;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(.4rem);visibility:hidden;transition:opacity var(--duration-short) ease,transform var(--duration-short) ease,visibility var(--duration-short) ease}.card-color-variant__quick-view-button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:2.6rem;height:2.6rem;padding:0;border:.1rem solid rgba(var(--color-foreground),.25);border-radius:50%;background:transparent;color:rgb(var(--color-foreground));cursor:pointer}.card-color-variant__quick-view-button .svg-wrapper{display:flex;width:1.2rem;height:1.2rem}.card-color-variant__quick-view-button:hover{border-color:rgb(var(--color-foreground))}.card-color-variant__quick-view-button.loading{position:relative;color:transparent}.card-color-variant__quick-view-button.loading>.loading__spinner{top:50%;left:50%;display:flex;align-items:center;transform:translate(-50%,-50%)}.card-color-variant__quick-view-button.loading>.loading__spinner .path{stroke:rgb(var(--color-foreground))}.card-color-variant__quick-view:hover:before,.card-color-variant__quick-view:focus-within:before{opacity:1;transform:translateY(0);visibility:visible}@media screen and (max-width:749px){.card-color-variant__quick-view{display:none}}.card-color-variant__list{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.card-color-variant__list::-webkit-scrollbar{display:none}.card-color-variant__item{flex:0 0 auto}.card-color-variant__list.is-overflow-end{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.2rem),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 1.2rem),transparent 100%)}.card-color-variant__list.is-overflow-start{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 1.2rem);mask-image:linear-gradient(to right,transparent 0,#000 1.2rem)}.card-color-variant__list.is-overflow-start.is-overflow-end{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 1.2rem,#000 calc(100% - 1.2rem),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 1.2rem,#000 calc(100% - 1.2rem),transparent 100%)}.card-color-variant__scroll-hint--next:before{content:attr(data-hint-mobile)}.card-color-variant__scroll-hint-icon{display:none}@media screen and (max-width:749px){.card-color-variant{max-width:calc(var(--card-swatch-item-size) * var(--card-swatch-visible) + var(--card-swatch-gap) * (var(--card-swatch-visible) - 1))}.card-color-variant__scroll-hint--next{align-items:center;justify-content:center;position:absolute;top:50%;right:-.4rem;z-index:3;min-width:1.5rem;height:1.5rem;padding:0 .3rem;border-radius:999px;background:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:1rem;line-height:1;font-weight:600;pointer-events:none;opacity:1;transform:translateY(-50%) scale(1);transition:opacity var(--duration-default) ease,transform var(--duration-default) ease,display var(--duration-default) allow-discrete}.card-color-variant.is-overflow-end .card-color-variant__scroll-hint--next{display:flex}@starting-style{.card-color-variant.is-overflow-end .card-color-variant__scroll-hint--next{opacity:0;transform:translateY(-50%) scale(.6)}}}@media screen and (min-width:750px){.card-color-variant{flex:0 1 auto;display:flex;align-items:center;gap:var(--card-swatch-gap)}.card-color-variant__list{max-width:calc(var(--card-swatch-item-size) * var(--card-swatch-visible) + var(--card-swatch-gap) * (var(--card-swatch-visible) - 1))}.card-color-variant__scroll-hint--next,.card-color-variant__scroll-hint--prev{flex:0 0 auto;align-items:center;justify-content:center;gap:.3rem;height:var(--card-swatch-item-size);border-radius:999px;background:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:1.1rem;line-height:1;font-weight:600;opacity:1;transform:scale(1);transition:opacity var(--duration-default) ease,transform var(--duration-default) ease,display var(--duration-default) allow-discrete}.card-color-variant__scroll-hint--next{padding:0 .9rem}.card-color-variant__scroll-hint--prev{width:var(--card-swatch-item-size)}.card-color-variant.is-overflow-end .card-color-variant__scroll-hint--next,.card-color-variant.is-overflow-start .card-color-variant__scroll-hint--prev{display:flex}@starting-style{.card-color-variant.is-overflow-end .card-color-variant__scroll-hint--next,.card-color-variant.is-overflow-start .card-color-variant__scroll-hint--prev{opacity:0;transform:scale(.6)}}.card-color-variant__scroll-hint--next:before{content:attr(data-hint-desktop)}.card-color-variant__scroll-hint-icon{display:flex;width:1rem;height:1rem}.card-color-variant__scroll-hint-icon svg{width:100%;height:100%}.card-color-variant__scroll-hint--next .card-color-variant__scroll-hint-icon svg{transform:rotate(-90deg)}.card-color-variant__scroll-hint--prev .card-color-variant__scroll-hint-icon svg{transform:rotate(90deg)}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/component-card-color-variant.css.map */