scroll-carousel{--carousel-gutter: var(--page-gutter-mobile, 1.6rem);display:block;position:relative}@media screen and (min-width:750px){scroll-carousel{--carousel-gutter: var(--page-gutter, 4rem)}}.scroll-carousel__track{--carousel-inset: 0px;position:relative;display:flex;gap:var(--carousel-gap, 16px);margin:0;padding:0 var(--carousel-inset);list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--carousel-inset);scrollbar-width:none;-webkit-overflow-scrolling:touch}.scroll-carousel__track::-webkit-scrollbar{display:none}scroll-carousel[data-bleed] .scroll-carousel__track{--carousel-inset: max(var(--carousel-gutter), calc((100% - var(--page-width)) / 2 + var(--carousel-gutter)))}.scroll-carousel__track>*{flex:0 0 var(--carousel-slide-width, calc((100% - var(--carousel-gap, 16px) * (var(--carousel-per-view, 1) - 1)) / var(--carousel-per-view, 1)));min-width:0;scroll-snap-align:start}.scroll-carousel__track>*:last-child{scroll-snap-align:end}.scroll-carousel__dots{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:16px;min-height:24px}scroll-carousel[data-static] .scroll-carousel__dots,scroll-carousel[data-static] .scroll-carousel__arrow,scroll-carousel[data-static] .scroll-carousel__controls{display:none}.scroll-carousel__dot{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;color:rgb(var(--color-foreground))}.scroll-carousel__dot:before{content:"";position:absolute;inset:50% auto auto 50%;width:var(--carousel-dot-size, 8px);height:var(--carousel-dot-size, 8px);border-radius:50%;background:currentColor;opacity:.25;transform:translate(-50%,-50%);transition:opacity .2s ease,width .2s ease}.scroll-carousel__dot[aria-current=true]:before{opacity:1}scroll-carousel[data-pagination=numbers] .scroll-carousel__dots{gap:8px}scroll-carousel[data-pagination=numbers] .scroll-carousel__dot{width:40px;height:40px;border-radius:50%;font-family:var(--font-body-family);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;opacity:.5}scroll-carousel[data-pagination=numbers] .scroll-carousel__dot:before{content:none}scroll-carousel[data-pagination=numbers] .scroll-carousel__dot[aria-current=true]{opacity:1;background:rgba(var(--color-foreground),.08)}.scroll-carousel__controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px}.scroll-carousel__controls .scroll-carousel__dots{margin-top:0}.scroll-carousel__toggle{position:relative;flex:0 0 auto;width:32px;height:32px;padding:0;border:1px solid rgba(var(--color-foreground),.25);border-radius:50%;background:none;color:rgb(var(--color-foreground));cursor:pointer}.scroll-carousel__toggle:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box;width:8px;height:10px;margin:auto;border-style:solid;border-color:currentColor;border-width:0 2px}.scroll-carousel__toggle.is-paused:before{width:0;height:0;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;transform:translate(1px)}.scroll-carousel__arrow{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 2px 12px rgba(var(--color-foreground),.12);cursor:pointer;transition:opacity .2s ease}.scroll-carousel__arrow svg{width:16px;height:16px}.scroll-carousel__arrow--prev svg{transform:scaleX(-1)}.scroll-carousel__arrow:disabled{opacity:0;pointer-events:none}.scroll-carousel__viewport{position:relative}scroll-carousel[data-bleed] .scroll-carousel__viewport{--carousel-edge: max(var(--carousel-gutter), calc((100% - var(--page-width)) / 2 + var(--carousel-gutter)))}.scroll-carousel__viewport>.scroll-carousel__arrow{position:absolute;top:50%;z-index:1;display:none}.scroll-carousel__viewport>.scroll-carousel__arrow--prev{left:var(--carousel-edge, 0px);transform:translate(-50%,-50%)}.scroll-carousel__viewport>.scroll-carousel__arrow--next{right:var(--carousel-edge, 0px);transform:translate(50%,-50%)}@media screen and (min-width:750px){.scroll-carousel__viewport>.scroll-carousel__arrow{display:inline-flex}}@media screen and (min-width:990px){.scroll-carousel__arrow{width:64px;height:64px}}@media(prefers-reduced-motion:reduce){.scroll-carousel__track{scroll-behavior:auto}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-scroll-carousel.css.map */