/* ============================================================
   MENU ORDER — Deliveroo-style two containers
   Categories full-width above; then [menu list] + gap + [basket card].
   Balanced side margins so content is not stuck to the left edge.
   ============================================================ */

.menu-order {
  --mo-accent: var(--color-hero-cta, #00A651);
  --mo-border: var(--color-border, #E5E7EB);
  --mo-ink: var(--color-ink, #111);
  --mo-muted: var(--color-muted, #6B7280);
  --mo-surface: var(--color-surface, #fff);
  --mo-card: var(--color-card, #fff);
  --mo-radius: 14px;
  /* Deliveroo page gutters — equal left/right breathing room */
  --mo-gutter: clamp(1rem, 3vw, 2rem);
  /* Gap BETWEEN the two containers (menu | basket) */
  --mo-col-gap: clamp(1.25rem, 2.5vw, 2rem);
  /* Basket card width — fixed feel like Deliveroo ~320px */
  --mo-basket-w: 550px;
  /* Gap BETWEEN category bar and the bag (tweak this — not margin-top on sticky) */
  --mo-basket-gap: 1.75rem;
  /* Centered content width (not edge-to-edge) */
  --mo-shell-max: 1550px;
  background: var(--mo-surface);
  min-height: 0;
  width: 100%;
  max-width: none;
  /* Sit cleanly under the shared hero-unified intro */
  padding-top: 0.75rem;
  /* Mobile end flush — Bag lives in bottom nav (no floating View Bag bar). */
  padding-bottom: 0;
}

@media (max-width: 1023px) {
  .menu-order {
    padding-bottom: 0;
  }
  .menu-order__body,
  .menu-order__main {
    padding-bottom: 0;
  }
  /* Kill any leftover viewport stretch (Tailwind min-h-screen on <main>) */
  body[data-page="menu"] #main-content {
    min-height: 0 !important;
  }
  /* Pull footer up under the allergen note */
  body[data-page="menu"] .site-footer {
    padding-top: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .menu-order {
    padding-bottom: 1.5rem;
    min-height: calc(100vh - var(--menu-header-offset, 5.5rem));
  }
}

/* Centered shell — equal padding both sides */
.menu-order__shell {
  display: block;
  width: 100%;
  max-width: var(--mo-shell-max);
  margin-inline: auto;
  padding: 0 var(--mo-gutter);
  box-sizing: border-box;
}

/* Restaurant-style head.
   Mobile (≤1023px): site-header is sticky/in-flow — only a small gap after it.
   Desktop: header is fixed, so clear it with padding-top. */
.menu-order__head {
  padding: 0.65rem 0 0.35rem;
}
@media (min-width: 1024px) {
  .menu-order__head {
    padding-top: calc(5rem + env(safe-area-inset-top, 0px));
  }
}

/* Don't force the menu main to fill the viewport on phone — that left a tall
   empty band after the allergen note when a short category was selected.
   (Mobile rules live with .menu-order padding above.) */
.menu-order__eyebrow {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary, #E63928);
}
.menu-order__title {
  margin: 0 0 0.3rem;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  line-height: 1; text-transform: uppercase; color: var(--mo-ink);
}
@media (min-width: 1100px) {
  .menu-order__title { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
}
.menu-order__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem;
  margin: 0 0 0.35rem;
}
.menu-order__allergens {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8125rem; font-weight: 700;
  color: var(--mo-muted); text-decoration: none;
}
.menu-order__allergens:hover { color: var(--color-primary, #E63928); }
.menu-order__allergens i,
.menu-order__allergens svg { flex-shrink: 0; }

.menu-order .favourites-rail--compact {
  margin: 0.35rem 0 1.25rem;
  margin-left: 0; margin-right: 0; width: 100%;
}

/* Sticky toolbar stays inside the same padded shell (full content width) */
.menu-order__shell > .menu-toolbar-lite {
  margin-inline: 0;
  padding-inline: 0;
  width: auto;
}

/* ---------- Two containers: menu + basket ---------- */
.menu-order,
.menu-order__shell,
.menu-order__body {
  overflow: visible;
}

.menu-order__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  .menu-order__body { padding-bottom: 1.5rem; }
}

@media (min-width: 960px) {
  .menu-order__body {
    grid-template-columns: minmax(0, 1fr) var(--mo-basket-w);
    column-gap: var(--mo-col-gap);
    row-gap: 0;
    /* stretch so the basket column is as tall as the menu — required for sticky */
    align-items: stretch;
    padding-top: 0.25rem;
  }
}

/* Container 1 — menu items */
.menu-order__main {
  min-width: 0;
  padding: 0;
}
@media (min-width: 960px) {
  .menu-order__main {
    padding: 0.85rem 0 2rem;
    border-right: 0;
  }
}

/* Full-height grid cell; sticky bag pins inside it while menu scrolls */
.menu-basket-slot {
  display: none;
}
@media (min-width: 960px) {
  .menu-basket-slot {
    display: block;
    min-width: 0;
    /* tall column = sticky can travel with the menu length */
    height: 100%;
    /* THIS controls the red-line gap under categories → bag */
    padding-top: var(--mo-basket-gap);
    box-sizing: border-box;
  }
}

/* Container 2 — tall sticky basket card (Deliveroo empty panel height) */
.menu-basket { display: none; }
@media (min-width: 960px) {
  .menu-basket {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--mo-basket-top, calc(var(--menu-header-offset, 5.5rem) + 0.75rem)) + var(--mo-basket-gap));
    z-index: 35;
    width: 100%;
    max-width: var(--mo-basket-w);
    margin-top: 0;
    /* Fill most of the viewport — no big empty strip under the bag */
    height: calc(100dvh - var(--mo-basket-top, calc(var(--menu-header-offset, 5.5rem) + 0.75rem)) - var(--mo-basket-gap) - 1.25rem);
    max-height: calc(100dvh - var(--mo-basket-top, calc(var(--menu-header-offset, 5.5rem) + 0.75rem)) - var(--mo-basket-gap) - 1.25rem);
    min-height: 28rem;
  }
}
.menu-basket__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: none;
  border: 1px solid var(--mo-border);
  border-radius: 12px;
  background: var(--mo-card);
  overflow: hidden;
  box-shadow: none;
}
.menu-basket__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.85rem 0.95rem 0.7rem;
  border-bottom: 1px solid var(--mo-border); flex-shrink: 0;
}
.menu-basket__head[hidden] { display: none; }
.menu-basket__title { margin: 0; font-size: 1rem; text-transform: uppercase; }
.menu-basket__count {
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem;
  border-radius: 999px; background: var(--mo-accent); color: #fff;
  font-size: 0.75rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-basket__count[hidden] { display: none; }
.menu-basket__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 0.85rem;
  -webkit-overflow-scrolling: touch;
}
.menu-basket.is-empty .menu-basket__body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2.5rem 1rem;
}
.menu-basket__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.85rem;
  color: var(--mo-muted);
}
.menu-basket__empty[hidden] { display: none; }
.menu-basket__empty-icon {
  opacity: 0.55;
  color: var(--mo-muted);
  line-height: 0;
}
.menu-basket__glyph {
  width: 3.25rem;
  height: 3.25rem;
  display: block;
}
.menu-basket__empty-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mo-muted);
}
.menu-basket__list { display: flex; flex-direction: column; gap: 0.55rem; }
.menu-basket__list[hidden] { display: none; }
.menu-basket__list .cart-line {
  border: 1px solid var(--mo-border);
  border-radius: 10px;
  padding: 0.5rem;
  background: var(--mo-surface);
}
.menu-basket__foot {
  flex-shrink: 0; padding: 0.7rem 0.85rem 0.85rem;
  border-top: 1px solid var(--mo-border);
  display: flex; flex-direction: column; gap: 0.45rem;
}
.menu-basket.is-empty .menu-basket__foot {
  border-top: 0;
  padding-top: 0.35rem;
}
.menu-basket__totals[hidden] { display: none; }
.menu-basket__row {
  display: flex; justify-content: space-between; gap: 0.75rem;
  font-size: 0.875rem; font-weight: 600;
}
.menu-basket__row--subtotal {
  color: var(--mo-muted);
}
.menu-basket__row--subtotal [data-cart-subtotal] {
  color: var(--mo-muted);
  font-variant-numeric: tabular-nums;
}
.menu-basket__row--total {
  font-size: 1rem;
  font-weight: 800;
  color: var(--mo-ink);
  padding-top: 0.15rem;
}
.menu-basket__row--total [data-cart-total] {
  color: var(--mo-accent);
  font-variant-numeric: tabular-nums;
}
.menu-basket__checkout {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 2.75rem; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 0.9rem;
  background: var(--mo-accent); color: #fff;
}
.menu-basket__checkout[aria-disabled="true"] {
  pointer-events: none;
  background: #E8EAED !important;
  color: #9AA0A6 !important;
  opacity: 1;
  box-shadow: none !important;
}
.menu-basket__view {
  text-align: center; font-size: 0.78rem; font-weight: 700;
  color: var(--mo-muted); text-decoration: none;
}
.menu-basket__view[hidden] { display: none; }
.menu-basket__view:hover { color: var(--color-primary, #E63928); }

/* Phone bottom basket bar — hidden: mobile tab bar already has Bag */
.menu-order-bar {
  display: none !important;
}
.menu-order-bar__btn {
  width: 100%; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mo-accent); color: #fff;
  box-shadow: 0 10px 28px rgba(0,166,81,.28);
  font: inherit; font-weight: 800;
}
.menu-order-bar__icon { position: relative; display: inline-flex; }
.menu-order-bar__badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
  border-radius: 999px; background: var(--mo-accent); color: #fff;
  font-size: 0.65rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-order-bar__label { flex: 1; text-align: left; }
.menu-order-bar__total { font-weight: 800; }

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

/* Final mobile overrides — must stay last so base rules above cannot undo them */
@media (max-width: 1023px) {
  .menu-order,
  .menu-order__body,
  .menu-order__main {
    padding-bottom: 0;
  }
  body[data-page="menu"] #main-content {
    min-height: 0 !important;
  }
  body[data-page="menu"] .site-footer {
    padding-top: 1.25rem;
  }
  body[data-page="menu"] .menu-vat-lite {
    margin: 0.75rem auto 1.15rem;
  }
}

@media (max-width: 639px) {
  .menu-order {
    /* Only phones: side breathing room — desktop gutters unchanged */
    --mo-gutter: 1.25rem;
    /* Small gap before footer; tab bar clearance is on body.has-mobile-shell */
    padding-bottom: 0.5rem;
  }
  .menu-order__shell {
    padding-left: var(--mo-gutter);
    padding-right: var(--mo-gutter);
  }
  .menu-order__head {
    padding-top: calc(4.1rem + env(safe-area-inset-top, 0px));
  }
  body[data-page="menu"] .site-footer {
    padding-top: 0.75rem;
  }
  body[data-page="menu"] .menu-vat-lite {
    margin: 0.55rem auto 0.65rem;
  }
}