/* ============================================================
   The Bakery — ordering app in the brand identity
   Pink #EE7AAF and cream #FEFADC, the baguette B, the cupcake
   mascot and the hand-drawn pattern. Vanilla CSS · light + dark
   ============================================================ */

@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../../assets/fonts/big-shoulders-display-800.woff2) format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap;
  src: url(../../assets/fonts/big-shoulders-display-900.woff2) format("woff2");
}
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url(../../assets/fonts/outfit-400.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url(../../assets/fonts/outfit-500.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url(../../assets/fonts/outfit-600.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url(../../assets/fonts/outfit-700.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* the closest open typeface to the brand lettering, for headings */
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Avenir Next Condensed", Impact, sans-serif;

  /* The brand's two colours stay the same in both themes */
  --pink: #ee7aaf;
  --cream: #fefadc;
  --brand-ink: #3a1424;     /* raspberry-brown text on pink */
  --brand-ink-2: #4a1a2e;

  --ground: #fefadc;
  --paper: #fffdf1;
  --blush: #fbdde9;         /* item tiles */
  --pattern-alpha: 0.12;

  /* The round stickers that close the kraft bags: pink doodles on navy or cream */
  --seal-navy: #262338;
  --seal-cream: #f3f0dd;
  --seal-pink: #ee7aaf;
  --seal-pink-deep: #d9579a; /* the same pink a shade deeper, to read on the cream sticker */
  --seal-edge: transparent;  /* a die-cut cream rim, shown on the dark theme */
  --seal-shadow: 0 1px 1.5px rgba(58, 20, 36, 0.2), 0 8px 14px -9px rgba(58, 20, 36, 0.5);

  /* ink */
  --ink: #3a1424;
  --ink-2: #6b3a50;
  --ink-3: #7d4a60;
  --rose: #c2387a;          /* pink dark enough for small text on cream */
  --accent: #3a1424;        /* buttons, chips, the selected option */
  --on-accent: #fefadc;
  --hot: #c2387a;           /* hearts, badges */
  --cta: #ee7aaf;
  --on-cta: #3a1424;

  /* bottom bar */
  --bar: #3a1424;
  --bar-ink: #fefadc;
  --bar-ink-2: rgba(254, 250, 220, 0.66);
  --bar-active: #ee7aaf;
  --bar-active-ink: #3a1424;

  /* flat surfaces: paper on cream, no glass */
  --glass: var(--paper);
  --glass-hi: #ffffff;
  --glass-edge: rgba(194, 56, 122, 0.24);
  --glass-line: rgba(194, 56, 122, 0.2);
  --card: var(--paper);
  --chip: rgba(238, 122, 175, 0.16);
  --chip-hover: rgba(238, 122, 175, 0.28);
  --field: #fffef8;
  --line: rgba(58, 20, 36, 0.14);
  --sheet: var(--paper);
  --sheet-strong: var(--paper);
  --scrim: rgba(58, 20, 36, 0.34);

  /* states */
  --good: #2c7a49;
  --good-bg: rgba(44, 122, 73, 0.12);
  --warn: #974c0b;
  --warn-bg: rgba(196, 110, 30, 0.14);
  --bad: #b3372f;
  --bad-bg: rgba(179, 55, 47, 0.1);
  --focus: #3a1424;

  /* depth */
  --shadow-panel: 0 30px 70px -48px rgba(120, 30, 70, 0.45);
  --shadow-card: 0 18px 30px -26px rgba(120, 30, 70, 0.5);
  --shadow-pill: 0 14px 26px -14px rgba(58, 20, 36, 0.55);
  --dish-shadow: drop-shadow(8px 14px 10px rgba(110, 40, 60, 0.26));

  /* shape + motion */
  --r-panel: 36px;
  --r-card: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gutter: 20px;
  --col: 560px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #22101a;
    --paper: #2c1421;
    --blush: #3d1b2c;
    --pattern-alpha: 0.07;
    --seal-edge: #f3f0dd;
    --seal-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.5), 0 8px 14px -8px rgba(0, 0, 0, 0.8);
    --ink: #fefadc;
    --ink-2: #ecd3dd;
    --ink-3: #c9a3b5;
    --rose: #ff9cc8;
    --accent: #ee7aaf;
    --on-accent: #22101a;
    --hot: #ff9cc8;
    --cta: #ee7aaf;
    --on-cta: #22101a;
    --bar: #130810;
    --bar-ink: #fefadc;
    --bar-ink-2: rgba(254, 250, 220, 0.6);
    --bar-active: #ee7aaf;
    --bar-active-ink: #22101a;
    --glass-hi: #361a28;
    --glass-edge: rgba(238, 122, 175, 0.2);
    --glass-line: rgba(238, 122, 175, 0.18);
    --chip: rgba(238, 122, 175, 0.12);
    --chip-hover: rgba(238, 122, 175, 0.22);
    --field: #2a1220;
    --line: rgba(254, 250, 220, 0.12);
    --scrim: rgba(0, 0, 0, 0.55);
    --good: #7fcb97;
    --good-bg: rgba(127, 203, 151, 0.14);
    --warn: #eaa565;
    --warn-bg: rgba(234, 165, 101, 0.14);
    --bad: #f28b82;
    --bad-bg: rgba(242, 139, 130, 0.13);
    --focus: #fefadc;
    --shadow-panel: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
    --shadow-card: 0 18px 30px -24px rgba(0, 0, 0, 0.8);
    --shadow-pill: 0 14px 26px -12px rgba(0, 0, 0, 0.75);
    --dish-shadow: drop-shadow(8px 16px 12px rgba(0, 0, 0, 0.5));
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #22101a;
  --paper: #2c1421;
  --blush: #3d1b2c;
  --pattern-alpha: 0.07;
  --seal-edge: #f3f0dd;
  --seal-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.5), 0 8px 14px -8px rgba(0, 0, 0, 0.8);
  --ink: #fefadc;
  --ink-2: #ecd3dd;
  --ink-3: #c9a3b5;
  --rose: #ff9cc8;
  --accent: #ee7aaf;
  --on-accent: #22101a;
  --hot: #ff9cc8;
  --cta: #ee7aaf;
  --on-cta: #22101a;
  --bar: #130810;
  --bar-ink: #fefadc;
  --bar-ink-2: rgba(254, 250, 220, 0.6);
  --bar-active: #ee7aaf;
  --bar-active-ink: #22101a;
  --glass-hi: #361a28;
  --glass-edge: rgba(238, 122, 175, 0.2);
  --glass-line: rgba(238, 122, 175, 0.18);
  --chip: rgba(238, 122, 175, 0.12);
  --chip-hover: rgba(238, 122, 175, 0.22);
  --field: #2a1220;
  --line: rgba(254, 250, 220, 0.12);
  --scrim: rgba(0, 0, 0, 0.55);
  --good: #7fcb97;
  --good-bg: rgba(127, 203, 151, 0.14);
  --warn: #eaa565;
  --warn-bg: rgba(234, 165, 101, 0.14);
  --bad: #f28b82;
  --bad-bg: rgba(242, 139, 130, 0.13);
  --focus: #fefadc;
  --shadow-panel: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
  --shadow-card: 0 18px 30px -24px rgba(0, 0, 0, 0.8);
  --shadow-pill: 0 14px 26px -12px rgba(0, 0, 0, 0.75);
  --dish-shadow: drop-shadow(8px 16px 12px rgba(0, 0, 0, 0.5));
}

/* Pink surfaces keep the same text colours in both themes */
.hero, .feature, .cartbtn {
  --ink: var(--brand-ink);
  --ink-2: var(--brand-ink-2);
  --ink-3: var(--brand-ink-2);
  --chip: rgba(254, 250, 220, 0.55);
  --chip-hover: rgba(254, 250, 220, 0.8);
  --glass-line: transparent;
  --focus: var(--brand-ink);
}

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

html { -webkit-text-size-adjust: 100%; height: 100%; }
html.sheet-open { overflow: hidden; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--on-accent); }

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

.icon { width: 24px; height: 24px; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; z-index: 100; top: 10px; left: 10px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); font-weight: 700;
  transform: translateY(-160%); transition: transform 0.2s;
}
.skip:focus { transform: none; }

.noscript { position: relative; z-index: 5; max-width: 32rem; margin: 40px auto; padding: 0 20px; font-size: 16px; }

/* ---------- Backdrop ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--ground);
}
/* The brand's hand-drawn pattern, printed faintly like the bag paper */
.backdrop::before {
  content: ""; position: absolute; inset: 0;
  background: var(--pink); opacity: var(--pattern-alpha);
  -webkit-mask: url(../../assets/marks/pattern.svg) 0 0 / 350px auto repeat;
  mask: url(../../assets/marks/pattern.svg) 0 0 / 350px auto repeat;
}

/* ---------- App shell (phone first) ---------- */
.app { position: relative; z-index: 1; overflow-x: clip; }

.main {
  position: relative;
  max-width: var(--col);
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
}
.main__scroll { padding: 0 var(--gutter) calc(124px + env(safe-area-inset-bottom, 0px)); }
.view:focus { outline: none; }
/* A new tab's content fades up as it arrives, so the switch reads as one
   motion with the panels moving around it rather than a cut. */
.view.is-entering { animation: view-in 0.42s var(--ease) both; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 4px;
  margin-inline: calc(var(--gutter) * -1);
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter) 10px;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.topbar.is-scrolled {
  background: var(--sheet);
  box-shadow: 0 1px 0 var(--line);
}
.topbar__cart-space { width: 60px; flex: none; }

.brand {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
}
.logo { display: inline-grid; flex: none; }

.iconbtn {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 14px;
  color: var(--ink);
  transition: background-color 0.2s, transform 0.2s var(--spring);
}
.iconbtn:hover { background: var(--chip); }
.iconbtn:active { transform: scale(0.92); }

/* The black cart "drop" from the reference: rounded, with one soft corner */
.cartbtn {
  position: fixed; z-index: 32;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: max(var(--gutter), calc((100vw - var(--col)) / 2 + var(--gutter)));
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 17px 17px 17px 30px;
  background: var(--pink); color: var(--brand-ink);
  box-shadow: var(--shadow-pill);
  transition: transform 0.35s var(--spring);
}
.cartbtn:hover { transform: translateY(-2px) rotate(-5deg); }
.cartbtn.is-bump { animation: bump 0.55s var(--spring); }
.cartbtn__badge {
  position: absolute; top: -7px; right: -7px;
  display: grid; place-items: center;
  min-width: 23px; height: 23px; padding: 0 6px;
  border-radius: 12px; border: 2px solid var(--ground);
  background: var(--brand-ink); color: var(--cream);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---------- Bottom bar ---------- */
.tabbar {
  position: fixed; z-index: 34;
  left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--col) - 2 * var(--gutter)));
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 0 11px;
  border-radius: 26px;
  background: var(--bar); color: var(--bar-ink);
  box-shadow: var(--shadow-pill), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 11px;
  border-radius: 23px;
  color: var(--bar-ink-2);
  transition: background-color 0.35s var(--ease), color 0.2s, padding 0.35s var(--ease);
}
.tab:hover { color: var(--bar-ink); }
.tab .icon { width: 23px; height: 23px; }
.tab__label {
  max-width: 0; overflow: hidden; opacity: 0;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: max-width 0.4s var(--ease), opacity 0.25s;
}
.tab.is-on { background: var(--bar-active); color: var(--bar-active-ink); padding: 0 16px 0 12px; }
.tab.is-on .tab__label { max-width: 96px; opacity: 1; }
.tab:focus-visible { outline-color: var(--bar-ink); }
.tab__dot {
  position: absolute; top: 9px; left: 29px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink); box-shadow: 0 0 0 2px var(--bar);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 6px; padding: 18px 18px 22px;
  border-radius: 28px;
  background: var(--pink); color: var(--brand-ink);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--cream); opacity: 0.2;
  -webkit-mask: url(../../assets/marks/pattern.svg) -40px -60px / 282px auto repeat;
  mask: url(../../assets/marks/pattern.svg) -40px -60px / 282px auto repeat;
}
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px; border: 1px solid var(--glass-line);
  background: var(--chip);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.hero .status { background: var(--cream); color: var(--brand-ink); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status--open i { background: var(--good); animation: breathe 2.6s ease-in-out infinite; }
.status--soon i { background: var(--warn); }
.status--closed i { background: var(--bad); }
.status--table { color: var(--ink); }
.status .icon { width: 16px; height: 16px; }

.hero__title { position: relative; max-width: calc(100% - 64px); }
/* "Might be scrumptious!" as drawn on the sleeve, traced to SVG */
.lettering {
  display: block; width: min(100%, 330px); aspect-ratio: 1564 / 776;
  background: var(--cream);
  -webkit-mask: url(../../assets/marks/scrumptious.svg) left center / contain no-repeat;
  mask: url(../../assets/marks/scrumptious.svg) left center / contain no-repeat;
}
.hero__sub { position: relative; max-width: min(30ch, calc(100% - 78px)); margin-top: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--brand-ink); }
.hero .hero__mascot {
  position: absolute; right: -10px; bottom: -30px; z-index: 0;
  width: 92px; background: var(--cream);
  transform: rotate(-8deg); transform-origin: 50% 100%;
  animation: wave 4.8s ease-in-out infinite;
}

/* ---------- Search ---------- */
/* The bar opens between the hero card and the sections with 20px clear
   above and below it, so its 4px focus ring never meets either */
.search { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.search:not([hidden]) + .cats { margin-top: 18px; }
.search__field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--glass-line);
  background: var(--field); color: var(--ink-3);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search__field:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 4px var(--chip); }
.search__field input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: none; outline: none;
  font-size: 16px; color: var(--ink);
}
.search__field input::placeholder { color: var(--ink-3); }
.search__field input::-webkit-search-cancel-button { display: none; }
.search .textbtn { flex: none; min-height: 44px; padding: 0 12px; margin-right: -12px; }

/* ---------- Categories ---------- */
.cats {
  display: flex; gap: 12px; margin-top: 16px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 2px var(--gutter) 8px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
}
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; display: grid; justify-items: center; gap: 7px; scroll-snap-align: start; border-radius: 18px; }
/* Each section is a sticker; the chosen one turns into the navy sticker and
   is slapped back on */
.cat__sticker { width: 58px; transition: background-color 0.25s, color 0.25s, transform 0.35s var(--spring); }
.cat:hover .cat__sticker { transform: translateY(-2px); }
.cat.is-on .cat__sticker { --seal: var(--seal-navy); --seal-ink: var(--seal-pink); animation: slap 0.5s var(--spring); }
.cat__label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); transition: color 0.2s; }
.cat.is-on .cat__label { color: var(--ink); }
.cat:focus-visible { outline-offset: 4px; }

.notice {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 6px 6px 6px 14px;
  border-radius: 16px;
  background: var(--good-bg); color: var(--good);
  font-size: 13px; font-weight: 600;
}
.notice span { display: inline-flex; align-items: center; gap: 7px; }
.notice .icon { width: 17px; height: 17px; }
.notice .textbtn { color: inherit; }

/* ---------- Menu sections ---------- */
.menu-section { margin-top: 14px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 10px 2px 0; }
.section-head__title { font-family: var(--display); font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: 0.005em; }
.section-head__count { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  column-gap: 14px;
}

/* Dish card: the plate floats half out of the card, like the reference */
.card {
  --plate: 128px;
  position: relative;
  display: flex; flex-direction: column;
  margin-top: calc(var(--plate) * 0.54 + 8px);
  padding: calc(var(--plate) * 0.5 + 10px) 14px 14px;
  border-radius: var(--r-card);
  background: var(--blush);
  animation: rise 0.7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 50ms);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card__media {
  position: absolute; left: 50%; top: 0;
  width: var(--plate); aspect-ratio: 1;
  transform: translate(-50%, -54%);
  pointer-events: none;
}
.card__media img, .feature__media img {
  width: 100%; height: 100%; object-fit: contain;
  filter: var(--dish-shadow);
  transition: transform 0.9s var(--ease);
}
.card:hover { transform: translateY(-4px); }
.card:hover .card__media img { transform: rotate(-7deg) scale(1.06); }
.card__body { display: flex; flex-direction: column; flex: 1; }
.card__title { font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: 0.01em; }
.card__link { border-radius: 4px; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.card__desc { margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.card .price { font-size: 14.5px; }
.card__qty {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 12px;
  background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 800;
  animation: pop 0.4s var(--spring);
}

.price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.fav {
  position: relative; z-index: 2;
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  transition: transform 0.3s var(--spring), background-color 0.2s, color 0.2s;
}
.fav .icon { width: 19px; height: 19px; transition: fill 0.2s; }
.fav:hover { background: var(--glass-hi); }
.fav.is-on { color: var(--hot); }
.fav.is-on .icon { fill: currentColor; }
.fav.is-pop { animation: pop 0.45s var(--spring); }
.fav--lg { width: 50px; height: 50px; }
.fav--lg .icon { width: 22px; height: 22px; }

/* Wide "chef's pick" card with the bowl spilling past the edge */
.feature {
  grid-column: 1 / -1;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  margin-top: 34px;
  padding: 20px 0 20px 22px;
  border-radius: var(--r-card);
  background: var(--pink); color: var(--brand-ink);
  animation: rise 0.7s var(--ease) both;
  animation-delay: 100ms;
  transition: transform 0.4s var(--ease);
}
.feature:hover { transform: translateY(-4px); }
.feature:hover .feature__media img { transform: rotate(6deg) scale(1.04); }
.feature__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.feature__eyebrow .icon { width: 15px; height: 15px; }
.feature__title { margin-top: 6px; font-family: var(--display); font-size: 30px; font-weight: 900; line-height: 0.95; letter-spacing: 0.005em; }
.feature__desc { margin-top: 5px; font-size: 13px; color: var(--ink-2); }
.feature__foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.feature__time { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.feature__time .icon { width: 16px; height: 16px; }
.feature__media {
  position: relative;
  width: 168px; height: 168px;
  margin: -30px -42px -30px 0;
  pointer-events: none;
}

.fine { margin: 30px 4px 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.fine a { text-decoration: underline; text-underline-offset: 2px; }
.fine--concept { margin-top: 8px; }

/* ---------- Page heads (tabs) ---------- */
.page-head { padding: 16px 2px 6px; }
.page-title { font-family: var(--display); font-size: clamp(40px, 11vw, 52px); font-weight: 900; letter-spacing: 0.005em; line-height: 0.95; }
.page-sub { margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.page-head--profile { display: flex; align-items: center; gap: 16px; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 62px; height: 62px; border-radius: 22px 22px 22px 34px;
  background: var(--pink); color: var(--brand-ink);
  font-family: var(--display); font-size: 28px; font-weight: 900;
}
.list-title {
  margin: 24px 2px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.grid--solo { margin-top: 6px; }
.stack { display: grid; gap: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
  transition: transform 0.25s var(--spring), background-color 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-pill); }
.btn:active { transform: scale(0.97); }
.btn .icon { width: 18px; height: 18px; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { background: var(--chip-hover); box-shadow: none; }
.btn--danger { background: var(--bad); color: #fff; }

.textbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 6px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.textbtn:hover { background: var(--chip); }
.textbtn .icon { width: 17px; height: 17px; }
.textbtn--danger { color: var(--bad); }
.textbtn--inline { padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.textbtn--inline:hover { background: none; }

.cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px; flex: none;
  height: 60px; padding: 0 10px 0 24px;
  border-radius: 999px;
  background: var(--cta); color: var(--on-cta);
  font-size: 16px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow-pill);
  transition: transform 0.3s var(--spring), opacity 0.2s;
}
.cta:hover { transform: translateY(-2px); }
.cta:active { transform: scale(0.97); }
.cta__plus {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--on-cta); color: var(--cta);
  transition: transform 0.4s var(--spring);
}
.cta:hover .cta__plus { transform: translateX(2px); }
.cta--add:hover .cta__plus { transform: rotate(90deg); }
.cta__plus .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.cta.is-disabled { opacity: 0.4; pointer-events: none; box-shadow: none; }

/* ---------- Side panel: a sheet on phones ---------- */
.side {
  position: fixed; inset: 0; z-index: 50;
  max-width: var(--col); margin-inline: auto;
  transform: translate3d(104%, 0, 0);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
}
.side.is-open { transform: none; visibility: visible; transition: transform 0.5s var(--ease), visibility 0s; }
.side__inner {
  position: relative; height: 100%;
  background: var(--paper);
}

.pview { position: relative; display: flex; flex-direction: column; height: 100%; animation: pv-in 0.45s var(--ease) both; }
.pview__scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0 var(--gutter) 28px;
}
.pbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-inline: calc(var(--gutter) * -1);
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(var(--gutter) - 6px) 10px;
  background: linear-gradient(var(--sheet-strong) 55%, transparent);
}
.pbar__title { font-family: var(--display); font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: 0.005em; }
.pbar__title:focus { outline: none; }
.pbar__spacer { width: 44px; flex: none; }
.pbar__label {
  display: inline-flex; align-items: center; gap: 7px; padding-left: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.pbar__label .icon { width: 16px; height: 16px; }
.pbar__confirm { display: inline-flex; gap: 2px; }

.pfoot {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}
.pfoot--split { justify-content: space-between; }
.total { display: grid; margin-right: auto; min-width: 0; }
.total__label { font-size: 12.5px; color: var(--ink-3); }
.total__value { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Dish detail ---------- */
.pview--dish .pbar {
  position: absolute; left: 0; right: 0; margin: 0;
  background: none;
  padding-inline: calc(var(--gutter) - 6px);
  transition: background-color 0.25s, box-shadow 0.25s;
}
/* Keep the menu above the plate while it is open */
.pview--dish .pbar:has(.popover:not([hidden])) { z-index: 8; }
/* Where the plate docks once the details scroll (centred in the button row) */
.pbar__dock { position: absolute; left: 50%; width: 50px; height: 50px; margin-left: -25px; pointer-events: none; }
.pview--dish .pbar.is-scrolled {
  background: var(--sheet-strong);
  box-shadow: 0 1px 0 var(--line);
}
.more { position: relative; }
.popover {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
  display: grid; min-width: 230px; padding: 6px;
  border-radius: 18px; border: 1px solid var(--glass-line);
  background: var(--sheet-strong);
  box-shadow: var(--shadow-card), 0 8px 24px -12px rgba(0, 0, 0, 0.25);
  animation: pv-in 0.25s var(--ease) both;
}
.popover button {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; text-align: left;
}
.popover button:hover { background: var(--chip); }
.popover .icon { width: 19px; height: 19px; }

.dish-hero {
  position: sticky; top: 0; z-index: 7;
  margin: 0 calc(var(--gutter) * -1) -6px;
  padding-top: 54px;
  pointer-events: none;
}
/* Scrolling folds the plate into the header: app.js sets --p from 0 to 1
   and measures --dx, --dy (the way to the dock) and --k (the docked size) */
.dish-hero__img {
  position: relative;
  width: 86%; max-width: none; aspect-ratio: 1; height: auto;
  margin-left: 7%;
  filter: var(--dish-shadow);
  animation: bake-in 0.9s var(--ease) both;
  translate: calc(var(--dx, 0px) * var(--p, 0)) calc(var(--dy, 0px) * var(--p, 0));
  rotate: calc(var(--p, 0) * -12deg);
  scale: calc(1 - (1 - var(--k, 1)) * var(--p, 0));
}
.dish-body { position: relative; }
.dish-title { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dish-title h2 { font-family: var(--display); font-size: 38px; line-height: 0.95; font-weight: 900; letter-spacing: 0.005em; text-wrap: balance; }
.dish-title h2:focus { outline: none; }
.dish-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.dish-time .icon { width: 18px; height: 18px; }
.dish-desc { margin-top: 12px; max-width: 60ch; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.fact {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--glass-line);
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.fact .icon { width: 15px; height: 15px; }
.fact--v, .fact--vg { color: var(--good); background: var(--good-bg); border-color: transparent; }
.fact--spicy { color: var(--bad); background: var(--bad-bg); border-color: transparent; }

.opts { display: grid; gap: 20px; margin-top: 22px; }
.opt-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.opt-group__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; margin-bottom: 10px; padding: 0;
  font-size: 14.5px; font-weight: 800;
}
.muted { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.choice input:disabled { cursor: not-allowed; }
.choice__pill {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 42px; padding: 9px 15px;
  border-radius: 999px; border: 1.5px solid var(--glass-line);
  background: var(--field);
  font-size: 13.5px; font-weight: 600;
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--spring), opacity 0.2s;
}
.choice:hover .choice__pill { background: var(--chip-hover); }
.choice__price { font-weight: 600; color: var(--ink-3); }
.choice__tick { display: none; }
.choice__tick .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.choice input:checked + .choice__pill { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.choice input:checked + .choice__pill .choice__price { color: inherit; opacity: 0.7; }
.choice input:checked + .choice__pill .choice__tick { display: inline-grid; }
.choice input:active + .choice__pill { transform: scale(0.96); }
.choice input:focus-visible + .choice__pill { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice input:disabled + .choice__pill { opacity: 0.4; }

.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qty-row .opt-group__title { width: auto; margin: 0; }

.allergens {
  margin-top: 22px; padding: 14px 16px;
  border-radius: 18px; background: var(--blush);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.allergens:focus { outline: none; }
.allergens.is-flash { animation: flash 1.4s var(--ease); }

/* ---------- Form controls ---------- */
.field { display: grid; gap: 6px; margin-top: 14px; }
.field__label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field input, .field select, .field textarea, .opts textarea, .promo input {
  width: 100%; min-height: 50px;
  padding: 12px 15px;
  border-radius: 15px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink);
  font-size: 16px; line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field textarea, .opts textarea { resize: vertical; min-height: 76px; }
.field input::placeholder, .field textarea::placeholder, .opts textarea::placeholder, .promo input::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus, .opts textarea:focus, .promo input:focus {
  outline: none; border-color: var(--ink-3); background: var(--glass-hi); box-shadow: 0 0 0 4px var(--chip);
}
.field [aria-invalid="true"], .promo [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }
.field__error { font-size: 12.5px; font-weight: 700; color: var(--bad); }
.field__error--form { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--bad-bg); }
.field--select { position: relative; }
.field--select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.field--select::after {
  content: ""; position: absolute; right: 19px; bottom: 21px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); pointer-events: none;
}
.hint { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.hint .icon { width: 16px; height: 16px; color: var(--good); }

.stepper {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 4px; border-radius: 999px;
  border: 1.5px solid var(--glass-line);
  background: var(--field);
}
.stepper__btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blush);
  transition: transform 0.2s var(--spring), opacity 0.2s;
}
.stepper__btn:active { transform: scale(0.88); }
.stepper__btn:disabled { opacity: 0.3; cursor: default; }
.stepper__btn .icon { width: 17px; height: 17px; stroke-width: 2; }
.stepper__val { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Blocks (cart, checkout, profile) ---------- */
.panel-block {
  margin-top: 16px; padding: 18px;
  border-radius: 24px; border: 1.5px solid var(--glass-line);
  background: var(--paper);
}
.block__title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; }
.block__text { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.block__text .icon { width: 18px; height: 18px; margin-top: 1px; }
.block__text.is-warn { color: var(--warn); font-weight: 600; }
.panel-block > .block__text:first-of-type { margin-top: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.lines { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.line {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px 10px 10px;
  border-radius: 24px;
  background: var(--blush);
}
.line.is-new { animation: flash 1.8s var(--ease); }
.line__media img { width: 64px; height: 64px; filter: drop-shadow(4px 7px 6px rgba(80, 40, 20, 0.28)); }
.line__name { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: 0.01em; }
.line__details { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.line__price { margin-top: 4px; font-size: 14px; }
.line .stepper__btn { width: 30px; height: 30px; }

.addmore {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 8px 4px;
  font-size: 14px; font-weight: 700;
}
.addmore .icon { width: 20px; height: 20px; padding: 2px; border-radius: 50%; background: var(--pink); color: var(--brand-ink); }

.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 4px; border-radius: 22px;
  border: 1.5px solid var(--glass-line);
  background: var(--field);
}
.seg__opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 6px; border-radius: 16px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.seg__opt .icon { width: 22px; height: 22px; }
.seg__opt:hover { color: var(--ink); }
.seg__opt.is-on { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-pill); }
.mode-fields > .field:first-child { margin-top: 14px; }

.promo { display: flex; gap: 8px; }
.promo input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.06em; }
.promo input::placeholder { text-transform: none; letter-spacing: 0; }
.promo .btn { min-height: 50px; }
.promo-on {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 14px; border-radius: 16px;
  background: var(--good-bg); color: var(--good);
  font-size: 13.5px;
}
.promo-on .icon { width: 19px; height: 19px; }
.promo-on span { flex: 1; min-width: 0; }
.promo-on .textbtn { color: inherit; }

.summary { display: grid; }
.sum-row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14px; color: var(--ink-2); }
.sum-row .price { font-weight: 600; }
.sum-row--item { color: var(--ink); }
.sum-row small { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); }
.sum-row--good { color: var(--good); }
.sum-row--total { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 16.5px; font-weight: 800; color: var(--ink); }
.sum-row--total .price { font-weight: 800; }
.sum-rule { margin: 8px 0; border: 0; border-top: 1px solid var(--line); }

.mode-head { display: flex; align-items: center; gap: 12px; }
.mode-head .block__title { margin: 0; }
.mode-head .block__text { margin: 2px 0 0; }
.mode-head > div { flex: 1; min-width: 0; }
.mode-head__icon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 16px;
  background: var(--pink); color: var(--brand-ink);
}

.radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rcard { position: relative; display: flex; }
.rcard input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.rcard__body {
  flex: 1; display: grid; align-content: start; gap: 2px;
  padding: 14px; border-radius: 18px;
  border: 1.5px solid var(--line); background: var(--field);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.rcard__body .icon { width: 22px; height: 22px; margin-bottom: 6px; }
.rcard__body strong { font-size: 14px; }
.rcard__body span { font-size: 12.5px; color: var(--ink-3); }
.rcard input:checked + .rcard__body { border-color: var(--ink); background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--ink); }
.rcard input:focus-visible + .rcard__body { outline: 2px solid var(--focus); outline-offset: 2px; }
.rcard.is-disabled { opacity: 0.45; }
.opt-group .field { margin-top: 12px; }

.demo-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding: 12px 14px;
  border-radius: 16px;
  background: var(--warn-bg); color: var(--warn);
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.demo-note .icon { width: 18px; height: 18px; margin-top: 1px; }

/* ---------- Order tracking ---------- */
.track { display: grid; justify-items: center; padding: 6px 0 4px; text-align: center; }
.track__ring { position: relative; width: min(62vw, 236px); aspect-ratio: 1; }
.track__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.track__bg { fill: none; stroke: var(--line); stroke-width: 4; }
.track__fg { fill: none; stroke: var(--pink); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 1s linear; }
.track__img { position: absolute; inset: 10%; width: 80%; height: 80%; filter: var(--dish-shadow); }
.track__img.is-spinning { animation: bob 2.6s ease-in-out infinite alternate; }
.track__stage { margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.track__title { margin-top: 6px; font-family: var(--display); font-size: 32px; font-weight: 900; letter-spacing: 0.005em; line-height: 1; text-wrap: balance; }
.track__eta { margin-top: 6px; max-width: 40ch; font-size: 13.5px; color: var(--ink-2); }

.steps { display: grid; margin: 18px 0 0; padding: 0 4px; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; color: var(--ink-3); }
.step + .step::before { content: ""; position: absolute; left: 13px; top: -9px; width: 2px; height: 18px; background: var(--line); }
.step.is-done + .step::before { background: var(--accent); }
.step__dot {
  position: relative; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--field);
}
.step__dot .icon { width: 14px; height: 14px; stroke-width: 2.6; opacity: 0; }
.step.is-done { color: var(--ink); }
.step.is-done .step__dot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.step.is-done .step__dot .icon { opacity: 1; }
.step.is-now { color: var(--ink); font-weight: 800; }
.step.is-now .step__dot { border-color: var(--accent); }
.step.is-now .step__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: breathe 1.6s ease-in-out infinite; }
.step.is-now .step__dot .icon { display: none; }
.step__time { font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.deflist { display: grid; gap: 10px; }
.deflist div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.deflist dt { color: var(--ink-3); }
.deflist dd { font-weight: 600; overflow-wrap: anywhere; }
.deflist small { font-weight: 500; color: var(--ink-3); }

.phone-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.phone-row__num { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; user-select: all; }
.phone-row__num .icon { width: 20px; height: 20px; }

/* ---------- Orders tab ---------- */
.ocard {
  padding: 16px; border-radius: 26px;
  border: 1.5px solid var(--glass-line); background: var(--paper);
  animation: rise 0.6s var(--ease) both;
}
.ocard__top { display: flex; align-items: center; gap: 12px; }
.ocard__thumbs { display: flex; flex: none; }
.ocard__thumbs img { width: 46px; height: 46px; filter: drop-shadow(3px 6px 5px rgba(80, 40, 20, 0.3)); }
.ocard__thumbs img + img { margin-left: -18px; }
.ocard__meta { flex: 1; min-width: 0; }
.ocard__no { font-size: 15px; font-weight: 800; }
.ocard__time { font-size: 12.5px; color: var(--ink-3); }
.ocard__items { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ocard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ocard__foot .price { font-size: 16px; }
.ocard__actions { display: flex; gap: 8px; }
.pill {
  flex: none; padding: 5px 11px; border-radius: 999px;
  background: var(--chip); color: var(--ink-2);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pill--live { background: var(--good-bg); color: var(--good); }
.bar { height: 6px; margin-top: 14px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--pink); transition: width 1s linear; }

/* ---------- Profile ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 15px;
  border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--field);
  font-size: 13.5px; font-weight: 700;
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--spring);
}
.chip:active { transform: scale(0.96); }
.chip .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.chip.is-on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.links { display: grid; padding: 6px 18px; }
.linkrow { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 14.5px; font-weight: 700; }
.linkrow + .linkrow { border-top: 1px solid var(--line); }
.linkrow .icon { width: 21px; height: 21px; }
.linkrow__go { margin-left: auto; color: var(--ink-3); }
.linkrow span { flex: 1; }

/* ---------- Empty states ---------- */
.empty { display: grid; justify-items: center; gap: 8px; padding: 56px 12px; text-align: center; }
.empty--inline { padding: 36px 12px; }
.empty__sticker { width: 96px; margin-bottom: 10px; animation: wiggle 3.6s ease-in-out infinite; }
.empty__title { font-family: var(--display); font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: 0.005em; }
.empty__text { max-width: 34ch; font-size: 14px; color: var(--ink-2); }
.empty .btn { margin-top: 14px; }

/* ---------- Info drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: var(--scrim);
  opacity: 0; transition: opacity 0.35s;
}
.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(420px, 92vw);
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 22px calc(30px + env(safe-area-inset-bottom, 0px));
  border-radius: 0 36px 36px 0;
  background: var(--paper);
  box-shadow: 30px 0 80px -40px rgba(0, 0, 0, 0.45);
  transform: translate3d(-104%, 0, 0);
  transition: transform 0.45s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; gap: 12px; }

.drawer__head > div { flex: 1; display: grid; justify-items: start; gap: 6px; min-width: 0; }
.drawer__head .iconbtn { margin-left: auto; align-self: flex-start; }
.drawer__title { font-family: var(--display); font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: 0.005em; }
.drawer__title:focus { outline: none; }
.drawer__about { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.drawer__block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

.hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours th { padding: 6px 0; text-align: left; font-weight: 500; color: var(--ink-2); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hours .is-today th, .hours .is-today td { font-weight: 800; color: var(--ink); }
.hours th span {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--pink); color: var(--brand-ink);
  font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.addr { display: flex; gap: 10px; margin-bottom: 14px; font-size: 14px; line-height: 1.5; }
.addr .icon { width: 20px; height: 20px; }
.ways { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ways li { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ways .icon { width: 22px; height: 22px; color: var(--ink); }
.ways strong { display: block; color: var(--ink); }

/* ---------- Toast + flying plate ---------- */
.toast {
  position: fixed; z-index: 80;
  left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100% - 32px);
  padding: 11px 11px 11px 18px;
  border-radius: 18px;
  background: var(--bar); color: var(--bar-ink);
  box-shadow: var(--shadow-pill);
  font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s, transform 0.45s var(--ease);
}
.toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast__msg { min-width: 0; }
.toast__action {
  flex: none; padding: 8px 14px; border-radius: 999px;
  background: var(--pink); color: var(--brand-ink);
  font-weight: 700;
}
.toast__action:hover { background: var(--cream); }
/* with a sheet open on phones the footer holds the main action: show toasts up top */
html.sheet-open .toast {
  top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto;
  transform: translate(-50%, -16px);
}
html.sheet-open .toast.is-on { transform: translate(-50%, 0); }

.flyer { position: fixed; z-index: 90; pointer-events: none; filter: var(--dish-shadow); }

/* ---------- Motion ---------- */
/* entrances start visible, so the first frame is never empty */
@keyframes rise { from { opacity: 0.55; transform: translateY(18px); } }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes pv-in { from { opacity: 0.5; transform: translateY(10px); } }
@keyframes bake-in { from { opacity: 0.4; transform: translateY(18px) scale(0.88); } }
@keyframes bob {
  from { transform: translateY(-5px) rotate(-3deg); }
  to { transform: translateY(5px) rotate(3deg); }
}
@keyframes wave {
  0%, 70%, 100% { transform: rotate(-8deg); }
  80% { transform: rotate(-2deg); }
  90% { transform: rotate(-12deg); }
}
@keyframes wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  86% { transform: rotate(-6deg); }
  93% { transform: rotate(5deg); }
}
@keyframes float {
  from { transform: translate3d(0, -7px, 0) rotate(-7deg); }
  to { transform: translate3d(4px, 9px, 0) rotate(9deg); }
}
@keyframes bump {
  30% { transform: scale(1.2) rotate(-10deg); }
  60% { transform: scale(0.94) rotate(3deg); }
}
@keyframes pop { 40% { transform: scale(1.28); } }
@keyframes slap {
  from { transform: scale(1.22) rotate(-14deg); }
  60% { transform: scale(0.95) rotate(3deg); }
}
@keyframes breathe { 50% { opacity: 0.35; transform: scale(0.8); } }
@keyframes flash {
  0%, 30% { box-shadow: 0 0 0 2px var(--good), 0 0 0 7px var(--good-bg); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .dish-hero__img { rotate: none; }
  .hero__mascot { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .card { --plate: 112px; padding-inline: 12px; }
  .card__title { font-size: 15px; }
  .grid { column-gap: 10px; }
  .feature__media { width: 138px; height: 138px; }
  .cta { padding-left: 18px; gap: 10px; }
  .tab { padding: 0 9px; }
  .tab.is-on { padding: 0 12px 0 10px; }
}

/* ---------- Tablet: roomier single column ---------- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .card { --plate: 150px; }
  .feature__media { width: 190px; height: 190px; }
}

/* ---------- Desktop: two glass panels, like the reference shot ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  body { overflow: hidden; }

  .app {
    --side-w: 440px;
    --glide: 0.62s;
    --glide-out: cubic-bezier(0.62, 0, 0.3, 1);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-w);
    gap: clamp(28px, 3vw, 52px);
    max-width: 1340px; height: 100vh; height: 100dvh;
    margin-inline: auto;
    padding: 36px clamp(28px, 4vw, 60px);
    overflow: visible;
  }
  /* Switching between the two-panel layout and the full-width one glides
     instead of snapping: the side column closes to nothing while the main
     panel widens into the room, and the app re-centres as it goes. Held back
     until the first frame, so a page opened on Orders does not animate. */
  .is-settled .app {
    transition:
      grid-template-columns var(--glide) var(--ease),
      column-gap var(--glide) var(--ease),
      max-width var(--glide) var(--ease);
  }

  .main {
    max-width: none; min-height: 0; height: 100%; margin: 0;
    border-radius: var(--r-panel);
    border: 1.5px solid var(--glass-edge);
    background: var(--paper);
    box-shadow: var(--shadow-panel);
  }
  .main__scroll {
    height: 100%;
    overflow-y: auto; overflow-x: hidden;
    border-radius: inherit;
    padding: 0 var(--gutter) 132px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .topbar {
    padding: 26px var(--gutter) 12px;
    border-radius: var(--r-panel) var(--r-panel) 0 0;
  }
  .topbar .brand { justify-content: flex-start; margin-left: 6px; }
  .topbar__cart-space { width: 70px; }

  .cartbtn {
    position: absolute;
    top: -18px; right: 30px;
    width: 66px; height: 66px;
    border-radius: 19px 19px 19px 36px;
  }
  .cartbtn .icon { width: 27px; height: 27px; }

  .tabbar {
    position: absolute;
    bottom: 26px;
    width: min(440px, calc(100% - 2 * var(--gutter)));
  }

  .hero { padding: 26px 28px 30px; }
  .lettering { width: min(100%, 420px); }
  .hero__sub { font-size: 15.5px; }
  .hero .hero__mascot { width: 128px; right: 40px; bottom: -44px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); column-gap: 20px; }
  .card { --plate: 146px; }
  .feature { padding: 24px 0 24px 28px; }
  .feature__media { width: 196px; height: 196px; margin: -36px -8px -36px 0; }
  .feature__title { font-size: 34px; }

  .side {
    position: relative; inset: auto; z-index: 2;
    max-width: none; min-height: 0; height: 100%; margin: 0;
    transform: none; visibility: visible; transition: none;
  }
  .side__inner {
    width: var(--side-w);
    border-radius: var(--r-panel);
    border: 1.5px solid var(--glass-edge);
    background: var(--paper);
    box-shadow: var(--shadow-panel);
  }
  .is-settled .side__inner {
    transition: transform var(--glide) var(--ease), opacity var(--glide) var(--ease);
  }
  .pview__scroll {
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    padding: 0 30px 28px;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .pbar {
    margin-inline: -30px;
    padding: 22px 24px 12px;
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    background: linear-gradient(var(--sheet) 55%, transparent);
  }
  .pview--dish .pbar { padding: 22px 24px 12px; }
  .pfoot { padding: 16px 30px 24px; border-top: 0; }
  .pview--dish .pfoot { padding-right: 0; }
  .pview--dish .cta { margin-right: -34px; border-radius: 999px 0 0 999px; padding-right: 44px; }
  .dish-hero { margin-inline: -30px; padding-top: 62px; }
  .dish-hero__img { width: 72%; margin-left: 14%; }

  /* The plate hangs over the panel's right edge instead of being cut by it.
     The dish view's scroll box reaches past the glass by --hang, and only
     the plate uses that room. */
  .pview--dish { --hang: 72px; }
  .pview--dish .pview__scroll {
    margin-right: calc(var(--hang) * -1);
    padding-right: calc(30px + var(--hang));
    scrollbar-width: none;
  }
  .pview--dish .pview__scroll::-webkit-scrollbar { display: none; }
  .pview--dish .dish-hero { margin-inline: -30px calc(-30px - var(--hang)); }

  /* Orders and profile take the whole width while nothing is open beside
     them. The panel is not removed: it keeps its width and slides away to the
     right, fading as it goes, and comes back from the right the same way. It
     is only hidden once it has left, so nothing can be tabbed into off screen. */
  .app.is-solo { grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0px; max-width: 1080px; }
  .app.is-solo .side { visibility: hidden; pointer-events: none; }
  .is-settled .app.is-solo .side { transition: visibility 0s linear var(--glide); }
  .app.is-solo .side__inner { transform: translate3d(calc(100% + 64px), 0, 0); opacity: 0; }
  /* Leaving takes an even curve and fades late, so the panel is seen to travel
     right before it goes; coming back keeps the arrival ease-out and settles. */
  .is-settled .app.is-solo { transition-timing-function: var(--glide-out); }
  .is-settled .app.is-solo .side__inner {
    transition:
      transform var(--glide) var(--glide-out),
      opacity calc(var(--glide) * 0.55) ease-in calc(var(--glide) * 0.4);
  }
  .is-solo .view[data-tab="orders"] .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .is-solo .view[data-tab="profile"] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "head head" "details diet" "details mode" "reset links";
    column-gap: 20px; align-items: start;
  }
  .is-solo .pf-head { grid-area: head; }
  .is-solo .pf-details { grid-area: details; }
  .is-solo .pf-diet { grid-area: diet; }
  .is-solo .pf-mode { grid-area: mode; }
  .is-solo .pf-links { grid-area: links; }
  .is-solo .pf-reset { grid-area: reset; }

  .toast { bottom: 12px; }
}

/* Reduced motion gets the end state at once. The global rule shortens every
   duration but leaves delays alone, and the panel's late fade and hide are
   delays, so the glide itself goes to zero here. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .app { --glide: 0s; }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .app { padding-block: 22px; }
  .dish-hero__img { width: 60%; margin-left: 20%; }
}

/* Phones: the Add to bag pill bleeds off the edge */
@media (max-width: 1023.98px) {
  .pview--dish .pfoot { padding-right: 0; }
  .pview--dish .cta { border-radius: 999px 0 0 999px; padding-right: calc(10px + var(--gutter)); }
}

/* ---------- Brand marks ---------- */
/* Traced from the identity and recoloured with CSS masks */
.wordmark {
  display: block; height: 30px; aspect-ratio: 1486 / 478;
  background: var(--pink);
  -webkit-mask: url(../../assets/marks/wordmark.svg) center / contain no-repeat;
  mask: url(../../assets/marks/wordmark.svg) center / contain no-repeat;
}
.mascot {
  display: block; width: 84px; aspect-ratio: 1942 / 3155;
  background: var(--pink);
  -webkit-mask: url(../../assets/marks/mascot.svg) center / contain no-repeat;
  mask: url(../../assets/marks/mascot.svg) center / contain no-repeat;
}
.empty .mascot { margin-bottom: 10px; animation: wiggle 3.6s ease-in-out infinite; }
.empty--inline .mascot { width: 64px; }
/* The baguette B on a pink tile, as on the brand board */
.monogram {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 15px;
  background: var(--pink);
}
.monogram::before {
  content: ""; height: 72%; aspect-ratio: 474 / 1373;
  background: var(--cream);
  -webkit-mask: url(../../assets/marks/monogram.svg) center / contain no-repeat;
  mask: url(../../assets/marks/monogram.svg) center / contain no-repeat;
}
@media (min-width: 1024px) {
  .wordmark { height: 34px; }
}

/* The stickers that close the kraft bags: one doodle in pink on a cream or
   a navy disc. The doodles are the brand's pattern, plus a cupcake and two
   cups from a licensed Adobe Stock doodle set in the same hand. */
.sticker {
  --seal: var(--seal-cream);
  --seal-ink: var(--seal-pink-deep);
  display: grid; place-items: center;
  width: 58px; aspect-ratio: 1; border-radius: 50%;
  background: var(--seal); color: var(--seal-ink);
  box-shadow: 0 0 0 2px var(--seal-edge), var(--seal-shadow);
}
.sticker--navy { --seal: var(--seal-navy); --seal-ink: var(--seal-pink); }
.doodle {
  display: block; width: 64%; height: 64%;
  background: currentColor;
  -webkit-mask: var(--doodle) center / contain no-repeat;
  mask: var(--doodle) center / contain no-repeat;
  rotate: var(--tilt, 0deg);
}
.doodle--b { --doodle: url(../../assets/doodles/b.svg); --tilt: 10deg; }
.doodle--croissant { --doodle: url(../../assets/doodles/croissant.svg); --tilt: -8deg; }
.doodle--cookies { --doodle: url(../../assets/doodles/cookies.svg); --tilt: 4deg; }
.doodle--toast { --doodle: url(../../assets/doodles/toast.svg); --tilt: -6deg; }
.doodle--pretzel { --doodle: url(../../assets/doodles/pretzel.svg); width: 70%; height: 70%; }
.doodle--wheat { --doodle: url(../../assets/doodles/wheat.svg); --tilt: 12deg; }
.doodle--cupcake { --doodle: url(../../assets/doodles/cupcake.svg); --tilt: -4deg; }
.doodle--cream-cup { --doodle: url(../../assets/doodles/cream-cup.svg); --tilt: 6deg; }
.doodle--coffee { --doodle: url(../../assets/doodles/coffee.svg); --tilt: -5deg; }