/* Shared by the banner renderer and the CMS navigation preview. */
.banner-icon-rail {
    box-sizing: border-box; display: flex; flex-direction: column; gap: 12px;
    padding: 12px 20px; background: transparent;
    color: var(--banner-rail-text, #bfc0f5); border-right: 0;
    overflow-y: auto; scrollbar-width: thin;
}
.banner-icon-rail[hidden], .cms-banner [hidden] { display: none !important; }
.banner-icon-rail button {
    box-sizing: border-box; display: flex; flex: 0 0 auto; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 112px;
    padding: 14px 8px; border: 2px solid transparent; border-radius: 16px;
    color: inherit; background: transparent; font: 400 16px/1.3 system-ui, sans-serif;
    text-align: center; cursor: pointer; overflow-wrap: anywhere;
    transition: border-color .2s, background-color .2s, color .2s;
}
.banner-icon-rail button svg { display: block; width: 48px; height: 48px; flex: 0 0 auto; }
.banner-icon-rail button:hover { background: #ffffff0d; }
.banner-icon-rail button[aria-current="true"] {
    border-color: var(--banner-rail-accent, #ffbf24); color: #fff; background: #00000018;
}
.banner-icon-rail button[aria-current="true"] svg { color: var(--banner-rail-accent, #ffbf24); }
.banner-icon-rail button:focus-visible { outline: 3px solid var(--banner-rail-accent, #ffbf24); outline-offset: 3px; }
.cms-banner--rail { --banner-rail-width: clamp(150px, 12.3vw, 240px); --banner-rail-gap: 30.4px; --banner-rail-btn: 112px; }
.cms-banner--rail .cms-banner__viewport {
    /* Four rail buttons with the same gap above, between, and below inside 600px. */
    height: 600px !important; min-height: 600px !important; max-height: 600px !important;
    aspect-ratio: auto !important;
}
.cms-banner--rail > .banner-icon-rail {
    position: absolute; inset: 0 auto 0 0; width: var(--banner-rail-width); z-index: 3;
    justify-content: flex-start; padding: var(--banner-rail-gap) 20px; gap: var(--banner-rail-gap);
}
.cms-banner--rail .cms-banner__stage { margin-left: var(--banner-rail-width); width: calc(100% - var(--banner-rail-width)); }
.cms-banner--rail[data-nav="vertical"] .cms-banner__pause { left: auto; right: 64px; }
.cms-banner--rail[data-dots-align="center"] > .banner-icon-rail,
.cms-banner--rail[data-dots-align="end"] > .banner-icon-rail { justify-content: flex-start; }
@media (max-width: 640px) {
    .cms-banner--rail .cms-banner__viewport { height: auto !important; min-height: 280px !important; }
    .cms-banner--rail > .banner-icon-rail { position: relative; width: 100%; flex-direction: row;
        justify-content: start; padding: 12px; gap: 8px; overflow-x: auto; }
    .cms-banner--rail .banner-icon-rail button { width: 112px; min-height: 96px; font-size: 13px; }
    .cms-banner--rail .banner-icon-rail button svg { width: 32px; height: 32px; }
    .cms-banner--rail .cms-banner__stage { width: 100%; margin-left: auto; }
    .cms-banner--rail[data-dots-align] > .banner-icon-rail { justify-content: start; }
    .cms-banner--rail[data-nav="vertical"] .cms-banner__nav--next { top: 64px; bottom: auto; }
    .cms-banner--rail[data-nav="vertical"] .cms-banner__pause { top: 12px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .banner-icon-rail button { transition: none; }
}