.card__variant-slot{display:flex;align-items:center;gap:.5rem;min-height:4.8rem;margin-top:.8rem}.card-color-variant{--card-swatch-visible: var(--card-swatch-visible-mobile, 3);--card-swatch-gap: .4rem;--card-swatch-item-size: 4rem;position:relative;flex:1 1 auto;min-width:0}@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;margin:0;border: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:nowrap;gap:var(--card-swatch-gap);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{position:relative;z-index:2;display:block;flex:0 0 auto;box-sizing:border-box;width:var(--card-swatch-item-size);height:4.4rem;padding:.2rem;border:.1rem solid transparent;border-radius:0;cursor:pointer;outline-offset:.2rem;transition:border-color var(--duration-short) ease}.card-color-variant__image{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}.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:rgb(var(--color-foreground))}.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{position:absolute;top:50%;right:-.4rem;z-index:3;align-items:center;justify-content:center;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:1.2rem;font-weight:600;line-height:1;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{display:flex;align-items:center;flex:0 1 auto;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:2.8rem;border-radius:999px;background:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:1.2rem;font-weight:600;line-height:1;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:2.8rem}.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/17/assets/pinflag-card-color-variant.css.map */