hero-carousel{--hero-carousel-ratio-mobile: 4 / 5;--hero-carousel-ratio-desktop: 16 / 9;--hero-carousel-arrow-size: 40px;--hero-carousel-gap: 0px;display:block;position:relative;width:100%}.hero-carousel__viewport{position:relative;overflow:hidden}.hero-carousel__track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.hero-carousel__track::-webkit-scrollbar{display:none}.hero-carousel__track:focus-visible{outline:2px solid #fff;outline-offset:-4px}.hero-carousel__slide{position:relative;flex:0 0 100%;width:100%;height:auto;aspect-ratio:var(--hero-carousel-ratio-mobile);min-height:160px;max-height:90vh;max-height:90svh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;container-type:size;container-name:hero-slide}.hero-carousel__picture,.hero-carousel__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.hero-carousel__frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;pointer-events:none}.hero-carousel__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,calc(.55 * var(--hero-carousel-overlay-opacity, .3) / .3)),#0000 60%);opacity:var(--hero-carousel-overlay-opacity, .3);pointer-events:none}.hero-carousel__content{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;padding:min(20px,6cqh) 20px calc(min(40px,10cqh) + env(safe-area-inset-bottom));color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}.hero-carousel__content--center{align-items:center;text-align:center}.hero-carousel__content--left{align-items:flex-start;text-align:left}.hero-carousel__content--right{align-items:flex-end;text-align:right}.hero-carousel__subheading{margin:0 0 min(8px,1.5cqh);font-size:var(--hero-carousel-subheading-size, .8rem);letter-spacing:.08em;text-transform:uppercase;opacity:.9}.hero-carousel__heading{margin:0 0 min(14px,3cqh);font-family:var(--hero-carousel-heading-font, inherit);font-size:var(--hero-carousel-heading-size, clamp(1.5rem, 6vw, 2.75rem));font-weight:var(--hero-carousel-heading-weight, 700);line-height:1.15;max-width:32ch}.hero-carousel__button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 24px;border:none;box-shadow:none;pointer-events:auto;border-radius:var(--hero-carousel-button-radius, 999px);text-decoration:none;font-family:var(--hero-carousel-button-font, inherit);font-size:var(--hero-carousel-button-size, .9rem);font-weight:var(--hero-carousel-button-weight, 600);transition:transform .15s ease,background-color .15s ease,filter .15s ease}.hero-carousel__button:before,.hero-carousel__button:after{display:none}.hero-carousel__button:hover{filter:brightness(.94)}.hero-carousel__button:active{transform:scale(.97)}.hero-carousel__button:focus-visible{outline:2px solid #fff;outline-offset:3px}.hero-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--hero-carousel-arrow-size);height:var(--hero-carousel-arrow-size);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#00000059;color:#fff;cursor:pointer;z-index:2;padding:0;transition:background-color .15s ease}.hero-carousel__arrow:hover{background:#0000008c}.hero-carousel__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}.hero-carousel__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5}.hero-carousel__arrow--prev{left:8px}.hero-carousel__arrow--next{right:8px}hero-carousel.hero-carousel--no-arrows .hero-carousel__arrow{display:none}.hero-carousel__playpause{position:absolute;top:12px;right:12px;width:36px;height:36px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#00000059;color:#fff;cursor:pointer;z-index:2;padding:0;transition:background-color .15s ease}.hero-carousel__playpause:hover{background:#0000008c}.hero-carousel__playpause:focus-visible{outline:2px solid #fff;outline-offset:2px}.hero-carousel__playpause svg{width:14px;height:14px;fill:currentColor}.hero-carousel__playpause .hero-carousel__icon-play,.hero-carousel__playpause[aria-pressed=true] .hero-carousel__icon-pause{display:none}.hero-carousel__playpause[aria-pressed=true] .hero-carousel__icon-play{display:block}.hero-carousel__dots{position:absolute;left:0;right:0;bottom:14px;display:flex;align-items:center;justify-content:center;gap:6px;z-index:2;padding:0 12px;pointer-events:none}.hero-carousel__dot{width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto}.hero-carousel__dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#ffffff8c;transition:transform .15s ease,background-color .15s ease,width .15s ease}.hero-carousel__dot[aria-current=true]:before{background:#fff;width:20px;border-radius:4px}.hero-carousel__dot:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}hero-carousel.hero-carousel--no-dots .hero-carousel__dots{display:none}.hero-carousel__placeholder{display:flex;align-items:center;justify-content:center;height:auto;aspect-ratio:var(--hero-carousel-ratio-mobile);min-height:320px;max-height:90vh;max-height:90svh;background:#e8e8e8;color:#666;font-size:.95rem;text-align:center;padding:20px}@media(min-width:750px){hero-carousel{--hero-carousel-arrow-size: 48px}.hero-carousel__slide,.hero-carousel__placeholder{aspect-ratio:var(--hero-carousel-ratio-desktop)}.hero-carousel__content{padding:40px 64px}.hero-carousel__heading{margin-bottom:20px}.hero-carousel__arrow--prev{left:20px}.hero-carousel__arrow--next{right:20px}.hero-carousel__dots{bottom:24px}}@media(prefers-reduced-motion:reduce){.hero-carousel__track{scroll-behavior:auto}.hero-carousel__button,.hero-carousel__arrow,.hero-carousel__dot:before{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/hero-carousel.css.map */