.c-horizontal-scroller-product{--c-hscroll-gap: var(--xl-spacing);--c-hscroll-caption-width: min(37.5rem, 33vw);--c-hscroll-item-width: min(32rem, 45vw);--c-hscroll-pad-inline: min(3rem, 5vw);--c-hscroll-item-height: min(80svh, 50rem);--c-hscroll-stage-gutter: 7vw;--c-hscroll-stagger-offset: -5svh;--c-hscroll-dwell-per-item: 40svh;position:relative;background-color:var(--c-hscroll-bg, var(--color-white));padding:var(--2xl-spacing) 0 0 0;overflow:clip;view-timeline-name:--c-hscroll-view;view-timeline-axis:block}.c-horizontal-scroller-product__stage:before,.c-horizontal-scroller-product__stage:after{content:"";position:absolute;bottom:0;left:0;z-index:0;width:4000vw;height:160svh;pointer-events:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8610 655' preserveAspectRatio='none'%3E%3Cpath d='M2070.33 280.47C882.201 280.47 1223.7 0.132341 0 0.132341V655H8610V0.132341C7236.9 -7.04957 7649.54 280.47 6525.44 280.47C5479.61 280.47 5545.06 0.132341 4305.71 0.132341C3146.04 0.132341 3258.45 280.47 2070.33 280.47Z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8610 655' preserveAspectRatio='none'%3E%3Cpath d='M2070.33 280.47C882.201 280.47 1223.7 0.132341 0 0.132341V655H8610V0.132341C7236.9 -7.04957 7649.54 280.47 6525.44 280.47C5479.61 280.47 5545.06 0.132341 4305.71 0.132341C3146.04 0.132341 3258.45 280.47 2070.33 280.47Z' fill='black'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.c-horizontal-scroller-product__stage:before{bottom:90svh;background:var(--c-hscroll-wave-back, var(--cyan-50));animation:c-hscroll-wave-drift 150s linear infinite}.c-horizontal-scroller-product__stage:after{background:var(--c-hscroll-wave-front, var(--cyan-100));animation:c-hscroll-wave-drift 84s linear infinite reverse}.c-horizontal-scroller-product__scene{display:flex;flex-direction:column;gap:var(--2xl-spacing)}.c-horizontal-scroller-product__stage{position:relative}.c-horizontal-scroller-product__scene{position:relative;z-index:1}.c-horizontal-scroller-product__caption{display:flex;flex-direction:column;align-items:flex-start;gap:var(--lg-spacing);color:var(--c-hscroll-caption-fg, var(--color-white));padding:0 var(--xl-spacing)}.c-horizontal-scroller-product__caption-heading{font-family:inherit;font-weight:var(--bold-font-weight);font-size:clamp(var(--3xl-font-size),5vw,var(--5xl-font-size));line-height:1.05;letter-spacing:.1em;text-transform:uppercase;margin:0;-webkit-text-stroke:.025em var(--c-hscroll-caption-fg, var(--color-primary));transform-origin:0 100%}.c-horizontal-scroller-product__caption-body{font-family:inherit;font-weight:var(--light-font-weight);font-size:var(--md-font-size);line-height:1.5;letter-spacing:.08em;margin:0}.c-horizontal-scroller-product__caption-cta{display:inline-flex;align-items:center;gap:var(--xsm-spacing);font-family:inherit;font-weight:var(--light-font-weight);font-size:var(--md-font-size);line-height:1.2;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:inherit;padding-bottom:.25rem;border-bottom:.1rem solid currentColor;transition:opacity .2s ease}.c-horizontal-scroller-product__caption-cta:hover,.c-horizontal-scroller-product__caption-cta:focus-visible{opacity:.7}.c-horizontal-scroller-product__track{display:flex;flex-direction:row;gap:var(--lg-spacing);padding:0 var(--xl-spacing) var(--3xl-spacing);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.c-horizontal-scroller-product__track::-webkit-scrollbar{display:none}.c-horizontal-scroller-product__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--2xl-spacing);flex:0 0 auto;width:min(16rem,65vw);color:var(--c-hscroll-item-fg, var(--color-primary));isolation:isolate;scroll-snap-align:center;transform:translateY(2rem)}.c-horizontal-scroller-product__item:nth-child(2n){transform:translateY(-2rem)}.c-horizontal-scroller-product__item-frame{position:relative;width:100%;aspect-ratio:3 / 4;overflow:hidden}.c-horizontal-scroller-product__item-frame:after{content:"";position:absolute;top:2rem;right:2rem;bottom:2rem;left:2rem;border:.125rem solid transparent;pointer-events:none;z-index:1;transition:border-color .4s ease-in-out}.c-horizontal-scroller-product__item:hover .c-horizontal-scroller-product__item-frame:after,.c-horizontal-scroller-product__item:focus-within .c-horizontal-scroller-product__item-frame:after{border-color:var(--color-white)}.c-horizontal-scroller-product__item-media{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background-color:var(--c-hscroll-item-bg, var(--gray-300));transition:transform .6s ease-in-out}.c-horizontal-scroller-product__item:hover .c-horizontal-scroller-product__item-media,.c-horizontal-scroller-product__item:focus-within .c-horizontal-scroller-product__item-media{transform:scale(1.05)}.c-horizontal-scroller-product__item-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--xsm-spacing);padding-inline:var(--sm-spacing);transform:translate(2rem);opacity:0;transition:transform .7s ease,opacity .7s ease}.c-horizontal-scroller-product__item[data-revealed=true] .c-horizontal-scroller-product__item-content{transform:translate(0);opacity:1}.c-horizontal-scroller-product__item-headline{font-family:inherit;font-weight:var(--bold-font-weight);font-size:clamp(var(--2xl-font-size),2.4vw,var(--3xl-font-size));line-height:1.05;letter-spacing:.09em;text-transform:uppercase;margin:0}.c-horizontal-scroller-product__item-body{font-family:inherit;font-weight:var(--regular-font-weight);font-size:var(--md-font-size);line-height:1.5;margin:0;max-width:28ch}.c-horizontal-scroller-product__item-link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;text-indent:-9999px;overflow:hidden}.c-horizontal-scroller-product__item-link:focus-visible{outline:.125rem solid var(--color-accent, currentColor);outline-offset:-.25rem;border-radius:inherit}@media(min-width:900px){.c-horizontal-scroller-product{--c-hscroll-gap: var(--2xl-spacing);height:calc(var(--c-hscroll-items-count, 4) * var(--c-hscroll-dwell-per-item, 40svh));padding-bottom:0;scroll-timeline-name:--c-hscroll-timeline;scroll-timeline-axis:block}.c-horizontal-scroller-product__stage{position:sticky;top:0;width:100vw;height:100svh;display:flex;align-items:center;overflow:hidden;padding:0 var(--c-hscroll-stage-gutter);box-sizing:border-box}.c-horizontal-scroller-product__scene{display:grid;grid-template-columns:var(--c-hscroll-caption-width) repeat(var(--c-hscroll-items-count, 4),var(--c-hscroll-item-width));align-items:center;gap:var(--c-hscroll-gap);padding:0 var(--c-hscroll-pad-inline);width:max-content;height:100%;will-change:transform}.c-horizontal-scroller-product__caption{justify-content:center;padding:0}.c-horizontal-scroller-product__track{gap:var(--3xl-spacing);display:contents}.c-horizontal-scroller-product__item{width:var(--c-hscroll-item-width);height:auto;max-width:none;min-height:0;align-self:center;transform:translateY(5svh)}.c-horizontal-scroller-product__item:nth-child(2n){align-self:center;transform:translateY(var(--c-hscroll-stagger-offset))}.c-horizontal-scroller-product__item-frame{width:var(--c-hscroll-item-width);height:auto;aspect-ratio:1 / 1}.c-horizontal-scroller-product__item-content{padding:0}.c-horizontal-scroller-product__stage:before,.c-horizontal-scroller-product__stage:after{width:500svw;height:60svh}.c-horizontal-scroller-product__stage:before{bottom:20svh}}@media(prefers-reduced-motion:reduce){.c-horizontal-scroller-product{height:auto}.c-horizontal-scroller-product__stage{position:static;width:100%;height:auto;overflow:visible}.c-horizontal-scroller-product__waves:before,.c-horizontal-scroller-product__waves:after{animation:none}.c-horizontal-scroller-product__scene{flex-direction:column;width:100%;height:auto;animation:none;transform:none;will-change:auto}.c-horizontal-scroller-product__caption-heading{animation:none;scale:1;color:var(--c-hscroll-caption-fg, var(--color-white))}.c-horizontal-scroller-product__track{flex-direction:column;gap:var(--md-spacing);overflow:visible;scroll-snap-type:none}.c-horizontal-scroller-product__item{flex:initial;width:100%;height:auto;min-height:0;aspect-ratio:4 / 3;scroll-snap-align:none}}@supports (animation-timeline: view()){@media(min-width:900px){.c-horizontal-scroller-product__scene{animation-name:c-hscroll-pan;animation-fill-mode:forwards;animation-timing-function:linear;animation-timeline:--c-hscroll-view;animation-range:contain 0% contain 100%}}.c-horizontal-scroller-product__caption-heading{animation:c-hscroll-heading-reveal linear both;animation-timeline:--c-hscroll-view;animation-range:cover 15% cover 38%}}@keyframes c-hscroll-pan{0%{transform:translate(0)}to{transform:translate(calc(-100% + 100vw - 2 * var(--c-hscroll-stage-gutter, 0px)))}}@keyframes c-hscroll-heading-reveal{0%{scale:1.3;color:transparent}to{scale:1;color:var(--c-hscroll-caption-fg, var(--color-white))}}@property --c-hscroll-ring-progress{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes c-hscroll-ring-draw{to{--c-hscroll-ring-progress: 360deg}}@keyframes c-hscroll-wave-drift{0%{transform:translate(0)}to{transform:translate(-50%)}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/component-home-horizontal-scroller-product.css.map */