/* ═══════════════════════════════════════════════════════════════════════
   ברכת אליהו — customer PWA. Rebuilt to the approved concept:
   warm espresso-dark + brass/gold, Frank Ruhl Libre (display) + Assistant (UI),
   ✦ brand mark, beRise/beShimmer/beGlow. Light + dark themes. Fully responsive
   (intrinsic grids), iOS-safe (100dvh, safe-area, ≥16px inputs, no hover-only).
   Class names match the JS controller (app.js) — a re-skin, not a rewrite.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* espresso base + warm radial gradient */
  --bg-base:#17120D;
  --bg-grad:radial-gradient(140% 100% at 50% -10%, #221913 0%, #17120D 60%, #120E0A 100%);
  --surface:rgba(255,247,232,.04); --surface-2:rgba(255,247,232,.055); --surface-3:rgba(255,247,232,.07);
  --hair:rgba(199,154,84,.16); --hair-2:rgba(199,154,84,.24); --hair-strong:rgba(199,154,84,.34);
  /* V5 — dark --muted-2 was 3.64 over its own 12 grounds. Same hue and saturation, lightness
     only: 4.60. --txt 12.17 > --muted 5.31 > --muted-2 4.60, so the three levels still read
     as three. .btn-primary:disabled is exempt (inactive component) and did not drive this. */
  --txt:#F3ECDD; --muted:#A99C86; --muted-2:#9B917F;
  --brass:#C79A54; --brass-bright:#E4BC77; --brass-deep:#B9873F;
  /* 037 — keyboard focus ring. Measured on #17120D / #221913 / #120E0A → 9.67 min. */
  --focus-ring:var(--brass-bright);
  --gold-grad:linear-gradient(180deg,#D6A860,#B9873F); --on-gold:#231708;
  --pom:#9A3B2E; --pom-tint:rgba(154,59,46,.14);
  /* 015 — error TEXT and interactive borders. --pom as text is 2.61 on the espresso
     ground; --hair at .16 is 1.29 against it, i.e. an input edge that is not there. */
  --pom-txt:#E8837A; --hair-input:rgba(199,154,84,.65);
  --ok:#7FB08A; --ok-tint:rgba(127,176,138,.16);
  --glow:rgba(199,154,84,.30);
  --r:16px; --r-lg:22px; --r-sm:12px;
  /* 006 — motion tokens. Values copied verbatim from the improve-animations AUDIT and
     review-animations STANDARDS tables; none of them were invented here. */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press:140ms; --dur-ui:200ms; --dur-sheet:300ms;
  --sh:0 14px 44px rgba(0,0,0,.46);
  --hdr-h:60px; --maxw:1120px;
}
:root[data-theme="light"] {
  --bg-base:#F4ECDD;
  --bg-grad:radial-gradient(140% 100% at 50% -10%, #FBF6EC 0%, #F3EAD7 58%, #ECE0C9 100%);
  --surface:rgba(120,85,35,.045); --surface-2:rgba(120,85,35,.065); --surface-3:rgba(120,85,35,.085);
  --hair:rgba(150,110,45,.20); --hair-2:rgba(150,110,45,.30); --hair-strong:rgba(150,110,45,.42);
  /* V3.1 — derived on the same hue and saturation, lightness only, measured over all 12 light
     grounds. --muted 4.08 -> 5.67 · --muted-2 2.80 -> 4.63. --muted is deliberately pushed
     PAST its minimum so the pair stays a hierarchy: --muted-2 is the weaker of the two, and
     landing both on the first passing value would have flattened them into the same colour. */
  --txt:#2C2114; --muted:#574D3F; --muted-2:#655A48;
  /* 004 — measured over all 12 light grounds (3 gradient stops x 3 translucent surfaces).
     --brass 4.81 min · --brass-bright 7.44 min. On cream the EMPHASIS tone is the DARKER
     one; --brass-bright keeps its name and changes role. Do not "correct" this back. */
  --brass:#735321; --brass-bright:#4F3917; --brass-deep:#8A6320;
  --focus-ring:var(--brass-deep);   /* #8A6320 → 3.70 min over the same 12 grounds */
  --gold-grad:linear-gradient(180deg,#CF9A48,#A9772F); --on-gold:#211705;
  --pom:#9A3B2E; --pom-tint:rgba(154,59,46,.10);
  --pom-txt:var(--pom); --hair-input:rgba(120,88,34,.80);   /* --pom is already 5.89 on cream */
  /* V3.1 — --ok is painted on --ok-tint as often as on the bare surface, so it was measured
     over 24 grounds (the 12 surfaces plus the same 12 under the tint): 2.42 -> 4.62. Hue held
     at 136deg, still 129deg away from the error red, so success and failure stay unmistakable. */
  --ok:#335C3E; --ok-tint:rgba(78,140,94,.14);
  --glow:rgba(160,120,45,.28);
  --sh:0 14px 40px rgba(120,90,40,.16);
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
/* 010 — visually hidden but present in the accessibility tree. Not display:none and not
   visibility:hidden: either of those would remove it and defeat the purpose. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
html,body { height:100%; }
body {
  background:var(--bg-base); background-image:var(--bg-grad); background-attachment:fixed;
  color:var(--txt); font-family:'Assistant',system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; overscroll-behavior-y:none;
  transition:background-color .4s ease, color .4s ease;
}
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img { display:block; max-width:100%; }
input,select,textarea { font-family:inherit; font-size:16px; } /* ≥16px → no iOS zoom-on-focus */
::selection { background:rgba(199,154,84,.28); }
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:6px}

/* Display serif for brand/headings/prices */
.brand-title,.lang-title,.hdr-name,.cat-title,.mi-name,.confirm-num,.track-num,.dish-name,.dish-price,
.mi-price,.sum-price,.tot-row.grand span,.brand-lg { font-family:'Frank Ruhl Libre',Georgia,serif; }

/* בס״ד — fixed physical top-right on every screen, every language */
.bsd { position:fixed; top:11px; right:15px; z-index:2000; font-family:'Frank Ruhl Libre',serif;
  color:var(--brass); font-size:14px; letter-spacing:1px; pointer-events:none;
  text-shadow:0 1px 5px rgba(0,0,0,.5); }
:root[data-theme="light"] .bsd { text-shadow:0 1px 3px rgba(160,120,50,.3); }

/* ── Animations ── */
/* V5.1 — transform ONLY, deliberately no opacity. This keyframe drives .splash-inner, the
   first six dish cards, .cart-bar and .confirm-inner. With opacity in it and a fill-mode
   holding the from-state, all four measured stuck at 0 past 800ms on a tab that is not
   compositing — a phone whose screen has blanked. Movement cannot hide content. */
@keyframes beRise { from { transform:translateY(14px);} to { transform:none;} }
@keyframes beShimmer { 0%,100% { opacity:.82; } 50% { opacity:1; } }
@keyframes beGlow { 0%,100% { box-shadow:0 0 0 0 var(--glow), var(--sh);} 50% { box-shadow:0 0 26px 2px var(--glow), var(--sh);} }
@keyframes beSpin { to { transform:rotate(360deg);} }
.star,.star-lg,.star-md,.hdr-star { color:var(--brass); }
.star-lg,.star-md { animation:beShimmer 2.6s ease-in-out infinite; }

/* View system */
.view { display:none; min-height:100vh; min-height:100dvh; }
/* 021 — C-36. A 500ms translate on the whole screen is the slowest thing in the app and it
   moves 107 cards at once. The screen now only fades; the movement belongs to the cards. */
/* ❗ V5.1 — the base state is VISIBLE. The fade rides on .view-in, which app.js removes on
   animationend AND on a 400ms timer, so nothing about this element's visibility depends on
   an animation firing. Measured before the change: stuck at opacity 0 past 800ms, which on
   a backgrounded tab meant a customer returning to an empty app. */
.view.is-active { display:block; }
.view.is-active.view-in { animation:beFade 240ms var(--ease-out); }
@keyframes beFade { from{opacity:0} to{opacity:1} }

/* Shared container width — mobile single column, wide screens center at 1120 */
.lang-wrap,.menu-sticky,.menu-list,.checkout-body,.track-body,.confirm-inner { margin-inline:auto; }
.menu-list,.checkout-body { max-width:var(--maxw); }

/* ── 1. Splash ── */
#view-splash { place-items:center; text-align:center; padding:24px;
  padding-top:calc(24px + env(safe-area-inset-top)); padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
#view-splash.is-active { display:grid; }
.splash-inner { animation:beRise .7s ease both; max-width:460px; }
.star-lg { font-size:60px; filter:drop-shadow(0 0 20px var(--glow)); }
.splash-divider { width:60px; height:1px; margin:20px auto 18px; background:linear-gradient(90deg,transparent,var(--hair-strong),transparent); }
.kbadge { display:inline-block; margin-bottom:14px; padding:4px 16px; border:1px solid var(--hair-2);
  border-radius:22px; color:var(--brass); font-size:11px; letter-spacing:3px; text-transform:uppercase; }
.brand-title { font-size:clamp(40px,11vw,64px); font-weight:900; color:var(--brass-bright); line-height:1.05; letter-spacing:-0.02em; }
.brand-sub { color:var(--muted); font-size:17px; margin-top:12px; line-height:1.5; }
.eyebrow { font-family:'Assistant',sans-serif; color:var(--muted-2); font-size:11px; letter-spacing:3px; text-transform:uppercase; margin-top:10px; }
.splash-cta { margin-top:30px; }
.splash-dots { margin-top:26px; display:flex; gap:8px; justify-content:center; }
.splash-dots span { width:7px; height:7px; border-radius:50%; background:var(--brass-deep); animation:bd 1.2s infinite; opacity:.4; }
.splash-dots span:nth-child(2){animation-delay:.2s} .splash-dots span:nth-child(3){animation-delay:.4s}
@keyframes bd { 0%,100%{opacity:.3} 50%{opacity:1;background:var(--brass-bright)} }

/* ── 2. Language ── */
#view-lang { place-items:center; padding:24px; }
#view-lang.is-active { display:grid; }
.lang-wrap { text-align:center; width:100%; max-width:480px; }
.star-md { font-size:38px; }
.lang-title { font-size:28px; color:var(--brass-bright); margin:12px 0 6px; font-weight:700; }
.lang-sub { color:var(--muted-2); font-size:13px; letter-spacing:1px; margin-bottom:26px; }
.lang-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }
.lang-btn { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r);
  padding:22px 12px; display:flex; flex-direction:column; align-items:center; gap:10px; min-height:44px;
  transition:border-color .2s, background .2s, transform .1s; }
.lang-btn:active { transform:scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .lang-btn:hover { border-color:var(--brass); background:var(--surface-2); }
}
.lang-flag { font-size:36px; line-height:1; }
.lang-name { font-size:18px; font-weight:700; }

/* ── App header ── */
.app-hdr { position:sticky; top:0; z-index:100; min-height:var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 16px; padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb, var(--bg-base) 88%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair); }
.hdr-brand { display:flex; align-items:baseline; gap:9px; }
.hdr-star { font-size:19px; }
.hdr-name { font-size:22px; font-weight:700; color:var(--brass-bright); }
.hdr-eyebrow { font-size:9px; letter-spacing:2px; color:var(--muted-2); text-transform:uppercase; }
/* 020 — a fourth header button needs 48px that a 375px screen does not have. */
@media (max-width:400px) { .hdr-eyebrow { display:none; } }
.hdr-actions { display:flex; align-items:center; gap:6px; }
.hdr-btn { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:20px;
  color:var(--brass); border:1px solid var(--hair); background:var(--surface); }
.hdr-btn:active { background:var(--surface-3); }
.sub-hdr { justify-content:flex-start; gap:12px; }
.hdr-back { font-size:28px; color:var(--brass); line-height:1; width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center; border:1px solid var(--hair); background:var(--surface); }
.hdr-title { font-size:20px; font-weight:700; }
[dir="ltr"] .hdr-back { transform:scaleX(-1); }

/* ── 3. Menu ── */
/* 012 — one sticky wrapper. Previously .search-row and .cat-tabs each stuck on their own
   and .cat-tabs offset itself by a hard-coded 58px that no longer matched the search row's
   real height, so the tabs covered 9px of the search field. The number is gone. */
.menu-sticky { position:sticky; top:calc(var(--hdr-h) + env(safe-area-inset-top)); z-index:99;
  max-width:var(--maxw);
  background:color-mix(in srgb, var(--bg-base) 92%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair); }
.search-row { padding:10px 16px; }
.search-input { width:100%; background:var(--surface); border:1px solid var(--hair); border-radius:12px;
  color:var(--txt); padding:12px 15px; }
.search-input::placeholder { color:var(--muted-2); }
.search-input:focus { border-color:var(--brass); background:var(--surface-2); }
.cat-tabs { display:flex; gap:8px; padding:8px 14px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity;
  mask-image:linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(to left, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
[dir="ltr"] .cat-tabs {
  mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab { white-space:nowrap; padding:8px 16px; border-radius:20px; font-size:15px; min-height:38px; scroll-snap-align:start;
  color:var(--muted); border:1px solid var(--hair); background:transparent; font-weight:700;
  transition:background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out),
             color var(--dur-ui) var(--ease-out); }
.cat-tab.on { color:var(--on-gold); background:var(--gold-grad); border-color:transparent; }
.closed-banner { margin:12px auto 0; max-width:var(--maxw); padding:12px 14px; border-radius:12px;
  background:var(--pom-tint); border:1px solid rgba(154,59,46,.4); color:#d99; font-size:14px; text-align:center; }
:root[data-theme="light"] .closed-banner { color:var(--pom); }

/* #30 — active-order restore banner (menu) + tracking-link box (confirmation) */
.active-order-banner { display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:calc(100% - 28px); max-width:var(--maxw); margin:12px auto 0; padding:12px 16px; border-radius:14px;
  background:var(--gold-grad); color:var(--on-gold); border:none; font-size:14px; font-weight:700; cursor:pointer; text-align:start; }
.active-order-banner .aob-cta { font-weight:800; white-space:nowrap; }
.active-order-banner:active { transform:translateY(1px); }
.track-link-box { margin:18px auto 0; max-width:340px; padding:14px 16px; border-radius:14px;
  background:var(--surface); border:1px solid var(--hair); text-align:center; }
.track-link-box .tlb-label { font-size:13px; color:var(--muted); margin-bottom:8px; }
.track-link-box .tlb-url { font-size:13px; font-weight:600; color:var(--brass-bright); word-break:break-all; direction:ltr;
  background:var(--bg-base); border:1px dashed var(--hair-strong); border-radius:10px; padding:8px 10px; margin-bottom:10px; }
.track-link-box .tlb-btns { display:flex; gap:10px; }
.track-link-box .tlb-btn { flex:1; min-height:44px; font-size:14px; }
.menu-list { padding:14px 14px 130px; }
.cat-sec { margin-bottom:8px; }
.cat-title { font-size:22px; color:var(--brass-bright); font-weight:700; margin:16px 4px 12px;
  padding-bottom:8px; border-bottom:1px solid var(--hair); }
.cat-title .star { font-size:16px; margin-inline-end:4px; }
/* Responsive intrinsic grid: 1-col phone → multi-col tablet/desktop, no media queries */
.dish-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:14px; }
/* 008 — .dish/.extra-row/.rm-row became real <button>s. Everything else about their look
   comes from app.css:63; these two properties are the only UA defaults that differ. */
.dish, .extra-row, .rm-row { width:100%; text-align:start; }
/* 021 — C-36. Stagger the first six cards only. At 40ms each (the skill's range is 30-80ms)
   six is 200ms; staggering all 107 would leave the last card waiting four seconds. */
.dish:nth-child(-n+6) { animation:beRise 260ms var(--ease-out) both; }
.dish:nth-child(2){animation-delay:40ms}  .dish:nth-child(3){animation-delay:80ms}
.dish:nth-child(4){animation-delay:120ms} .dish:nth-child(5){animation-delay:160ms}
.dish:nth-child(6){animation-delay:200ms}

/* Vertical dish card (photo on top) — concept layout */
.dish { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r); overflow:hidden; transition:transform .12s, border-color .2s, background .2s; }
.dish:active { transform:scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .dish:hover { border-color:var(--hair-strong); background:var(--surface-2); }
}
.dish-photo { position:relative; aspect-ratio:16/11; background:radial-gradient(120% 120% at 50% 0%, #2a2016, #1a140d); }
:root[data-theme="light"] .dish-photo { background:radial-gradient(120% 120% at 50% 0%, #efe3cd, #e4d6ba); }
.dish-img { width:100%; height:100%; object-fit:cover; }
.dish-img.ph { display:grid; place-items:center; color:var(--brass-deep); font-size:40px; width:100%; height:100%; }
.dish-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 40%); pointer-events:none; }
.mehadrin-badge { position:absolute; top:9px; inset-inline-start:9px; z-index:2; font-size:10px; letter-spacing:1px;
  padding:3px 9px; border-radius:20px; background:rgba(20,15,10,.66); color:var(--brass-bright);
  border:1px solid var(--hair-2); backdrop-filter:blur(3px); }
.dish-info { flex:1; display:flex; flex-direction:column; padding:12px 13px 13px; min-width:0; }
.dish-name { font-size:18px; font-weight:700; line-height:1.25; }
.dish-desc { font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dish-badges { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
.badge { font-size:11px; padding:2px 8px; border-radius:7px; background:var(--surface-3); color:var(--brass); border:1px solid var(--hair); }
.dish-bottom { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:11px; }
.dish-price { color:var(--brass-bright); font-weight:700; font-size:19px; }
.dish-add { width:38px; height:38px; border-radius:12px; background:var(--gold-grad); color:var(--on-gold);
  font-size:23px; font-weight:700; line-height:1; display:grid; place-items:center; }
.dish.unavail { opacity:.5; } .dish.unavail .dish-add { display:none; }
.unavail-tag { font-size:12px; color:var(--pom-txt); }
.badge.shabbat { background:linear-gradient(180deg,#3a2d55,#2a2140); color:#e7d7ff; border-color:#6d28d9; }
.badge.future { background:linear-gradient(180deg,#1e3a2f,#16281f); color:#c6f6d5; border-color:#2f855a; }
.unavail-tag.shabbat { color:var(--brass-bright); font-weight:600; }

/* Shabbat / future pre-order notice (checkout + confirm + tracking) — no time picker; the
   restaurant sets the delivery time and sends a WhatsApp update (א.14.41). */
.shabbat-notice { border:1px solid #6d28d9; background:linear-gradient(180deg,rgba(109,40,217,.10),rgba(109,40,217,.04));
  border-radius:12px; padding:13px 15px; margin-top:6px; }
.shabbat-notice .sn-title { font-weight:700; color:var(--brass-bright); font-size:15px; margin-bottom:5px; }
.shabbat-notice .sn-msg { font-size:13.5px; line-height:1.55; color:var(--text); }

/* Sticky cart bar */
.cart-bar { position:fixed; inset-inline:12px; bottom:0; z-index:150; margin-inline:auto; max-width:var(--maxw);
  min-height:64px; display:flex; align-items:center; gap:12px; padding:0 20px;
  margin-bottom:calc(12px + env(safe-area-inset-bottom));
  border-radius:16px; background:var(--gold-grad); color:var(--on-gold);
  box-shadow:0 10px 30px var(--glow), var(--sh); font-weight:800;
  animation:beRise .3s var(--ease-out) both; }
/* 021 — C-34. Adding to the cart changed a number with no acknowledgement; the one moment
   the customer most wants confirmation was the quietest. Scale only, no layout property. */
@keyframes cartBump { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
.cart-count.bump, .hdr-cart-count.bump { animation:cartBump 240ms var(--ease-out); }
.cart-count { min-width:28px; height:28px; padding:0 7px; border-radius:14px; background:rgba(0,0,0,.22);
  color:#fff; display:grid; place-items:center; font-size:14px; }
.cart-cta { flex:1; text-align:center; font-size:17px; }
.cart-total { font-size:18px; }

/* ── 4. Item sheet (hero + back) ── */
.modal { position:fixed; inset:0; z-index:500; display:flex; align-items:flex-end; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--dur-sheet) var(--ease-out); }
.modal.is-open .modal-backdrop { opacity:1; }
.modal-card { position:relative; width:100%; max-width:640px; margin-inline:auto; max-height:94dvh; overflow-y:auto;
  background:var(--bg-base); background-image:var(--bg-grad);
  border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg);
  border-top:1px solid var(--hair-strong);
  transform:translateY(100%); transition:transform var(--dur-sheet) var(--ease-drawer); }
.modal.is-open .modal-card { transform:none; }
.mi-hero { position:relative; }
.mi-img { width:100%; height:min(46dvh,300px); object-fit:cover;
  background:radial-gradient(120% 120% at 50% 0%, #2a2016, #17120d); }
.mi-img.ph { display:grid; place-items:center; color:var(--brass-deep); font-size:56px; }
.mi-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 42%); pointer-events:none; }
.mi-back { position:absolute; top:12px; inset-inline-start:12px; z-index:3; display:flex; align-items:center; gap:6px;
  height:42px; padding:0 14px; border-radius:22px; background:rgba(20,15,10,.6); color:var(--brass-bright);
  border:1px solid var(--hair-2); backdrop-filter:blur(4px); font-size:14px; font-weight:600; }
.mi-back .chev { font-size:20px; line-height:1; } [dir="ltr"] .mi-back .chev { transform:scaleX(-1); }
.mi-body { padding:18px 18px 20px; }
.mi-name { font-size:24px; font-weight:800; }
.mi-desc { color:var(--muted); font-size:14px; margin-top:6px; line-height:1.5; }
.mi-price { color:var(--brass-bright); font-weight:700; font-size:21px; margin-top:10px; }
.mi-sec { margin-top:20px; }
.mi-sec-t { font-size:15px; font-weight:700; margin-bottom:10px; display:flex; gap:8px; align-items:center; }
.req-pill { font-size:11px; padding:2px 9px; border-radius:20px; background:var(--pom-tint); color:var(--pom-txt); border:1px solid rgba(154,59,46,.35); }
.req-pill.chosen { background:var(--ok-tint); color:var(--ok); border-color:rgba(127,176,138,.4); }
.req-star { color:var(--pom-txt); }
.opt-row { display:flex; flex-wrap:wrap; gap:9px; }
.opt { padding:10px 15px; border-radius:12px; border:1px solid var(--hair-2); background:var(--surface); font-size:15px; min-height:44px;
  transition:background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.opt.on { border-color:var(--brass); background:rgba(199,154,84,.14); color:var(--brass-bright); font-weight:700; }
.extra-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--hair); }
.extra-lbl { display:flex; align-items:center; gap:11px; font-size:15px; }
.chk { width:24px; height:24px; border-radius:7px; border:1.5px solid var(--muted); display:grid; place-items:center; flex:none; color:transparent; font-weight:800; }
.chk.on { background:var(--gold-grad); border-color:transparent; color:var(--on-gold); }
/* #19 — "ללא X" removal rows (no price). Reuse the extras look; "ללא שינוי" sits last with a divider. */
.rm-list { display:flex; flex-direction:column; }
.rm-row { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid var(--hair); cursor:pointer; }
.rm-row:last-child { border-bottom:none; }
.rm-lbl { display:flex; align-items:center; gap:11px; font-size:15px; }
.rm-nochange { margin-top:2px; border-top:1px dashed var(--hair-strong); font-weight:600; }
.extra-price { color:var(--brass); font-weight:700; }
.mi-note { width:100%; background:var(--surface); border:1px solid var(--hair); border-radius:12px;
  color:var(--txt); padding:11px 13px; resize:none; min-height:48px; }
.mi-note:focus { border-color:var(--brass); }
.qty { display:flex; align-items:center; gap:18px; }
.qty-btn { width:44px; height:44px; border-radius:12px; background:var(--surface); border:1px solid var(--hair-2);
  font-size:24px; color:var(--brass); display:grid; place-items:center; }
.qty-n { font-size:20px; font-weight:800; min-width:28px; text-align:center; }

/* Buttons */
.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:54px; border-radius:14px; font-size:18px; font-weight:800;
  transition:transform var(--dur-press) var(--ease-out), opacity var(--dur-ui) var(--ease-out); }
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--gold-grad); color:var(--on-gold); }
.btn-primary:disabled { background:var(--surface-2); color:var(--muted-2); cursor:not-allowed; border:1px solid var(--hair); }
.btn-ghost { background:transparent; border:1px solid var(--brass); color:var(--brass); }
.btn-wa { background:#25d366; color:#053; }
.btn-enter { min-width:200px; width:auto; padding:0 40px; margin-inline:auto; animation:beGlow 3.2s ease-in-out infinite; }
.btn-row { position:sticky; bottom:0; padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, var(--bg-base) 72%, transparent); }

/* ── 5. Checkout ── */
.checkout-body { padding:16px 16px 130px; }
.co-grid { display:grid; gap:20px; }
@media (min-width:900px){ .co-grid { grid-template-columns:1.15fr .85fr; align-items:start; } }
.co-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:16px; }
.sum-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair); }
.sum-item:last-child { border-bottom:none; }
.sum-img { width:60px; height:60px; border-radius:11px; object-fit:cover; background:var(--surface-3); flex:none; }
.sum-img.ph { display:grid; place-items:center; color:var(--brass-deep); }
.sum-mid { flex:1; min-width:0; }
.sum-name { font-weight:700; font-size:15px; }
.sum-meta { font-size:12.5px; color:var(--muted); margin-top:2px; }
.sum-note { font-size:12.5px; color:var(--brass); margin-top:2px; }
.sum-right { text-align:end; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.sum-price { color:var(--brass-bright); font-weight:700; }
.sum-qty { display:flex; align-items:center; gap:9px; }
.sum-qty button { width:30px; height:30px; border-radius:9px; background:var(--surface-2); border:1px solid var(--hair-2); color:var(--brass); font-size:18px; }
.sum-del { color:var(--pom-txt); font-size:13px; background:none; }
.coupon-row { display:flex; gap:8px; margin:14px 0; }
.coupon-row input { flex:1; background:var(--surface); border:1px solid var(--hair); border-radius:12px; color:var(--txt); padding:12px 13px; }
.coupon-row input:focus { border-color:var(--brass); }
.coupon-row button { padding:0 20px; border-radius:12px; border:1px solid var(--brass); color:var(--brass); font-weight:700; min-height:44px; }
.totals { background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r); padding:15px; margin-top:6px; }
.tot-row { display:flex; justify-content:space-between; padding:4px 0; font-size:15px; }
.tot-row.grand { font-size:22px; font-weight:700; color:var(--brass-bright); border-top:1px solid var(--hair); margin-top:8px; padding-top:11px; }
.tot-discount { color:var(--ok); }
.delivery-note { color:var(--pom-txt); font-size:13px; margin-top:10px; }
.pay-note { color:var(--muted); font-size:13px; margin-top:4px; }
.form-sec { margin-top:6px; }
.form-sec h3 { font-size:17px; color:var(--brass-bright); margin-bottom:14px; font-family:'Frank Ruhl Libre',serif; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field input,.field select { width:100%; background:var(--surface); border:1px solid var(--hair);
  border-radius:12px; color:var(--txt); padding:13px; min-height:48px; }
.field input:focus,.field select:focus { border-color:var(--brass); background:var(--surface-2); }
/* 003 — this rule existed and was NEVER switched on: `document.querySelectorAll(".bad").length`
   measured 0 in every form state. It is now applied to the one field that is actually blocking
   the order. .pk-sel added because the time picker is a <select>, and the old selector matched
   inputs only — the marked field would have been invisible in exactly that case.
   ❗ Colour is never the only signal here: the field is also scrolled to, focused (visible ring)
   and announced through the shared aria-live. */
.field input.bad,.wa-row input.bad,.pk-sel.bad { border-color:var(--pom); }
/* 015 — WCAG 1.4.11: an input's own edge is a non-text UI component and needs 3:1. */
.search-input, .field input, .field select, .coupon-row input, .mi-note { border-color:var(--hair-input); }
.err-msg { color:var(--pom-txt); font-size:12.5px; margin-top:5px; }
.row2 { display:flex; gap:10px; } .row2 > * { flex:1; }
.wa-row { display:flex; gap:8px; }
.wa-row select { flex:none; width:104px; }
.seg { display:flex; gap:8px; background:var(--surface); border:1px solid var(--hair); border-radius:13px; padding:4px; }
.seg button { flex:1; padding:11px; border-radius:10px; color:var(--muted); font-weight:600; min-height:44px; }
.seg button.on { background:var(--gold-grad); color:var(--on-gold); }

/* ── 6. Confirmation ── */
.confirm-body { min-height:100dvh; display:grid; place-items:center; text-align:center; padding:28px; }
.confirm-inner { animation:beRise .55s ease both; max-width:440px; }
.confirm-check { width:88px; height:88px; border-radius:50%; margin:0 auto 20px;
  background:var(--ok-tint); border:2px solid var(--ok); color:var(--ok);
  display:grid; place-items:center; font-size:46px; animation:beGlow 3s ease-in-out infinite; }
.confirm-h { font-size:26px; font-weight:800; }
.confirm-num { font-size:56px; color:var(--brass-bright); margin:12px 0 4px; font-weight:900; letter-spacing:-0.015em; }
.confirm-sub { color:var(--muted); font-size:15px; margin:8px 0 26px; line-height:1.55; }
.confirm-body .btn { max-width:360px; margin-inline:auto; }
.link-sub { display:inline-block; margin-top:16px; color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; }

/* ── 7. Tracking ── */
.track-body { padding:28px 20px 48px; max-width:540px; }
.track-h { text-align:center; margin-bottom:6px; }
.track-num { font-size:34px; color:var(--brass-bright); font-weight:800; letter-spacing:-0.01em; }
.track-sub { color:var(--muted); font-size:15px; text-align:center; margin-bottom:28px; }
.stepper { position:relative; padding-inline-start:8px; }
.step { display:flex; gap:16px; padding-bottom:30px; position:relative; }
.step:last-child { padding-bottom:0; }
/* 021 — C-35. The connecting line grows into the completed step instead of appearing.
   scaleY, like the existing .stepper.big scale(1.14) — transform, never width/height. */
.step-line { position:absolute; inset-inline-start:19px; top:42px; bottom:2px; width:2px;
  background:var(--brass); transform-origin:top; transform:scaleY(0);
  transition:transform 420ms var(--ease-out); }
.step.done .step-line { transform:scaleY(1); }
.step:not(.done) .step-line { background:var(--hair-2); transform:scaleY(1); }
.step-dot { width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--surface-2); border:2px solid var(--hair-2); color:var(--muted); font-size:18px; z-index:1;
  transition:background-color var(--dur-sheet) var(--ease-out), border-color var(--dur-sheet) var(--ease-out),
             color var(--dur-sheet) var(--ease-out), transform var(--dur-sheet) var(--ease-out); }
.step.done .step-dot { background:var(--gold-grad); border-color:transparent; color:var(--on-gold); }
.step.active .step-dot { border-color:var(--brass); color:var(--brass-bright); box-shadow:0 0 0 5px rgba(199,154,84,.16); animation:pulse 1.9s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 5px rgba(199,154,84,.16)} 50%{box-shadow:0 0 0 11px rgba(199,154,84,.04)} }
.step-txt { padding-top:6px; }
.step-title { font-size:17px; font-weight:700; }
.step-desc { font-size:13px; color:var(--muted); margin-top:2px; }
.step.pending .step-title { color:var(--muted); }
.eta-card { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px;
  padding:15px 17px; border-radius:var(--r); background:var(--surface); border:1px solid var(--hair); }
.eta-card .eta-l { font-size:14px; color:var(--muted); }
.eta-card .eta-v { font-family:'Frank Ruhl Libre',serif; font-size:22px; color:var(--brass-bright); font-weight:700; }
/* "arrival within the hour" — live MM:SS countdown (replaces the old "~15 min") */
.eta-card.countdown { flex-direction:column; align-items:center; gap:7px; text-align:center; }
.eta-card.countdown .eta-l { font-size:15px; }
.eta-card .eta-clock { font-family:'Frank Ruhl Libre',serif; font-size:46px; font-weight:700; line-height:1;
  color:var(--brass-bright); letter-spacing:.02em; font-variant-numeric:tabular-nums; direction:ltr; }
.eta-card .eta-sub { font-size:13px; color:var(--muted); }
.eta-card.soon { justify-content:center; text-align:center; border-color:var(--hair-strong); background:var(--surface-2); }
.eta-card .eta-soon { font-family:'Frank Ruhl Libre',serif; font-size:19px; font-weight:700; color:var(--brass-bright); }
.track-state { text-align:center; padding:18px; border-radius:var(--r); margin:24px 0;
  background:var(--surface); border:1px solid var(--hair); font-size:17px; }
.track-state.done { border-color:var(--ok); color:var(--ok); }
.track-state.cancelled { border-color:var(--pom); color:var(--pom-txt); }

/* Toast + misc */
.toast { position:fixed; inset-inline:20px; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:3000; text-align:center;
  margin-inline:auto; max-width:420px; background:var(--surface-3); color:var(--txt);
  border:1px solid var(--brass); border-radius:12px; padding:13px 16px; box-shadow:var(--sh);
  backdrop-filter:blur(8px);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.toast.is-open { opacity:1; transform:none; }
.toast.err { border-color:var(--pom); }
.spinner { width:34px; height:34px; border:3px solid var(--hair-2); border-top-color:var(--brass);
  border-radius:50%; animation:beSpin .8s linear infinite; margin:40px auto; }
.center-msg { text-align:center; color:var(--muted); padding:50px 20px; }
/* 016 — failure box + first-load skeleton. */
.fail-msg { margin-bottom:16px; }
.fail-retry { max-width:220px; margin-inline:auto; }
.dish.sk { pointer-events:none; }
.sk-box, .sk-line { background:linear-gradient(90deg,var(--surface),var(--surface-3),var(--surface));
  background-size:200% 100%; animation:skShim 1.4s ease-in-out infinite; border-radius:8px; }
.sk-box { aspect-ratio:16/11; }
.sk-line { height:14px; margin-top:8px; }
@keyframes skShim { 0%,100%{background-position:0% 0} 50%{background-position:100% 0} }

/* Delivery: "use my current location" (GPS) */
.geo-btn { margin-top:8px; width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--brass); color:var(--brass-bright); border-radius:12px;
  font-size:15px; font-weight:600; cursor:pointer; }
.geo-btn:disabled { opacity:.6; }
.geo-row { display:flex; gap:8px; }
.geo-row .geo-btn { flex:1; }
/* 24h day+time picker (scheduled delivery + self-pickup) */
.pk-row { display:flex; gap:10px; }
.pk-sel { flex:1; min-height:48px; font-size:16px; padding:10px 12px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--brass); color:var(--ink,inherit); }
.pk-sel:focus { outline:2px solid var(--brass-bright); outline-offset:1px; }
/* Location picker (self-hosted Leaflet + OpenStreetMap tiles) */
.map-card { padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
.map-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.map-head .bsd { position:static; font-size:14px; }
.map-title { font-family:var(--font-display,serif); font-size:20px; font-weight:700; color:var(--brass-bright); }
.map-hint { font-size:13px; color:var(--muted,#c9b79a); margin:6px 0 10px; line-height:1.45; }
.map-wrap { position:relative; }
.map-canvas { width:100%; height:min(52dvh,380px); border-radius:14px; overflow:hidden; border:1px solid var(--hair-strong); background:#0b0d0a; }
.map-canvas .leaflet-control-attribution { font-size:9px; }
.map-pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); font-size:34px; line-height:1;
  pointer-events:none; z-index:450; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.map-btns { display:flex; gap:10px; margin-top:14px; }
.map-btns .btn { flex:1; }
/* Tracking: out-of-stock removal notice */
.track-removed { background:var(--pom-tint); border:1px solid var(--pom); border-radius:14px; padding:14px 16px; margin:14px 0; }
.track-removed .tr-title { font-weight:700; color:var(--pom-txt); margin-bottom:6px; }
.track-removed ul { margin:6px 0 0; padding-inline-start:20px; }
.track-removed li { margin:2px 0; }
.track-removed .tr-total { margin-top:10px; font-size:16px; }
.track-removed .tr-basket-lbl, .track-removed .tr-removed-lbl { font-size:13px; opacity:.85; margin:8px 0 4px; }
.track-removed .tr-basket { display:flex; flex-direction:column; gap:4px; }
.track-removed .tr-item { display:flex; justify-content:space-between; gap:10px; font-size:14px; }
.track-removed .tr-item .tr-item-p { font-variant-numeric:tabular-nums; opacity:.9; white-space:nowrap; }

/* prefers-reduced-motion now lives in /common/a11y.css — the rule that was here reached
   animations only and left all 14 transitions running. Nothing in the customer app is an
   alert-by-motion: the one infinite animation, the .step-dot pulse, is a progress hint and
   is correctly stilled. */

/* ═══ א.14.43 — the 12 fixes (customer) ═══════════════════════════════════ */
/* Task 4 — header cart button */
.hdr-cart { position:relative; }
.hdr-cart-count { position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--pom); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; }
/* Task 4 — cart drawer */
.drawer-scrim { position:fixed; inset:0; z-index:480; background:rgba(0,0,0,.5);
  opacity:0; transition:opacity var(--dur-sheet) var(--ease-out); }
.drawer-scrim.is-open { opacity:1; }
.cart-drawer { position:fixed; z-index:490; top:0; bottom:0; inset-inline-end:0; width:min(420px,92vw);
  background:var(--bg-base); background-image:var(--bg-grad); box-shadow:var(--sh); display:flex; flex-direction:column;
  border-inline-start:1px solid var(--hair-2);
  transform:translateX(-100%); transition:transform var(--dur-sheet) var(--ease-drawer); }
[dir="ltr"] .cart-drawer { transform:translateX(100%); }
.cart-drawer.is-open, [dir="ltr"] .cart-drawer.is-open { transform:none; }
.cd-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px calc(14px);
  border-bottom:1px solid var(--hair); padding-top:calc(16px + env(safe-area-inset-top)); }
.cd-title { font-family:'Frank Ruhl Libre',serif; font-size:20px; font-weight:700; color:var(--brass-bright); }
.cd-close { width:38px; height:38px; border-radius:50%; background:var(--surface-2); font-size:18px; color:var(--txt); }
.cd-body { flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.cd-item { display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--hair); border-radius:var(--r-sm); background:var(--surface); }
.cd-img { width:48px; height:48px; border-radius:10px; object-fit:cover; flex:none; }
.cd-img.ph { display:grid; place-items:center; color:var(--brass); background:var(--surface-2); }
.cd-mid { flex:1; min-width:0; }
.cd-name { font-weight:700; font-size:15px; }
.cd-meta { font-size:12.5px; color:var(--muted); margin-top:2px; }
.cd-note { font-size:12px; color:var(--muted-2); font-style:italic; margin-top:2px; }
.cd-price { font-weight:800; color:var(--brass-bright); white-space:nowrap; }
.cd-qty { display:flex; align-items:center; gap:8px; margin-top:8px; }
.cd-qty button { width:32px; height:32px; border-radius:8px; border:1px solid var(--hair-2); background:var(--surface-2); font-size:18px; font-weight:700; color:var(--txt); }
.cd-qty span { min-width:20px; text-align:center; font-weight:800; }
.cd-del { margin-inline-start:auto; padding:4px 10px; border-radius:8px; background:var(--pom-tint); color:var(--pom-txt); font-size:12.5px; font-weight:700; }
.cd-foot { padding:14px 16px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--hair); }
.cd-total { display:flex; justify-content:space-between; margin-bottom:10px; font-weight:700; }
.cd-total b { color:var(--brass-bright); font-size:19px; }

/* Task 3's padding-bottom override is gone (018): margin-bottom above already clears the
   home indicator, and it was the only !important in the file besides [hidden]. */

/* Task 5/6 — hotel combobox + required star */
.req-star { color:#e5484d; font-weight:900; font-size:1.1em; }
.req-note { color:var(--muted); }
.combo { position:relative; }
.combo-dd { position:absolute; z-index:60; inset-inline:0; top:calc(100% + 4px); max-height:260px; overflow-y:auto;
  background:var(--bg-base); border:1px solid var(--hair-2); border-radius:var(--r-sm); box-shadow:var(--sh); }
.combo-opt { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:start;
  padding:10px 14px; border-bottom:1px solid var(--hair); }
.combo-opt:last-child { border-bottom:none; }
.combo-opt:active { background:var(--surface-2); }
@media (hover: hover) and (pointer: fine) {
  .combo-opt:hover { background:var(--surface-2); }
}
/* 011 — the keyboard-highlighted option. An inset bar rather than an outline, so it cannot
   be confused with the focus ring, which stays on the input itself. Placed after the gated
   block deliberately: equal specificity, so the keyboard highlight wins over a stale pointer
   highlight left behind on a hybrid device. */
.combo-opt.on { background:var(--surface-2); box-shadow:inset 3px 0 0 var(--brass); }
.co-en { font-weight:800; font-size:15px; color:var(--txt); }
.co-he { font-size:12.5px; color:var(--muted); }
/* Task 7 — GPS section + nudge */
.geo-wrap { margin-top:10px; }
.geo-status { color:var(--ok); font-weight:700; }
.gps-nudge { margin-top:10px; padding:10px 12px; border-radius:var(--r-sm); background:var(--pom-tint);
  border:1px solid var(--hair-2); font-size:13.5px; line-height:1.5; }
.gps-skip { display:inline-block; margin-top:6px; color:var(--brass-bright); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* Task 8 — confirmation order summary */
.confirm-summary { max-width:380px; margin:18px auto 4px; text-align:start; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r); padding:14px 16px; }
.cs-title { font-family:'Frank Ruhl Libre',serif; font-size:16px; font-weight:700; color:var(--brass-bright); margin-bottom:8px; text-align:center; }
.cs-row { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--hair); }
.cs-mid { min-width:0; }
.cs-name { font-weight:700; font-size:14.5px; }
.cs-x { color:var(--brass); font-weight:800; }
.cs-meta { font-size:12.5px; color:var(--muted); margin-top:2px; }
.cs-note { font-size:12px; color:var(--muted-2); font-style:italic; }
.cs-price { font-weight:800; color:var(--brass-bright); white-space:nowrap; }
.cs-tot { display:flex; justify-content:space-between; padding:6px 0 0; font-size:14px; }
.cs-grand { font-weight:900; font-size:17px; border-top:1px solid var(--hair-2); margin-top:6px; padding-top:8px; }
.cs-pay { text-align:center; font-size:12.5px; color:var(--muted); margin-top:8px; }

/* Task 9 — track button as the big primary CTA */
.btn-track-hero { width:100%; max-width:380px; margin:20px auto 0; font-size:19px; font-weight:800;
  padding-block:16px; box-shadow:0 10px 26px var(--glow); }

/* Task 10 — bolder, clearer tracking */
.track-current { display:flex; align-items:center; gap:14px; margin:6px auto 20px; max-width:420px;
  padding:16px 20px; border-radius:var(--r-lg); background:var(--gold-grad); color:var(--on-gold);
  box-shadow:0 12px 30px var(--glow); }
.track-current .tc-ic { font-size:38px; line-height:1; }
.track-current .tc-lbl { font-family:'Frank Ruhl Libre',serif; font-size:23px; font-weight:800; }
.stepper.big .step-dot { width:50px; height:50px; font-size:22px; }
.stepper.big .step { padding-bottom:34px; }
.stepper.big .step-line { inset-inline-start:24px; top:52px; }
.stepper.big .step-title { font-size:18px; }
.stepper.big .step.active .step-dot { transform:scale(1.14); box-shadow:0 0 0 7px rgba(199,154,84,.22); }
.stepper.big .step.active .step-title { font-size:20px; font-weight:900; color:var(--brass-bright); }
.stepper.big .step.pending .step-dot { opacity:.55; }

/* Task 12ב — returned-for-editing screen + resubmit banner */
.track-returned { max-width:420px; margin:24px auto 0; text-align:center; padding:24px 20px;
  background:var(--surface); border:1px solid var(--hair-2); border-radius:var(--r-lg); }
.track-returned .tr-ic { font-size:48px; }
.track-returned .tr-h { font-family:'Frank Ruhl Libre',serif; font-size:23px; font-weight:800; color:var(--brass-bright); margin-top:10px; }
.track-returned .tr-msg { color:var(--muted); font-size:15px; line-height:1.6; margin-top:10px; }
.resubmit-banner { max-width:var(--maxw); margin:0 auto 12px; padding:12px 16px; border-radius:var(--r-sm);
  background:var(--pom-tint); border:1px solid var(--hair-2); color:var(--txt); font-weight:700; font-size:14px; text-align:center; }

/* 041 — tabular figures. .eta-clock and .tr-item-p already had this; these ten did not,
   so every +/- in the cart nudged the layout beside them. Same declaration, same place. */
.dish-price, .mi-price, .sum-price, .cart-total, .cart-count,
.tot-row, .tot-row.grand, .cs-price, .cd-price, .confirm-num,
.extra-price, .cd-total b, .track-num {
  font-variant-numeric: tabular-nums;
}