.roast-scroller{--bag-w: clamp(150px, 17vw, 210px);--gap: clamp(12px, 2vw, 26px);padding:clamp(36px,6vw,72px) 0 clamp(28px,5vw,56px);background:var(--ss-paper, #faf7f0);color:var(--ss-ink, #0f1d25)}.roast-scroller__head{max-width:640px;margin:0 auto clamp(20px,4vw,40px);padding:0 20px;text-align:center}.roast-scroller__head h2{margin:0 0 10px}.roast-scroller__head p{margin:0;opacity:.78}.roast-scroller__frame{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(4px,1vw,14px);padding:0 clamp(8px,2vw,28px)}.roast-scroller__nav{width:44px;height:44px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font-size:17px;line-height:1;cursor:pointer;transition:background .16s ease,color .16s ease}.roast-scroller__nav:hover{background:var(--ss-ink, #0f1d25);color:var(--ss-paper, #faf7f0)}.roast-scroller__nav[disabled]{opacity:.25;cursor:default}.roast-scroller__nav[disabled]:hover{background:transparent;color:inherit}.roast-scroller__track{display:flex;gap:var(--gap);margin:0;padding:26px calc(50% - (var(--bag-w) / 2));list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.roast-scroller__track::-webkit-scrollbar{display:none}.roast-scroller__track:focus-visible{outline:2px solid currentColor;outline-offset:4px}.roast-scroller__item{flex:0 0 var(--bag-w);width:var(--bag-w);scroll-snap-align:center;text-align:center}.roast-scroller__item a{display:grid;gap:8px;color:inherit;text-decoration:none}.roast-scroller__bag{display:grid;place-items:end center;aspect-ratio:2 / 3}.roast-scroller__bag img{width:100%;height:100%;object-fit:contain;object-position:bottom center}.roast-scroller__name{font-size:13px;line-height:1.25;text-wrap:balance}.roast-scroller__price{font-size:12px;opacity:.65}@supports (animation-timeline: view()){.roast-scroller__item{animation:roast-focus linear both;animation-timeline:view(inline);animation-range:entry 12% exit 88%}@keyframes roast-focus{0%,to{transform:scale(.74);opacity:.45}50%{transform:scale(1.12);opacity:1}}}.roast-scroller__item.is-centred{transform:scale(1.12);opacity:1}@supports not (animation-timeline: view()){.roast-scroller__item{transform:scale(.78);opacity:.5;transition:transform .22s ease,opacity .22s ease}}.roast-scroller__scale{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;max-width:720px;margin:clamp(14px,3vw,30px) auto 0;padding:0 24px;font-family:var(--mono, "DM Mono", monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.roast-scroller__range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:linear-gradient(to right,#d8c49b,#7a4a24 55%,#22150d);cursor:pointer}.roast-scroller__range::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border:2px solid var(--ss-paper, #faf7f0);border-radius:50%;background:var(--ss-ink, #0f1d25);cursor:grab}.roast-scroller__range::-moz-range-thumb{width:17px;height:17px;border:2px solid var(--ss-paper, #faf7f0);border-radius:50%;background:var(--ss-ink, #0f1d25);cursor:grab}@media(prefers-reduced-motion:reduce){.roast-scroller__track{scroll-behavior:auto}.roast-scroller__item{animation:none;transform:none;opacity:1;transition:none}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/roast-scroller.css.map */