/* One horizontal rail at every width; overflow scroll stays inside the rail. */
.hero-stage{overflow:hidden;isolation:isolate;touch-action:pan-y}
.hero-stage>picture{z-index:0;backface-visibility:hidden;pointer-events:none}
.hero-stage>.hero-shade{z-index:1}
.hero-stage>.hero-copy,.hero-stage>.hero-center{z-index:2}
.hero-bottom{gap:18px;padding:18px 26px 28px}
.hero-bottom #heroThumbs{display:flex;flex:0 1 800px;justify-content:flex-start;gap:16px;overflow-x:auto;overflow-y:hidden;padding:8px 5px 12px;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-behavior:smooth}
.hero-bottom #heroThumbs::-webkit-scrollbar{display:none}
.hero-bottom #heroThumbs button:first-child{margin-left:auto}
.hero-bottom #heroThumbs button:last-child{margin-right:auto}
.hero-bottom #heroThumbs button{flex:0 0 112px;width:112px;height:158px;aspect-ratio:auto;transform:none;transition:opacity .25s,border-color .25s,box-shadow .25s}
.hero-bottom #heroThumbs button:hover{transform:none}
.hero-bottom>.shuffle{flex:0 0 42px;transition:background .2s}
.hero-bottom>.shuffle:hover{background:#e8bf781c}
@media(max-width:650px){.hero-bottom{gap:10px;padding:12px 12px 20px}.hero-bottom #heroThumbs{flex:1;gap:12px;padding:7px 4px 11px}.hero-bottom #heroThumbs button{flex:0 0 98px;width:98px;height:140px}.hero-bottom>.shuffle{flex:0 0 32px;width:32px;height:42px}}
@media(prefers-reduced-motion:reduce){.hero-bottom #heroThumbs{scroll-behavior:auto}.hero-bottom #heroThumbs button{transition:none}}

.hero-stage{cursor:grab;user-select:none;-webkit-user-select:none}.hero-stage.is-dragging{cursor:grabbing}.hero-stage img,.hero-bottom img{-webkit-user-drag:none}.hero-stage button{touch-action:pan-y}