/* Lunaya public shop application styles — externalized from order.html in Wave 8. */
:root {
      --bg: #f4eee3;
      --bg-card: #fbf8f1;
      --text: #29392f;
      --muted: #6f665b;
      --accent: #2f4938;
      --accent-lt: #e7dccb;
      --header-bg: #203329;
      --header-text: #f4eee3;
      --pill-bg: #e7dccb;
      --border: rgba(47, 73, 56, .18);
      --shadow: 0 2px 12px rgba(32, 51, 41, .09);
      --shadow-lg: 0 8px 32px rgba(32, 51, 41, .16);
      --r: 16px;
      --r-sm: 10px;
      --font-d: 'Cormorant Garamond', Georgia, serif;
      --font-b: 'Jost', system-ui, sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    body {
      font-family: var(--font-b);
      background: var(--bg);
      color: var(--text);
      overscroll-behavior: none;
    }

    /* ── HEADER ── */
    .app-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--header-bg);
      padding: .75rem 1rem;
      padding-top: max(.75rem, env(safe-area-inset-top));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }

    .header-brand {
      display: flex;
      align-items: center;
      gap: .65rem;
      min-width: 0;
    }

    .header-logo,
    .header-restaurant {
      text-decoration: none;
    }

    .header-logo:focus-visible,
    .header-restaurant:focus-visible {
      outline: 2px solid var(--header-text);
      outline-offset: 3px;
    }

    .header-logo {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      overflow: hidden;
    }

    .header-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .header-restaurant {
      font-family: var(--font-d);
      font-size: 1.05rem;
      color: var(--header-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .header-table {
      font-size: .72rem;
      color: rgba(245, 230, 208, .55);
      margin-top: 1px;
    }

    .header-greeting {
      font-size: .72rem;
      color: rgba(245, 230, 208, .75);
      margin-top: 2px;
      display: none;
    }

    .btn-waiter {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: .35rem;
      background: rgba(245, 230, 208, .12);
      border: 1px solid rgba(245, 230, 208, .22);
      color: var(--header-text);
      border-radius: 20px;
      padding: .45rem .85rem;
      font-family: var(--font-b);
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, transform .1s;
    }

    .btn-waiter:active {
      transform: scale(.95);
      background: rgba(245, 230, 208, .22);
    }

    /* ── ONLINE ORDER INTRO ── */
    .online-order-intro {
      padding: .85rem 1rem 0;
      background: var(--bg);
    }

    .online-order-card {
      max-width: 960px;
      margin: 0 auto;
      padding: 1rem 1.1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
    }

    .online-order-eyebrow {
      color: var(--accent);
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .online-order-title {
      margin: .28rem 0 .35rem;
      font-family: var(--font-d);
      font-size: clamp(1.45rem, 3.6vw, 2.35rem);
      line-height: 1.16;
    }

    .online-order-copy {
      max-width: 64ch;
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.5;
    }

    .online-order-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-top: .8rem;
    }

    .online-order-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      min-height: 40px;
      padding: .5rem .78rem;
      border-radius: 999px;
      font-size: .86rem;
      font-weight: 700;
      text-decoration: none;
    }

    .online-order-action.primary {
      background: var(--accent);
      color: #fff;
    }

    .online-order-action.secondary {
      background: var(--accent-lt);
      color: var(--text);
    }

    /* ── CATEGORY NAV ── */
    .cat-nav {
      position: sticky;
      top: 68px;
      z-index: 90;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      padding: .55rem 0;
    }

    .cat-pills {
      display: flex;
      gap: .4rem;
      padding: 0 1rem;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .cat-pills::-webkit-scrollbar {
      display: none;
    }

    .cat-pill {
      flex-shrink: 0;
      border: none;
      border-radius: 20px;
      padding: .38rem .9rem;
      font-family: var(--font-b);
      font-size: .82rem;
      font-weight: 500;
      cursor: pointer;
      background: var(--pill-bg);
      color: var(--muted);
      transition: background .15s, color .15s, transform .1s;
    }

    .cat-pill.active {
      background: var(--accent);
      color: #fff;
    }

    .cat-pill:active {
      transform: scale(.94);
    }

    /* ── MENU MAIN ── */
    .order-carousel-shell {
      padding: 0 1rem 1rem;
      background: var(--bg);
    }

    .order-carousel-shell .pc-carousel {
      --pc-height: clamp(220px, 34vh, 300px);
      --pc-overlay-top: rgba(45, 31, 14, 0.18);
      --pc-overlay-bottom: rgba(45, 31, 14, 0.76);
      --pc-accent: #c8832a;
      --pc-accent-strong: #8b5a1f;
      --pc-text: #fff5e6;
      --pc-muted: rgba(255,245,230,.82);
      --pc-surface: rgba(255,245,230,.12);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

    .order-carousel-shell .pc-title {
      max-width: 24ch;
      font-size: clamp(1.8rem, 4vw, 3rem);
    }

    .order-carousel-shell .pc-copy {
      max-width: 60ch;
      font-size: 1rem;
      line-height: 1.6;
    }

    .order-carousel-shell .pc-controls {
      padding-inline: 1rem;
    }

    .menu-main {
      padding: 1rem 1rem 130px;
    }

    .cat-section {
      margin-bottom: 2.25rem;
      scroll-margin-top: 120px;
    }

    .cat-heading {
      font-family: var(--font-d);
      font-size: 1.2rem;
      font-weight: 500;
      margin-bottom: .75rem;
      padding-bottom: .5rem;
      border-bottom: 2px solid var(--accent-lt);
    }

    .menu-grid {
      display: flex;
      flex-direction: column;
      gap: .7rem;
    }

    /* Menu card */
    .menu-card {
      background: var(--bg-card);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      align-items: stretch;
      cursor: pointer;
      transition: box-shadow .2s, transform .12s;
      position: relative;
    }

    .menu-card:hover {
      box-shadow: var(--shadow-lg);
    }

    .menu-card:active {
      transform: scale(.99);
    }

    .menu-card.unavailable {
      opacity: .5;
      cursor: default;
    }

    .menu-card-body {
      flex: 1;
      padding: .85rem 1rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
    }

    .menu-card-name {
      font-weight: 600;
      font-size: .93rem;
      color: var(--text);
      margin-bottom: .2rem;
    }

    .menu-card-desc {
      font-size: .75rem;
      color: var(--muted);
      margin-bottom: .55rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .menu-card-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin-bottom: .4rem;
    }

    .ab-dietary,
    .ab-allergen {
      font-size: .72rem;
      border-radius: 4px;
      padding: 1px 4px;
      cursor: default;
    }

    .ab-dietary {
      background: #d1e7dd;
    }

    .ab-allergen {
      background: #fff3cd;
    }

    .menu-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .menu-card-price {
      font-weight: 700;
      font-size: .98rem;
      color: var(--accent);
    }


    /* A menu image must remain a compact thumbnail.  A width alone lets a
       portrait source image set the entire card height on mobile. */
    .menu-card-photo,
    .menu-card-photo-ph {
      width: 92px;
      height: 92px;
      min-height: 0;
      flex: 0 0 92px;
      align-self: center;
    }

    .menu-card-photo {
      display: block;
      object-fit: cover;
      cursor: zoom-in;
    }

    .menu-card-photo-ph {
      background: linear-gradient(135deg, var(--accent-lt), #ede0cc);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.65rem;
    }

    .image-preview-overlay {
      position: fixed;
      inset: 0;
      z-index: 1500;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
    }

    .image-preview-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .image-preview-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(17, 12, 8, .82);
    }

    .image-preview-dialog {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr);
      width: min(94vw, 1080px);
      height: min(88vh, 760px);
      max-height: min(88vh, 760px);
      grid-template-rows: minmax(0, 1fr);
      margin: 6vh auto;
      padding: 0;
      overflow: hidden;
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
    }

    .image-preview-media {
      position: relative;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: .65rem;
      padding: 1rem;
      background: var(--bg);
    }

    .image-preview-media picture {
      display: flex;
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      min-height: 0;
      align-items: center;
      justify-content: center;
    }

    .image-preview-nav {
      position: absolute;
      top: 50%;
      z-index: 3;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,.9);
      color: var(--accent);
      box-shadow: 0 3px 14px rgba(0,0,0,.16);
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
    }
    .image-preview-nav.prev { left: 1.15rem; }
    .image-preview-nav.next { right: 1.15rem; }

    .image-preview-thumbs {
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      gap: .45rem;
      max-width: 100%;
      overflow-x: auto;
      padding: .15rem .1rem .1rem;
      scrollbar-width: thin;
    }
    .image-preview-thumbs.d-none { display: none !important; }
    .image-preview-thumb {
      flex: 0 0 62px;
      width: 62px;
      height: 52px;
      padding: 2px;
      border: 2px solid transparent;
      border-radius: 9px;
      background: #fff;
      cursor: pointer;
      overflow: hidden;
    }
    .image-preview-thumb.active { border-color: var(--accent); }
    .image-preview-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }

    .image-preview-full {
      display: block;
      width: 100%;
      height: 100%;
      max-height: calc(min(88vh, 760px) - 2rem);
      object-fit: contain;
      border-radius: 14px;
      background: var(--bg);
    }

    .image-preview-caption {
      min-width: 0;
      min-height: 0;
      height: 100%;
      max-height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      display: flex;
      flex-direction: column;
      padding: 1.5rem 1.4rem 1.25rem;
      text-align: left;
      color: var(--text);
      background: #fff;
    }

    .image-preview-eyebrow {
      color: var(--muted);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: .45rem;
    }

    .image-preview-title {
      font-family: var(--font-d);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      line-height: 1.05;
      color: var(--accent);
      margin: 0 0 .35rem;
    }

    .image-preview-price {
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--accent);
      margin-bottom: .8rem;
    }

    .image-preview-description {
      color: var(--muted);
      font-size: .94rem;
      line-height: 1.58;
      white-space: normal;
      margin-bottom: 1rem;
      overflow-wrap: anywhere;
    }
    .image-preview-description > :first-child { margin-top: 0; }
    .image-preview-description > :last-child { margin-bottom: 0; }
    .image-preview-description p { margin: 0 0 .8em; }
    .image-preview-description ul, .image-preview-description ol { padding-left: 1.25rem; margin: .4rem 0 .8rem; }
    .image-preview-description blockquote { margin: .65rem 0; padding-left: .8rem; border-left: 3px solid var(--border); }

    .product-preview-guidance {
      flex: 0 0 auto;
      min-height: 0;
      margin: 0 0 1rem;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--bg);
      overflow: hidden;
    }
    .product-preview-guidance.d-none { display: none !important; }
    .product-preview-guidance summary {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .8rem .9rem;
      color: var(--accent);
      font-weight: 750;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }
    .product-preview-guidance summary::-webkit-details-marker { display: none; }
    .product-preview-guidance summary::after {
      content: '+';
      margin-left: auto;
      font-size: 1.15rem;
      line-height: 1;
    }
    .product-preview-guidance[open] summary::after { content: '−'; }
    .product-preview-guidance-body {
      padding: 0 .9rem .9rem;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.5;
    }
    .product-preview-guidance[open] .product-preview-guidance-body {
      max-height: min(36vh, 330px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-gutter: stable;
    }
    .product-preview-guidance[open] .product-preview-guidance-body::-webkit-scrollbar { width: 8px; }
    .product-preview-guidance[open] .product-preview-guidance-body::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(47, 85, 62, .35);
    }
    .product-guidance-section { padding-top: .7rem; border-top: 1px solid var(--border); }
    .product-guidance-section + .product-guidance-section { margin-top: .8rem; }
    .product-guidance-section h3 {
      margin: 0 0 .3rem;
      color: var(--text);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    .product-guidance-section.is-warning {
      margin-left: -.2rem;
      margin-right: -.2rem;
      padding: .7rem .7rem 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
    }

    .image-preview-actions {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: .7rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      background: #fff;
    }

    .image-preview-actions .btn-product-add,
    .image-preview-actions .btn-product-cart {
      width: 100%;
      border: 0;
      border-radius: 999px;
      padding: .82rem 1rem;
      font: inherit;
      font-weight: 750;
      cursor: pointer;
    }

    .image-preview-actions .btn-product-add {
      background: var(--accent);
      color: #fff;
    }

    .image-preview-actions .btn-product-cart {
      background: var(--accent-lt);
      color: var(--accent);
    }

    .image-preview-cart-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
    }

    .image-preview-cart-label {
      font-size: .82rem;
      font-weight: 700;
      color: var(--muted);
    }

    .image-preview-actions .qty-ctrl {
      margin-left: auto;
    }

    .image-preview-close {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 0;
      background: rgba(17, 12, 8, .8);
      color: #fff;
      font-size: 1.8rem;
      line-height: 1;
      cursor: pointer;
    }

    .unavail-tag {
      font-size: .7rem;
      color: #dc3545;
      font-weight: 500;
    }

    /* Qty controls */
    .qty-ctrl {
      display: flex;
      align-items: center;
      gap: .3rem;
      background: var(--accent-lt);
      border-radius: 20px;
      padding: .18rem .18rem .18rem .5rem;
    }

    .qty-num {
      font-weight: 700;
      font-size: .88rem;
      min-width: 1.3rem;
      text-align: center;
      color: var(--text);
    }

    .qty-btn {
      width: 27px;
      height: 27px;
      border-radius: 50%;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform .1s;
    }

    .qty-btn:active {
      transform: scale(.88);
    }

    .btn-add {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid var(--accent);
      background: transparent;
      color: var(--accent);
      font-size: 1.3rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .15s, color .15s, transform .1s;
    }

    .btn-add:active {
      transform: scale(.88);
      background: var(--accent);
      color: #fff;
    }

    /* ── CART FAB ── */
    .cart-fab {
      position: fixed;
      z-index: 200;
      left: 50%;
      bottom: calc(.75rem + env(safe-area-inset-bottom));
      width: min(calc(100vw - 1.5rem), 720px);
      min-height: 56px;
      transform: translateX(-50%);
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 16px;
      padding: .8rem 1rem;
      font-family: var(--font-b);
      font-size: .98rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      box-shadow: 0 8px 24px rgba(200, 131, 42, .42);
      white-space: nowrap;
      transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
    }

    .cart-fab.hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(calc(100% + 2rem));
    }

    /* Do not leave the floating cart/reservation action visually trapped
       beneath an open modal. It is restored when the modal closes. */
    body.cart-sheet-open .cart-fab {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(calc(100% + 2rem));
    }

    .cart-fab:active {
      transform: translateX(-50%) scale(.98);
    }

    .cart-fab-badge {
      background: rgba(255, 255, 255, .25);
      border-radius: 50%;
      width: 24px;
      height: 24px;
      font-size: .76rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── SHEET BACKDROP ── */
    .sheet-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(28, 20, 8, .5);
      z-index: 299;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
      backdrop-filter: blur(2px);
    }

    .sheet-backdrop.open {
      opacity: 1;
      pointer-events: all;
    }

    /* ── CART BOTTOM SHEET ── */
    .cart-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 300;
      background: var(--bg-card);
      border-radius: var(--r) var(--r) 0 0;
      box-shadow: 0 -8px 40px rgba(28, 20, 8, .18);
      transform: translateY(100%);
      transition: transform .35s cubic-bezier(.32, .72, 0, 1);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* The active sheet view must participate in the sheet flex layout.
       Without this, the reservation form expands the view past the modal
       boundary and the footer becomes unreachable even though .sheet-body
       itself has overflow-y enabled. */
    #view-cart,
    #view-pay {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .cart-sheet.open {
      transform: translateY(0);
    }

    .sheet-handle {
      width: 36px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin: .75rem auto .5rem;
      flex-shrink: 0;
    }

    .sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .25rem 1.25rem .75rem;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border);
    }

    .sheet-title {
      font-family: var(--font-d);
      font-size: 1.2rem;
    }

    .sheet-close {
      background: var(--pill-bg);
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      transition: background .15s;
    }

    .sheet-close:hover {
      background: var(--border);
    }

    .sheet-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: .75rem 1.25rem;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .sheet-empty {
      text-align: center;
      color: var(--muted);
      padding: 2rem 1rem;
      font-size: .9rem;
    }

    /* Cart item rows */
    .cart-item {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      padding: .65rem 0;
      border-bottom: 1px solid var(--border);
    }

    .cart-item:last-of-type {
      border: none;
    }

    .cart-item-info {
      flex: 1;
      min-width: 0;
    }

    .cart-item-name {
      font-weight: 500;
      font-size: .9rem;
    }

    .cart-item-unit {
      font-size: .78rem;
      color: var(--muted);
      margin-top: 1px;
    }

    .cart-item-notes-inp {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: .35rem .6rem;
      font-family: var(--font-b);
      font-size: .75rem;
      background: var(--bg);
      color: var(--text);
      margin-top: .4rem;
      resize: none;
    }

    .cart-item-notes-inp:focus {
      outline: none;
      border-color: var(--accent);
    }

    /* Kitchen notes toggle */
    .notes-accordion {
      margin-top: .9rem;
    }

    .notes-toggle {
      background: none;
      border: none;
      color: var(--muted);
      font-family: var(--font-b);
      font-size: .82rem;
      cursor: pointer;
      padding: .2rem 0;
      display: flex;
      align-items: center;
      gap: .35rem;
    }

    .notes-body {
      display: none;
      margin-top: .45rem;
    }

    .notes-body.open {
      display: block;
    }

    .notes-textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: .5rem .75rem;
      font-family: var(--font-b);
      font-size: .85rem;
      background: var(--bg);
      color: var(--text);
      resize: none;
    }

    .notes-textarea:focus {
      outline: none;
      border-color: var(--accent);
    }

    .sheet-footer {
      padding: .8rem 1.25rem;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }

    /* On desktop this checkout behaves as a contained modal rather than a
       nearly full-screen bottom sheet. The body is the only scrolling region,
       so the title, close button, totals, and primary action remain reachable. */
    @media (min-width: 900px) {
      .cart-sheet {
        left: 50%;
        right: auto;
        bottom: 50%;
        width: min(720px, calc(100vw - 64px));
        height: min(76vh, 680px);
        max-height: min(76vh, 680px);
        border-radius: var(--r);
        transform: translate(-50%, calc(50% + 110vh));
        padding-bottom: 0;
      }

      .cart-sheet.open {
        transform: translate(-50%, 50%);
      }

      .sheet-handle {
        margin-top: .55rem;
      }

      .sheet-body {
        min-height: 0;
        overflow-y: scroll;
        scrollbar-gutter: stable;
        padding-right: 1rem;
      }
    }

    .sheet-total-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .7rem;
    }

    .sheet-total-label {
      color: var(--muted);
      font-size: .9rem;
    }

    .sheet-total-amount {
      font-weight: 700;
      font-size: 1.2rem;
    }

    .btn-place-order {
      width: 100%;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: var(--r);
      padding: .88rem;
      font-family: var(--font-b);
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, transform .1s;
    }

    .btn-place-order:disabled {
      background: #c8a87a;
      cursor: default;
    }

    .btn-place-order:not(:disabled):active {
      transform: scale(.98);
    }

    /* Payment sheet */
    .pay-sheet {
      padding: .75rem 1.25rem;
    }

    .pay-confirm {
      background: #f0faf2;
      border: 1px solid #a8ddb5;
      border-radius: var(--r-sm);
      padding: .75rem 1rem;
      font-size: .85rem;
      color: #1a5e2a;
      margin-bottom: 1rem;
    }

    .pay-option {
      display: flex;
      align-items: center;
      gap: .75rem;
      background: var(--bg);
      border: 2px solid var(--border);
      border-radius: var(--r);
      padding: .9rem 1rem;
      font-family: var(--font-b);
      font-size: .92rem;
      font-weight: 500;
      cursor: pointer;
      width: 100%;
      margin-bottom: .6rem;
      transition: border-color .15s, background .15s;
    }

    .pay-option:hover {
      border-color: var(--accent);
      background: var(--accent-lt);
    }

    .pay-icon {
      font-size: 1.5rem;
    }

    .pay-sub {
      font-size: .73rem;
      color: var(--muted);
    }

    .payment-method-options { display:grid;gap:.6rem; }
    .payment-manual-panel {
      margin-top:.85rem;padding:1rem;border:1px solid var(--border);border-radius:var(--r);
      background:rgba(255,255,255,.72);
    }
    .payment-manual-panel[hidden] { display:none !important; }
    .payment-manual-title { font-family:var(--font-d);font-size:1.35rem;font-weight:700;margin-bottom:.35rem;color:var(--text); }
    .payment-manual-account { display:grid;gap:.28rem;padding:.75rem .85rem;border-radius:12px;background:var(--accent-lt);margin:.75rem 0; }
    .payment-manual-account-row { display:flex;justify-content:space-between;gap:1rem;align-items:baseline; }
    .payment-manual-account-row span:first-child { color:var(--muted);font-size:.78rem; }
    .payment-manual-account-row strong { text-align:right;word-break:break-word; }
    .payment-manual-steps { margin:.65rem 0 .85rem;padding-left:1.25rem;color:var(--text);font-size:.86rem;line-height:1.55; }
    .payment-proof-grid { display:grid;gap:.6rem; }
    .payment-proof-grid input[type="text"], .payment-proof-grid input[type="file"] { width:100%;border:1px solid var(--border);border-radius:12px;padding:.68rem .8rem;background:#fff;font:inherit; }
    .payment-proof-drop { border:2px dashed var(--border);border-radius:14px;padding:.8rem;text-align:center;color:var(--muted);font-size:.8rem;cursor:pointer;background:rgba(255,255,255,.58); }
    .payment-proof-drop.is-dragover { border-color:var(--accent);background:var(--accent-lt); }
    .payment-proof-status { font-size:.8rem;margin-top:.45rem;color:var(--muted); }
    .payment-proof-status.is-success { color:#0f5132; }
    .payment-proof-status.is-error { color:#842029; }
    .btn-submit-payment-proof { width:100%;border:0;border-radius:13px;padding:.78rem 1rem;background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer; }

    .btn-add-more {
      background: none;
      border: none;
      color: var(--accent);
      font-family: var(--font-b);
      font-size: .85rem;
      cursor: pointer;
      padding: .4rem 0;
      display: flex;
      align-items: center;
      gap: .35rem;
    }

    /* ── CALL WAITER SHEET ── */
    .waiter-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(28, 20, 8, .6);
      z-index: 400;
      display: none;
      align-items: flex-end;
      backdrop-filter: blur(3px);
    }

    .waiter-backdrop.open {
      display: flex;
    }

    .waiter-sheet {
      background: var(--bg-card);
      border-radius: var(--r) var(--r) 0 0;
      width: 100%;
      padding: 1.5rem 1.25rem;
      padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
      animation: slideUp .3s cubic-bezier(.32, .72, 0, 1);
    }

    @keyframes slideUp {
      from {
        transform: translateY(100%);
      }

      to {
        transform: translateY(0);
      }
    }

    .waiter-title {
      font-family: var(--font-d);
      font-size: 1.3rem;
      text-align: center;
      margin-bottom: 1.25rem;
    }

    .waiter-options {
      display: flex;
      flex-direction: column;
      gap: .6rem;
      margin-bottom: .75rem;
    }

    .waiter-opt {
      display: flex;
      align-items: center;
      gap: .75rem;
      background: var(--bg);
      border: 2px solid transparent;
      border-radius: var(--r);
      padding: .88rem 1rem;
      font-family: var(--font-b);
      font-size: .93rem;
      font-weight: 500;
      cursor: pointer;
      transition: border-color .15s, background .15s;
      text-align: left;
      width: 100%;
    }

    .waiter-opt.selected {
      border-color: var(--accent);
      background: var(--accent-lt);
    }

    .waiter-opt:active {
      transform: scale(.99);
    }

    .waiter-opt-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
    }

    .waiter-opt-sub {
      font-size: .75rem;
      color: var(--muted);
      margin-top: 1px;
    }

    .waiter-note-wrap {
      display: none;
      margin-bottom: .75rem;
    }

    .waiter-note-wrap.show {
      display: block;
    }

    .waiter-note {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: .6rem .75rem;
      font-family: var(--font-b);
      font-size: .9rem;
      background: var(--bg);
      color: var(--text);
      resize: none;
    }

    .waiter-note:focus {
      outline: none;
      border-color: var(--accent);
    }

    .waiter-actions {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: .6rem;
    }

    .btn-w-cancel {
      background: var(--pill-bg);
      border: none;
      border-radius: var(--r);
      padding: .8rem;
      font-family: var(--font-b);
      font-size: .9rem;
      color: var(--muted);
      cursor: pointer;
    }

    .btn-w-send {
      background: var(--header-bg);
      color: #fff;
      border: none;
      border-radius: var(--r);
      padding: .8rem;
      font-family: var(--font-b);
      font-size: .95rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      transition: background .15s;
    }

    .btn-w-send:disabled {
      background: #7a6a52;
      cursor: default;
    }

    .waiter-sent {
      text-align: center;
      padding: 1.25rem .5rem;
    }

    .waiter-sent-icon {
      font-size: 3rem;
      margin-bottom: .6rem;
    }

    .waiter-sent-title {
      font-family: var(--font-d);
      font-size: 1.25rem;
      margin-bottom: .35rem;
    }

    .waiter-sent-sub {
      color: var(--muted);
      font-size: .85rem;
      margin-bottom: 1.25rem;
    }

    .btn-w-done {
      width: 100%;
      background: var(--pill-bg);
      border: none;
      border-radius: var(--r);
      padding: .8rem;
      font-family: var(--font-b);
      font-size: .95rem;
      color: var(--text);
      cursor: pointer;
    }

    /* ── STATUS OVERLAY ── */
    #status-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 500;
      overflow-y: auto;
    }

    #status-overlay.show {
      display: block;
    }

    .status-top {
      background: var(--header-bg);
      padding: 1.5rem 1.25rem 2rem;
      padding-top: max(1.5rem, env(safe-area-inset-top));
      text-align: center;
      color: var(--header-text);
    }

    .status-eyebrow {
      font-size: .75rem;
      opacity: .55;
      margin-bottom: .3rem;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .status-code {
      font-family: var(--font-d);
      font-size: 2rem;
      letter-spacing: .04em;
    }

    .status-table {
      font-size: .8rem;
      opacity: .55;
      margin-top: .3rem;
    }

    .status-body {
      padding: 1.25rem;
      margin-top: -1rem;
    }

    .status-card {
      background: var(--bg-card);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      padding: 1.25rem;
      margin-bottom: 1rem;
    }

    .status-badge-row {
      text-align: center;
      margin-bottom: 1rem;
    }

    .status-badge {
      display: inline-block;
      padding: .45rem 1.4rem;
      border-radius: 30px;
      font-weight: 600;
      font-size: .95rem;
    }

    .status-progress {
      display: flex;
      gap: 6px;
      margin-bottom: .5rem;
    }

    .bar-step {
      flex: 1;
      height: 8px;
      background: var(--border);
      border-radius: 4px;
      transition: background .4s;
    }

    .bar-step.done {
      background: #198754;
    }

    .bar-step.active {
      background: var(--accent);
    }

    .step-labels {
      display: flex;
      margin-bottom: 1rem;
    }

    .step-lbl {
      flex: 1;
      font-size: .65rem;
      color: var(--muted);
      text-align: center;
    }

    .step-lbl.active {
      color: var(--accent);
      font-weight: 600;
    }

    .step-lbl.done {
      color: #198754;
    }

    .msgs-heading {
      font-size: .75rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: .75rem;
    }

    .msg-row {
      display: flex;
      gap: .6rem;
      margin-bottom: .65rem;
    }

    .msg-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 4px;
      flex-shrink: 0;
    }

    .msg-dot.system {
      background: #6c757d;
    }

    .msg-dot.kitchen {
      background: var(--accent);
    }

    .msg-dot.customer {
      background: #198754;
    }

    .msg-sender {
      font-size: .73rem;
      font-weight: 600;
      color: var(--muted);
    }

    .msg-text {
      font-size: .87rem;
      color: var(--text);
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .msg-text a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .msg-time {
      font-size: .66rem;
      color: #aaa;
      margin-top: 1px;
    }

    .tracker-updated {
      font-size: .75rem;
      color: var(--muted);
      margin-top: .5rem;
    }

    .tracker-empty {
      font-size: .85rem;
      color: var(--muted);
    }

    .tracker-reconnect {
      display: none;
      margin-top: .85rem;
      padding: .8rem .9rem;
      border-radius: var(--r-sm);
      background: var(--accent-lt);
      color: var(--text);
      font-size: .85rem;
    }

    .tracker-reconnect.show {
      display: block;
    }

    .tracker-reconnect .btn-reconnect-order {
      margin-top: .65rem;
      border: none;
      background: var(--accent);
      color: #fff;
      border-radius: 999px;
      padding: .55rem .9rem;
      font-weight: 600;
      cursor: pointer;
    }

    .msg-compose {
      margin-top: .85rem;
      padding-top: .85rem;
      border-top: 1px solid var(--border);
    }

    .msg-compose-label {
      font-size: .75rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: .45rem;
    }

    .msg-compose textarea {
      width: 100%;
      min-height: 74px;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: .75rem .85rem;
      font: inherit;
      color: var(--text);
      background: #fff;
      resize: vertical;
    }

    .msg-compose-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .75rem;
      margin-top: .6rem;
    }

    .msg-compose-hint {
      font-size: .74rem;
      color: var(--muted);
    }

    .btn-send-update {
      border: none;
      background: var(--accent);
      color: #fff;
      border-radius: 999px;
      padding: .62rem 1rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-send-update:disabled {
      opacity: .6;
      cursor: default;
    }

    .btn-back-menu {
      width: 100%;
      background: var(--accent-lt);
      border: none;
      border-radius: var(--r);
      padding: .88rem;
      font-family: var(--font-b);
      font-size: .95rem;
      font-weight: 600;
      color: var(--accent);
      cursor: pointer;
    }

    .btn-back-menu:hover {
      background: #ecd5b0;
    }


    .reservation-self-service {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    .reservation-self-service-title {
      font-weight: 700;
      margin-bottom: .35rem;
      color: var(--text);
    }

    .reservation-self-service-note {
      color: var(--muted);
      font-size: .82rem;
      margin-bottom: .65rem;
    }

    .reservation-self-service-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: .55rem;
    }

    .reservation-self-service-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-top: .65rem;
    }

    .reservation-self-service-actions button {
      border: none;
      border-radius: 999px;
      padding: .58rem .9rem;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    .reservation-self-service-actions .primary {
      background: var(--accent);
      color: #fff;
    }

    .reservation-self-service-actions .danger {
      background: #fff2f2;
      color: #b42318;
      border: 1px solid #f1b8b1;
    }

    .reservation-lookup-result {
      display: none;
      margin-top: .75rem;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      border-radius: var(--r-sm);
      padding: .8rem .9rem;
      font-size: .86rem;
      line-height: 1.45;
    }

    .reservation-lookup-result.show {
      display: block;
    }

    .reservation-detail-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: .35rem;
      margin-top: .5rem;
    }

    .reservation-detail-list strong {
      color: var(--text);
    }

    .reservation-summary-card {
      display: none;
    }

    .reservation-summary-card.show {
      display: block;
    }

    .reservation-summary-line {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      border-bottom: 1px solid var(--border);
      padding: .55rem 0;
      font-size: .9rem;
    }

    .reservation-summary-line:last-child {
      border-bottom: 0;
    }

    .reservation-summary-line span {
      color: var(--muted);
    }

    .reservation-summary-line strong {
      text-align: right;
    }


    /* ── LOADING / TOAST ── */
    .menu-loading {
      text-align: center;
      padding: 3rem 1rem;
      color: var(--muted);
    }

    .spinner {
      width: 32px;
      height: 32px;
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .7s linear infinite;
      margin: 0 auto .75rem;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .toast-wrap {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 600;
      pointer-events: none;
    }

    .toast-msg {
      background: var(--header-bg);
      color: var(--header-text);
      border-radius: 20px;
      padding: .55rem 1.2rem;
      font-size: .82rem;
      font-weight: 500;
      white-space: nowrap;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .25s, transform .25s;
    }

    .toast-msg.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── LOYALTY PANEL ── */
    .loyalty-section {
      margin-top: .9rem;
      border-top: 1px solid var(--border);
      padding-top: .9rem;
    }

    .loyalty-toggle {
      background: none;
      border: none;
      color: var(--muted);
      font-family: var(--font-b);
      font-size: .82rem;
      cursor: pointer;
      padding: .2rem 0;
      display: flex;
      align-items: center;
      gap: .35rem;
      width: 100%;
    }

    .loyalty-toggle .loyalty-badge-inline {
      margin-left: auto;
      font-size: .72rem;
      background: var(--accent-lt);
      color: var(--accent);
      border-radius: 10px;
      padding: 1px 7px;
      font-weight: 600;
    }

    .loyalty-body {
      display: none;
      margin-top: .55rem;
    }

    .loyalty-body.open {
      display: block;
    }

    .loyalty-phone-row {
      display: flex;
      gap: .4rem;
    }

    .loyalty-phone-inp {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: .5rem .75rem;
      font-family: var(--font-b);
      font-size: .87rem;
      background: var(--bg);
      color: var(--text);
      min-width: 0;
    }

    .loyalty-phone-inp:focus {
      outline: none;
      border-color: var(--accent);
    }

    .btn-loyalty-check {
      background: var(--header-bg);
      color: var(--header-text);
      border: none;
      border-radius: var(--r-sm);
      padding: .5rem .9rem;
      font-family: var(--font-b);
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: opacity .15s;
    }

    .btn-loyalty-check:disabled {
      opacity: .5;
      cursor: default;
    }

    .loyalty-result {
      margin-top: .65rem;
    }

    .loyalty-greeting {
      font-size: .83rem;
      font-weight: 600;
      margin-bottom: .5rem;
    }

    .loyalty-points-chip {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      background: var(--accent-lt);
      color: var(--accent);
      border-radius: 20px;
      padding: .2rem .8rem;
      font-size: .78rem;
      font-weight: 700;
      margin-bottom: .6rem;
    }

    .loyalty-rewards-label {
      font-size: .72rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      font-weight: 600;
      margin-bottom: .4rem;
    }

    .loyalty-reward-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      padding: .6rem .8rem;
      margin-bottom: .4rem;
      gap: .6rem;
      transition: border-color .15s;
    }

    .loyalty-reward-card.selected {
      border-color: var(--accent);
      background: var(--accent-lt);
    }

    .loyalty-reward-name {
      font-size: .85rem;
      font-weight: 500;
      flex: 1;
    }

    .loyalty-reward-pts {
      font-size: .74rem;
      color: var(--muted);
      margin-top: 1px;
    }

    .btn-use-reward {
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: .28rem .8rem;
      font-family: var(--font-b);
      font-size: .76rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background .15s;
    }

    .btn-use-reward.active {
      background: #dc3545;
    }

    .loyalty-no-rewards {
      font-size: .8rem;
      color: var(--muted);
      padding: .3rem 0;
    }

    .loyalty-not-found {
      font-size: .82rem;
      color: var(--muted);
      padding: .3rem 0;
    }

    .sheet-discount-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .35rem;
    }

    .sheet-discount-label {
      color: #198754;
      font-size: .85rem;
      display: flex;
      align-items: center;
      gap: .3rem;
    }

    .sheet-discount-amount {
      color: #198754;
      font-weight: 600;
      font-size: .9rem;
    }

    /* Phone-first cards: keep every item short, scannable, and thumb-led. */
    @media (max-width: 640px) {
      .online-order-intro {
        padding: .65rem .75rem 0;
      }

      .online-order-card {
        padding: .85rem .9rem;
        border-radius: 16px;
      }

      .online-order-copy {
        font-size: .9rem;
      }

      .online-order-actions {
        margin-top: .65rem;
      }

      .online-order-action {
        flex: 1 1 auto;
      }

      .menu-main {
        padding: .75rem .75rem 132px;
      }

      .cat-section {
        margin-bottom: 1.65rem;
        scroll-margin-top: 108px;
      }

      .menu-grid {
        gap: .55rem;
      }

      .menu-card {
        border-radius: 14px;
      }

      .menu-card-body {
        min-height: 84px;
        padding: .7rem .8rem;
      }

      .menu-card-photo,
      .menu-card-photo-ph {
        width: 80px;
        height: 80px;
        flex-basis: 80px;
      }

      .menu-card-photo-ph {
        font-size: 1.45rem;
      }
    }

    @media (max-width: 760px) {
      .image-preview-dialog {
        display: block;
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
        margin: 8px auto;
        overflow-y: auto;
        border-radius: 18px;
      }

      .image-preview-media {
        height: min(46dvh, 390px);
        padding: .75rem;
      }

      .image-preview-full {
        width: 100%;
        height: 100%;
        max-height: none;
      }

      .image-preview-caption {
        overflow: visible;
        padding: 1rem 1rem 1.1rem;
      }

      .image-preview-actions {
        position: sticky;
        bottom: 0;
        margin: 0 -.2rem -.1rem;
        padding: .85rem .2rem .1rem;
      }
    }


    .pickup-badge {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      background: rgba(200, 131, 42, .18);
      border: 1px solid rgba(200, 131, 42, .35);
      color: var(--accent);
      border-radius: 12px;
      padding: .2rem .7rem;
      font-size: .75rem;
      font-weight: 600;
      margin-top: 2px;
    }

    .pickup-form-section {
      margin-top: .9rem;
      border-top: 1px solid var(--border);
      padding-top: .9rem;
    }

    .pickup-form-title {
      font-weight: 600;
      font-size: .88rem;
      margin-bottom: .7rem;
      display: flex;
      align-items: center;
      gap: .4rem;
    }

    .pickup-field {
      margin-bottom: .65rem;
    }

    .pickup-field label {
      display: block;
      font-size: .75rem;
      color: var(--muted);
      margin-bottom: .25rem;
      font-weight: 500;
    }

    .pickup-input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: .55rem .75rem;
      font-family: var(--font-b);
      font-size: .9rem;
      background: var(--bg);
      color: var(--text);
      transition: border-color .15s;
    }

    .pickup-input:focus {
      outline: none;
      border-color: var(--accent);
    }

    .pickup-input.error {
      border-color: #dc3545;
    }

    .fulfillment-choice {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .45rem;
    }

    .fulfillment-option {
      min-height: 44px;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      background: var(--bg);
      color: var(--text);
      font: inherit;
      font-size: .86rem;
      font-weight: 650;
      cursor: pointer;
    }

    .fulfillment-option.active {
      border-color: var(--accent);
      background: var(--accent-lt);
      color: var(--text);
    }

    .fulfillment-note {
      margin-top: .3rem;
      color: var(--muted);
      font-size: .72rem;
      line-height: 1.4;
    }

    .order-mode-picker {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(185, 135, 65, 0.22);
    }

    .order-mode-picker-label {
      display: block;
      margin-bottom: 10px;
      font-size: 0.92rem;
      font-weight: 700;
      color: #5f4d35;
    }

    .order-mode-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .order-mode-option {
      border: 1px solid #e1ceb0;
      border-radius: 999px;
      background: #fffaf2;
      color: #3f2d18;
      padding: 10px 17px;
      min-height: 44px;
      font-weight: 700;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }

    .order-mode-option:hover:not(:disabled),
    .order-mode-option:focus-visible {
      border-color: #d38a23;
      outline: none;
    }

    .order-mode-option.active {
      background: #d38a23;
      border-color: #d38a23;
      color: #fff;
    }

    .order-mode-option:disabled {
      cursor: not-allowed;
      opacity: .5;
    }

    .order-mode-hint {
      margin-top: 9px;
      font-size: .86rem;
      color: #806b50;
    }

    .order-account-panel {
      display: none;
    }

    .order-account-panel.show {
      display: block;
    }

    .order-account-copy {
      font-size: .82rem;
      color: var(--muted);
      margin-bottom: .75rem;
      line-height: 1.5;
    }

    .order-account-status {
      margin-bottom: .75rem;
      border-radius: 14px;
      padding: .7rem .85rem;
      font-size: .82rem;
      display: none;
      background: rgba(97, 76, 48, .08);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .order-account-status.show {
      display: block;
    }

    .order-account-status.is-error {
      background: rgba(220, 53, 69, .1);
      color: #842029;
      border-color: rgba(220, 53, 69, .25);
    }

    .order-account-status.is-success {
      background: rgba(25, 135, 84, .1);
      color: #0f5132;
      border-color: rgba(25, 135, 84, .2);
    }

    .order-account-grid {
      display: grid;
      gap: .75rem;
    }

    .order-account-block {
      background: rgba(255, 255, 255, .72);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: .85rem;
    }

    .order-account-block-title {
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
      margin-bottom: .6rem;
    }

    .order-account-inline,
    .order-account-register-grid {
      display: grid;
      gap: .55rem;
    }

    .order-account-register-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-bottom: .55rem;
    }

    .order-account-inline .pickup-input,
    .order-account-register-grid .pickup-input {
      margin: 0;
    }

    .order-account-action {
      width: 100%;
      border: 0;
      border-radius: 14px;
      padding: .72rem .95rem;
      background: var(--accent);
      color: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    .order-account-action.secondary {
      background: rgba(255, 255, 255, .8);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .order-account-small {
      display: block;
      margin-top: .45rem;
      color: var(--muted);
      font-size: .78rem;
      line-height: 1.45;
    }

    .order-account-signed-in {
      display: grid;
      gap: .65rem;
      align-items: center;
    }

    .order-account-summary {
      background: rgba(255, 255, 255, .72);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: .9rem 1rem;
    }

    .order-account-summary strong {
      display: block;
      margin-bottom: .2rem;
    }

    .order-account-summary span {
      color: var(--muted);
      font-size: .82rem;
    }

    .order-account-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
    }

    .order-account-link {
      color: var(--accent);
      text-decoration: none;
      font-weight: 700;
    }

    .order-account-small a,
    .order-account-forgot-link {
      color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(47,73,56,.35);
    }
    .order-account-small a:hover,
    .order-account-forgot-link:hover { border-bottom-color:var(--accent); }
    .checkout-phone-control.iti { width:100%;display:block; }
    .checkout-phone-control .iti__country-container { border-right:1px solid var(--border); }
    .checkout-phone-control .iti__selected-country { padding:0 .65rem; }
    .checkout-phone-control input { width:100% !important; }

    @media (min-width: 780px) {
      .order-account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .order-account-inline {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
      }
    }

    @media (max-width: 640px) {
      .order-account-register-grid {
        grid-template-columns: 1fr;
      }

      .order-account-actions {
        flex-direction: column;
      }

      .order-account-action {
        width: 100%;
      }
    }

    /* Pickup/reservation times stay compact in the checkout form. The actual
       choices open in a floating popover instead of consuming most of the
       cart modal with an always-expanded wall of time pills. */
    .pickup-time-trigger {
      width: 100%;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: .55rem .75rem;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-b);
      font-size: .9rem;
      cursor: pointer;
      text-align: left;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }

    .pickup-time-trigger:hover:not(:disabled),
    .pickup-time-trigger:focus-visible,
    .pickup-time-trigger[aria-expanded="true"] {
      border-color: var(--accent);
      outline: none;
      box-shadow: 0 0 0 3px rgba(200, 131, 42, .12);
    }

    .pickup-time-trigger:disabled {
      cursor: not-allowed;
      opacity: .62;
    }

    .pickup-time-trigger-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: .55rem;
    }

    .pickup-time-trigger-main i {
      color: var(--accent);
      flex: 0 0 auto;
    }

    .pickup-time-value {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 600;
    }

    .pickup-time-chevron {
      flex: 0 0 auto;
      color: var(--muted);
      transition: transform .15s ease;
    }

    .pickup-time-trigger[aria-expanded="true"] .pickup-time-chevron {
      transform: rotate(180deg);
    }

    .pickup-time-popover {
      position: fixed;
      z-index: 390;
      display: none;
      width: min(520px, calc(100vw - 24px));
      max-height: min(320px, calc(100vh - 24px));
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--bg-card);
      box-shadow: 0 16px 44px rgba(28, 20, 8, .24);
    }

    .pickup-time-popover.open {
      display: flex;
      flex-direction: column;
    }

    .pickup-time-popover-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding: .72rem .85rem;
      border-bottom: 1px solid var(--border);
      flex: 0 0 auto;
    }

    .pickup-time-popover-title {
      font-weight: 700;
      font-size: .86rem;
    }

    .pickup-time-popover-close {
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 50%;
      background: var(--pill-bg);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .slot-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: .45rem;
      padding: .8rem;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .slot-btn {
      min-height: 39px;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: .42rem .55rem;
      font-family: var(--font-b);
      font-size: .8rem;
      font-weight: 600;
      background: var(--bg);
      color: var(--text);
      cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
    }

    .slot-btn:hover,
    .slot-btn:focus-visible {
      border-color: var(--accent);
      outline: none;
    }

    .slot-btn.selected {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
    }

    .slot-btn:active {
      transform: scale(.97);
    }

    .slot-empty {
      grid-column: 1 / -1;
      font-size: .82rem;
      color: var(--muted);
      padding: .7rem .25rem;
      text-align: center;
    }

    @media (max-width: 640px) {
      .pickup-time-popover {
        width: calc(100vw - 20px);
        max-height: min(300px, 46vh);
        border-radius: 16px;
      }

      .slot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .image-preview-dialog {
        display: block;
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
        margin: 8px auto;
        overflow-y: auto;
        border-radius: 18px;
      }

      .image-preview-media {
        height: min(46dvh, 390px);
        padding: .75rem;
      }

      .image-preview-full {
        width: 100%;
        height: 100%;
        max-height: none;
      }

      .image-preview-caption {
        overflow: visible;
        padding: 1rem 1rem 1.1rem;
      }

      .image-preview-actions {
        position: sticky;
        bottom: 0;
        margin: 0 -.2rem -.1rem;
        padding: .85rem .2rem .1rem;
      }
    }

    /* ── LUNAYA WEB SHOP / SHIPPING EXPERIENCE ───────────────────────────── */
    body.lunaya-shop-web {
      padding-top: 64px;
      overscroll-behavior-y: auto;
    }

    body.lunaya-shop-web:not(.legacy-order-mode) .app-header {
      display: none;
    }

    body.lunaya-shop-web.legacy-order-mode {
      padding-top: 0;
    }

    body.lunaya-shop-web.legacy-order-mode #shop-site-nav {
      display: none;
    }

    body.lunaya-shop-web .online-order-intro {
      padding: .7rem clamp(1rem, 4vw, 2rem) .4rem;
      background: linear-gradient(180deg, #f6f1e7 0%, var(--bg) 100%);
    }

    body.lunaya-shop-web .online-order-card {
      position: relative;
      display: block;
      max-width: 1180px;
      min-height: 0;
      padding: 1rem 1.25rem;
      overflow: hidden;
      border: 1px solid rgba(47,73,56,.14);
      border-radius: 18px;
      box-shadow: 0 5px 18px rgba(32,51,41,.06);
      background: rgba(251,248,241,.92);
    }

    body.lunaya-shop-web .shop-hero-copy {
      position: relative;
      z-index: 2;
      max-width: 760px;
    }

    body.lunaya-shop-web .online-order-eyebrow {
      font-size: .78rem;
      letter-spacing: .19em;
    }

    body.lunaya-shop-web .online-order-title {
      max-width: none;
      margin: .12rem 0 .2rem;
      font-size: clamp(1.65rem, 2.8vw, 2.35rem);
      line-height: 1.06;
      font-weight: 600;
      letter-spacing: -.025em;
    }

    body.lunaya-shop-web .online-order-copy {
      max-width: 78ch;
      font-size: .9rem;
      line-height: 1.45;
    }

    body.lunaya-shop-web .shop-assurance-row {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem .75rem;
      margin-top: 1rem;
    }

    body.lunaya-shop-web .shop-assurance-row span {
      display: inline-flex;
      align-items: center;
      gap: .42rem;
      padding: .42rem .68rem;
      border: 1px solid rgba(47,73,56,.14);
      border-radius: 999px;
      background: rgba(255,255,255,.52);
      color: #4d5a50;
      font-size: .78rem;
      font-weight: 600;
    }

    body.lunaya-shop-web .shop-assurance-row i {
      color: #b36f4f;
    }

    body.lunaya-shop-web .online-order-actions {
      display: none;
    }

    body.lunaya-shop-web .online-order-action {
      min-height: 46px;
      padding: .68rem 1rem;
    }

    /* Use the canonical Lunaya logo asset. Do not synthesize or reinterpret the
       brand mark in page CSS; all public brand imagery should come from the
       configured/generated branding asset. */
    body.lunaya-shop-web .shop-hero-brand {
      display: none;
    }

    body.lunaya-shop-web .shop-hero-brand img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 190px;
      object-fit: contain;
    }

    body.lunaya-shop-web .cat-nav {
      top: 64px;
      padding: .72rem 0;
      background: rgba(244,238,227,.94);
      backdrop-filter: blur(12px);
    }

    body.lunaya-shop-web .cat-pills {
      max-width: 1180px;
      margin: 0 auto;
      padding-inline: clamp(1rem, 4vw, 2rem);
    }

    body.lunaya-shop-web .menu-main {
      max-width: 1180px;
      margin: 0 auto;
      padding-inline: clamp(1rem, 4vw, 2rem);
    }

    body.lunaya-shop-web .cat-heading {
      font-size: clamp(1.45rem, 2.5vw, 2rem);
    }

    body.lunaya-shop-web .pickup-form-title {
      color: var(--accent);
    }

    body.lunaya-shop-web .shipping-checkout-note {
      margin: .55rem 0 0;
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.45;
    }

    @media (min-width: 760px) {
      body.lunaya-shop-web .menu-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1120px) {
      body.lunaya-shop-web .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px) {
      body.lunaya-shop-web {
        padding-top: 54px;
      }

      body.lunaya-shop-web .online-order-intro {
        padding: .45rem .6rem .25rem;
      }

      body.lunaya-shop-web .online-order-card {
        display: block;
        min-height: 0;
        padding: .8rem .9rem;
        border-radius: 14px;
      }

      body.lunaya-shop-web .online-order-title {
        max-width: none;
        font-size: clamp(1.55rem, 7vw, 2rem);
      }

      body.lunaya-shop-web .shop-hero-brand {
        display: none;
      }

      body.lunaya-shop-web .shop-assurance-row {
        gap: .4rem;
      }

      body.lunaya-shop-web .shop-assurance-row span {
        font-size: .72rem;
      }

      body.lunaya-shop-web .cat-nav {
        top: 54px;
      }
    }