/**
 * StageZone Menu — web output.
 *
 * A row is one flex line: name · leader · price. No cards, no borders per item.
 * Sections flow in CSS multi-columns so 200 items read like a printed list
 * instead of a grid of near-empty boxes.
 */

.sz-menu {
    --szm-bg: #0B0B0C;
    --szm-panel: #141416;
    --szm-fg: #F2F2F0;
    --szm-muted: #8A8A88;
    --szm-faint: #6E6E6C;
    --szm-rule: rgba(255, 255, 255, .10);
    --szm-dot: rgba(255, 255, 255, .28);
    --szm-accent: #E5322B;
    --szm-accent-rgb: 229, 50, 43;
    --szm-display: inherit;
    --szm-body: inherit;
    --szm-offset: 0px;
    --szm-cols: 3;
    /* Opaque fill for bars that stick over the list: the chosen background,
       else the page's (measured by the script), else the palette. */
    --szm-bar-bg: var(--szm-page-bg, var(--szm-bg));

    --szm-gap: 44px;
    --szm-row-pad: 5px;
    --szm-group-gap: 30px;
    --szm-cat-gap: 64px;
    --szm-item: 12px;
    --szm-track: .08em;
    --szm-leader-gap: 12px;

    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    box-sizing: border-box;
    background: var(--szm-surface, transparent);
    color: var(--szm-fg);
    font-family: var(--szm-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.sz-menu--auto { color-scheme: light dark; }

.sz-menu--comfortable {
    --szm-row-pad: 9px;
    --szm-group-gap: 40px;
    --szm-cat-gap: 84px;
    --szm-item: 14px;
}

.sz-menu *,
.sz-menu *::before,
.sz-menu *::after { box-sizing: border-box; }

.sz-menu__icon { flex: none; }

/* ═══ Navigation ══════════════════════════════════════════════ */

.sz-menu__nav { flex: none; }

.sz-menu__sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
}

.sz-menu--nav-rail { flex-direction: row; }

.sz-menu--nav-rail > .sz-menu__nav {
    position: sticky;
    top: var(--szm-offset);
    transition: top .2s ease, max-height .2s ease;
    width: 210px;
    max-height: calc(100vh - var(--szm-offset));
    padding: 36px 24px 26px 0;
    border-right: 1px solid var(--szm-rule);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sz-menu--nav-top { flex-direction: column; }

.sz-menu--nav-top > .sz-menu__nav {
    position: sticky;
    top: var(--szm-offset);
    z-index: 5;
    width: 100%;
    padding: 12px 0;
    background: var(--szm-bar-bg);
    border-bottom: 1px solid var(--szm-rule);
}

.sz-menu--nav-top .sz-menu__navinner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.sz-menu--nav-rail .sz-menu__navinner {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 100%;
}

/* ─── Brand ─────────────────────────────────────────────────── */

.sz-menu__brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
}

.sz-menu--nav-top .sz-menu__brand { gap: 2px; }

.sz-menu__logo { display: block; }

.sz-menu__logo img {
    display: block;
    height: var(--szm-logo-h, 34px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.sz-menu__wordmark {
    font-family: var(--szm-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.sz-menu__pricenote {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--szm-faint);
}

/* ─── Search ────────────────────────────────────────────────── */

.sz-menu__srlabel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sz-menu__searchbox {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--szm-rule);
    color: var(--szm-muted);
    transition: border-color .15s;
}

.sz-menu__searchbox:focus-within { border-color: var(--szm-accent); }

.sz-menu__input {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    padding: 0;
    color: var(--szm-fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
}

.sz-menu__input::placeholder { color: var(--szm-faint); }
.sz-menu__input::-webkit-search-cancel-button { display: none; }

.sz-menu__clear,
.sz-menu__iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--szm-muted);
    cursor: pointer;
}

.sz-menu__clear { width: 24px; height: 24px; }

/* A class with `display` outranks the [hidden] default, so say it explicitly. */
.sz-menu [hidden] { display: none !important; }
.sz-menu__iconbtn { border: 1px solid var(--szm-rule); }
.sz-menu__clear:hover,
.sz-menu__iconbtn:hover { color: var(--szm-fg); }

/* Search + chips placed above the list instead of in the rail. */
.sz-menu__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 36px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--szm-rule);
}

.sz-menu__tools .sz-menu__search { flex: 1 1 240px; max-width: 380px; }
.sz-menu__tools .sz-menu__chips { flex: 0 1 auto; margin: 0; }

/* ─── Filter chips ──────────────────────────────────────────── */

.sz-menu__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sz-menu--nav-rail .sz-menu__chips { margin-top: -10px; }

.sz-menu__chip {
    padding: 6px 11px;
    background: none;
    border: 1px solid var(--szm-rule);
    color: var(--szm-muted);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.sz-menu__chip:hover { color: var(--szm-fg); border-color: var(--szm-fg); }

.sz-menu__chip.is-on {
    background: var(--szm-accent);
    border-color: var(--szm-accent);
    color: #fff;
}

/* ─── Category index ────────────────────────────────────────── */

.sz-menu__index {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sz-menu--nav-top .sz-menu__index {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 18px;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.sz-menu--nav-top .sz-menu__index::-webkit-scrollbar { display: none; }

.sz-menu__indexlink {
    display: block;
    padding: 5px 0;
    color: var(--szm-muted);
    font-family: var(--szm-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s;
}

.sz-menu__indexlink:hover { color: var(--szm-fg); }

.sz-menu__indexlink.is-active {
    color: var(--szm-accent);
    font-weight: 800;
}

.sz-menu--nav-top .sz-menu__indexlink.is-active { border-bottom-color: var(--szm-accent); }

/* ─── Happy hour ────────────────────────────────────────────── */

.sz-menu__hh {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--szm-rule);
}

.sz-menu--nav-top .sz-menu__hh {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.sz-menu__hhlabel {
    font-family: var(--szm-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--szm-muted);
}

.sz-menu__hh.is-live .sz-menu__hhlabel {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--szm-accent);
}

.sz-menu__hh.is-live .sz-menu__hhlabel::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--szm-accent);
}

.sz-menu__hhnote {
    font-size: 11px;
    line-height: 1.5;
    color: var(--szm-muted);
}

/* ═══ Body ════════════════════════════════════════════════════ */

.sz-menu__body {
    flex: 1 1 auto;
    min-width: 0;
}

.sz-menu--nav-rail .sz-menu__body { padding: 40px 0 0 44px; }
.sz-menu--nav-top .sz-menu__body { padding: 34px 0 0; width: 100%; }

.sz-menu__masthead {
    text-align: center;
    padding-bottom: 8px;
}

.sz-menu--nav-top .sz-menu__masthead { text-align: center; }

.sz-menu__title {
    margin: 0;
    font-family: var(--szm-display);
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 800;
    font-stretch: 118%;
    letter-spacing: .03em;
    line-height: .94;
    text-transform: uppercase;
    color: var(--szm-fg);
}

.sz-menu__subtitle {
    margin: 10px 0 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .30em;
    text-transform: uppercase;
    color: var(--szm-muted);
}

.sz-menu__count,
.sz-menu__empty {
    margin: 26px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .20em;
    text-transform: uppercase;
    color: var(--szm-muted);
}

.sz-menu__empty {
    letter-spacing: normal;
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
}

/* ─── Category block ────────────────────────────────────────── */

.sz-menu__cat {
    padding-top: var(--szm-cat-gap);
    scroll-margin-top: calc(var(--szm-offset) + 24px);
}

.sz-menu--rule .sz-menu__cat + .sz-menu__cat .sz-menu__cathead {
    border-top: 1px solid var(--szm-rule);
    padding-top: var(--szm-cat-gap);
    margin-top: calc(var(--szm-cat-gap) * -0.5);
}

.sz-menu--left .sz-menu__cathead { text-align: left; }
.sz-menu--left .sz-menu__catdesc { margin-left: 0; }

.sz-menu__cat.is-hidden { display: none; }

.sz-menu__cathead {
    text-align: center;
    padding-bottom: 22px;
}

.sz-menu__caticon img {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    object-fit: contain;
}

.sz-menu__catname {
    margin: 0;
    font-family: var(--szm-display);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    font-stretch: 118%;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
}

.sz-menu__catnote {
    margin: 7px 0 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--szm-muted);
}

.sz-menu__catdesc {
    margin: 8px auto 0;
    max-width: 54ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--szm-muted);
}

/* ─── Columns ───────────────────────────────────────────────── */

/* Column count rides on a class, never on the inline custom property: an
   inline style outranks every media query, which would pin a phone to the
   desktop column count. */
.sz-menu__cols {
    column-count: 1;
    column-gap: var(--szm-gap);
}

.sz-menu--cols-2 .sz-menu__cols { column-count: 2; }
.sz-menu--cols-3 .sz-menu__cols { column-count: 3; }

.sz-menu__grouphead {
    margin: 0 0 12px;
    padding-top: 2px;
    font-family: var(--szm-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--szm-accent);
    break-after: avoid-column;
    break-inside: avoid-column;
}

.sz-menu__grouphead:not(:first-child) { margin-top: var(--szm-group-gap); }

.sz-menu--groups-center .sz-menu__grouphead { text-align: center; }

/* ─── Row ───────────────────────────────────────────────────── */

/* Grid, not flex-wrap: the name wraps inside its own column and the price
   stays on the first baseline. With wrap, a long name pushed the price onto
   a line of its own — the single ugliest thing on the list. */
.sz-menu__row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(var(--szm-leader-gap), 1fr) auto;
    align-items: baseline;
    column-gap: 8px;
    padding: var(--szm-row-pad) 0;
    break-inside: avoid-column;
}

/* Deliberately the FIRST baseline. Aligning to the last one does put the price
   beside the end of a wrapped name, but the leader is an empty box with no
   baseline of its own, so its dots jump to the top of the row. First baseline
   keeps name, dots and price on one optical line. */

.sz-menu__row.is-hidden { display: none; }

.sz-menu__star {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--szm-accent);
}

/* Hanging: the whole column gets one uniform gutter and the dot sits in it,
   so featured and plain names start on the same line. Pushing only the
   featured names right broke the column edge on every other row. */
.sz-menu--feat-hang .sz-menu__cols { padding-left: 13px; }
.sz-menu--feat-hang.sz-menu--left .sz-menu__cathead { padding-left: 13px; }
.sz-menu--feat-hang .sz-menu__namewrap { position: relative; }
.sz-menu--feat-hang .sz-menu__star {
    position: absolute;
    left: -13px;
    top: calc(var(--szm-item) * .72);
    transform: translateY(-50%);
}

.sz-menu--feat-after .sz-menu__star {
    margin-left: .55em;
    vertical-align: middle;
}

.sz-menu--feat-color .sz-menu__row.is-featured .sz-menu__name { color: var(--szm-accent); }

/* A block, not inline-flex: only a block box reports the baseline of its LAST
   line, which is what lets the price line up with the end of a wrapped name. */
.sz-menu__namewrap {
    display: block;
    min-width: 0;
}

.sz-menu__name {
    min-width: 0;
    font-size: var(--szm-item);
    font-weight: 600;
    color: inherit;
    text-align: left;
    overflow-wrap: anywhere;
}

.sz-menu--caps .sz-menu__name {
    letter-spacing: var(--szm-track);
    text-transform: uppercase;
}

.sz-menu__name--btn {
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 1px dotted transparent;
    transition: color .15s, border-color .15s;
}

.sz-menu__name--btn:hover,
.sz-menu__name--btn:focus-visible {
    color: var(--szm-accent);
    border-bottom-color: currentColor;
    outline: none;
}

/* A word, not a bordered pill — boxes here read as UI chrome on a menu. */
.sz-menu__flag {
    margin-left: .55em;
    color: var(--szm-faint);
    font-size: calc(var(--szm-item) - 3px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sz-menu__flag--accent { color: var(--szm-accent); }

.sz-menu__leader {
    align-self: baseline;
    transform: translateY(-3px);
    border-bottom: 1px dotted var(--szm-dot);
}

.sz-menu--leader-line .sz-menu__leader { border-bottom-style: solid; }
.sz-menu--leader-none .sz-menu__leader { border-bottom: 0; }

.sz-menu__prices {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}

.sz-menu__portion {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.sz-menu__vol {
    font-size: calc(var(--szm-item) - 1px);
    color: var(--szm-muted);
    font-variant-numeric: tabular-nums;
}

.sz-menu__was {
    font-size: calc(var(--szm-item) - 2px);
    color: var(--szm-faint);
    font-variant-numeric: tabular-nums;
}

.sz-menu__price {
    font-size: var(--szm-item);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sz-menu__price.is-happy { color: var(--szm-accent); }

.sz-menu__desc {
    grid-column: 1 / -1;
    align-self: start;
    margin-top: 2px;
    font-size: calc(var(--szm-item) - 2px);
    line-height: 1.4;
    color: var(--szm-faint);
    text-transform: none;
    letter-spacing: normal;
}

.sz-menu__row.is-out { opacity: .42; }
.sz-menu__row.is-out .sz-menu__name { text-decoration: line-through; }

/* ─── Footer ────────────────────────────────────────────────── */

.sz-menu__foot {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 54px;
    padding: 18px 0;
    border-top: 1px solid var(--szm-rule);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--szm-faint);
}

.sz-menu__foot span:last-child { margin-left: auto; }

/* ═══ Detail dialog ═══════════════════════════════════════════ */

.sz-menu__detail {
    width: min(440px, calc(100vw - 32px));
    max-width: none;
    padding: 0;
    border: 1px solid var(--szm-rule);
    border-top: 2px solid var(--szm-accent);
    background: var(--szm-panel);
    color: var(--szm-fg);
    font-family: var(--szm-body);
}

.sz-menu__detail::backdrop { background: rgba(0, 0, 0, .62); }

.sz-menu__detailinner {
    display: flex;
    flex-direction: column;
    padding: 22px 24px 24px;
}

.sz-menu__handle { display: none; }

.sz-menu__detailhead {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sz-menu__detailhead > div { min-width: 0; }

.sz-menu__detailhead .sz-menu__iconbtn { margin-left: auto; flex: none; }

.sz-menu__detailcat {
    margin: 0 0 8px;
    font-family: var(--szm-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--szm-accent);
}

.sz-menu__detailname {
    margin: 0;
    font-family: var(--szm-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.05;
}

.sz-menu__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 18px;
}

.sz-menu__meta:empty { display: none; }

.sz-menu__metaitem {
    padding: 5px 9px;
    border: 1px solid var(--szm-rule);
    color: var(--szm-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.sz-menu__metaitem--accent {
    background: var(--szm-accent);
    border-color: var(--szm-accent);
    color: #fff;
}

.sz-menu__detaildesc {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--szm-muted);
}

.sz-menu__detaildesc:empty { display: none; }

.sz-menu__detailprices {
    margin-top: 22px;
    border-top: 1px solid var(--szm-rule);
}

.sz-menu__detailrow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--szm-rule);
}

.sz-menu__detailrow:last-child { border-bottom: 0; }

.sz-menu__detailvol {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--szm-muted);
}

.sz-menu__detailprice {
    margin-left: auto;
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sz-menu__detailwas {
    font-size: 13px;
    color: var(--szm-faint);
    font-variant-numeric: tabular-nums;
}

.sz-menu__detailfoot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 0;
}

.sz-menu__avail {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--szm-muted);
}

.sz-menu__avail::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5BA85B;
}

.sz-menu__avail.is-out::before { background: var(--szm-faint); }
.sz-menu__avail.is-seasonal::before { background: #C9922E; }

.sz-menu__brandlink {
    margin-left: auto;
    color: var(--szm-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
}

.sz-menu__brandlink:hover { text-decoration: underline; }

.sz-menu__allergens {
    margin: 0 0 18px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--szm-faint);
}

.sz-menu__fav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    background: none;
    border: 1px solid var(--szm-rule);
    color: var(--szm-fg);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.sz-menu__fav:hover { border-color: var(--szm-accent); }

.sz-menu__fav.is-on {
    color: var(--szm-accent);
    border-color: var(--szm-accent);
}

.sz-menu__fav.is-on .sz-menu__icon { fill: currentColor; }

/* ═══ Vytoč si drink ══════════════════════════════════════════ */

.sz-menu__spinbtn {
    margin: 18px 0 0;
    padding: 0 0 3px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--szm-rule);
    color: var(--szm-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.sz-menu__spinbtn strong { color: var(--szm-accent); font-weight: 800; }

.sz-menu__spinbtn:hover { color: var(--szm-fg); border-color: var(--szm-accent); }

.sz-menu__spinmodes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

/* One line tall; names slide through it and stop on the pick. The fade at
   both edges makes it read as a drum rather than a clipped list. */
.sz-menu__reel {
    --szm-reel-h: 64px;
    position: relative;
    height: var(--szm-reel-h);
    margin-top: 22px;
    overflow: hidden;
    border-top: 1px solid var(--szm-rule);
    border-bottom: 1px solid var(--szm-rule);
    -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
    mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}

.sz-menu__reeltrack { will-change: transform; }

.sz-menu__reelline {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--szm-reel-h);
    padding: 0 8px;
    overflow: hidden;
    font-family: var(--szm-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sz-menu__spinresult {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--szm-muted);
    text-align: center;
}

.sz-menu__spinresult span { font-size: 13px; }

.sz-menu__spinresult strong { font-size: 15px; color: var(--szm-fg); }

.sz-menu__spinactions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.sz-menu__spingo,
.sz-menu__spinfind {
    height: 48px;
    border: 1px solid var(--szm-accent);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.sz-menu__spingo { background: var(--szm-accent); color: #fff; }
.sz-menu__spingo:disabled { opacity: .55; cursor: default; }

.sz-menu__spinfind { background: none; color: var(--szm-fg); border-color: var(--szm-rule); }
.sz-menu__spinfind:hover { border-color: var(--szm-fg); }

/* The spin dialog speaks in sentence case: no letterspaced caps inherited
   from the detail panel and the filter chips. */
.sz-menu__spin .sz-menu__detailcat,
.sz-menu__spin .sz-menu__chip {
    letter-spacing: 0;
    text-transform: none;
}

.sz-menu__spin .sz-menu__detailcat { font-size: 13px; font-weight: 400; }
.sz-menu__spin .sz-menu__chip { font-size: 13px; font-weight: 500; }

/* The row the wheel landed on, found on the list. */
.sz-menu__row.is-spotlit { animation: szmSpot 3s ease-out; }

@keyframes szmSpot {
    0%, 30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--szm-accent) 35%, transparent); background: color-mix(in srgb, var(--szm-accent) 18%, transparent); }
    100%    { box-shadow: 0 0 0 6px transparent; background: transparent; }
}

/* ═══ Responsive ══════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .sz-menu--cols-3 .sz-menu__cols { column-count: 2; }
}

@media (max-width: 860px) {
    .sz-menu,
    .sz-menu--nav-rail { flex-direction: column; }

    .sz-menu--nav-rail > .sz-menu__nav,
    .sz-menu--nav-top > .sz-menu__nav {
        position: sticky;
        top: var(--szm-offset);
        z-index: 5;
        width: 100%;
        max-height: none;
        padding: 12px 0;
        background: var(--szm-bar-bg);
        border-right: 0;
        border-bottom: 1px solid var(--szm-rule);
        overflow: visible;
    }

    .sz-menu--nav-rail .sz-menu__navinner {
        flex-direction: column;
        gap: 12px;
        min-height: 0;
    }

    .sz-menu__brand {
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }

    .sz-menu__pricenote { margin-left: auto; }

    .sz-menu__index {
        flex-direction: row;
        gap: 18px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sz-menu__index::-webkit-scrollbar { display: none; }

    .sz-menu__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0;
    }

    .sz-menu__chips::-webkit-scrollbar { display: none; }
    .sz-menu__chip { flex: none; }

    .sz-menu__hh {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .sz-menu--nav-rail .sz-menu__body,
    .sz-menu--nav-top .sz-menu__body { padding: 26px 0 0; }

    .sz-menu--cols-2 .sz-menu__cols,
    .sz-menu--cols-3 .sz-menu__cols { column-count: 1; }

    .sz-menu { --szm-gap: 0px; }

    /* Once the list is scrolling, the bar keeps only what is navigated with:
       a sticky header worth 190 px of a phone screen is the bug this replaces.
       Filter chips stay whenever a filter is actually on. */
    .sz-menu.is-stuck .sz-menu__brand,
    .sz-menu.is-stuck .sz-menu__hh { display: none; }

    .sz-menu.is-stuck:not(.has-filters) .sz-menu__chips { display: none; }
}

/* A phone keyboard steals the screen, so the panel behaves like a sheet. */
@media (max-width: 640px) {
    .sz-menu__detail {
        width: 100%;
        max-width: 100%;
        margin: auto auto 0;
        border: 0;
        border-top: 2px solid var(--szm-accent);
    }

    .sz-menu__handle {
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 18px;
        border-radius: 2px;
        background: var(--szm-rule);
    }

    .sz-menu__detailinner { padding: 12px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .sz-menu * { transition: none !important; }
}

/* The browser print of the web page keeps the list, drops the furniture. */
@media print {
    .sz-menu { display: block; background: #fff; color: #000; }
    .sz-menu__nav,
    .sz-menu__detail,
    .sz-menu__chips,
    .sz-menu__search { display: none !important; }
    .sz-menu__body { padding: 0 !important; }
    .sz-menu__cat { break-inside: avoid; padding-top: 24px; }
    .sz-menu__leader { border-bottom-color: rgba(0, 0, 0, .35); }
}