/* ============================================================================
   BITES & BARREL — bright, poppy, and only three colours
   ----------------------------------------------------------------------------
   Warm white page. WINE for anything you can act on. GOLD for anything we want
   you to look at. INK for anything already decided. That is the whole scheme.

   Green and red appear in exactly one place — the little veg / non-veg square
   beside a dish name, which is a food-labelling convention and not a design
   choice. Nothing else on the app is allowed to be a fourth colour.
   ========================================================================== */

:root {
  /* page */
  --paper:    #FFFDF8;   /* warm white — the ground everywhere */
  --card:     #FFFFFF;
  --sand:     #FAF2E6;   /* quiet fill for chips, steppers and tiles */
  --sand-2:   #F0E3D0;
  --line:     #E8DCCB;

  /* ink */
  --ink:      #1A1618;
  --ink-2:    #5C5155;
  --ink-3:    #8E8288;

  /* the two brand colours */
  --wine:     #C4104A;
  --wine-ink: #8E0B36;
  --wine-soft:#FFE9EF;

  --gold:     #FFB627;
  --gold-ink: #6E4700;
  --gold-2:   #D18E00;
  --gold-soft:#FFF3D6;

  /* food labelling only */
  --veg:      #17914F;
  --nonveg:   #D63A2E;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-lg: 0 10px 30px rgba(26,22,24,.13);

  --tabbar: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --display: "Bricolage Grotesque", "Outfit", ui-sans-serif, system-ui, sans-serif;
  --body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body { min-height: 100dvh; }

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 800;
  letter-spacing: -.035em; margin: 0; line-height: 1.02;
  text-wrap: balance;
}
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul.plain { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--wine); outline-offset: 2px; border-radius: 6px; }

/* ---------- frame ---------- */

#app {
  max-width: 560px; margin: 0 auto; min-height: 100dvh;
  background: var(--paper); position: relative; padding-bottom: 0;
}
@media (min-width: 561px) {
  body { background: var(--sand-2); }
  #app { box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(26,22,24,.16); }
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  padding: calc(var(--safe-t) + 12px) 56px 12px;
  background: var(--wine); color: #fff;
  display: flex; align-items: center; justify-content: center;
  min-height: 60px;
}
.topbar.scrolled { box-shadow: 0 3px 0 var(--wine-ink); }

/* At the top of a page the bar carries the wordmark alone, centred. Once you
   start scrolling it becomes the stacked mark pinned to the top left — the
   brand is still there, but out of the way of what you came to read.
   The two images occupy the same box and cross-fade, which is why both are in
   the markup and both are absolutely positioned. If either one loses its
   `position: absolute` they stack vertically and you see two logos at once. */
.topbar__brand { position: relative; flex: 1; height: 40px; }
.topbar__logo {
  position: absolute; top: 50%; width: auto; cursor: pointer;
  transition: opacity .3s ease, transform .3s ease;
}
.topbar__logo--word {
  left: 50%; transform: translate(-50%, -50%); height: 23px; opacity: 1;
}
.topbar__logo--full {
  left: 0; transform: translateY(-50%) scale(.9); transform-origin: left center;
  height: 46px; opacity: 0; pointer-events: none;
}
.topbar.scrolled .topbar__logo--word { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.94); }
.topbar.scrolled .topbar__logo--full { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.topbar__title { display: none; }
.topbar__back {
  position: absolute; left: 12px; top: 50%;
  margin-top: calc(var(--safe-t) / 2); transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--wine);
  background: #fff;
}
.topbar__back:active { transform: translateY(-50%) scale(.9); }

/* ---------- layout ---------- */

.wrap { padding: 0 16px; }
.stack > * + * { margin-top: 12px; }
.section { margin-top: 30px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 16px 8px; }
.section__title { font-size: 24px; }
.section__line { color: var(--ink-2); font-size: 14px; padding: 0 16px 14px; }
.section__more { color: var(--wine); font-weight: 800; font-size: 13.5px; white-space: nowrap; }

.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-ink); background: var(--gold);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.eyebrow--light { color: var(--gold-ink); background: var(--gold); }

.muted { color: var(--ink-2); }
.small { font-size: 13.5px; }
.tiny  { font-size: 12px; }

/* ---------- buttons ---------- */

.btn {
  display: block; width: 100%; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 16.5px;
  letter-spacing: -.01em;
  padding: 16px; border-radius: 999px;
  transition: transform .1s ease;
}
.btn:active { transform: translateY(2px); }
.btn--wine  { background: var(--wine); color: #fff; box-shadow: 0 4px 0 var(--wine-ink); }
.btn--wine:active { box-shadow: 0 2px 0 var(--wine-ink); }
.btn--gold  { background: var(--gold); color: var(--gold-ink); box-shadow: 0 4px 0 var(--gold-2); }
.btn--gold:active { box-shadow: 0 2px 0 var(--gold-2); }
.btn--wa    { background: var(--wine); color: #fff; box-shadow: 0 4px 0 var(--wine-ink); }
.btn--wa:active { box-shadow: 0 2px 0 var(--wine-ink); }
.btn--ghost { background: #fff; color: var(--wine); box-shadow: inset 0 0 0 2px var(--wine); }
.btn[disabled] { opacity: .4; pointer-events: none; box-shadow: none; }

.hero__cta {
  display: block; width: 100%; margin-top: 16px;
  background: var(--wine); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 17px;
  padding: 17px; border-radius: 999px;
  box-shadow: 0 5px 0 var(--wine-ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.hero__cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--wine-ink); }
.hero__note { text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- splash ---------- */

.splash {
  min-height: 100dvh; padding: 24px;
  background: var(--wine);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  position: relative; overflow: hidden;
}
/* Solid blobs, not translucent ones — gold at low alpha over wine turns a muddy
   orange, which reads as a printing fault rather than as a decision. */
.splash::before, .splash::after { content: ""; position: absolute; border-radius: 50%; }
.splash::before { width: 260px; height: 260px; background: var(--gold); top: -125px; left: -110px; }
.splash::after  { width: 220px; height: 220px; background: var(--wine-ink); bottom: -100px; right: -90px; }
.splash__logo {
  height: 138px; width: auto; position: relative; z-index: 1;
  animation: pop .6s cubic-bezier(.2,1.3,.4,1) both;
}
.splash__tag {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  animation: pop .6s .2s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.86) translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the pitch ---------- */

.ob {
  min-height: 100dvh;
  padding: calc(var(--safe-t) + 22px) 18px calc(var(--safe-b) + 24px);
  display: flex; flex-direction: column;
  background: var(--paper);
}
.ob--intro {
  justify-content: space-between; align-items: center; text-align: center;
  background: radial-gradient(80% 42% at 50% 0%, var(--gold-soft), transparent 72%), var(--paper);
}

/* The supplied logo is white artwork with wine linework inside it — drawn for a
   dark ground. The page is light now, so it sits on a wine plate rather than
   disappearing. This keeps her artwork exactly as it is instead of recolouring it. */
.ob__logo {
  height: 88px; width: auto; margin: 0 auto;
  background: var(--wine); padding: 13px 20px; border-radius: 24px;
  box-shadow: 0 5px 0 var(--wine-ink); box-sizing: content-box;
}

.intro__top { width: 100%; }
.intro__mid { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 380px; }
.intro__h { font-size: clamp(30px, 10vw, 40px); line-height: .98; }
.intro__h span { display: block; }
.intro__h em { font-style: normal; display: block; color: var(--wine); transform: rotate(-1.6deg); }

.hr { display: flex; align-items: center; gap: 10px; width: 100%; }
.hr i { flex: 1; height: 3px; border-radius: 2px; background: var(--sand-2); }
.hr b { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; }

.vs { display: grid; gap: 8px; width: 100%; }
.vs__no {
  font-size: 14px; color: var(--ink-3);
  background: var(--sand); border-radius: var(--r-sm);
  padding: 10px 13px; text-align: left;
}
.vs__no s { color: var(--ink-2); font-weight: 700; text-decoration-color: var(--wine); }

.yes {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--gold); color: var(--gold-ink);
  box-shadow: 0 5px 0 var(--gold-2);
}
.yes__n { font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -.05em; flex: none; }
.yes__b b { display: block; font-family: var(--display); font-size: 16px; }
.yes__b em { display: block; font-style: normal; font-size: 12.5px; opacity: .78; margin-top: 2px; }
.intro__cta { margin: 0; width: 100%; max-width: 380px; }

/* ---------- home / occasion picker ---------- */

.ob--home {
  justify-content: flex-start; text-align: left;
  min-height: auto; padding-bottom: 8px;
}
.ob--home .ob__logo { height: 70px; margin: 0 auto 18px; }

.ob__size {
  align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-ink); background: var(--gold-soft);
  padding: 7px 13px; border-radius: 999px;
}
.ob__q { font-size: 34px; margin-top: 14px; }
.ob__sub { color: var(--ink-2); font-size: 14.5px; margin-top: 10px; max-width: 40ch; }

.now {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-bottom: 18px; padding: 14px;
  background: var(--wine); color: #fff;
  border-radius: var(--r-lg); box-shadow: 0 5px 0 var(--wine-ink);
}
.now:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--wine-ink); }
.now__b { flex: 1; min-width: 0; }
.now__k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.now__v { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; margin-top: 2px; }
.now__x { display: block; font-size: 12px; opacity: .8; margin-top: 2px; }
.now__go { flex: none; background: var(--gold); color: var(--gold-ink); font-family: var(--display); font-weight: 800; font-size: 13px; padding: 10px 15px; border-radius: 999px; }

.occ { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 20px; }
.occ__c {
  text-align: left; padding: 15px 14px 16px;
  border-radius: var(--r-lg); background: var(--card);
  border: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
  transition: transform .1s ease;
}
.occ__c:active { transform: translateY(2px); }
.occ__i {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 7px;
  background: var(--gold-soft); color: var(--wine);
}
.occ__n { font-family: var(--display); font-weight: 700; font-size: 15.5px; }
.occ__l { font-size: 12px; color: var(--ink-2); line-height: 1.35; }

.occ__c.is-on { background: var(--wine); border-color: var(--wine); }
.occ__c.is-on .occ__i { background: rgba(255,255,255,.18); color: var(--gold); }
.occ__c.is-on .occ__n { color: #fff; }
.occ__c.is-on .occ__l { color: rgba(255,255,255,.72); }

.ob__alt { display: flex; gap: 10px; margin-top: 20px; }
.ob__alt button {
  flex: 1; padding: 13px 8px; border-radius: 999px;
  background: var(--sand); border: 2px solid var(--line);
  font-family: var(--display); font-weight: 800; font-size: 13px;
}
.ob__alt button:active { transform: translateY(2px); }
.ob__skip { margin-top: 18px; align-self: center; color: var(--ink-3); font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }

.ob__back { align-self: flex-start; display: flex; align-items: center; gap: 6px; color: var(--wine); font-size: 13.5px; font-weight: 800; padding: 6px 0; margin-bottom: 12px; }
.ob__back svg { transform: rotate(180deg); }
.ob__chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  background: var(--gold); color: var(--gold-ink);
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 800;
}
.ob__note { text-align: center; margin-top: 12px; font-size: 12px; color: var(--ink-3); }

/* ---------- who's coming ---------- */

.pax { margin-top: 22px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 4px 16px 16px; }
.pax__row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 2px solid var(--sand); }
.pax__k { flex: 1; font-family: var(--display); font-weight: 800; font-size: 16px; }
.pax__k em { display: block; font-family: var(--body); font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-3); margin-top: 2px; letter-spacing: 0; }
.pax__ctl { display: flex; align-items: center; gap: 12px; flex: none; }
.pax__ctl b { font-family: var(--display); font-size: 26px; min-width: 34px; text-align: center; }
.pax__sum { padding-top: 14px; text-align: center; }
.pax__sum span { font-family: var(--display); font-weight: 800; font-size: 15px; }
.pax__sum em { display: block; font-style: normal; font-size: 12px; color: var(--wine); margin-top: 3px; font-weight: 700; }

.people__btn {
  width: 44px; height: 44px; flex: none; border-radius: 14px;
  background: var(--wine); color: #fff;
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 3px 0 var(--wine-ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.people__btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wine-ink); }
.people__btn[disabled] { opacity: .35; }

.paxq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; }
.paxq__b {
  min-width: 48px; padding: 10px 13px; border-radius: 999px;
  background: var(--card); border: 2px solid var(--line);
  font-family: var(--display); font-weight: 800; font-size: 14.5px;
}
.paxq__b.is-on { background: var(--wine); border-color: var(--wine); color: #fff; }

.when { margin-top: 22px; }
.when__k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.when__row { display: flex; gap: 8px; }
.when__b {
  flex: 1; min-width: 0; padding: 12px 10px; border-radius: var(--r-sm);
  background: var(--card); border: 2px solid var(--line); text-align: left;
}
.when__b b { display: block; font-family: var(--display); font-weight: 800; font-size: 14px; }
.when__b em { display: block; font-style: normal; font-size: 10.5px; line-height: 1.3; color: var(--ink-3); margin-top: 2px; }
.when__b.is-on { background: var(--wine); border-color: var(--wine); color: #fff; }
.when__b.is-on em { color: rgba(255,255,255,.78); }

/* the opening screens have no chrome */
body.is-onboarding .tabbar,
body.is-onboarding .servesbar,
body.is-onboarding .fab-wa,
body.is-onboarding .footer,
body.is-onboarding .topbar { display: none !important; }
body.is-splash .topbar, body.is-splash .tabbar, body.is-splash .servesbar,
body.is-splash .fab-wa, body.is-splash .footer { display: none !important; }
body.is-splash #app { padding: 0; }

/* ---------- hero (inner screens) ---------- */

.hero { background: var(--gold); color: var(--gold-ink); padding: 24px 16px 28px; position: relative; overflow: hidden; }
.hero h1 { font-size: 32px; }
.hero h1 em { font-style: normal; color: var(--wine); }
.hero p { font-size: 14.5px; margin-top: 10px; max-width: 36ch; opacity: .82; }
.hero .eyebrow { background: var(--wine); color: #fff; }
.hero__swap { display: block; margin: 14px auto 0; font-size: 13px; font-weight: 800; color: var(--wine); text-decoration: underline; text-underline-offset: 3px; padding: 4px; }

.whos {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-top: 18px; padding: 14px;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 4px 0 rgba(110,71,0,.2);
}
.whos:active { transform: translateY(2px); }
.whos__b { flex: 1; min-width: 0; }
.whos__k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.whos__v { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; margin-top: 2px; color: var(--ink); }
.whos__go { flex: none; background: var(--wine); color: #fff; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; }
.whos--light { background: #fff; box-shadow: 0 4px 0 var(--line); }

/* ---------- chips ---------- */

/* The category filters used to wrap into six rows of fat pills and swallow the
   whole first screen before a single dish appeared. One scrolling line now, in
   a restrained shape — and the diet filter is a segmented control, because it
   is a different kind of choice from "which section" and should not look the
   same as one. */
.filters {
  position: sticky; top: 60px; z-index: 30;
  background: var(--paper); border-bottom: 2px solid var(--line);
  padding: 12px 0 10px;
}
.filters__note { font-size: 11.5px; color: var(--ink-3); padding: 9px 16px 0; }
/* A soft cut at the right edge so it is obvious the row keeps going. Without it
   the last visible chip looks like the last chip there is. */
.filters { position: sticky; }
.filters::after {
  content: ""; position: absolute; right: 0; top: 12px; width: 34px; height: 36px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,253,248,0), var(--paper));
}

.chips { display: flex; gap: 7px; overflow-x: auto; padding: 1px 16px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  flex: none; padding: 8px 14px; border-radius: 10px;
  background: var(--card); border: 1.5px solid var(--line);
  font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--ink-2);
  white-space: nowrap;
}
.chip:active { transform: translateY(1px); }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.seg {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 10px 16px 0; padding: 3px;
  background: var(--sand); border-radius: 11px;
}
.seg__b {
  padding: 8px 6px; border-radius: 8px;
  font-family: var(--body); font-weight: 700; font-size: 13px; color: var(--ink-3);
  white-space: nowrap;
}
.seg__b.is-on { background: #fff; color: var(--wine); box-shadow: 0 1px 3px rgba(26,22,24,.14); }

.tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 7px;
  background: var(--sand); color: var(--ink-2);
}
.tag--sig  { background: var(--gold); color: var(--gold-ink); }
.tag--drop { background: var(--wine); color: #fff; }
.tag--new  { background: var(--ink); color: #fff; }

.dot { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--veg); display: inline-grid; place-items: center; flex: none; }
.dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--veg); }
.dot--nv { border-color: var(--nonveg); }
.dot--nv::after { background: var(--nonveg); }

.spice { display: inline-flex; gap: 3px; }
.spice i { width: 5px; height: 5px; border-radius: 50%; background: var(--sand-2); }
.spice i.on { background: var(--wine); }

.rate { font-size: 11.5px; font-weight: 800; color: var(--wine); background: var(--wine-soft); padding: 4px 8px; border-radius: 7px; }

/* ---------- dish cards ---------- */

.card { background: var(--card); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 14px; }

.item { position: relative; }
.item__img {
  position: relative; margin: -14px -14px 12px;
  border-radius: 20px 20px 0 0; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--sand);
}
.item__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.item__img img.is-on { opacity: 1; }
.item__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--wine); opacity: .3; }
.item__ph em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.item__top { display: flex; gap: 8px; align-items: flex-start; }
.item__name { font-family: var(--display); font-weight: 700; font-size: 17px; flex: 1; line-height: 1.2; }
.item__meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.item__blurb { font-size: 13.5px; font-weight: 400; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }

.qsel { display: flex; align-items: center; gap: 10px; margin-top: 14px; background: var(--sand); border-radius: var(--r); padding: 7px; }
.qsel__b {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  background: #fff; color: var(--wine); box-shadow: 0 3px 0 var(--sand-2);
  font-size: 21px; line-height: 1; display: grid; place-items: center;
}
.qsel__b:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sand-2); }
.qsel__v { flex: 1; text-align: center; min-width: 0; }
.qsel__v b { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; }
.qsel__v em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.qsel__hint { text-align: center; font-size: 11px; color: var(--ink-3); margin-top: 7px; }
.qsel__pre { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.qsel__p { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: #fff; border: 2px solid var(--line); color: var(--ink-2); }
.qsel__p.is-on { background: var(--wine); border-color: var(--wine); color: #fff; }

.item__add {
  margin-top: 12px; width: 100%;
  background: var(--wine); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 15px;
  padding: 14px 10px; border-radius: 999px; line-height: 1.2;
  box-shadow: 0 4px 0 var(--wine-ink);
}
.item__add:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--wine-ink); }
.item__add.is-in { background: var(--ink); box-shadow: 0 4px 0 #000; }

/* Two dishes to a row. The card has to lose weight to fit half a phone, so the
   blurb, the hint and the preset row go — everything needed to decide is still
   there, and the full detail is one tap away in the basket. */
/* Cards in a row must be the same height. They are not naturally — a "NEW" tag
   or a two-line dish name makes one taller, and a grid of ragged cards looks
   broken rather than lively. So: the row stretches, the card is a flex column,
   and the Add button is pushed to the bottom of whatever height the row lands on. */
.items2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.items2 .item {
  padding: 10px; margin-bottom: 0; border-radius: var(--r);
  display: flex; flex-direction: column;
}
.items2 .item__name { min-height: 2.3em; }
.items2 .item__meta { min-height: 22px; }
.items2 .qsel { margin-top: auto; }
.items2 .item__add { flex: none; }
.items2 .item__img { margin: -10px -10px 10px; border-radius: 14px 14px 0 0; aspect-ratio: 4 / 3; }
.items2 .item__name { font-size: 14px; }
.items2 .item__blurb, .items2 .qsel__hint, .items2 .qsel__pre { display: none; }
.items2 .item__meta { gap: 5px; margin-top: 6px; }
.items2 .qsel { margin-top: 10px; gap: 4px; padding: 4px; border-radius: 13px; }
.items2 .qsel__b { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; box-shadow: 0 2px 0 var(--sand-2); }
.items2 .qsel__v b { font-size: 13px; }
.items2 .qsel__v em { font-size: 11px; }
.items2 .item__add { margin-top: 9px; font-size: 13px; padding: 11px 6px; }
/* half a phone is not wide enough for "Add 6 pieces · ₹318", so the long form
   of the label is swapped for the short one. Both are always in the markup. */
.add__short { display: none; }
.items2 .add__short { display: inline; }
.items2 .add__long { display: none; }
.items2 .tag { font-size: 9px; padding: 3px 6px; }
.items2 .rate { font-size: 10.5px; padding: 3px 6px; }

@media (max-width: 340px) { .items2 { grid-template-columns: 1fr; } }

/* ---------- combo / barrel cards ---------- */

.combo { background: var(--card); border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.combo__head { padding: 18px 16px; background: var(--wine); color: #fff; position: relative; overflow: hidden; }
.combo--premium .combo__head { background: var(--ink); }
.combo__head::after { content: ""; position: absolute; right: -50px; top: -60px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.09); }
.combo__name { font-size: 25px; }
.combo__line { font-size: 13.5px; opacity: .85; margin-top: 7px; max-width: 32ch; }
.combo__facts { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }
.combo__fact { font-size: 11.5px; font-weight: 800; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.18); }
.combo__fact--edit { background: var(--gold); color: var(--gold-ink); }
.combo__body { padding: 14px 16px 16px; }
.combo__foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.combo__price { font-family: var(--display); font-weight: 800; font-size: 25px; letter-spacing: -.03em; }
.combo__add { flex: 1; background: var(--wine); color: #fff; font-family: var(--display); font-weight: 800; font-size: 16px; padding: 15px; border-radius: 999px; box-shadow: 0 4px 0 var(--wine-ink); }
.combo__add:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--wine-ink); }
.combo__done {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: 15px;
  color: #fff; background: var(--ink); padding: 15px; border-radius: 999px;
  box-shadow: 0 4px 0 #000;
}
.combo__undo { flex: none; font-size: 13px; font-weight: 800; color: var(--ink-3); padding: 14px 4px 14px 10px; text-decoration: underline; text-underline-offset: 3px; }
.combo__undo:active { color: var(--wine); }

.elines { margin-top: 4px; }
.eline { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px solid var(--sand); }
.eline:last-child { border-bottom: 0; }
.eline__n { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; }
.eline__n em { display: block; font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.eline__ctl { display: flex; align-items: center; gap: 7px; flex: none; }
.eline__ctl b { font-family: var(--display); font-size: 13px; min-width: 56px; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.eline--off { opacity: .45; }
.eline--off .eline__n em { color: var(--wine); }

/* ---------- suggestion strips ---------- */

.gap { margin-top: 20px; }
.gap__h { padding: 0 16px 10px; }
.gap__t { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; }
.gap__d { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }

.mini__row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.mini__row::-webkit-scrollbar { display: none; }
.mini {
  flex: none; width: 144px; scroll-snap-align: start;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r);
  padding: 8px 8px 10px; display: flex; flex-direction: column;
}
.mini.is-in { border-color: var(--ink); }
.mini__img { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--sand); aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; }
.mini__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.mini__img img.is-on { opacity: 1; }
.mini__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--wine); opacity: .3; }
.mini__plus {
  position: absolute; right: 5px; bottom: 5px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--wine); color: #fff; display: grid; place-items: center;
  font-size: 18px; font-weight: 800; line-height: 1;
  box-shadow: 0 3px 0 var(--wine-ink);
}
.mini.is-in .mini__plus { background: var(--ink); box-shadow: 0 3px 0 #000; }
.mini__n { display: block; font-family: var(--display); font-weight: 700; font-size: 13px; line-height: 1.25; margin-top: 9px; min-height: 2.5em; }
.mini__q { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 8px; }
.mini__q b { font-family: var(--display); font-size: 12px; color: var(--ink-2); flex: 1; text-align: center; white-space: nowrap; }
.mini__b { width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--sand); color: var(--wine); font-size: 16px; line-height: 1; display: grid; place-items: center; }
.mini__b:active { transform: translateY(1px); }
.mini__p { display: block; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--wine); margin-top: auto; padding-top: 5px; }
.mini__p em { font-family: var(--body); font-style: normal; font-weight: 500; font-size: 11px; color: var(--ink-3); margin-left: 5px; }

.done {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px; border-radius: var(--r);
  background: var(--gold-soft); color: var(--gold-ink); border: 2px solid var(--gold);
  font-family: var(--display); font-weight: 800; font-size: 14.5px; text-align: center;
}

/* ---------- "a main to finish on" picks ---------- */

.finish { display: grid; gap: 9px; }
.finish__b { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 14px; border-radius: var(--r); background: var(--card); border: 2px solid var(--line); }
.finish__b:active { transform: translateY(2px); }
.finish__b.is-in { border-color: var(--ink); }
.finish__t { flex: 1; min-width: 0; }
.finish__t b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; }
.finish__t em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.finish__p { flex: none; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--wine); }
.finish__b.is-in .finish__p { color: var(--ink); }

/* ---------- add-to-home-screen banner ---------- */

.install { display: flex; align-items: center; gap: 11px; margin: 18px 16px 0; padding: 13px 14px; background: var(--gold-soft); border: 2px solid var(--gold); border-radius: var(--r); }
.install__t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.install__t b { display: block; font-family: var(--display); font-weight: 800; font-size: 14.5px; color: var(--ink); }
.install__b { flex: none; background: var(--wine); color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; padding: 10px 15px; border-radius: 999px; }
.install__x { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }

/* ---------- boot ---------- */

.load { padding: 80px 24px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* ---------- mode / list rows ---------- */

.modes { display: grid; gap: 10px; padding: 0 16px; }
.mode { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; }
.mode:active { transform: translateY(2px); }
.mode__icon { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--gold-soft); color: var(--wine); }
.mode__b { flex: 1; min-width: 0; }
.mode__t { display: block; font-family: var(--display); font-weight: 700; font-size: 16.5px; }
.mode__d { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.35; }
.mode__go { color: var(--wine); flex: none; }

/* ---------- basket ---------- */

.bk__group { margin-top: 20px; }
.bk__gt { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wine); padding: 0 2px 8px; }
/*  TWO ROWS, NOT ONE.
    These used to be a single flex row: name, then stepper, then price, then a
    remove button. The controls on the right need about 250px and never shrink,
    so on a phone the dish name was left with roughly seventy — "Old Monk
    Masala Peanuts" wrapped onto four lines and the veg dot floated away from
    it in the middle.

    The name now gets the full width of the card on its own line, and the
    controls sit underneath on a second. Nothing is smaller or harder to tap;
    it simply stops two things competing for one row. */
.bkline { padding: 12px 0; border-bottom: 2px solid var(--sand); }
.bkline__b { display: block; min-width: 0; }
.bkline__n {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 500; font-size: 15.5px; line-height: 1.35;
}
.bkline__n .dot { margin-top: 3px; }        /* sits on the first line, not the middle */
.bkline__q { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.bkline__r { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bkline__p {
  font-family: var(--display); font-weight: 800; font-size: 16px;
  margin-left: auto; text-align: right; font-variant-numeric: tabular-nums;
}
.bkline__x { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); background: var(--sand); flex: none; }
.bkline__x:active { background: var(--wine); color: #fff; }

.bkstep { display: flex; align-items: center; gap: 4px; flex: none; }
.bkstep__b { width: 32px; height: 32px; border-radius: 10px; background: var(--wine-soft); color: var(--wine); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.bkstep__b:active { transform: translateY(1px); }
.bkstep b { font-family: var(--display); font-size: 13.5px; min-width: 64px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }

.meter { height: 10px; border-radius: 6px; background: var(--sand-2); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 6px; background: var(--gold); transition: width .35s cubic-bezier(.2,.8,.3,1); }
.meter--ok > i { background: var(--wine); }
.meter--over > i { background: var(--ink); }

.totals { margin-top: 20px; border-top: 3px solid var(--ink); padding-top: 14px; }
.totrow { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14.5px; color: var(--ink-2); }
.totrow--big { font-family: var(--display); font-weight: 800; font-size: 23px; color: var(--ink); padding-top: 10px; }

/* ---------- delivery ---------- */

.place { margin-top: 18px; padding: 15px; background: var(--gold-soft); border: 2px solid var(--gold); border-radius: var(--r-lg); }
.place__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.place__k { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.place__v { font-family: var(--display); font-weight: 800; font-size: 16px; text-align: right; }
.place__v em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-3); display: block; }
.place__v--none { color: var(--wine); }
.place__fee { font-size: 13px; color: var(--ink-2); margin-top: 9px; line-height: 1.45; }
.place__far { font-size: 13px; color: var(--wine); margin-top: 9px; background: #fff; border-radius: var(--r-sm); padding: 10px 12px; }
.place__pick { margin-top: 12px; width: 100%; padding: 13px; border-radius: 999px; background: var(--wine); color: #fff; font-family: var(--display); font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 var(--wine-ink); }
.place__pick:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wine-ink); }

.zones { display: grid; gap: 8px; margin-top: 14px; }
.zone { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--r); background: var(--card); border: 2px solid var(--line); }
.zone.is-on { border-color: var(--wine); background: var(--wine-soft); }
.zone__n { flex: 1; font-weight: 500; font-size: 14.5px; }
.zone__k { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.zone__p { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--wine); min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- serves bar + tabs ---------- */

.servesbar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar) + var(--safe-b));
  z-index: 45; max-width: 560px; margin: 0 auto; padding: 0 12px 10px;
  transform: translateY(150%); transition: transform .28s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
}
.servesbar.is-up { transform: translateY(0); }
.servesbar__in {
  pointer-events: auto; background: var(--ink); color: #fff;
  border-radius: var(--r-lg); padding: 12px 12px 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-lg);
}
.servesbar__t { flex: 1; min-width: 0; }
.servesbar__a { font-family: var(--display); font-weight: 800; font-size: 15.5px; }
.servesbar__b { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 1px; }
.servesbar__go { background: var(--gold); color: var(--gold-ink); font-family: var(--display); font-weight: 800; font-size: 13.5px; padding: 11px 17px; border-radius: 999px; flex: none; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: 560px; margin: 0 auto;
  height: calc(var(--tabbar) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: #fff; border-top: 2px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-3); font-size: 10.5px; font-weight: 800; position: relative; }
.tab svg { width: 23px; height: 23px; }
.tab.is-on { color: var(--wine); }
.tab.is-on::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 4px; border-radius: 0 0 4px 4px; background: var(--wine); }
.tab__badge {
  position: absolute; top: 7px; left: 50%; margin-left: 5px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--wine); color: #fff; font-size: 10.5px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff;
}

.fab-wa {
  position: fixed; right: 14px; z-index: 44;
  bottom: calc(var(--tabbar) + var(--safe-b) + 14px);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wine); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 0 var(--wine-ink), var(--shadow-lg);
}
.fab-wa.is-shifted { bottom: calc(var(--tabbar) + var(--safe-b) + 86px); }

/* ---------- sheet, toast, empty ---------- */

.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(26,22,24,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.sheet-bg.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-width: 560px; margin: 0 auto; background: var(--paper);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 8px 16px calc(20px + var(--safe-b));
  transform: translateY(101%); transition: transform .3s cubic-bezier(.2,.9,.3,1);
  max-height: 88dvh; overflow-y: auto;
}
.sheet.is-open { transform: translateY(0); }
.sheet__grab { width: 44px; height: 5px; border-radius: 3px; background: var(--sand-2); margin: 6px auto 16px; }
.sheet h3 { font-size: 23px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--safe-b) + 88px);
  transform: translate(-50%, 20px); z-index: 70;
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow-lg); max-width: 90vw; text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* An empty screen has to fill the phone, otherwise the footer rides up into the
   middle of it and the page looks broken rather than empty. */
.empty {
  text-align: center; padding: 48px 24px;
  min-height: 74vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.empty__i { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 24px; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; }
.empty h3 { font-size: 23px; }
.empty p { color: var(--ink-2); font-size: 14.5px; margin-top: 8px; }

.nudge__t, .nudge__d { display: block; }

/* ---------- prose pages ---------- */

.prose { padding: 20px 16px 0; }
.prose h2 { font-size: 27px; margin-bottom: 12px; }
.prose h3 { font-size: 18px; margin: 24px 0 8px; }
.prose p { color: var(--ink-2); font-size: 14.5px; margin-bottom: 12px; line-height: 1.6; }

.rules { margin-top: 10px; }
.rule { display: flex; gap: 14px; padding: 13px 0; border-bottom: 2px solid var(--sand); }
.rule__k { width: 100px; flex: none; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--wine); padding-top: 3px; }
.rule__v { flex: 1; font-size: 14.5px; }

.steps { margin-top: 8px; }
.step { display: flex; gap: 14px; padding: 15px 0; border-bottom: 2px solid var(--sand); }
.step__n { width: 34px; height: 34px; flex: none; border-radius: 12px; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 15px; }
.step__t { font-family: var(--display); font-weight: 800; font-size: 16px; }
.step__d { font-size: 14px; color: var(--ink-2); margin-top: 3px; }

.saved { display: flex; gap: 12px; align-items: center; }
.saved__i { width: 48px; height: 48px; border-radius: 15px; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; flex: none; font-family: var(--display); font-weight: 800; font-size: 18px; }

.custom { margin: 0 16px; padding: 22px 18px; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.custom__k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.custom__t { font-size: 25px; margin-top: 8px; }
.custom__d { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 9px; }
.custom__row { display: grid; gap: 10px; margin-top: 16px; }
.custom__row .btn--ghost { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }

.provisional {
  margin: 18px 16px 0; padding: 12px 14px;
  border: 2px dashed var(--gold); border-radius: var(--r);
  background: var(--gold-soft); color: var(--gold-ink);
  font-size: 12px; line-height: 1.5;
}

/* ---------- food safety ---------- */

.safety__hero { background: var(--wine); color: #fff; }
.safety__hero .eyebrow { background: var(--gold); color: var(--gold-ink); }
.safety__hero h1 em { color: var(--gold); }
.safety__hero p { opacity: .85; }

.certs { display: grid; gap: 11px; }
.cert { background: var(--card); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 17px; }
.cert__n { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--wine); }
.cert__k { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.cert__d { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 10px; line-height: 1.5; }

.safety__list { display: grid; gap: 11px; }
.safety__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.safety__list svg { color: var(--wine); flex: none; margin-top: 3px; }

.safety__stat { margin-top: 20px; padding: 20px; background: var(--gold); color: var(--gold-ink); border-radius: var(--r-lg); }
.safety__stat b { display: block; font-family: var(--display); font-size: 44px; line-height: 1; letter-spacing: -.04em; }
.safety__stat span { display: block; font-size: 13.5px; margin-top: 10px; line-height: 1.5; opacity: .82; }

@media (min-width: 460px) { .certs { grid-template-columns: 1fr 1fr; } }

/* ---------- footer ---------- */

/* The footer used to be a black slab. On a short screen it landed halfway up
   the page and read as a hole cut into the app. It is now the same warm family
   as everything else, so a short page just ends quietly. */
.footer {
  margin-top: 72px; padding: 0 0 calc(var(--tabbar) + var(--safe-b) + 86px);
  background: var(--sand); color: var(--ink-2); font-size: 13.5px; line-height: 1.6;
  border-top: 2px solid var(--line);
}
/* The brand block sits at the BOTTOM of the footer now, immediately above the
   copyright line, where a signature belongs — rather than at the top where it
   was a second, competing masthead under the one already in the bar. */
.foot__sign { display: block; padding-bottom: 18px; }
.foot__sign .foot__logo { margin-bottom: 14px; }
.foot__logo {
  height: 56px; width: auto; flex: none;
  background: var(--wine); padding: 9px 13px; border-radius: 17px; box-sizing: content-box;
}
.foot__about { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.foot__ig { font-weight: 700; }

.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: 26px 20px; border-bottom: 2px solid var(--line); }
.foot__col h4 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wine); margin-bottom: 12px; }
.foot__col li { padding: 4px 0; }
.foot__col a, .foot__col button { color: var(--ink-2); font-size: 13.5px; text-align: left; padding: 0; }
.foot__col a:active, .foot__col button:active { color: var(--wine); }
/* `.foot__col a` sets the link colour, and it is more specific than a bare
   .foot__wa — which is why this button spent a build with dark text on a wine
   ground. Matched specificity here so the white wins. */
.foot__col a.foot__wa, .foot__wa {
  display: inline-block; margin-top: 14px;
  background: var(--wine); color: #fff;
  font-weight: 700; font-size: 11.5px; letter-spacing: .01em;
  padding: 9px 15px; border-radius: 999px; white-space: nowrap;
}

.foot__legal { padding: 22px 20px 0; font-size: 12px; }
.foot__legal p { color: var(--ink-3); }
.foot__links { display: flex; gap: 16px; margin-top: 8px; }
.foot__links a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.foot__creds { margin-top: 11px; color: var(--ink-3); line-height: 1.65; }

@media (min-width: 480px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } }

/* ---------- motion ---------- */

.view { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, .splash__logo, .splash__tag { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- checkout: forms, the map pin, the invoice ---------- */

.field { margin-top: 12px; }
.field > label { display: block; margin-bottom: 6px; }
.inp {
  width: 100%; padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--card); border: 2px solid var(--line);
  font-size: 16px;                     /* 16px or iOS zooms the page on focus */
  color: var(--ink);
}
.inp:focus { outline: none; border-color: var(--wine); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.suggest { display: grid; gap: 4px; margin-top: 6px; }
.suggest__b {
  text-align: left; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--sand); font-size: 14px; line-height: 1.35;
}
.suggest__b:active { background: var(--wine-soft); }

/* The map has to be big enough to tell one tower from the next — a pin
   dropped on the wrong building is a wrong delivery charge, saved forever. */
.pinmap {
  height: 260px; margin-top: 12px; border-radius: var(--r);
  overflow: hidden; background: var(--sand-2); border: 2px solid var(--line);
}
.pinmap__off { padding: 24px; font-size: 13.5px; color: var(--ink-2); text-align: center; }

.zone { align-items: flex-start; }
.zone__p { line-height: 1.35; }

/* ---------- the invoice document ---------- */

.inv { max-width: 780px; margin: 0 auto; padding: 28px 22px 60px; background: #fff; color: var(--ink); }
.inv__head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 3px solid var(--ink); padding-bottom: 16px; }
.inv__brand b { display: block; font-family: var(--display); font-size: 24px; }
.inv__brand span { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.inv__no { text-align: right; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.inv__no b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); }
.inv__to { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 0; border-bottom: 2px solid var(--line); }
.inv__to h4 { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.inv__to p { font-size: 13px; line-height: 1.6; }
.inv table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12.5px; }
.inv th { text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 6px; border-bottom: 2px solid var(--line); }
.inv td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.inv .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv__sum { margin-left: auto; margin-top: 14px; width: 100%; max-width: 320px; }
.inv__sum div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.inv__sum .big { font-family: var(--display); font-weight: 800; font-size: 18px; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 10px; }
.inv__words { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.inv__foot { margin-top: 26px; padding-top: 14px; border-top: 2px solid var(--line); font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.inv__print { display: block; margin: 0 auto 18px; }
@media print {
  .inv__print, .topbar, .tabbar, .footer, .fab-wa, .servesbar { display: none !important; }
  .inv { padding: 0; max-width: none; }
  body { background: #fff; }
}

/* ---------- the account tab ---------- */

.acct { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid var(--line); }
.acct__pic { width: 54px; height: 54px; border-radius: 50%; flex: none; object-fit: cover; border: 2px solid var(--line); }
.acct__pic--letter {
  display: grid; place-items: center;
  background: var(--wine); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 22px; border-color: var(--wine);
}
.acct__who { min-width: 0; }
.acct__who b { display: block; font-family: var(--display); font-weight: 700; font-size: 18px; }
.acct__who em { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }

.acctlist { margin-top: 6px; }
.acctrow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 2px; border-bottom: 2px solid var(--sand);
}
.acctrow:active { background: var(--sand); }
.acctrow__b { flex: 1; min-width: 0; }
.acctrow__t { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; }
.acctrow__d { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.acctrow__go { color: var(--ink-3); font-size: 22px; line-height: 1; flex: none; }
/* The admin row is the only thing on this screen that is not for customers,
   so it is coloured like an action rather than a setting. */
.acctrow--admin .acctrow__t { color: var(--wine); }
.acctrow--out { border-bottom: 0; }
.acctrow--out .acctrow__t { color: var(--nonveg); }