component-scroll{display:block;position:relative;--scroll-button-width: 56px}@media(scripting:enabled){component-scroll{visibility:hidden}component-scroll.state--ready{visibility:visible}}component-scroll .scroll-track{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}component-scroll .scroll-track::-webkit-scrollbar{display:none}component-scroll .scroll-button{display:none;transition:opacity .2s ease}component-scroll.state--scrollable .scroll-button{display:flex;position:absolute;z-index:1;top:35%;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;background-color:#fff6;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:0 5px 10px #0000001a,inset 0 4px 4px #ffffff1f;transform:translateY(-50%);transition:background-color .3s ease,box-shadow .3s ease}component-scroll.state--scrollable .scroll-button:hover{background-color:#fff3;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 4px 4px #ffffff1f}component-scroll .scroll-button svg{width:8px;height:auto}component-scroll .scroll-button-left{left:16px}component-scroll .scroll-button-left svg{transform:rotate(180deg)}component-scroll .scroll-button-right{right:16px}component-scroll .scroll-button.state--hidden{opacity:0;pointer-events:none}@media(max-width:767px){component-scroll.state--scrollable .scroll-button{display:none}}@media(pointer:coarse){*:has(>component-scroll.state--scrollable){padding-inline:0}component-scroll.state--scrollable .scroll-track{overscroll-behavior-inline:contain;overscroll-behavior-block:auto;touch-action:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--container-gutter, var(--s0));padding-inline:var(--container-gutter, var(--s0))}component-scroll.state--scrollable .scroll-track>*{scroll-snap-align:start}component-scroll.state--scrollable .scroll-track.scroll--center>*{scroll-snap-align:center}}@media(pointer:coarse)and (min-width:768px){component-scroll.state--scrollable .scroll-track.scroll--center{scroll-snap-type:none}}@media(pointer:fine){component-scroll .scroll-track{margin-inline:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(var(--s0) + var(--scrollbar-compensation, 0px))}component-scroll.state--scrollable .scroll-track{cursor:grab}component-scroll.state--scrollable.state--dragging .scroll-track,component-scroll.state--scrollable.state--dragging .scroll-track *{cursor:grabbing;-webkit-user-select:none;user-select:none}}component-scroll .scroll-item:first-of-type{padding-left:0}.scroll-dots{--worm-dot: 5px;--worm-step: 11px;display:none;position:relative;width:fit-content;align-items:center;justify-content:center;margin-top:var(--s1);margin-right:var(--container-gutter, var(--s1));margin-left:auto}.scroll-dots:after{content:"";position:absolute;top:50%;left:calc((var(--worm-step) - var(--worm-dot)) / 2 + var(--worm-start, 0) * var(--worm-step));width:calc(var(--worm-dot) + (var(--worm-end, 0) - var(--worm-start, 0)) * var(--worm-step));height:var(--worm-dot);border-radius:50px;background-color:currentColor;opacity:.55;translate:0 -50%;pointer-events:none}@media(max-width:1023px),(pointer:coarse){.scroll-dots:not(:empty){display:flex}}.scroll-dot{position:relative;flex:none;width:var(--worm-step);height:20px;padding:0;border:0;background:none;cursor:pointer}.scroll-dot:before{content:"";position:absolute;top:50%;left:50%;width:var(--worm-dot);height:var(--worm-dot);border-radius:50%;background-color:currentColor;opacity:.18;translate:-50% -50%}.scroll-dots--dots{gap:var(--s-1)}.scroll-dots--dots:after,.scroll-dots--dots .scroll-dot:before{content:none}.scroll-dots--dots .scroll-dot{width:6px;height:6px;border-radius:50%;background-color:currentColor;opacity:.45;transition:opacity .3s ease}.scroll-dots--dots .scroll-dot.state--active{opacity:1}.scroll{overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:.2em}@supports not selector(::-webkit-scrollbar){.scroll{scrollbar-color:rgba(0,0,0,.3) transparent}}.scroll::-webkit-scrollbar-thumb{background:#0000004d;border-radius:4px}.scroll::-webkit-scrollbar-thumb:hover{background:#00000080}.scroll::-webkit-scrollbar-track{background:transparent}@media(pointer:coarse){.scroll-dot:after{content:"";position:absolute;top:-12px;right:0;bottom:-12px;left:0}.scroll-dots--dots .scroll-dot:after{inset:-19px calc(var(--s-1) / -2)}}
/*# sourceMappingURL=/cdn/shop/t/48/assets/component-scroll.css.map */