/* ==========================================================================
   Johar Flavour: token layer
   Source of truth is the active Novamira design "Johar Forest & Saffron".
   ========================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('./fonts/bricolage-grotesque.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Archivo';
  src: url('./fonts/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  --bg: #FBF9F4;
  --surface: #FFFFFF;
  --ink: #111D18;
  --accent: #D9781F;
  --accent-ink: #FFFFFF;
  --deep: #1B4034;
  --deep-2: #163429;
  --muted: #6B7A73;
  --line: #E4E0D6;
  --veg: #3C8A4E;
  --nonveg: #A8362B;

  --tint-accent: #FDF1E6;
  --tint-deep: #EDF2EF;

  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --xs: 5px;
  --sm: 8px;
  --md: 14px;
  --lg: 22px;
  --xl: 36px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;

  --tap: 44px;
  --wrap: 1120px;
  --gutter: 14px;
  --header-h: 54px;
  --nav-h: 58px;

  --lift: 0 -6px 24px rgba(17, 29, 24, 0.14);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset. :where() keeps specificity at zero so component rules always win.
   ========================================================================== */

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

:where(html) {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 56px);
}
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
  padding: 0;
}
:where(ul, ol) { list-style: none; }
:where(img, picture, svg, video) { display: block; max-width: 100%; height: auto; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: inherit; text-decoration: none; }
:where(table) { border-collapse: collapse; width: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  body { padding-bottom: 0; font-size: 15px; }
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(25px, 6.6vw, 44px); }
h2 { font-size: clamp(19px, 4.6vw, 29px); }
h3 { font-size: clamp(16px, 3.6vw, 19px); line-height: 1.15; }
p { max-width: 62ch; }

.num { font-variant-numeric: tabular-nums; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: var(--gutter);
  z-index: 999;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: var(--r-pill);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 120ms var(--ease), background 160ms var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:hover { background: #C46A16; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }

.btn--on-deep {
  background: transparent;
  color: var(--bg);
  box-shadow: inset 0 0 0 1.5px rgba(251, 249, 244, 0.45);
}
.btn--on-deep:hover { background: rgba(251, 249, 244, 0.1); box-shadow: inset 0 0 0 1.5px var(--bg); }

.btn--block { width: 100%; }
.btn--sm { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* ==========================================================================
   Header
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hdr__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}
.hdr__brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.hdr__brand b { color: var(--accent); font-weight: 700; }
.hdr__spacer { flex: 1; }

.hdr__links { display: none; }
@media (min-width: 900px) {
  .hdr__links {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .hdr__links a {
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    transition: color 140ms var(--ease), background 140ms var(--ease);
  }
  .hdr__links a:hover,
  .hdr__links a[aria-current="page"] { color: var(--ink); background: var(--tint-deep); }
}

/* Pincode gate */
.pin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tint-deep);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  max-width: 175px;
  transition: background 140ms var(--ease);
}
.pin:hover { background: var(--line); }
.pin svg { flex-shrink: 0; }
.pin span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin--unset { background: var(--tint-accent); color: #A85A11; }

/* ==========================================================================
   Category chip rail
   ========================================================================== */

.rail {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.rail__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px var(--gutter);
  scroll-snap-type: x proximity;
}
.rail__scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-selected="true"] {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--bg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--deep);
  color: var(--bg);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -28%;
  width: 78vw;
  max-width: 560px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, rgba(217, 120, 31, 0.5), rgba(217, 120, 31, 0) 66%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--lg);
  padding-block: 30px 26px;
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--xl);
    padding-block: 60px 52px;
  }
}
.hero h1 { color: var(--bg); }
@media (min-width: 900px) { .hero h1 { max-width: 13ch; } }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero__sub {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(251, 249, 244, 0.76);
  max-width: 40ch;
}
.hero__cta {
  margin-top: var(--lg);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Handi placeholder block, swapped for a real photo later */
.handi {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(217, 120, 31, 0.34), rgba(217, 120, 31, 0) 62%),
    linear-gradient(150deg, #24513F 0%, #163429 58%, #10261E 100%);
  box-shadow: inset 0 0 0 1px rgba(251, 249, 244, 0.1);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.handi svg { width: 58%; max-width: 260px; opacity: 0.9; }

.hero__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(251, 249, 244, 0.16);
}
.hero__strip div {
  padding: 14px 4px 18px;
  text-align: center;
}
.hero__strip b {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--bg);
  letter-spacing: -0.02em;
}
.hero__strip span {
  font-size: 12px;
  color: rgba(251, 249, 244, 0.62);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.sec { padding-block: var(--xl); }
.sec--tight { padding-block: var(--lg); }
.sec--deep {
  background: var(--deep);
  color: var(--bg);
}
.sec--deep h2 { color: var(--bg); }
.sec--deep p { color: rgba(251, 249, 244, 0.74); }

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--md);
  margin-bottom: var(--lg);
}
.sec__head p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.sec--deep .sec__head p { color: rgba(251, 249, 244, 0.7); }
.sec__more {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  padding-bottom: 4px;
}

/* ==========================================================================
   Dish card
   ========================================================================== */

.dishes {
  display: grid;
  gap: 10px;
}
@media (min-width: 760px) { .dishes { grid-template-columns: 1fr 1fr; } }

.dish {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.dish__media {
  width: 84px;
  height: 84px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: linear-gradient(150deg, #2A5A46, #163429);
  align-self: start;
}
.dish__media img { width: 100%; height: 100%; object-fit: cover; }
.dish__body { display: flex; flex-direction: column; min-width: 0; }
.dish__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.2;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.dish__desc {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dish__foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dish__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.dish__price s { color: var(--muted); font-weight: 400; font-size: 13px; margin-right: 5px; }

.tag {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--tint-accent);
  color: #A85A11;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tag--best { background: var(--tint-deep); color: var(--deep); }

/* Dietary mark, Indian convention */
.diet {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--veg);
}
.diet::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--veg);
}
.diet--nonveg { border-color: var(--nonveg); }
.diet--nonveg::before { background: var(--nonveg); }

/* Add control that becomes a stepper in place */
.add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 34px;
  padding: 0 14px;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 120ms var(--ease);
}
.add:active { transform: scale(0.97); }
.add[data-qty]:not([data-qty="0"]) {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0;
  gap: 0;
}
.add__btn {
  width: 30px;
  height: 100%;
  background: none;
  border: 0;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.add__n { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }

/* Skeleton, never a spinner */
.skel {
  background: linear-gradient(90deg, var(--line) 25%, #EFEDE5 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -135% 0; } }

/* ==========================================================================
   Offers
   ========================================================================== */

.offers {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.offers::-webkit-scrollbar { display: none; }
.offer {
  flex: 0 0 78%;
  max-width: 320px;
  scroll-snap-align: start;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.offer b {
  display: block;
  font-family: var(--font-display);
  font-size: 16.5px;
  letter-spacing: -0.02em;
}
.offer span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.offer code {
  display: inline-block;
  margin-top: 11px;
  padding: 5px 11px;
  border: 1px dashed var(--accent);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: #A85A11;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Areas
   ========================================================================== */

.areas {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) { .areas { grid-template-columns: repeat(4, 1fr); } }
.area {
  padding: 13px 14px;
  border-radius: var(--r-sm);
  background: rgba(251, 249, 244, 0.07);
  border: 1px solid rgba(251, 249, 244, 0.14);
  transition: background 140ms var(--ease);
}
.area:hover { background: rgba(251, 249, 244, 0.13); }
.area b {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--bg);
  letter-spacing: -0.01em;
}
.area span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(251, 249, 244, 0.6);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Bulk band
   ========================================================================== */

.bulk {
  display: grid;
  gap: var(--lg);
  padding: var(--lg);
  border-radius: var(--r-md);
  background: var(--tint-accent);
  border: 1px solid #F2DEC7;
}
@media (min-width: 860px) {
  .bulk { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: var(--xl); padding: var(--xl); }
}
.bulk h2 { max-width: 16ch; }
.bulk__pts { display: grid; gap: 10px; margin-top: var(--md); }
.bulk__pts li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  align-items: flex-start;
}
.bulk__pts li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================================
   Area page header
   ========================================================================== */

.areahd {
  background: var(--deep);
  color: var(--bg);
  padding-block: var(--lg) var(--xl);
}
.areahd h1 { color: var(--bg); font-size: clamp(27px, 6.4vw, 44px); }
.areahd__crumb {
  font-size: 13px;
  color: rgba(251, 249, 244, 0.6);
  margin-bottom: 14px;
}
.areahd__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: var(--lg);
  background: rgba(251, 249, 244, 0.16);
  border: 1px solid rgba(251, 249, 244, 0.16);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 700px) { .areahd__facts { grid-template-columns: repeat(4, 1fr); } }
.areahd__facts div { background: var(--deep); padding: 14px 15px; }
.areahd__facts dt {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(251, 249, 244, 0.55);
}
.areahd__facts dd {
  margin-top: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--bg);
  font-variant-numeric: tabular-nums;
}

.notice {
  padding: var(--md);
  border-radius: var(--r-md);
  background: var(--tint-accent);
  border: 1px solid #F2DEC7;
}
.notice b { font-family: var(--font-display); font-size: 16px; }
.notice p { margin-top: 6px; font-size: 14.5px; color: #7A4A15; }

/* Waitlist form */
.wait { display: flex; gap: 8px; margin-top: var(--md); flex-wrap: wrap; }
.wait input {
  flex: 1 1 180px;
  min-height: var(--tap);
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 15px;
}
.wait input::placeholder { color: var(--muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 17px 34px 17px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 21px;
  font-weight: 400;
  color: var(--accent);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding-bottom: 18px; font-size: 14.5px; color: var(--muted); }

/* ==========================================================================
   Sticky cart bar
   ========================================================================== */

.cartbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  z-index: 70;
  background: var(--deep);
  box-shadow: var(--lift);
  transform: translateY(120%);
  transition: transform 220ms var(--ease);
}
.cartbar.is-on { transform: translateY(0); }
@media (min-width: 900px) { .cartbar { bottom: 0; } }
.cartbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding-block: 11px;
}
.cartbar__txt { color: var(--bg); font-size: 13.5px; line-height: 1.3; }
.cartbar__txt b {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Bottom navigation, the thing that makes it feel like an app
   ========================================================================== */

.bnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--deep);
  box-shadow: var(--lift);
}
@media (min-width: 900px) { .bnav { display: none; } }
.bnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(251, 249, 244, 0.6);
  position: relative;
  transition: color 140ms var(--ease);
}
.bnav a[aria-current="page"] { color: var(--accent); }
.bnav a:active { color: var(--bg); }
.bnav svg { width: 19px; height: 19px; }
.bnav__dot {
  position: absolute;
  top: 9px;
  right: 50%;
  margin-right: -18px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ftr {
  background: var(--deep-2);
  color: rgba(251, 249, 244, 0.68);
  padding-block: var(--xl) var(--lg);
  font-size: 14px;
}
.ftr__grid {
  display: grid;
  gap: var(--lg);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 820px) { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--xl); } }
.ftr h4 {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(251, 249, 244, 0.45);
  font-weight: 600;
  margin-bottom: 12px;
}
.ftr li + li { margin-top: 8px; }
.ftr a:hover { color: var(--bg); }
.ftr__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--bg);
  letter-spacing: -0.03em;
}
.ftr__brand b { color: var(--accent); }
.ftr__legal {
  margin-top: var(--xl);
  padding-top: var(--md);
  border-top: 1px solid rgba(251, 249, 244, 0.13);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(251, 249, 244, 0.5);
}

/* ==========================================================================
   Sheet, used by the pincode gate
   ========================================================================== */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.sheet.is-on { display: block; }
.sheet__veil {
  position: absolute;
  inset: 0;
  background: rgba(17, 29, 24, 0.5);
}
.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: var(--lg) var(--gutter) calc(var(--lg) + env(safe-area-inset-bottom));
  animation: rise 240ms var(--ease);
}
@media (min-width: 640px) {
  .sheet__panel {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: 440px;
    transform: translate(-50%, -50%);
    border-radius: var(--r-md);
    animation: none;
  }
}
@keyframes rise { from { transform: translateY(100%); } }
.sheet h3 { margin-bottom: 6px; }
.sheet__zones { display: grid; gap: 8px; margin-top: var(--md); }
.zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease);
}
.zone:hover { border-color: var(--ink); }
.zone b { font-family: var(--font-display); font-size: 15px; }
.zone span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   WooCommerce surfaces inherit the same tokens
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 13px var(--md);
  border-radius: var(--r-sm);
  background: var(--tint-deep);
  border: 1px solid var(--line);
  margin-bottom: var(--md);
  font-size: 14.5px;
  list-style: none;
}
.woocommerce-error { background: #FBEDEB; border-color: #F0D3CF; }
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
  min-height: var(--tap);
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.woo-page { padding-block: var(--lg) var(--xl); }
.woo-page h1 { font-size: clamp(26px, 6vw, 38px); margin-bottom: var(--md); }

/* ==========================================================================
   Auth screen. App standard: a deep welcome band with a bone sheet rising
   over it, one focused task, nothing else competing for the thumb.
   ========================================================================== */

body.johar-auth { padding-bottom: 0; }
body.johar-auth .bnav,
body.johar-auth .cartbar,
body.johar-auth .ftr { display: none; }
body.johar-auth .hdr { background: var(--deep); border-bottom: 0; }
body.johar-auth .hdr__brand { color: var(--bg); }
body.johar-auth .hdr .pin,
body.johar-auth .hdr__links { display: none; }

.auth {
  background: var(--deep);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
}
.auth__top {
  padding: 8px var(--gutter) var(--lg);
  color: var(--bg);
}
.auth__top h1 {
  color: var(--bg);
  font-size: clamp(22px, 6vw, 30px);
  max-width: 16ch;
}
.auth__top p {
  margin-top: 10px;
  color: rgba(251, 249, 244, 0.72);
  font-size: 14px;
  max-width: 34ch;
}
.auth__sheet {
  flex: 1;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: var(--lg) var(--gutter) calc(var(--xl) + env(safe-area-inset-bottom));
}
.auth__inner {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .auth { flex-direction: row; align-items: stretch; }
  .auth__top { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--xl) 6vw; }
  .auth__sheet { flex: 0 0 46%; border-radius: 0; display: flex; align-items: center; padding: var(--xl) 4vw; }
}

/* Segmented control */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--tint-deep);
  border-radius: var(--r-pill);
  margin-bottom: var(--lg);
}
.seg button {
  min-height: 38px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.seg button[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
}

/* Fields */
.field { margin-bottom: var(--md); }
.field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"] {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 16px; /* 16px stops iOS from zooming on focus */
  transition: border-color 140ms var(--ease);
}
.field input:focus { border-color: var(--accent); outline: none; }
.field input[aria-invalid="true"] { border-color: var(--nonveg); }
.field__hint { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

.field--pass { position: relative; }
.field--pass input { padding-right: 54px; }
.field__eye {
  position: absolute;
  right: 6px;
  bottom: 5px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.field__eye:hover { color: var(--ink); }

.field--phone { position: relative; }
.field--phone input { padding-left: 52px; }
.field__cc {
  position: absolute;
  left: 15px;
  bottom: 0;
  height: 46px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--muted);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  margin: 4px 0 var(--lg);
  font-size: 14px;
}
.auth__row label { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.auth__row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.auth__row a { color: var(--accent); font-weight: 600; }

.auth__alt {
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.auth__alt a { color: var(--accent); font-weight: 600; }
.auth__fine { margin-top: var(--md); font-size: 12.5px; color: var(--muted); text-align: center; }
.auth__fine a { color: var(--muted); text-decoration: underline; }

.auth__panel[hidden] { display: none; }

/* ==========================================================================
   Account screen. A settings list, the way an app does it.
   ========================================================================== */

.acct__hd {
  background: var(--deep);
  color: var(--bg);
  padding: var(--lg) var(--gutter) var(--xl);
}
.acct__hd h1 { color: var(--bg); font-size: clamp(24px, 6vw, 32px); }
.acct__hd p { color: rgba(251, 249, 244, 0.7); margin-top: 6px; font-size: 14.5px; }

.acct__list {
  margin-top: calc(var(--lg) * -1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.acct__list li + li { border-top: 1px solid var(--line); }
.acct__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  min-height: 50px;
  padding: 0 var(--md);
  font-weight: 600;
  font-size: 14.5px;
  transition: background 140ms var(--ease);
}
.acct__list a:hover { background: var(--tint-deep); }
.acct__list a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.acct__list .is-logout a { color: var(--nonveg); }
/* ==========================================================================
   Cart and checkout. One column, one task per block, thumb sized controls.
   ========================================================================== */

body.johar-flow .cartbar { display: none; }
body.johar-flow .ftr { display: none; }

.woo-page .woocommerce { padding-block: var(--lg) var(--xl); }
body.johar-flow .woo-page > article > .entry { padding-inline: var(--gutter); max-width: var(--wrap); margin-inline: auto; }

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: var(--lg) 0 var(--md);
}

/* Form rows share the auth field look */
.woocommerce form .form-row {
  display: block;
  margin: 0 0 var(--md);
  padding: 0;
  width: 100%;
  float: none;
}
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.woocommerce form .form-row label .required { color: var(--accent); text-decoration: none; border: 0; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 140ms var(--ease);
  appearance: none;
}
.woocommerce form .form-row select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.woocommerce form .form-row textarea { min-height: 88px; resize: vertical; }
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--accent); outline: none; }
.woocommerce form .form-row .description,
.woocommerce form .form-row span.description {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--nonveg); }

/* Order review */
.woocommerce-checkout-review-order {
  margin-top: var(--lg);
  padding: var(--md);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.woocommerce table.shop_table {
  border: 0;
  border-radius: 0;
  margin: 0;
  font-size: 13.5px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.woocommerce table.shop_table td:last-child,
.woocommerce table.shop_table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
  padding-top: 12px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
}
.woocommerce table.shop_table .product-name { font-weight: 600; }
.woocommerce table.shop_table .product-quantity { color: var(--muted); font-weight: 400; }

/* Payment methods as tappable rows */
#payment { background: none; border-radius: 0; margin-top: var(--lg); }
#payment ul.payment_methods {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
#payment ul.payment_methods li {
  list-style: none;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
#payment ul.payment_methods li:last-child { border-bottom: 0; }
#payment ul.payment_methods li > label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px var(--md);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  margin: 0;
}
#payment ul.payment_methods li input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); }
#payment ul.payment_methods li img { max-height: 22px; width: auto; margin-left: auto; }
#payment div.payment_box {
  background: var(--tint-deep);
  margin: 0;
  padding: 13px var(--md);
  font-size: 13.5px;
  color: var(--muted);
  border-radius: 0;
}
#payment div.payment_box::before { display: none; }

#payment .form-row.place-order { margin: var(--lg) 0 0; padding: 0; }
#place_order,
.woocommerce #payment #place_order {
  width: 100%;
  min-height: 48px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  border: 0;
}
.woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--md); font-size: 13px; color: var(--muted); }

/* Coupon */
.woocommerce form.checkout_coupon {
  border: 1px dashed var(--accent);
  border-radius: var(--r-md);
  padding: var(--md);
  margin-bottom: var(--md);
  background: var(--tint-accent);
}

/* Cart table on mobile becomes stacked rows */
.woocommerce table.cart img { width: 48px; border-radius: var(--r-sm); }
.woocommerce .cart_totals {
  margin-top: var(--lg);
  padding: var(--md);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.woocommerce .cart_totals h2 { font-size: 17px; margin-bottom: 8px; }
.woocommerce .wc-proceed-to-checkout { padding: var(--md) 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  min-height: 48px;
  line-height: 48px;
  padding: 0;
  border-radius: var(--r-pill);
  font-size: 15px;
}
.woocommerce .quantity .qty {
  width: 58px;
  min-height: 38px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.woocommerce a.remove {
  color: var(--nonveg);
  font-size: 20px;
  line-height: 1;
}
.woocommerce a.remove:hover { background: none; color: var(--nonveg); }

@media (max-width: 700px) {
  .woocommerce table.cart thead { display: none; }
  .woocommerce table.cart tbody tr {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: var(--md) 0;
    border-bottom: 1px solid var(--line);
  }
  .woocommerce table.cart td { border: 0; padding: 0; }
  .woocommerce table.cart td.product-remove { grid-column: 3; grid-row: 1; }
  .woocommerce table.cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce table.cart td.product-name { grid-column: 2; grid-row: 1; font-weight: 600; }
  .woocommerce table.cart td.product-price { display: none; }
  .woocommerce table.cart td.product-quantity { grid-column: 2; grid-row: 2; }
  .woocommerce table.cart td.product-subtotal { grid-column: 3; grid-row: 2; text-align: right; font-weight: 700; }
  .woocommerce table.cart td.actions { grid-column: 1 / -1; padding-top: var(--md); }
}

@media (min-width: 900px) {
  .woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lg); }
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 { width: auto; float: none; }
}
/* ==========================================================================
   OTP step
   ========================================================================== */

.auth__msg {
  padding: 11px 13px;
  margin-bottom: var(--md);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  background: #FBEDEB;
  border: 1px solid #F0D3CF;
  color: #8A2F26;
}
.auth__msg.is-ok { background: var(--tint-deep); border-color: var(--line); color: var(--deep); }

.auth__who {
  margin-bottom: var(--lg);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.auth__who b { color: var(--ink); font-variant-numeric: tabular-nums; }
.auth__change {
  border: 0;
  background: none;
  padding: 2px 4px;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.otp input {
  width: 100%;
  height: 54px;
  padding: 0;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  caret-color: var(--accent);
}
.otp input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.otp.is-bad input { border-color: var(--nonveg); }
.otp.is-bad { animation: nudge 220ms var(--ease); }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.btn[aria-busy="true"] { opacity: 0.65; pointer-events: none; }
.btn--block + .btn--block { margin-top: 10px; }
/* ==========================================================================
   Checkout gate
   ========================================================================== */

/* While the gate is up nothing else on the page should be reachable. */
body.johar-gated form.checkout,
body.johar-gated .woocommerce-form-login-toggle,
body.johar-gated .woocommerce-form-coupon-toggle,
body.johar-gated .checkout_coupon,
body.johar-gated .woocommerce-form-login { display: none !important; }

.gate {
  max-width: 420px;
  margin: var(--md) auto var(--xl);
  padding: var(--lg) var(--md) var(--md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.gate__h {
  font-size: 19px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.gate__p {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: var(--lg);
}
.gate .otp input { height: 48px; font-size: 18px; }
.gate .btn--ghost { margin-top: 10px; }

.verified {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px var(--md);
  margin-bottom: var(--lg);
  background: var(--tint-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.verified__tick {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--veg);
  color: #FFFFFF;
}
.verified b {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.2;
}
.verified span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.verified__out {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}
/* ==========================================================================
   Cart. Quantity changes apply instantly, so there is no update button and
   no second orange action competing with checkout.
   ========================================================================== */

body.johar-flow .woo-page { padding-bottom: 0; }
.bag { padding-bottom: 96px; }

.bag__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md);
  margin-bottom: var(--md);
}
.bag__head h1 { font-size: clamp(21px, 5.4vw, 28px); }
.bag__head a { font-size: 13.5px; font-weight: 600; color: var(--accent); flex-shrink: 0; }

.bag__msg {
  padding: 10px 12px;
  margin-bottom: var(--md);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: #FBEDEB;
  border: 1px solid #F0D3CF;
  color: #8A2F26;
}
.bag__msg.is-ok { background: var(--tint-deep); border-color: var(--line); color: var(--deep); }

.bag__list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.bag__row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 12px var(--md);
  align-items: start;
}
.bag__row + .bag__row { border-top: 1px solid var(--line); }
.bag__row.is-going { opacity: 0.4; }

.bag__media {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: linear-gradient(150deg, #2A5A46, #163429);
}
.bag__media img { width: 100%; height: 100%; object-fit: cover; }

.bag__info { min-width: 0; }
.bag__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.bag__each { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.bag__act {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  margin-top: 10px;
}
.bag__sum { font-family: var(--font-display); font-weight: 700; font-size: 15px; }

/* Stepper, same control as the menu so it is already familiar */
.step {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.step__b {
  width: 34px;
  height: 100%;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.step__b:active { background: var(--tint-accent); }
.step__n {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

/* Coupon folds away until it is wanted */
.promo { margin-top: var(--md); }
.promo__open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 0 var(--md);
  border: 1px dashed var(--accent);
  border-radius: var(--r-md);
  background: var(--tint-accent);
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.promo__open b { color: #A85A11; font-size: 13.5px; }
.promo__body { margin-top: 10px; }
.promo__row { display: flex; gap: 8px; }
.promo__row input {
  flex: 1;
  min-height: 44px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 16px;
  text-transform: uppercase;
}
.promo__row input:focus { border-color: var(--accent); outline: none; }
.promo__on:empty { display: none; }
.promo__on { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.promo__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 11px;
  border-radius: var(--r-pill);
  background: var(--tint-deep);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--deep);
}
.promo__chip button {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

/* Free delivery progress */
.freebar {
  margin-top: var(--md);
  padding: 12px var(--md);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.freebar p { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.freebar p b { color: var(--ink); font-variant-numeric: tabular-nums; }
.freebar[data-done] p { color: var(--veg); font-weight: 600; }
.freebar__track {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.freebar__track span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 260ms var(--ease);
}
.freebar[data-done] .freebar__track span { background: var(--veg); }

/* Bill */
.bill {
  margin-top: var(--md);
  padding: var(--md);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.bill h2 { font-size: 15px; margin-bottom: 10px; }
.bill dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--md);
  padding: 7px 0;
  font-size: 14px;
}
.bill dt { color: var(--muted); }
.bill dd { font-weight: 600; }
.bill__total {
  margin-top: 4px;
  padding-top: 12px !important;
  border-top: 1px solid var(--line);
}
.bill__total dt { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.bill__total dd { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.bill__note { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* Sticky checkout bar */
.paybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  z-index: 70;
  background: var(--deep);
  box-shadow: var(--lift);
}
@media (min-width: 900px) { .paybar { bottom: 0; } }
.paybar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding: 10px var(--gutter);
  max-width: var(--wrap);
  margin-inline: auto;
}
.paybar__txt { color: var(--bg); font-size: 12.5px; line-height: 1.25; }
.paybar__txt b { display: block; font-family: var(--font-display); font-size: 17px; }
.paybar .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Empty state */
.bag__empty { text-align: center; padding: var(--xl) 0; }
.bag__emptyart { max-width: 150px; margin: 0 auto var(--lg); }
.bag__empty h1 { font-size: 22px; }
.bag__empty p { margin: 10px auto 0; color: var(--muted); font-size: 14px; max-width: 34ch; }
.bag__empty .btn { margin-top: var(--lg); }
/* ==========================================================================
   Bulk page: package cards and numbered steps
   ========================================================================== */

.pk { display: grid; gap: 12px; }
@media (min-width: 820px) {
  .pk { grid-template-columns: 1fr 1fr; }
  .pk__c--wide { grid-column: 1 / -1; }
}

.pk__c {
  padding: var(--md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pk__c h3 { font-size: 16px; margin-bottom: 12px; }
.pk__c ul { border-top: 1px solid var(--line); }
.pk__c li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.pk__c li span { color: var(--muted); }
.pk__c li b { font-family: var(--font-display); font-size: 15px; flex-shrink: 0; }
.pk__c > p { margin-top: 12px; font-size: 13px; color: var(--muted); }

.steps { counter-reset: s; display: grid; gap: 2px; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: var(--md) var(--md) var(--md) 58px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.steps li:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.steps li:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
.steps li::before {
  content: counter(s);
  position: absolute;
  left: var(--md);
  top: var(--md);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--deep);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
}
.steps h3 { font-size: 15px; }
.steps p { margin-top: 5px; font-size: 13.5px; color: var(--muted); }

.area--light { background: var(--surface); border-color: var(--line); }
.area--light b { color: var(--ink); }
.area--light span { color: var(--muted); }
.area--light:hover { background: var(--tint-deep); }
/* Area hub grid */
.hublist { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .hublist { grid-template-columns: repeat(4, 1fr); } }
.hublist a { padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: border-color 140ms var(--ease); }
.hublist a:hover { border-color: var(--ink); }
.hublist b { display: block; font-family: var(--font-display); font-size: 14px; letter-spacing: -0.01em; }
.hublist span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.hublist__on-deep { background: rgba(251,249,244,.07); border-color: rgba(251,249,244,.14); }
.hublist__on-deep b { color: var(--bg); }
.hublist__on-deep span { color: rgba(251,249,244,.6); }
.hublist__on-deep:hover { border-color: rgba(251,249,244,.4); }

/* ==========================================================================
   Event enquiry form
   ========================================================================== */

.lead {
  padding: var(--lg) var(--md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-width: 620px;
  margin-inline: auto;
  scroll-margin-top: 80px;
}
.lead__h { font-size: 19px; margin-bottom: 6px; }
.lead__p { font-size: 13.5px; color: var(--muted); margin-bottom: var(--lg); }
.lead__two { display: grid; gap: 0 12px; }
@media (min-width: 560px) { .lead__two { grid-template-columns: 1fr 1fr; } }

.lead .field > label { font-size: 13px; }
.lead textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 16px;
  resize: vertical;
}
.lead select,
.lead input[type="date"],
.lead input[type="number"],
.lead input[type="text"],
.lead input[type="tel"] {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 16px;
  font-family: var(--font-body);
  appearance: none;
}
.lead input:focus, .lead select:focus, .lead textarea:focus { border-color: var(--accent); outline: none; }

/* Tappable chips instead of bare radios and checkboxes */
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick__i input { position: absolute; opacity: 0; pointer-events: none; }
.pick__i span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.pick__i input:checked + span {
  border-color: var(--accent);
  background: var(--tint-accent);
  color: #A85A11;
}
.pick__i input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.lead__done { text-align: center; padding: var(--md) 0; }
.lead__done .verified__tick { margin: 0 auto var(--md); width: 40px; height: 40px; }
.lead__done h3 { font-size: 19px; }
.lead__done p { margin: 10px auto var(--lg); font-size: 14px; color: var(--muted); max-width: 40ch; }
/* ==========================================================================
   Enquiry form fixes
   1. select had appearance:none with no arrow of its own, so it rendered as a
      plain box with no hint that it opens.
   2. the generic .lead input rule came later in the file and overrode the
      +91 prefix padding, so the prefix sat on top of the typed number.
   3. the chips relied only on :checked, which is fragile, so a class is set
      as well and both are styled.
   ========================================================================== */

.lead select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
  cursor: pointer;
}

.lead input[type="date"] { appearance: auto; -webkit-appearance: none; }

.lead .field--phone { position: relative; }
.lead .field--phone input[type="tel"] { padding-left: 52px; }
.lead .field--phone .field__cc {
  position: absolute;
  left: 13px;
  bottom: 0;
  height: 46px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}

.pick__i { position: relative; display: inline-flex; }
.pick__i input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  min-height: 0;
}
.pick__i input:checked + span,
.pick__i.is-on span {
  border-color: var(--accent);
  background: var(--tint-accent);
  color: #A85A11;
}
.pick__i span { user-select: none; }

.lead__two { row-gap: 0; }
.lead .field { margin-bottom: var(--md); }
/* Account: stats, services and one timeline for everything */
.acct__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: calc(var(--lg) * -1);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.acct__stats div { background: var(--surface); padding: 13px 12px; }
.acct__stats b { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: -0.02em; }
.acct__stats span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

.acct__svc { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--md); }
.acct__svc span {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--tint-deep);
  font-size: 12px;
  font-weight: 600;
  color: var(--deep);
}

.tl { display: grid; gap: 8px; }
.tl__i {
  position: relative;
  padding: 12px 14px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  border-left-width: 3px;
}
.tl__i--order { border-left-color: var(--accent); }
.tl__i--enquiry { border-left-color: var(--deep); }
.tl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tl__top b { font-family: var(--font-display); font-size: 14.5px; }
.tl__s {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.tl__i p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.tl__m { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
/* ==========================================================================
   Navigation. Desktop keeps to one line with a panel under each group.
   Mobile gets a drawer, because the bottom bar only carries five taps.
   ========================================================================== */

.hdr__burger {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
.hdr__burger span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.hdr__burger span:last-child { width: 13px; }

.hdr__call {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--tint-accent);
  color: #A85A11;
}

.nav { display: none; }
@media (min-width: 980px) {
  .nav { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
  .hdr__burger { display: none; }

  .nav__g { position: relative; }
  .nav__t {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 13px;
    border-radius: var(--r-pill);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--muted);
    transition: color 140ms var(--ease), background 140ms var(--ease);
  }
  .nav__g:hover .nav__t,
  .nav__g:focus-within .nav__t { color: var(--ink); background: var(--tint-deep); }

  .nav__p {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 10px 28px rgba(17, 29, 24, 0.11);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 140ms;
    z-index: 90;
  }
  .nav__g:hover .nav__p,
  .nav__g:focus-within .nav__p { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__p a {
    display: block;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--ink);
  }
  .nav__p a:hover { background: var(--tint-deep); }
}

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 300; }
.drawer[hidden] { display: none; }
.drawer__veil { position: absolute; inset: 0; background: rgba(17, 29, 24, 0.5); }
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  animation: slidein 240ms var(--ease);
}
@keyframes slidein { from { transform: translateX(100%); } }
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--md);
  border-bottom: 1px solid var(--line);
}
.drawer__x {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.drawer__scroll { flex: 1; overflow-y: auto; padding: var(--md) var(--md) var(--lg); }
.drawer__g + .drawer__g { margin-top: var(--lg); }
.drawer__g h3 {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 6px;
}
.drawer__g a {
  display: block;
  min-height: 44px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.drawer__g li:last-child a { border-bottom: 0; }
.drawer__foot {
  padding: var(--md) var(--md) calc(var(--md) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.drawer__foot .btn + .btn { margin-top: 8px; }

body.drawer-open { overflow: hidden; }
/* ==========================================================================
   Breadcrumbs. A quiet strip under the header, present on every page except
   the front page, so the visitor and the crawler always know where they are.
   ========================================================================== */

.bc {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.bc ol {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.bc ol::-webkit-scrollbar { display: none; }
.bc li { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bc li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.bc a { color: var(--muted); }
.bc a:hover { color: var(--ink); text-decoration: underline; }
.bc span[aria-current] {
  color: var(--ink);
  font-weight: 600;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 700px) { .bc span[aria-current] { max-width: none; } }

/* The chip rail sticks under the header, so it must clear the crumb strip */
.bc + .rail { top: var(--header-h); }
/* Where else we are listed */
.ftr__find { margin-top: var(--xl); }
.listings {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}
@media (min-width: 700px) { .listings { grid-template-columns: repeat(4, 1fr); } }
.listings a {
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(251, 249, 244, 0.07);
  border: 1px solid rgba(251, 249, 244, 0.14);
  transition: background 140ms var(--ease);
}
.listings a:hover { background: rgba(251, 249, 244, 0.13); }
.listings b {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--bg);
  letter-spacing: -0.01em;
}
.listings span { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(251, 249, 244, 0.6); }

/* Same row on a light ground, used on the About page */
.listings--light a { background: var(--surface); border-color: var(--line); }
.listings--light b { color: var(--ink); }
.listings--light span { color: var(--muted); }
.listings--light a:hover { background: var(--tint-deep); }
/* About: plain fact list */
.facts { margin-top: var(--md); border-top: 1px solid var(--line); }
.facts > div { display: flex; gap: var(--md); padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { flex: 0 0 34%; color: var(--muted); }
.facts dd { font-weight: 600; }
.facts a { color: var(--accent); }

/* Use my current location */
.locate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  margin: var(--md) 0 10px;
  padding: 0 14px;
  border: 1.5px dashed var(--accent);
  border-radius: var(--r-sm);
  background: var(--tint-accent);
  color: #A85A11;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.locate:hover { background: #FBE7D3; }
.locate[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.locate svg { flex-shrink: 0; }

.locate__out {
  padding: 10px 12px;
  margin-bottom: var(--md);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.45;
  background: var(--tint-deep);
  border: 1px solid var(--line);
  color: var(--muted);
}
.locate__out b { color: var(--ink); }
.locate__out a { color: var(--accent); font-weight: 600; }
.locate__out.is-ok { background: #EDF5EF; border-color: #CFE3D5; color: #2C6B3C; }
.locate__out.is-ok b { color: #1E4A29; }
.locate__out.is-warn { background: var(--tint-accent); border-color: #F2DEC7; color: #7A4A15; }
.locate__out.is-warn b { color: #5C3810; }
.locate__out.is-bad { background: #FBEDEB; border-color: #F0D3CF; color: #8A2F26; }
/* ==========================================================================
   Trust strip and the real handi photo
   ========================================================================== */

.trust {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 820px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust li { background: var(--surface); padding: 14px 13px; }
.trust b {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.trust span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.trust--deep li { background: rgba(251, 249, 244, 0.07); }
.trust--deep { background: rgba(251, 249, 244, 0.14); border-color: rgba(251, 249, 244, 0.14); }
.trust--deep b { color: var(--bg); }
.trust--deep span { color: rgba(251, 249, 244, 0.62); }

/* Real photo in the hero slot */
.handi--photo {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #24513F, #10261E);
  box-shadow: inset 0 0 0 1px rgba(251, 249, 244, 0.1);
}
.handi--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A shared placeholder should read as a placeholder, not as this dish */
.dish__media img.is-placeholder { opacity: 0.55; }
/* Review ask */
.revask {
  padding: var(--lg) var(--md);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
  max-width: 520px;
  margin-inline: auto;
}
.revask__stars { display: flex; justify-content: center; gap: 3px; color: var(--accent); margin-bottom: 12px; }
.revask h3 { font-size: 18px; }
.revask p { margin: 8px auto var(--lg); font-size: 13.5px; color: var(--muted); max-width: 40ch; }
/* Repeat order coupon */
.repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  max-width: 520px;
  margin: 0 auto var(--md);
  padding: 14px var(--md);
  border: 1px dashed var(--accent);
  border-radius: var(--r-md);
  background: var(--tint-accent);
}
.repeat b { display: block; font-family: var(--font-display); font-size: 15.5px; color: var(--ink); }
.repeat span { display: block; margin-top: 3px; font-size: 12px; color: #7A4A15; }
.repeat code {
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid #F2DEC7;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #A85A11;
}
.revask__note { margin-top: 12px !important; font-size: 12px !important; color: var(--muted); }
/* ==========================================================================
   Logo. Mark plus the name set in the brand face. Kept as live text so it
   stays sharp, loads with the page and is readable as the business name.
   ========================================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  color: var(--ink);
  line-height: 1;
}
.logo .mark { color: var(--accent); flex-shrink: 0; }
.logo__txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-display);
}
.logo__txt b {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.logo__txt em {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}

/* Very narrow phones: the delivery chip needs the room more than the logo */
@media (max-width: 380px) {
  .logo__txt b { font-size: 15.5px; }
  .logo__txt em { font-size: 8.5px; letter-spacing: 0.18em; }
}
@media (min-width: 900px) {
  .logo__txt b { font-size: 20px; }
  .logo__txt em { font-size: 10px; }
}

/* On the dark footer and drawer */
.logo--footer, .logo--drawer { color: var(--bg); }
.logo--footer .logo__txt b, .logo--drawer .logo__txt b { font-size: 21px; }
.logo--drawer { color: var(--ink); }
.logo--footer { margin-bottom: 12px; }
/* ==========================================================================
   Fit to the device.

   The header row was wider than a narrow phone once the full name went into
   the logo, which pushed the whole page sideways. Fixed pixel widths are
   replaced with fluid ones so every screen sizes itself, and flex children
   get min-width 0 so they are actually allowed to shrink.
   ========================================================================== */

/* A flex or grid child will not shrink below its content unless told to. */
.hdr__row > *,
.bag__row > *,
.dish > *,
.tl__top > *,
.verified > * { min-width: 0; }

.hdr__row {
  gap: clamp(6px, 2vw, 12px);
  flex-wrap: nowrap;
}

/* The logo keeps its size, the delivery chip gives up room first. */
.logo { flex: 0 0 auto; }

.pin {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  padding: 0 clamp(8px, 2.6vw, 13px);
  gap: clamp(4px, 1.4vw, 7px);
  font-size: clamp(11.5px, 3.1vw, 13px);
}
.pin span { min-width: 0; }

.hdr__spacer { flex: 1 1 0; min-width: 0; }

.hdr__call,
.hdr__burger { flex: 0 0 auto; }
.hdr__call { width: clamp(32px, 9vw, 38px); height: clamp(32px, 9vw, 38px); }
.hdr__burger { width: clamp(34px, 9.5vw, 40px); }

/* Safety net: nothing should be able to push the page sideways. */
html { overflow-x: hidden; }
img, svg, video, canvas, iframe, table, pre { max-width: 100%; }
.wrap { max-width: min(var(--wrap), 100%); }

/* Long words in dish names and areas wrap instead of stretching the row. */
.dish__name, .bag__name, .tl__top b, .acct__list a, .hublist b, .area b {
  overflow-wrap: anywhere;
}
/* ==========================================================================
   Contact page
   ========================================================================== */

.ctact {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-top: var(--lg);
}
@media (min-width: 620px) { .ctact { grid-template-columns: repeat(3, 1fr); } }

.ctact__c {
  display: block;
  padding: var(--md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.ctact__c:hover { border-color: var(--accent); background: var(--tint-accent); }
.ctact__i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 11px;
  border-radius: var(--r-pill);
  background: var(--tint-accent);
  color: #A85A11;
}
.ctact__c b {
  display: block;
  font-family: var(--font-display);
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.ctact__c span:not(.ctact__i) {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

.mapbox {
  margin-top: var(--lg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint-deep);
  aspect-ratio: 16 / 11;
}
@media (min-width: 760px) { .mapbox { aspect-ratio: 16 / 7; } }
.mapbox iframe { width: 100%; height: 100%; border: 0; display: block; }