/* ============================================================
 * Customer ordering page styles. Loaded by /order.php after site.css.
 *
 * 4-step flow rendered as <ol.order-steps>. Each step is a card with
 * a numbered head + a body. data-state on the <li> drives display:
 *   - locked: muted, body hidden
 *   - active: full UI
 *   - done:   collapsed to a summary line
 * ============================================================ */


.section--order { background: var(--c-cream); }

.muted { color: var(--c-brown-muted); }


/* ============================================================
 * Steps
 * ============================================================ */

.order-steps {
    list-style: none;
    padding: 0;
    margin: var(--s-7) 0 0;
    display: grid;
    gap: var(--s-5);
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.order-step {
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.08);
    border-radius: var(--radius-md);
    /* `overflow: clip` (not `hidden`) — both clip overflow but `clip`
       doesn't form a new containing-block / scroll container, so
       `position: sticky` on descendants (the basket on /order.php)
       keeps working. `hidden` was silently breaking the basket's
       sticky behaviour. */
    overflow: clip;
    transition: opacity var(--transition-fast);
}

.order-step[data-state="locked"] { opacity: 0.45; }
.order-step[data-state="locked"] .order-step__body { display: none; }

.order-step[data-state="done"] .order-step__body { display: none; }

.order-step__head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    background: var(--c-cream);
    border-bottom: 1px solid rgba(58, 44, 29, 0.08);
    transition: background var(--transition-fast);
}
/* Any step that's been started or completed is clickable to re-enter. */
.order-step[data-state="done"]   .order-step__head,
.order-step[data-state="active"] .order-step__head { cursor: pointer; }
.order-step[data-state="done"]   .order-step__head:hover { background: var(--c-cream-soft); }
.order-step[data-state="locked"] .order-step__head { cursor: not-allowed; }

.order-step__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--c-tan);
    color: var(--c-white);
    font-weight: 700;
    font-family: var(--font-display);
}

.order-step__title {
    margin: 0;
    font-size: 1.25rem;
    flex: 1 1 auto;
}

.order-step__summary {
    color: var(--c-brown-muted);
    font-size: 0.95rem;
}

.order-step__body {
    padding: var(--s-6);
}

.order-step__hint {
    color: var(--c-brown-muted);
    margin: 0 0 var(--s-5);
}

/* PR-7.10: signed-in greeting under the page H1. Same pattern as
   .account-greeting on /account.php so the member sees their name
   regardless of viewport (the header dropdown is hidden ≤1024px). */
.order-greeting {
    text-align: center;
    color: var(--c-brown-muted);
    margin: 0 0 var(--s-5);
    font-size: 1.05rem;
}


/* ============================================================
 * Step 1: date cards
 * ============================================================ */

.date-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-4);
}

.date-card {
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    padding: var(--s-5);
    cursor: pointer;
    text-align: left;
    display: grid;
    gap: var(--s-1);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    font: inherit;
    color: inherit;
}
.date-card:hover {
    border-color: var(--c-tan);
    transform: translateY(-1px);
}

.date-card__day {
    color: var(--c-brown-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.date-card__date {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-brown-deep);
    line-height: 1.1;
}
.date-card__location {
    color: var(--c-green);
    font-weight: 600;
    margin-top: var(--s-2);
}
.date-card__time {
    color: var(--c-brown-muted);
    font-size: 0.9rem;
}


/* ============================================================
 * Step 2: menu + basket — side by side on wide, stacked on mobile
 * ============================================================ */

/* PR-7.11: scope to ACTIVE state only. Previously this rule was
   `.order-step[data-step="menu"] .order-step__body { display: grid; }`,
   which has the same specificity as the `[data-state="locked"]`
   display:none rule above (line 46) but appears later — so the grid
   won and the basket stayed visible-but-faded inside its locked
   parent. On mobile that meant tapping the cart icon before picking
   a date opened a half-transparent drawer behind step 1. With the
   active-state scope, the locked rule wins (no specificity battle,
   :not is unnecessary). */
.order-step[data-step="menu"][data-state="active"] .order-step__body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--s-6);
    align-items: start;
}

/* PR-7.10b: basket stacks under menu at tablet too (was <=860px).
   Active-state scope per PR-7.11. */
@media (max-width: 1024px) {
    .order-step[data-step="menu"][data-state="active"] .order-step__body {
        grid-template-columns: 1fr;
    }
}

.menu { margin-top: 0; }

.menu-category + .menu-category { margin-top: var(--s-7); }

/* PR-7.39l/n: category header holds the title + optional hint (e.g.
   the "Select Vegan Cheese..." note next to Pizza). Border-below is
   on the wrapper so it sits under both. Hint keeps sharing the row
   with the title at every viewport — no flex-wrap — and instead its
   own text wraps across multiple lines when there isn't horizontal
   room. flex-shrink:0 on title keeps "Pizza" at full weight; hint
   takes the remaining space with flex:1 1 0 + min-width:0. */
.menu-category__head {
    display: flex;
    align-items: center;
    gap: var(--s-3) var(--s-4);
    margin: 0 0 var(--s-5);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid rgba(58, 44, 29, 0.12);
}
.menu-category__title {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--c-brown-deep);
    text-align: left;
    margin: 0;
}
.menu-category__hint {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    color: var(--c-brown-muted);
    font-size: 0.85rem;
    font-style: italic;
    text-align: right;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-5);
}

/* The whole card is clickable (handler attached in ordering.js). The Add
   button remains as a visible affordance, but tapping anywhere on the row
   triggers the same action (open attr-picker for pizzas, add to basket
   immediately for everything else). */
/* PR-7.18: stacked layout so the description gets full width instead
   of fighting the price/actions column. Grid is name (row 1) →
   description (row 2, full span) → price + actions (row 3). On
   description-less items, price + actions slide up to row 2 — same
   visual feel either way. */
.menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--s-4);
    row-gap: var(--s-2);
    align-items: center;
    cursor: pointer;
    padding: var(--s-3);
    margin: 0 calc(var(--s-3) * -1);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.menu-item:hover { background: var(--c-cream-soft); }
/* When the inline attr-picker is open the card is no longer clickable
   (the picker has its own Cancel/Add to basket controls). */
.menu-item:has(.attr-picker[data-open="1"]) { cursor: default; }
.menu-item:has(.attr-picker[data-open="1"]):hover { background: transparent; }

.menu-item__name {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--c-brown-deep);
    margin: 0;
    font-weight: 700;
}
.menu-item__description {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--c-brown-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.menu-item__price {
    grid-column: 1;
    justify-self: start;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-green);
    white-space: nowrap;
}
.menu-item__add {
    padding: var(--s-2) var(--s-4) !important;
    font-size: 0.85rem !important;
}

/* PR-7.39a5: layout swap — price + qty now share a grid row (level
   with each other), and the add-row (variant chip + Add button)
   sits on its own row underneath, right-aligned.

   The wrapping .menu-item__actions container was dropped; qty and
   add-row are direct grid children of .menu-item now. Cleaner
   markup + easier to align each element independently.

   For pizzas, only the Customise button renders in col 2 on the
   same row as price. The attr-picker still spans both columns
   (its own `grid-column: 1 / -1` further down). */
.menu-item__qty {
    grid-column: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}
.menu-item__add-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    justify-content: flex-end;
    flex-wrap: wrap-reverse;    /* chip drops UNDER Add if too tight */
}
.menu-item__add--customise {
    grid-column: 2;
    justify-self: end;
}
.menu-item__variants {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Green (--c-green = #3a5a3a) rgba triples hardcoded — 12% tint bg,
   55% border, 20% hover — matches demo/menu-non-pizza-cards.php's
   D3 chip. Hardcoded rather than color-mix() so pre-Chrome-111
   Android users get the same look. If a second tag comes in, add a
   modifier class (`.menu-item__variant--df` etc.) with its own trio. */
.menu-item__variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 90, 58, 0.10);
    color: var(--c-green);
    border: 1px solid rgba(58, 90, 58, 0.45);
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms, transform 120ms;
}
.menu-item__variant:hover  { background: rgba(58, 90, 58, 0.18); }
.menu-item__variant:active { transform: translateY(1px); }
.menu-item__qty-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.15);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--c-brown-deep);
    padding: 0;
}
.menu-item__qty-btn:hover { background: var(--c-cream-soft); }
.menu-item__qty-value {
    min-width: 1.2rem;
    text-align: center;
    font-weight: 700;
    color: var(--c-brown-deep);
    font-size: 0.95rem;
}
/* Same stepper inside the attr-picker, just spaced for the action row. */
.attr-picker__qty {
    margin: 0 var(--s-2);
}
/* Brief 3-second "Added" state after a successful add. Green so the
   colour difference is the first thing the eye catches alongside the
   text change. Reverts to default secondary styling on timer expiry. */
.menu-item__add--added {
    background: var(--c-green) !important;
    color: var(--c-white) !important;
}

/* Brief inline confirmation under the product row after addToBasket()
   succeeds. Full-width band so it's visible whether the customer's eye
   was on the card body or the Add button. */
.menu-item__added {
    grid-column: 1 / -1;
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--c-green);
    color: var(--c-white);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}


/* ============================================================
 * Inline attribute picker (cheese / extras / oils)
 * Opens beneath a pizza menu-item when Add is clicked.
 * ============================================================ */

.attr-picker {
    grid-column: 1 / -1;
    margin-top: var(--s-4);
    padding: var(--s-5);
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.15);
    border-radius: var(--radius-md);
}
.attr-picker__inner {
    display: grid;
    gap: var(--s-5);
    min-width: 0;
}

.attr-group {
    /* Fieldsets have a browser-default `min-width: min-content` which
       makes them grow to fit their content, ignoring their parent's
       width. At narrow viewports this let the fieldset extend past
       the phone's right edge. min-width: 0 forces it to respect the
       grid parent. */
    min-width: 0;
    border: 0;
    margin: 0;
    padding: 0;
}
.attr-group__legend {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-brown-deep);
    margin-bottom: var(--s-3);
    padding: 0;
}
.attr-group__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s-2);
}

.attr-check {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color var(--transition-fast);
}
.attr-check:hover { border-color: var(--c-tan); }
.attr-check input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; }
/* PR-7.39j: label owns all the shrink so the price is never squeezed
   off the right edge. `overflow-wrap: anywhere` lets the label wrap
   inside long single words (Mozzarella, Parmigiano) — critical because
   the flex min-content sizer would otherwise keep the label's min
   width at the widest unbreakable word and push the price out.
   `min-width: 0` unlocks the shrink. `flex-shrink: 0` on price pins
   it to its natural (nowrap) width, always right-aligned. */
.attr-check__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--c-brown-deep);
}
.attr-check__price {
    flex-shrink: 0;
    color: var(--c-green);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* PR-7.23: at narrow viewports the attr-picker's combined padding +
   menu-item padding + container padding made the inner grid overflow
   to the right. Tighten the picker padding and force a single column
   so each attr-check has the full width to itself. */
@media (max-width: 480px) {
    .attr-picker {
        padding: var(--s-3);
    }
    .attr-group__items {
        grid-template-columns: 1fr;
    }
    /* PR-7.39k: on narrow viewports Reset + qty + Add together are
       wider than the viewport. Because .attr-picker__actions is a
       grid child of .attr-picker__inner, that overflow forced the
       WHOLE grid track wider than the container, dragging every
       attr-check row past the right edge alongside it. flex-wrap
       lets the row spill onto a second line so it stops setting
       the grid's min-content width. */
    .attr-picker__actions {
        flex-wrap: wrap;
        row-gap: var(--s-3);
    }
}

.attr-picker__actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    border-top: 1px solid rgba(58, 44, 29, 0.12);
    padding-top: var(--s-4);
}
/* PR-7.39l: with Reset Extras removed, push Add to basket to the
   right so the qty stepper sits alone on the left. Same visual
   grouping as the non-pizza menu-item rows (qty | Add). */
.attr-picker__submit { margin-left: auto; }


/* ============================================================
 * Basket option-label sub-line
 * ============================================================ */

.basket-item__options {
    display: block;
    margin-top: var(--s-1);
    color: var(--c-brown-muted);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.3;
}
.basket-item__option {
    display: block;  /* one option per line */
}


/* ============================================================
 * Basket
 * ============================================================ */

.basket {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    padding: var(--s-5);
}

.basket__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--s-4);
}
.basket__title {
    margin: 0;
    font-size: 1.1rem;
}
/* Close button only appears in drawer mode (<1024px). Hidden above. */
.basket__close {
    display: none;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--c-brown-muted);
    cursor: pointer;
    padding: 0 var(--s-2);
}
.basket__close:hover { color: var(--c-brown-deep); }

.basket-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-4);
}

/* PR-7.15 → PR-7.15b: dividers only at category transitions
   (starter → pizza, pizza → dessert), NOT between every item — Ben's
   feedback was that line-per-row was too noisy. The JS in
   ordering.js tags the first item of each category with
   .basket-item--first-of-category; the very first item is skipped so
   it never gets a line above it. Plus a quieter vertical rhythm
   between rows so the list still reads as discrete entries. */
.basket-list .basket-item {
    padding: var(--s-2) 0;
}
.basket-list .basket-item:first-child { padding-top: 0; }
.basket-list .basket-item:last-child  { padding-bottom: 0; }
.basket-list .basket-item--first-of-category {
    border-top: 1px solid rgba(58, 44, 29, 0.10);
    padding-top: var(--s-3);
    margin-top: var(--s-2);
}

/* PR-7.15b: divider above the Notes block so the last product is
   visually separated from the notes textarea. Only when the block is
   visible (basket has items) — `hidden` is set on empty basket. */
.basket__notes:not([hidden]) {
    border-top: 1px solid rgba(58, 44, 29, 0.10);
    padding-top: var(--s-3);
}

/* Two-column grid: label on left, fixed-width right column stacks the qty
   controls above the price. Right column has a fixed width and both elements
   stretch to fill it (qty controls flex-end, price text-align right) so the
   right edges align cleanly down every row. */
.basket-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    grid-template-rows: auto auto;
    column-gap: var(--s-3);
    row-gap: var(--s-2);
    align-items: center;
    font-size: 0.95rem;
}
.basket-item__label {
    grid-column: 1;
    grid-row: 1 / 3;
    font-weight: 600;
    color: var(--c-brown-deep);
    min-width: 0;
    align-self: center;
}
.basket-item__qty-controls {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-1);
}
.basket-item__price {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    text-align: right;
    color: var(--c-green);
    font-weight: 700;
}
.basket-item__btn {
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.15);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}
.basket-item__btn:hover { border-color: var(--c-tan); }
.basket-item__qty { min-width: 1.25rem; text-align: center; font-weight: 700; }

/* PR-7.17 (B19): at qty=1, the minus button signals "tap = remove the
   line" with a soft-red treatment. Avoids the silent "tap minus N
   times until it suddenly deletes" surprise. */
.basket-item[data-qty="1"] .basket-item__btn[data-action="dec"] {
    background: #fce8e6;
    border-color: #a32018;
    color: #a32018;
}
.basket-item[data-qty="1"] .basket-item__btn[data-action="dec"]:hover {
    background: #f8d6d2;
    border-color: #a32018;
}

.basket__empty {
    text-align: center;
    color: var(--c-brown-muted);
    font-size: 0.9rem;
    margin: 0 0 var(--s-4);
}

.basket[data-state="has-items"] .basket__empty { display: none; }

.basket__notes {
    margin: 0 0 var(--s-4);
}
.basket__notes-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-brown-deep);
    margin-bottom: var(--s-1);
}
.basket__notes-label small {
    font-weight: 400;
    color: var(--c-brown-muted);
}
.basket__notes textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--s-2) var(--s-3);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    border: 1px solid rgba(58, 44, 29, 0.2);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-brown-deep);
    resize: vertical;
}
.basket__notes textarea:focus {
    outline: none;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(184, 142, 92, 0.15);
}

/* PR-7.39c: inline error shown when the customer hits Continue with
   the allergy tick set but no notes. Sits directly above the Continue
   button so it's impossible to miss. Same red palette as the
   allergies hint above the notes. */
.basket__continue-error {
    margin: 0 0 var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: #fce8e6;
    color: #a32018;
    border-left: 3px solid #c5302e;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
}

/* PR-7.39b: "Any allergies?" tick row above the notes. When ticked,
   `.basket__allergies-hint` is unhidden to prompt the customer to
   describe the allergy in the notes below. Red so it's unmissable. */
.basket__allergies-check {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-brown-deep);
    margin-bottom: var(--s-2);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.basket__allergies-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #c5302e;
    cursor: pointer;
}
.basket__allergies-hint {
    margin: 0 0 var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: #fce8e6;
    color: #a32018;
    border-left: 3px solid #c5302e;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Promo code input — same styling as the notes textarea so the basket
   feels cohesive. Apply button is brand-secondary green for contrast.
   When a code is applied, the input + Apply hide and the "applied" pill
   takes over until the customer removes it with the × button. */
.basket__promo { margin: 0 0 var(--s-4); }
.basket__promo-row {
    display: flex;
    gap: var(--s-2);
    align-items: stretch;
}

/* PR-7.11b: Favourites panel — collapsible <details> at the top of
   the basket. Holds both the Load dropdown and the Save button.
   Collapsed by default; user clicks the summary to expand. Server-
   side, the wrapping <details> renders for any signed-in member;
   the inner load row is `hidden` when zero favourites exist and JS
   unhides it after the first save. */
.basket__favourites {
    border-bottom: 1px solid rgba(58, 44, 29, 0.08);
    /* PR-7.11b-polish: breathing room between the border and the
       basket items below (qty controls were sitting right on the line). */
    margin: 0 var(--s-4) var(--s-3);
}
.basket__favourites-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) 0;
    font-weight: 600;
    color: var(--c-brown-deep);
    -webkit-user-select: none;
    user-select: none;
}
.basket__favourites-summary::-webkit-details-marker { display: none; }
.basket__favourites-summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
    margin-right: 4px;
}
.basket__favourites[open] > .basket__favourites-summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}
.basket__favourites-body {
    padding: 0 0 var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.basket__favourites-hint {
    margin: 0;
    color: var(--c-brown-muted);
    font-size: 0.85rem;
}
.basket__favourites-row {
    display: flex;
    gap: var(--s-2);
    align-items: stretch;
}
.basket__favourites-save {
    align-self: flex-start;
}
.basket__favourites-row select {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s-2) var(--s-3);
    font-family: inherit;
    font-size: 0.9rem;
    border: 1px solid rgba(58, 44, 29, 0.2);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-brown-deep);
}
.basket__favourites-row .btn {
    flex: 0 0 auto;
    padding: var(--s-2) var(--s-4) !important;
}
.basket__promo-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s-2) var(--s-3);
    font-family: inherit;
    font-size: 0.9rem;
    border: 1px solid rgba(58, 44, 29, 0.2);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-brown-deep);
    text-transform: uppercase;
}
.basket__promo-row input:focus {
    outline: none;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(184, 142, 92, 0.15);
}
.basket__promo-row .btn {
    flex: 0 0 auto;
    padding: var(--s-2) var(--s-4) !important;
    font-size: 0.85rem !important;
}
.basket__promo-error {
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: #fce8e6;
    color: #a32018;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}
/* :not([hidden]) so the explicit display doesn't override the
   hidden HTML attribute on initial render or after removing the code. */
.basket__promo-applied:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: #e8f5e9;
    color: #1b5e20;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}
.basket__promo-applied button {
    background: transparent;
    border: 0;
    color: #1b5e20;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--s-1);
}
.basket__promo-applied button:hover { color: #a32018; }

/* Subtotal + Discount rows above the Total. Only visible when a discount
   is applied — basket footer shows just "Total" otherwise. `:not([hidden])`
   scope so the explicit display doesn't override the hidden HTML attribute. */
.basket__subtotal:not([hidden]),
.basket__discount:not([hidden]) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
    color: var(--c-brown-muted);
    padding-bottom: var(--s-1);
}
.basket__discount:not([hidden]) {
    color: #a32018;
    margin-bottom: var(--s-2);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid rgba(58, 44, 29, 0.12);
}

/* ============================================================
 * Basket drawer (mobile/tablet, <1024px — PR-7.10b raised from 860)
 * Same DOM node as the inline basket. Toggling position from sticky to
 * fixed via media query avoids any DOM-moving JS — single source of truth.
 * ============================================================ */

/* Drawer + backdrop both start below the sticky header (--header-h = 70px,
   site-header has z-index: 100) so the header — including the cart toggle
   button — stays visible and clickable while the drawer is open. */
.basket-backdrop {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(58, 44, 29, 0.45);
    z-index: 60;
}
.basket-backdrop[data-open="true"] { display: block; }

@media (max-width: 1024px) {
    .basket {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        width: min(90vw, 360px);
        border-radius: 0;
        border: 0;
        border-left: 1px solid rgba(58, 44, 29, 0.12);
        box-shadow: -8px 0 24px rgba(58, 44, 29, 0.18);
        overflow-y: auto;
        z-index: 70;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }
    .basket[data-open="true"] { transform: translateX(0); }
    .basket__close { display: inline-flex; align-items: center; justify-content: center; }

    /* PR-7.39c: when the drawer is toggled open, keep step 2's body
       rendered so its fixed-position basket child isn't hidden by the
       parent's `display: none` (which fires when step 2 is 'done').
       The drawer sits z-index:70 above everything else, so the menu
       list rendering underneath doesn't matter — it's covered. */
    body.drawer-open .order-step[data-step="menu"] .order-step__body {
        display: block;
    }
}

/* Continue button: full-width inside the basket footer with centered text,
   so a short label (just "Continue") still looks deliberate rather than
   stranded on the left of the grid cell. */
#basket-continue {
    width: 100%;
    justify-content: center;
}

.basket__footer {
    border-top: 1px solid rgba(58, 44, 29, 0.12);
    padding-top: var(--s-4);
    display: grid;
    gap: var(--s-3);
}
.basket__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--c-brown-deep);
}
.basket__total strong { color: var(--c-green); }


/* ============================================================
 * Step 3: timeslots
 * ============================================================ */

.timeslot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--s-3);
}

.timeslot {
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    padding: var(--s-4);
    cursor: pointer;
    display: grid;
    gap: var(--s-1);
    font: inherit;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.timeslot:hover { border-color: var(--c-tan); }
.timeslot[aria-pressed="true"] {
    background: var(--c-green);
    color: var(--c-white);
    border-color: var(--c-green);
}
.timeslot[aria-pressed="true"] .timeslot__free { color: rgba(255,255,255,0.85); }
.timeslot__time {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
}
.timeslot__free {
    color: var(--c-brown-muted);
    font-size: 0.85rem;
}


/* ============================================================
 * Step 4: checkout error
 * ============================================================ */

.checkout-error {
    background: #fde7e3;
    color: #6e1c10;
    border: 1px solid #d8a499;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--s-4);
    font-size: 0.95rem;
}

.checkout-form { max-width: 600px; }


/* ============================================================
 * Payment page (Stripe Elements)
 * ============================================================ */

.payment-form {
    max-width: 540px;
    margin: var(--s-6) auto 0;
    display: grid;
    gap: var(--s-5);
}
.payment-form #payment-element { min-height: 250px; }
.payment-form button[type="submit"] {
    width: 100%;
    justify-content: center;
}
.payment-form button[disabled] {
    opacity: 0.7;
    cursor: progress;
}