.rail { position: relative; min-width: 0; }
.rail__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__viewport--interactive { cursor: grab; }
@media (max-width: 767px) { .rail__viewport--mouse-swipe { cursor: grab; user-select: none; } }
.rail__viewport--dragging, .rail__viewport--settling { scroll-snap-type: none; scroll-behavior: auto; }
.rail__viewport--dragging { cursor: grabbing; user-select: none; }
.rail__list { display: flex; gap: 21px; list-style: none; }
.rail__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.rail--compact .rail__item { flex-basis: min(453px, 70.77vw); }
.rail--featured .rail__item { flex-basis: calc((100% - 40px) / 3); }
.rail--featured .rail__list { gap: 20px; }
.rail--featured .rail__indicators { max-width: 296px; margin-top: 35px; }
.rail--featured .rail__position { border-color: #e2dcd4; }
.rail--featured .rail__position[aria-current="true"] { border-color: var(--color-accent); }
.rail--showcase .rail__list, .rail--gallery .rail__list { gap: 0; }
.rail__arrows[hidden] { display: none; }
/* Keep the pagination slot stable while its JS-only controls stay inaccessible. */
.rail__indicators[hidden] { display: flex; visibility: hidden; }
.rail__position::before { content: ""; position: absolute; inset: -10px 0; }
.rail__arrows { position: absolute; inset: 0 10px auto; top: calc(50% - 30px); display: flex; justify-content: space-between; pointer-events: none; }
.rail__previous, .rail__next { display: grid; place-items: center; width: 44px; height: 60px; border: 0; padding: 0; background: transparent; color: var(--color-light); pointer-events: auto; }
.rail__arrow { width: 18px; }
.rail__previous:disabled, .rail__next:disabled { opacity: .35; cursor: default; }
.rail__indicators { display: flex; justify-content: center; gap: 10px; max-width: 320px; margin: 0 auto; }
.rail__position { flex: 1; border: 0; border-top: 4px solid var(--color-muted-dark); background: transparent; padding: 0; position: relative; }
.rail__position[aria-current="true"] { border-color: var(--color-dark); }
.rail--gallery .rail__indicators { position: absolute; bottom: 17px; left: 12%; right: 12%; }
.rail--gallery .rail__position { border-color: #ffffff80; }
.rail--gallery .rail__position[aria-current="true"] { border-color: var(--color-light); }
.rail--showcase .rail__indicators { max-width: 296px; margin-top: 40px; }
.rail--showcase .rail__position { padding: 0; border-color: #e2dcd4; }
.rail--showcase .rail__position[aria-current="true"] { border-color: var(--color-accent); }
@media (min-width: 768px) { .rail--showcase .rail__indicators, .rail--featured .rail__indicators { display: none; } .rail--gallery .rail__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; } .rail--gallery .rail__arrows, .rail--gallery .rail__indicators { display: none; } }
@media (max-width: 767px) { .rail--featured .rail__item { flex-basis: min(276px,70.77vw); } .rail--featured .rail__list { gap: 6px; } .rail--compact .rail__list { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .rail__viewport { scroll-behavior: auto; } }