/* Menu page for restorants.show.
   Kept out of custom.css deliberately: that file has uncommitted work in it. */

.menu-page {
    --ink:    #11223F;
    --ink-2:  #0E2A47;
    --accent: #C8102E;
    --gold:   #F5B301;
    --go:     #1B7F5A;
    --paper:  #FFFFFF;
    --wash:   #F4F6F8;
    --line:   #DDE3EA;
    --muted:  #64748B;

    background: var(--wash);
    padding-bottom: 4rem;
    /* Grow to fill .wrapper (see sticky-footer.css). Without this a short menu
       leaves a band of bare body background between the wash and the footer. */
    flex: 1 0 auto;
    font-family: 'Open Sans', system-ui, sans-serif;
    color: var(--ink);
}

.menu-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 20px;
    /* The site navbar is position:fixed and ~71px tall, so the masthead has to
       clear it -- without this the restaurant name sits under the logo. */
    padding-block: 6.5rem 0;
}

/* ---- Masthead ------------------------------------------------------- */

.menu-masthead { margin-bottom: 1.75rem; }

.menu-masthead h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.6rem;
}

.menu-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.menu-facts div { display: flex; align-items: center; gap: 0.4rem; }
.menu-facts i { color: var(--ink); opacity: 0.45; }

.menu-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.menu-status[data-state="open"]   { background: rgba(27,127,90,.12);  color: var(--go); }
.menu-status[data-state="closed"] { background: rgba(200,16,46,.10);  color: var(--accent); }

.menu-status::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}


/* ---- Controls ------------------------------------------------------- */

.menu-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

/* Search is the only control left in the row (the meal is chosen upstream, so
   the lunch/dinner chips are gone). Without this it would sit alone against the
   left edge in a space-between row, reading like something is missing. */
.menu-controls-search-only { justify-content: flex-start; }
.menu-controls-search-only .menu-search { flex: 0 1 340px; }

.filter-set { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.filter-set > span {
    font-size: 0.86rem;
    color: var(--muted);
    margin-right: 0.15rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

.chip[aria-current="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.chip-clear {
    font-size: 1.05rem;
    line-height: 1;
    opacity: .65;
}

.menu-search {
    position: relative;
    flex: 0 1 280px;
}

.menu-search input {
    width: 100%;
    padding: 0.55rem 0.9rem 0.55rem 2.2rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    font-size: 0.9rem;
    color: var(--ink);
}

.menu-search input:focus {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
    border-color: transparent;
}

.menu-search i {
    position: absolute;
    left: 0.8rem; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.85rem;
}

/* ---- Layout: category rail + dishes --------------------------------- */

/* Dishes on the left, cart on the right. The categories used to hold the left
   column; they moved up beside the search, which freed it. */
.menu-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
}

/* Always in view while the dishes scroll past it -- the point of it being a
   column rather than something you open. */
.menu-body .sidenav-cart {
    position: sticky;
    top: 90px;
    width: auto;
    height: auto;
    max-height: calc(100vh - 110px);
    /* A column whose middle scrolls (ui-fixes.css): the foot with Clear,
       Subtotal and Checkout stays put at the bottom of the panel. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 0 !important;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    /* Two shadows rather than one: a tight dark edge so the panel has a defined
       boundary against the page, and a wide soft one so it sits above it. A
       single mid-grey blur reads as a smudge. */
    box-shadow:
        0 1px 2px rgba(17, 34, 63, 0.06),
        0 12px 28px -12px rgba(17, 34, 63, 0.18);
    z-index: auto;
}

/* Nothing to close when it is always there. */
.menu-body .sidenav-cart .closebtn { display: none; }

.menu-body .sidenav-cart .minicart-heading h4 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    margin: 0;
    padding: 0 0 0.9rem;
    border-bottom: 1px solid var(--line);
}

/* Smaller than the words and a shade lighter: it marks the panel, it is not
   competing with the heading for attention. */
.menu-body .sidenav-cart .minicart-heading h4 .fa {
    font-size: 0.9rem;
    color: var(--muted);
}

.menu-body .sidenav-cart .minicart-heading {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

/* Quiet until asked for. It throws away the whole cart, so it should not be
   the brightest thing in the panel -- but it turns plainly destructive once it
   is waiting for the second press. */
.menu-body .sidenav-cart .minicart-clear {
    margin: 0 0 0.6rem auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.menu-body .sidenav-cart .minicart-clear .fa { font-size: 0.75rem; }

.menu-body .sidenav-cart .minicart-clear:hover {
    color: #B45309;
    border-color: #F0D5B0;
    background: #FDF3E7;
}

.menu-body .sidenav-cart .minicart-clear.is-asking {
    color: #fff;
    background: #B45309;
    border-color: #B45309;
}

.menu-body .sidenav-cart .minicart-clear:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.menu-body .sidenav-cart .minicart-clear:disabled { opacity: 0.6; cursor: default; }

/* Back to top.
   Bottom-right, the usual corner. The cart column ends above it on a full-height
   page, and once the footer comes into view the script lifts the button clear of
   it. */
.menu-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(17, 34, 63, 0.1), 0 10px 24px -10px rgba(17, 34, 63, 0.3);
    /* The script lifts this to clear the footer as it comes into view; easing
       it stops the button jumping as the footer appears, or as a growing cart
       column pushes it sideways. */
    transition: bottom 0.12s linear, right 0.12s linear, background-color 0.15s ease, color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .menu-top { transition: none; }
}

.menu-top:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.menu-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 860px) {
    /* Closer in, where a thumb reaches without stretching. */
    .menu-top { right: 1rem; bottom: 1rem; }
}

/* ---- The cart's contents -------------------------------------------------
   The partial is shared with four other views, so this restyles rather than
   rewrites it: every rule here is scoped to the column so the drawer those
   pages use is untouched. */

.menu-body .sidenav-cart .offcanvas-menu-inner { padding: 1.1rem 1.15rem 0 !important; }

/* #cartList carries bootstrap's .row and each item its col-* classes, so the
   row's negative side margins cancelled the padding above and the columns
   pushed back out again -- leaving items 3px from the panel edge however much
   padding the panel was given. Both have to be zeroed for that padding to mean
   anything. */
.menu-body .sidenav-cart #cartList {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* One row per line, not a floated block with a border down one side. */
.menu-body .sidenav-cart .items {
    width: 100%;
    max-width: none;
    flex: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0;
}

/* Price and controls share a line: the buttons act on the quantity sitting
   beside them, and giving them a row of their own separated the two and made
   every item a third taller than it needed to be. */
.menu-body .sidenav-cart .info-block {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
        "shot title title"
        "shot price qty";
    column-gap: 0.7rem;
    row-gap: 0.3rem;
    align-items: center;
    padding: 0.8rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
}

.menu-body .sidenav-cart .items:last-child .info-block { border-bottom: 0; }

/* A thumbnail, not a picture. At 100x105 the photo was the loudest thing in the
   cart and pushed the name and price into a narrow column beside it. */
/* The theme fixes this box at 105px and fills it with Argon indigo, which is
   the blue slab that showed under each thumbnail once the image shrank. Both
   need !important -- the theme's own rule carries it. */
.menu-body .sidenav-cart .square-box {
    grid-area: shot;
    align-self: start;
    float: none !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 8px;
    overflow: hidden;
}

.menu-body .sidenav-cart .productImage {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--wash);
}

.menu-body .sidenav-cart .product-item_title {
    grid-area: title;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.menu-body .sidenav-cart .product-item_quantity {
    grid-area: price;
    margin: 0 !important;
    font-size: 0.85rem;
    white-space: nowrap;
    color: var(--muted);
}

.menu-body .sidenav-cart .product-item_quantity span {
    font-weight: 700;
    color: var(--ink);
}

/* The controls were a bootstrap pagination list, which is why they looked like
   page numbers. */
.menu-body .sidenav-cart .pagination {
    grid-area: qty;
    justify-self: end;
    display: flex;
    gap: 0.25rem;
    margin: 0 !important;
    padding: 0;
}

.menu-body .sidenav-cart .page-item { display: block; margin: 0 !important; }

.menu-body .sidenav-cart .page-link {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    margin: 0 !important;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.8rem;
    line-height: 1;
}

.menu-body .sidenav-cart .page-link:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* The bin is the one destructive control here, so it does not look like the
   two beside it until you reach for it. */
.menu-body .sidenav-cart .page-item:last-child .page-link:hover {
    background: #B45309;
    border-color: #B45309;
}

/* Subtotal and checkout, pinned at the foot of the panel. This block also came
   from the Argon card kit -- a card inside a card, with its own shadow, a
   bootstrap row cancelling the padding again, and a <br> holding the button
   off the bottom. */
/* The foot of the panel -- Clear, then the subtotal and checkout. It sits
   outside the scrolling part (ui-fixes.css), which keeps it at the bottom more
   reliably than position:sticky did inside a phone's fixed drawer. */
.menu-body .sidenav-cart .minicart-foot {
    margin: 0 -1.15rem;
    padding: 0.9rem 1.15rem 1.1rem;
    background: var(--paper);
    border-top: 1px solid var(--line);
}
.menu-body .sidenav-cart .minicart-foot .minicart-clear { display: flex; }
.menu-body .sidenav-cart .minicart-foot .minicart-clear[hidden] { display: none; }

.menu-body .sidenav-cart #totalPrices .card,
.menu-body .sidenav-cart #totalPrices .card-body {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 !important;
    padding: 0;
    background: none;
}

.menu-body .sidenav-cart #totalPrices .row {
    margin: 0;
}

/* The flex has to be on .col, not .row: the label and the figure are both
   inside the column, so margin-left:auto on the figure had a block parent and
   nothing to push against -- the pair sat together on the left. */
.menu-body .sidenav-cart #totalPrices .col {
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

/* The figure is the thing being read here, so it is the thing that is big. */
.menu-body .sidenav-cart #totalPrices .ammount {
    margin-left: auto;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* The <br> between the subtotal and the button is markup doing spacing's job;
   the padding below handles it. */
.menu-body .sidenav-cart #totalPrices br { display: none; }

.menu-body .sidenav-cart #totalPrices .btn-primary {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: none;
}

.menu-body .sidenav-cart #totalPrices .btn-primary:hover {
    background: var(--accent);
    transform: none;
}

/* Beside the search now, not a column of its own. Chips in a row that scrolls
   sideways when a restaurant has more categories than fit, so the control row
   never wraps into two and never pushes the dishes down. */
.menu-rail {
    min-width: 0;
    flex: 1 1 auto;
}

.menu-rail ul {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.menu-rail ul::-webkit-scrollbar { display: none; }

.menu-rail li { flex: 0 0 auto; }

/* The running total belongs to small screens. On a wider one the cart drawer
   and the meal-card banner are both already in view, so a third copy of the
   same number would be clutter. */
.menu-cart { display: none; }

.menu-rail ul { list-style: none; margin: 0; padding: 0; }

/* Pills, since they sit in a row now rather than stacked in a column. Same
   shape the phone layout already used. */
.menu-rail a {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.9rem;
    text-decoration: none;
}

.menu-rail a:hover { background: var(--paper); text-decoration: none; color: var(--ink); }

/* Filled, not a left edge -- a pill has no left edge to mark. */
.menu-rail a.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 600;
}

.menu-rail a.is-active .rail-count { color: rgba(255, 255, 255, 0.7); }

.menu-rail em { color: var(--muted); font-size: 0.85rem; }
.menu-rail .rail-count { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.menu-category { margin-bottom: 2.75rem; scroll-margin-top: 90px; }

.menu-category h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    margin: 0 0 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

/* auto-FILL, not auto-fit. Both give three across when there are three dishes,
   but auto-fit collapses the tracks nothing occupies -- so a category holding a
   single dish stretched that one card the full width of the column, and a
   category of two split it in half. auto-fill keeps the empty tracks, so one
   dish is one dish-sized card with space beside it and every row lines up
   whatever a category happens to hold.

   The floor still matters: the dish column narrows as the cart takes its 320px,
   and a hard repeat(3) would crush the cards rather than drop to two. */
.dish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1.1rem;
}

/* ---- Dish ------------------------------------------------------------ */

.dish {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}

.dish:hover { border-color: #B9C4D1; }

/* What day this order is for.
   A banner rather than a line of text: the page serves lunch and evening from
   one url, the meal comes out of the session, and a tab left open overnight
   still reads "today". Someone about to spend money off a meal card should not
   have to hunt for which day they are spending it on. */
.menu-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin: 1rem 0 0;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    border-left: 4px solid var(--ink);
    background: #EDF1F7;
}

.menu-when[data-state="closed"] {
    border-left-color: #B45309;
    background: #FDF3E7;
}

.menu-when__claim {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.menu-when[data-state="closed"] .menu-when__claim { color: #8A3F06; }

.menu-when__date,
.menu-when__meal {
    font-size: 0.9rem;
    color: var(--muted);
}

/* The deadline is the part that changes whether an order is possible at all,
   so it is the one thing in here that carries a colour. */
.menu-when__cutoff {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-left: auto;
}

.menu-when[data-state="open"] .menu-when__cutoff { background: #DCFCE7; color: #166534; }
.menu-when[data-state="closed"] .menu-when__cutoff { background: #FDE2C2; color: #8A3F06; }

@media (max-width: 767px) {
    .menu-when__cutoff { margin-left: 0; }
}

.dish-tile {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background: var(--tile, #11223F);
}

/* Absolute, so the photo cannot stretch the tile past its aspect ratio. As a
   grid item, height:100% resolved against an auto row and fell back to the
   image's own proportions -- a 590x400 photo made its tile 183px tall where a
   dish with no photo was 169px, so cards sat at different heights along a row. */
.dish-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dish-initial {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2.6rem;
    color: rgba(255,255,255,.92);
    line-height: 1;
}

.dish-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.9rem 1rem 1rem;
    gap: 0.35rem;
}

.dish-name {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.04rem;
    line-height: 1.25;
    margin: 0;
    color: var(--ink);
}

.dish-desc {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    /* Three lines now the full description is here rather than cut to 40
       characters on the server. Clamped, so a long one cannot stretch its card
       past its neighbours, but the whole text is in the page and selectable. */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dish-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.7rem;
}

.dish-price {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* Full width beneath the price and the pills, rather than competing with them
   on one line. It does the same thing as + -- one more of this dish -- and is
   the obvious target for someone who has not worked out what the pills are. */
.dish-add {
    display: block;
    width: 100%;
    margin-top: 0.7rem;
    border: 0;
    border-radius: 9px;
    padding: 0.55rem 0.95rem;
    background: var(--ink);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dish-add:disabled { opacity: .6; cursor: default; }

.dish-add:hover { background: var(--accent); }
.dish-add:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Quantity, on the card.
   Adding used to open a dialog to collect a number; the card collects it now.
   The control occupies the same slot as the Add button and is the same height,
   so a card does not resize as its count changes and the grid stays put. */
.dish-qty {
    display: flex;
    align-items: center;
}

.dish-qty.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.dish-pills {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 0.15rem;
    background: var(--paper);
}

.dish-pill {
    border: 0;
    border-radius: 7px;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--wash);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dish-pill:hover { background: var(--ink); color: #fff; }
.dish-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dish-pill:disabled { cursor: default; }

.dish-count {
    min-width: 1.6rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* Said on the card that hit the limit, rather than as a page-level alert that
   does not say which dish it is about. */
.dish-limit {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #B45309;
}

/* sold out: shown, not hidden, so the menu stops silently changing size */
.dish[data-state="soldout"] { opacity: .72; }
.dish[data-state="soldout"] .dish-tile { filter: grayscale(1); }

.dish-soldout {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--muted);
}

.dish-flag {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--accent);
}

.dish-stock {
    position: absolute;
    left: 0.6rem; top: 0.6rem;
    background: rgba(17,34,63,.82);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

/* ---- Empty state ----------------------------------------------------- */

.menu-empty {
    background: var(--paper);
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.menu-empty h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.25rem;
    margin: 0 0 0.4rem;
    color: var(--ink);
}

.menu-empty p { color: var(--muted); margin: 0 0 1rem; }

/* ---- Notices --------------------------------------------------------- */

.menu-notice {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    background: rgba(200,16,46,.06);
    border: 1px solid rgba(200,16,46,.22);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--ink);
    font-size: 0.9rem;
}

.menu-notice i { color: var(--accent); margin-top: 0.15rem; }

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 860px) {
    .menu-body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

    /* A column beside the dishes needs width there is none of on a phone, so
       the cart goes back to being the drawer it still is everywhere else --
       reached from the Current Cart bar above the chips. Every property the
       column set has to be given back, or it stays stuck in the flow at full
       height. */
    .menu-body .sidenav-cart {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        padding-top: 20px !important;
        /* Above the scrolled navbar (.custom-nav, z-index 9999). At 1040 the
           drawer opened under it, which hid the drawer's My Cart heading,
           Clear and close button behind the logo bar. */
        z-index: 10001;
        /* Closed until openNav() gives it a width. The column rule above sets
           width:auto, and without handing that back the drawer sat open across
           the whole screen, covering the menu it belongs to. */
        width: 0;
    }

    .menu-body .sidenav-cart .closebtn { display: block; }

    /* display:contents dissolves this row so its children become children of
       .menu-shell.
       Sticky only travels within its parent's box, and this row is only as tall
       as its own content -- so once the rail was moved in here for the desktop
       layout it could not stick at all, and the cart bar and chips scrolled
       away with it. Dissolving the row on a phone gives them a tall parent
       again without needing the markup to differ between the two layouts. */
    .menu-controls { display: contents; }

    .menu-search { margin-bottom: 0.75rem; }

    /* The chips and the running total form their own sticky band on a phone
       rather than sharing the control row. */
    .menu-rail { flex: none; }

    /* The navbar is fixed and 71px tall here, so sticking at 64 tucked the
       chips 7px underneath it and left dish names crowded into the sliver
       between the two. Sit flush below it, with room above the chips so the
       row reads as its own band rather than something wedged in. */
    .menu-rail {
        position: sticky;
        top: 71px;
        z-index: 20;
        background: var(--wash);
        padding-block: 0.9rem 0.65rem;
        margin-inline: -20px;
        padding-inline: 20px;
    }

    /* The running total, above the chips and sticky with them. */
    .menu-cart {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        margin-bottom: 0.6rem;
        padding: 0.6rem 0.9rem;
        border: 0;
        border-radius: 10px;
        background: var(--ink);
        color: #fff;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }

    /* Names the row, so the figures beside it are not just two numbers on a
       dark bar. */
    .menu-cart__label { font-size: 0.85rem; font-weight: 700; }

    .menu-cart__count {
        font-size: 0.8rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.72);
    }

    .menu-cart__total {
        margin-left: auto;
        font-size: 0.95rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .menu-cart__go { font-size: 1.1rem; opacity: 0.7; line-height: 1; }

    .menu-cart:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

    /* Tapping a chip has to clear the navbar AND the chips themselves. At 90px
       the heading landed under the rail that scrolled to it, which read as the
       chip having done nothing. Set here, with the rail, because the rail turns
       sticky at this width -- not at the narrower phone breakpoint. */
    .menu-category { scroll-margin-top: 140px; }

    .menu-rail ul {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .menu-rail ul::-webkit-scrollbar { display: none; }

    .menu-rail a {
        white-space: nowrap;
        border: 1px solid var(--line);
        border-left-width: 1px;
        background: var(--paper);
        border-radius: 999px;
        padding: 0.4rem 0.85rem;
    }

    .menu-rail a.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
    .menu-rail a.is-active .rail-count { color: rgba(255,255,255,.7); }

    .menu-controls { flex-direction: column; align-items: stretch; }

    /* Both selectors, or the search box becomes 340px tall.
       The row turns into a column here, so flex-basis stops meaning width and
       starts meaning height -- and .menu-controls-search-only .menu-search
       outranks a bare .menu-search, so clearing the basis on the plain selector
       alone left the more specific 340px in place. A restaurant with one
       category got a third of a screen of empty space under its name. */
    .menu-search,
    .menu-controls-search-only .menu-search { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .meal-meter span, .dish, .dish-add { transition: none; }
}