/* HB Germany storefront.

   The same design language as the app and the POS — a warm greige ground,
   azure for everything you can act on, marigold only for promotion and never
   for an action, one marigold moment a page — laid out for a wide screen
   rather than a phone.

   Written with logical properties throughout (inline-start, block-end, …), so
   the whole page mirrors when Kurdish and Arabic arrive and nothing has to be
   rewritten for it. Motion is vertical only for the same reason: a sideways
   slide would have to flip direction in a right-to-left page. */

/* ---------- colour ---------- */

:root {
  color-scheme: light;
  --ground: #FAF8F6;
  --surface: #FFFFFF;
  --sunken: #F2EEEA;
  /* Behind a brand's own logo, in both themes: logos are drawn for light grounds. */
  --logo-plate: #F2EEEA;
  --hairline: #EAE4DE;
  --border: #DED6CE;
  --ink: #221E1B;
  --ink-soft: #5F564F;
  --ink-muted: #7C7168;
  --brand: #2A6F9E;
  --brand-deep: #1F5578;
  --brand-tint: #EAF3FA;
  /* The four category tints, the app's: blue, gold, mint, blush. Decorative
     and categorical only — never a state, never an action. */
  --tint-0: #EAF3FA;
  --tint-1: #FDF2DF;
  --tint-2: #E6F1EA;
  --tint-3: #FAEBE5;
  --on-brand: #FFFFFF;
  --accent: #E08A1E;
  --accent-tint: #FDF3E3;
  --accent-ink: #6B5836;
  --good: #2E8B5F;
  --good-bg: #E7F3EC;
  --warn: #C77A16;
  /* The same roles as text: dark enough for small type on the tints (AA). */
  --good-ink: #23704B;
  --warn-ink: #8A5208;
  --warn-bg: #FBF0DE;
  --danger: #C04A42;
  --danger-bg: #FBEDEC;
  --glass: rgba(255, 255, 255, 0.82);

  --shadow-card: 0 1px 2px rgba(90, 62, 40, 0.04), 0 6px 18px rgba(90, 62, 40, 0.07);
  --shadow-lift: 0 2px 4px rgba(90, 62, 40, 0.06), 0 14px 32px rgba(90, 62, 40, 0.12);
  --shadow-low: 0 1px 2px rgba(90, 62, 40, 0.05);

  --r-input: 12px;
  --r-button: 16px;
  --r-card: 18px;
  --r-sheet: 24px;
  --r-pill: 999px;

  /* The app's motion, in CSS: things arrive by fading up, 320ms, easeOutCubic,
     45ms between siblings, never more than eight staggered. */
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --t-enter: 320ms;
  --t-quick: 180ms;
  --stagger: 45ms;
  /* A slower, softer landing for things that travel further. */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark is the same roles with different values — a card separates from the
   ground by being lighter, not by a shadow, because a warm shadow vanishes on
   a dark page. `system` sets no attribute and lets the device decide. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tint-0: #132F42;
    --tint-1: #3A2C12;
    --tint-2: #16301F;
    --tint-3: #35211A;
    --ground: #14110F;
    --surface: #1D1916;
    --sunken: #272220;
    --logo-plate: #E9E4DE;
    --hairline: #352F2A;
    --border: #443C36;
    --ink: #EAE4DE;
    --ink-soft: #BDB2A8;
    --ink-muted: #A2968C;
    --brand: #6FB3DC;
    --brand-deep: #9CCAE7;
    --brand-tint: #132F42;
    --on-brand: #0D2130;
    --accent: #EDA544;
    --accent-tint: #3D2A0E;
    --accent-ink: #DCC69F;
    --good: #5FBF87;
    --good-bg: #14301F;
    --warn: #E8A93F;
  --good-ink: var(--good);
  --warn-ink: var(--warn);
    --good-ink: var(--good);
    --warn-ink: var(--warn);
    --warn-bg: #362610;
    --danger: #E87F76;
    --danger-bg: #3A1A17;
    --glass: rgba(29, 25, 22, 0.82);
    --shadow-card: 0 0 0 1px var(--hairline);
    --shadow-lift: 0 0 0 1px var(--border), 0 12px 28px rgba(0, 0, 0, 0.35);
    --shadow-low: 0 0 0 1px var(--hairline);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --tint-0: #132F42;
  --tint-1: #3A2C12;
  --tint-2: #16301F;
  --tint-3: #35211A;
  --ground: #14110F;
  --surface: #1D1916;
  --sunken: #272220;
  --logo-plate: #E9E4DE;
  --hairline: #352F2A;
  --border: #443C36;
  --ink: #EAE4DE;
  --ink-soft: #BDB2A8;
  --ink-muted: #A2968C;
  --brand: #6FB3DC;
  --brand-deep: #9CCAE7;
  --brand-tint: #132F42;
  --on-brand: #0D2130;
  --accent: #EDA544;
  --accent-tint: #3D2A0E;
  --accent-ink: #DCC69F;
  --good: #5FBF87;
  --good-bg: #14301F;
  --warn: #E8A93F;
  --warn-bg: #362610;
  --danger: #E87F76;
  --danger-bg: #3A1A17;
  --glass: rgba(29, 25, 22, 0.82);
  --shadow-card: 0 0 0 1px var(--hairline);
  --shadow-lift: 0 0 0 1px var(--border), 0 12px 28px rgba(0, 0, 0, 0.35);
  --shadow-low: 0 0 0 1px var(--hairline);
}

/* Switching theme cross-fades, only while it happens — never on page load. */
.theme-changing, .theme-changing * { transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease) !important; }

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  /* Rubik for Latin; Noto Sans Arabic for every Kurdish and Arabic letter. */
  font-family: Rubik, "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.shell { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 900px) { .shell { padding-inline: 32px; } }

.skip { position: absolute; inset-inline-start: -9999px; background: var(--surface); padding: 10px 16px; border-radius: var(--r-button); z-index: 50; }
.skip:focus { inset-inline-start: 12px; inset-block-start: 12px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -0.8px; margin: 0 0 8px; font-weight: 600; text-wrap: balance; }
h2 { font-size: 21px; letter-spacing: -0.4px; margin: 0; font-weight: 600; }
h3 { font-size: 16px; margin: 0; font-weight: 600; }
.lede { color: var(--ink-soft); margin: 0; max-width: 62ch; font-size: 16px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px; }
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.small { font-size: 13px; }
.opt { color: var(--ink-muted); font-weight: 400; }
.num { font-variant-numeric: tabular-nums; }

.page-head { padding-block: 40px 24px; }
.section { margin-block: 44px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-end: 18px; flex-wrap: wrap; }
.section-head p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }
.narrow { max-width: 480px; margin-inline: auto; }
.under { display: flex; justify-content: center; padding-block: 18px 40px; }

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

/* Cross-page transitions: the page settles in, and a product's picture flies
   from its card to its page (the app's Hero, in the browser). A browser
   without view transitions simply loads the page. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: var(--t-enter) var(--ease) both vt-in; }
::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: var(--ease); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px); } }

/* Content that arrives: above the fold on load, below it as it scrolls into
   view. Hidden only when the script is there to reveal it again — with no
   script, everything is simply visible. */
.js .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.js .reveal.in {
  opacity: 1; transform: none; filter: none;
  transition: opacity 520ms var(--ease), transform 620ms var(--ease-out-soft), filter 520ms var(--ease);
  transition-delay: calc(min(var(--i, 0), 8) * var(--stagger));
}

/* Headlines arrive a word at a time: each word rises out of its own line
   and comes into focus, like the name on the welcome panel. The heading
   itself does not move; its words do. */
.js [data-split].reveal { opacity: 1; transform: none; filter: none; }
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-block-end: 0.12em; margin-block-end: -0.12em; }
.split-word > span { display: inline-block; }
.js [data-split] .split-word > span { transform: translateY(105%); opacity: 0; filter: blur(8px); }
.js [data-split].in .split-word > span {
  transform: none; opacity: 1; filter: none;
  transition: transform 760ms var(--ease-out-soft), opacity 520ms var(--ease), filter 620ms var(--ease);
  transition-delay: calc(var(--w, 0) * 55ms + 80ms);
}

.pop { animation: pop 200ms var(--ease); }

/* ---------- masthead ---------- */

.masthead {
  position: sticky; inset-block-start: 0; z-index: 20;
  background: var(--glass);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-block-end: 1px solid var(--hairline);
}
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.wordmark { display: flex; align-items: center; gap: 10px; line-height: 1.1; color: var(--ink); }
.wordmark-words { display: flex; flex-direction: column; }
/* The mark in its own blue, or in white on a dark page. */
.wordmark-logo { width: 46px; height: auto; flex: none; display: block; }
.wordmark-logo.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark-logo.on-light { display: none; }
  :root:not([data-theme="light"]) .wordmark-logo.on-dark { display: block; }
}
:root[data-theme="dark"] .wordmark-logo.on-light { display: none; }
:root[data-theme="dark"] .wordmark-logo.on-dark { display: block; }
.wordmark:hover { color: var(--ink); }
.wordmark b { font-weight: 700; font-size: 19px; letter-spacing: -0.4px; }
.wordmark-words > span { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.2px; }

.nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.nav a {
  position: relative; padding: 9px 14px; border-radius: var(--r-pill); color: var(--ink-soft);
  font-weight: 500; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.nav a:hover { background: var(--sunken); color: var(--ink); }
.nav a.on { background: var(--brand-tint); color: var(--brand-deep); }
.nav { margin-inline-start: auto; }
.basket {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 16px;
  border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font-weight: 500; font-size: 14px;
  transition: background var(--t-quick) var(--ease), transform 120ms var(--ease);
}
.basket:hover, .basket.on { background: var(--brand-deep); color: var(--on-brand); }
.basket:active { transform: scale(0.97); }

/* Search: a round button in the header, the same height as the basket. */
.search-button {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--ink-soft);
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform 120ms var(--ease);
}
.search-button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-button:hover, .search-button.on { background: var(--brand-tint); color: var(--brand-deep); }
.search-button:active { transform: scale(0.94); }
.nav + .search-button { margin-inline-start: -8px; }

.search-form { display: flex; gap: 10px; margin-block-start: 14px; max-width: 640px; }
.search-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 17px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-input); padding: 12px 16px; min-height: 52px;
  box-shadow: var(--shadow-low);
  transition: border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.search-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.search-form.compact { max-width: 460px; }
.search-form.compact input { font-size: 15px; min-height: 46px; }
.result-count { color: var(--ink-muted); font-size: 13.5px; margin: 0 0 16px; }
/* A search for a brand's name: the brand first, as a way to its page. */
.found-brand {
  display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 0 0 16px; padding: 12px 16px 12px 12px;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); color: var(--ink);
  transition: box-shadow var(--t-quick) var(--ease), transform 220ms var(--ease);
}
.found-brand:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); color: var(--ink); }
.found-brand .brand-mark { width: 56px; height: 56px; border-radius: var(--r-card); flex: none; font-size: 20px; }
.found-brand-words { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.found-brand-words b { font-size: 16px; font-weight: 600; }
.found-brand-words span, .found-brand > .flip { font-size: 12.5px; color: var(--ink-muted); }
.found-brand > .flip { font-size: 20px; }
[dir="rtl"] .found-brand > .flip { transform: scaleX(-1); }
.found-brands { margin: 0 0 16px; }
.chip-count { color: var(--ink-muted); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.chip.on .chip-count { color: inherit; opacity: 0.85; }

/* The sizes of one product, side by side with their prices. */
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.size-option {
  display: inline-flex; flex-direction: column; gap: 2px; min-width: 88px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface); color: var(--ink);
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.size-option b { font-size: 14px; font-weight: 500; }
.size-option span { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.size-option:hover { border-color: var(--brand); color: var(--ink); }
.size-option.on { border: 1.5px solid var(--brand); background: var(--brand-tint); color: var(--brand-deep); }
.size-option.on b { font-weight: 600; }
.size-option.on span { color: var(--brand-deep); }
.size-option.gone b, .size-option.gone span { color: var(--ink-muted); }

/* Sort and filter above a shelf. */
.shelf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-block-end: 20px; }
.shelf-tools select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-input); padding: 10px 14px; min-height: 44px;
}
.shelf-tools select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.shelf-tools .check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.shelf-tools .check input { width: 18px; height: 18px; accent-color: var(--brand); }
.shelf-tools.live .no-js-only { display: none; }

/* The heart. Brand blue when saved — it is a control, and the accent is
   never one. A small pop as it fills; nothing when it empties. */
.save-form { margin-block-start: 12px; }
.save-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-soft); font: inherit; font-weight: 500; font-size: 14px; cursor: pointer;
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.save-button svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.save-button:hover { border-color: var(--brand); color: var(--brand-deep); }
.save-button.on { background: var(--brand-tint); border-color: transparent; color: var(--brand-deep); }
.save-button.on svg { fill: var(--brand); stroke: var(--brand); animation: heart-fill 280ms var(--ease-out-soft); }
@keyframes heart-fill { from { transform: scale(0.6); } to { transform: none; } }

.line.favourite { grid-template-columns: 84px minmax(0, 1fr); }
@media (min-width: 720px) { .line.favourite { grid-template-columns: 84px minmax(0, 1fr) auto; } }
.favourite-actions { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; justify-content: flex-end; }
@media (min-width: 720px) { .favourite-actions { grid-column: auto; } }
.favourite-actions .save-form { margin: 0; }
.favourite-actions .save-button { padding: 0; width: 44px; justify-content: center; }


/* A phone gets one row: the name, the links scrolling sideways, the basket
   pinned at the end. Two rows of a sticky header would eat a fifth of the
   screen before the first product. */
@media (max-width: 640px) {
  .masthead-row { flex-wrap: nowrap; min-height: 60px; gap: 8px; }
  .wordmark-words > span { display: none; }
  .wordmark b { font-size: 17px; white-space: nowrap; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding-inline: 10px; font-size: 13.5px; white-space: nowrap; }
  .basket { padding-inline: 12px; font-size: 13.5px; }
}

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding-inline: 6px;
  border-radius: var(--r-pill); background: var(--on-brand); color: var(--brand-deep);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}

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

.footer { border-block-start: 1px solid var(--hairline); margin-block-start: 40px; padding-block: 34px 44px; color: var(--ink-muted); background: var(--surface); }
.footer-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer h3 { color: var(--ink); font-size: 14px; margin-block-end: 8px; }
.footer p { margin: 0 0 6px; font-size: 13.5px; }
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--brand); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }

/* ---------- controls ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding-inline: 24px; border: 1px solid transparent; cursor: pointer;
  border-radius: var(--r-button); background: var(--brand); color: var(--on-brand);
  font: inherit; font-weight: 500; text-align: center;
  transition: background var(--t-quick) var(--ease), transform 120ms var(--ease), box-shadow var(--t-quick) var(--ease);
}
.button:hover { background: var(--brand-deep); color: var(--on-brand); }
.button:active { transform: scale(0.98); }
.button.block { display: flex; width: 100%; }
.button.ghost { background: transparent; color: var(--brand); border-color: var(--border); }
.button.ghost:hover { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand-tint); }
.button.quiet { background: var(--sunken); color: var(--ink); }
.button.quiet:hover { background: var(--hairline); color: var(--ink); }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }

.link-button {
  background: none; border: 0; padding: 10px 6px; min-height: 44px;
  color: var(--brand); font: inherit; font-weight: 500; cursor: pointer;
}
.link-button:hover { color: var(--brand-deep); }
.link-button.quiet { color: var(--ink-muted); font-weight: 400; font-size: 13px; }
.link-button.quiet:hover, .link-button.danger { color: var(--danger); }
/* The one filled danger button: deleting an account. */
.button.danger { background: var(--danger); color: #fff; }
.button.danger:hover { background: var(--danger); color: #fff; filter: brightness(0.92); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field .label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-input);
  padding: 12px 13px; min-height: 48px; width: 100%;
  transition: border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.field .hint { font-size: 12.5px; color: var(--ink-muted); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-block-end: 6px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.said { background: var(--brand-tint); color: var(--brand-deep); border-radius: var(--r-input); padding: 12px 14px; margin-block: 0 16px; }
.said.bad { background: var(--danger-bg); color: var(--danger); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 16px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--hairline);
  color: var(--ink); font-size: 13.5px; font-weight: 500;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), transform 120ms var(--ease);
}
.chip:hover { border-color: var(--border); color: var(--ink); }
.chip:active { transform: scale(0.97); }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.pill { display: inline-flex; align-items: center; min-height: 28px; padding-inline: 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.muted { background: var(--sunken); color: var(--ink-muted); }
.pill.brand { background: var(--brand-tint); color: var(--brand-deep); }
.pill.bad { background: var(--danger-bg); color: var(--danger); }

.panel { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 22px; }
.panel + .panel { margin-block-start: 16px; }
.panel > summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; list-style: none; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: "+"; margin-inline-start: auto; color: var(--ink-muted); font-size: 20px; transition: transform var(--t-quick) var(--ease); }
.panel[open] > summary::after { transform: rotate(45deg); }

.empty { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-low); padding: 40px 26px; text-align: center; color: var(--ink-soft); }
.empty h2 { margin-block-end: 6px; color: var(--ink); }
.empty p { margin: 0 0 18px; }

/* ---------- product cards ---------- */

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
/* Two to a row on a phone, the way a shop app lays out a shelf. */
@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid .card-body { padding: 10px 11px 12px; }
  .grid .card-name { font-size: 13.5px; }
  .grid .card-foot { flex-direction: column; align-items: flex-start; gap: 2px; }
  .grid .price { font-size: 15.5px; }
}

.card {
  position: relative; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column; color: var(--ink);
  transition: box-shadow var(--t-quick) var(--ease), transform 220ms var(--ease);
}
.card:hover { color: var(--ink); }

/* A card lifts, its picture leans in slowly and a soft shade settles over
   it — on the wrapper, so reaching for Add does not drop the hover. */
.card-wrap { position: relative; }
.card-wrap:hover .card { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.card .well { position: relative; }
.card .well::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(34, 30, 27, 0.04), transparent 45%, rgba(34, 30, 27, 0.12));
  opacity: 0; transition: opacity 500ms var(--ease);
}
.card .well img, .card .well .glyph { transition: transform 900ms var(--ease-out-soft), opacity var(--t-enter) var(--ease); }
.card-wrap:hover .well img, .card-wrap:hover .well .glyph { transform: scale(1.08); }
.card-wrap:hover .well::after { opacity: 1; }

/* Laid over the picture square (the square is as wide as the card), and
   rising into view on hover. On a touch screen there is no hover, so it
   is a small round + that is always there. */
.quick-add { position: absolute; inset-inline: 0; inset-block-start: 0; aspect-ratio: 1 / 1; display: flex; align-items: flex-end; justify-content: center; padding: 12px; pointer-events: none; }
.quick-add-button {
  pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding-inline: 18px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--glass); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-low);
  opacity: 0; transform: translateY(14px);
  transition: opacity 320ms var(--ease), transform 420ms var(--ease-out-soft), background var(--t-quick) var(--ease);
}
.quick-add-button > span[aria-hidden] { font-size: 17px; line-height: 1; }
.card-wrap:hover .quick-add-button, .quick-add-button:focus-visible { opacity: 1; transform: none; }
.quick-add-button:hover { background: var(--brand); color: var(--on-brand); }
.quick-add-button:active { transform: scale(0.96); }
@media (hover: none) {
  .quick-add { justify-content: flex-end; padding: 8px; }
  .quick-add-button { opacity: 1; transform: none; width: 40px; min-height: 40px; padding: 0; }
  .quick-add-label { display: none; }
}

.well { background: var(--sunken); aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 14px; overflow: hidden; }
.well img { width: 100%; height: 100%; object-fit: contain; transition: transform 380ms var(--ease), opacity var(--t-enter) var(--ease); }
.js .well img[data-fade]:not(.loaded) { opacity: 0; }

.card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card-brand { font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.card-name { font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.card-size { font-size: 12px; color: var(--ink-muted); }
.card-foot { margin-block-start: auto; padding-block-start: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rank {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-low);
}

.price { font-size: 17px; font-weight: 700; color: var(--brand-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price .unit { font-size: 11.5px; font-weight: 500; color: var(--ink-muted); margin-inline-start: 3px; }
.price.small { font-size: 14px; font-weight: 500; }
.price.big { font-size: 32px; }

.stock { font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.stock.good { color: var(--good-ink); }
.stock.warn { color: var(--warn-ink); }
.stock.muted { color: var(--ink-muted); }

/* Stars are ink, not marigold: the accent appears once a page, and a grid of
   cards each wearing five marigold stars would shout. */
.rating { font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; }
.stars { color: var(--ink-soft); letter-spacing: 1px; font-size: 13px; }
.stars .off { color: var(--hairline); }

/* A horizontal rail that snaps card to card, with arrows on a wide screen. */
.rail { position: relative; }
.rail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 220px); gap: 18px;
  overflow-x: auto; scroll-snap-type: inline mandatory; scroll-behavior: smooth;
  padding-block: 6px 18px; padding-inline: 2px; scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; }
.rail-tools { display: flex; align-items: center; gap: 12px; }
.rail-arrows { display: none; gap: 8px; }
.js .rail-arrows { display: flex; }
.round {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 18px;
  transition: background var(--t-quick) var(--ease), transform 120ms var(--ease);
}
.round:hover { background: var(--sunken); }
.round:active { transform: scale(0.94); }
[dir="rtl"] .round .flip { display: inline-block; transform: scaleX(-1); }

/* ---------- home ---------- */

.hero { display: grid; gap: 28px; align-items: center; padding-block: 44px 20px; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; padding-block: 64px 28px; } }
@media (min-width: 900px) { .hero.solo { grid-template-columns: minmax(0, 1fr); } .hero.solo > div { max-width: 760px; } }
.hero h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -1.6px; line-height: 1.04; margin-block-end: 16px; }
.hero .lede { font-size: 17px; margin-block-end: 26px; }

/* The shelf: real products standing whole on a lit ledge. A soft pool of
   the brand's tint behind them, the ledge in front, a shadow under each —
   no boxes, no crops. Tallest in the middle; they rise in one by one. */
.hero-stage { position: relative; aspect-ratio: 5 / 4; isolation: isolate; }
.stage-glow {
  position: absolute; inset: 4% 0 10%; z-index: -1; border-radius: 48% 52% 46% 54% / 56% 50% 50% 44%;
  background:
    radial-gradient(60% 55% at 50% 58%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(80% 70% at 30% 30%, var(--brand-tint), transparent 72%),
    radial-gradient(70% 60% at 78% 72%, color-mix(in srgb, var(--sand, var(--sunken)) 90%, transparent), transparent 70%);
  filter: blur(6px);
}
.stage-items {
  position: absolute; inset-inline: 2%; inset-block-end: 17%; height: 80%;
  display: flex; align-items: flex-end; justify-content: center; gap: 0;
}
.stage-item { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; flex: 1 1 0; min-width: 0; margin-inline: -1.2%; }
.stage-item img {
  max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 18px 18px rgba(40, 26, 14, 0.18)) drop-shadow(0 3px 3px rgba(40, 26, 14, 0.14));
  transition: transform var(--t-quick) var(--ease);
}
.stage-item:hover img { transform: translateY(-6px); }
.stage-item:nth-child(1) { height: 66%; }
.stage-item:nth-child(2) { height: 84%; z-index: 1; }
.stage-item:nth-child(3) { height: 100%; z-index: 2; }
.stage-item:nth-child(4) { height: 80%; z-index: 1; }
.stage-item:nth-child(5) { height: 62%; }
.stage-items.few .stage-item:nth-child(1) { height: 82%; }
.stage-items.few .stage-item:nth-child(2) { height: 100%; }
.stage-items.few .stage-item:nth-child(3) { height: 86%; }
.stage-ledge {
  position: absolute; inset-inline: 0; inset-block-end: 9%; height: 8.5%; border-radius: 999px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 70%, var(--sunken)));
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: -1;
}
.stage-ledge::after {
  content: ""; position: absolute; inset-inline: 6%; inset-block-start: 100%; height: 60%;
  background: radial-gradient(50% 100% at 50% 0, rgba(40, 26, 14, 0.14), transparent 70%);
}
@media (max-width: 899px) {
  .hero-stage { aspect-ratio: 5 / 3; max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 480px) {
  .stage-item:nth-child(1), .stage-item:nth-child(5) { display: none; }
}

/* The brands themselves, under the buttons: real logos on light plates,
   each a way straight to its shelf. */
.hero-brands { margin-block-start: 26px; display: grid; gap: 10px; }
.hero-brands-label { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.hero-brands-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-logo {
  width: 74px; height: 46px; border-radius: 12px; background: var(--logo-plate);
  display: grid; place-items: center; padding: 8px 10px; box-shadow: var(--shadow-low);
  transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.hero-logo:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.hero-logo img { width: 100%; height: 30px; object-fit: contain; }

/* How buying here works, as one quiet strip: three steps, an icon each,
   divided by hairlines rather than boxed. */
.promises {
  display: grid; grid-template-columns: 1fr; margin-block: 12px 12px;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-low); overflow: hidden;
}
@media (min-width: 760px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promise { display: flex; gap: 14px; align-items: center; padding: 18px 22px; }
.promise + .promise { border-block-start: 1px solid var(--hairline); }
@media (min-width: 760px) { .promise + .promise { border-block-start: 0; border-inline-start: 1px solid var(--hairline); } }
.promise-mark { flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; }
.promise-mark svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.promise b { display: block; font-weight: 600; font-size: 14.5px; }
.promise span { color: var(--ink-muted); font-size: 13px; }

/* The page's one marigold moment. Never a button: it carries no action. */
.band { background: var(--accent-tint); color: var(--accent-ink); border-radius: var(--r-sheet); padding: 28px; display: grid; gap: 6px; }
.band .eyebrow { color: var(--accent-ink); }
.band strong { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.6px; line-height: 1.15; color: var(--ink); font-weight: 600; }

.brand-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.brand-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 14px;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); color: var(--ink); text-align: center;
  transition: box-shadow var(--t-quick) var(--ease), transform 220ms var(--ease);
}
.brand-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); color: var(--ink); }
.brand-mark { width: 72px; height: 72px; border-radius: 50%; background: var(--sunken); display: grid; place-items: center; overflow: hidden; font-weight: 700; font-size: 22px; color: var(--brand-deep); }
.brand-mark img { width: 70%; height: 70%; object-fit: contain; }
.brand-mark:has(img) { background: var(--logo-plate); }
.brand-tile b { font-weight: 600; }
.brand-tile span { font-size: 12px; color: var(--ink-muted); }

/* Categories: each one's picture on its own tint. A row to swipe on a phone,
   like the app's; a grid once there is room for it. */
.category-tiles {
  display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding-block: 4px 10px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none;
}
.category-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .category-tiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; gap: 18px 12px; }
}
.category-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px; scroll-snap-align: start;
  color: var(--ink-soft); text-align: center; font-size: 13px; font-weight: 500; line-height: 1.3;
}
.category-tile:hover { color: var(--ink); }
.category-mark {
  width: 76px; height: 76px; border-radius: 50%; background: var(--tint-0);
  display: grid; place-items: center; transition: transform 220ms var(--ease), box-shadow var(--t-quick) var(--ease);
}
.category-mark img { width: 62px; height: 62px; }
.category-tile:hover .category-mark { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.category-tile:active .category-mark { transform: scale(0.97); }
.category-mark.t1 { background: var(--tint-1); }
.category-mark.t2 { background: var(--tint-2); }
.category-mark.t3 { background: var(--tint-3); }
.page-head .category-mark { width: 64px; height: 64px; margin-block-end: 12px; }
.page-head .category-mark img { width: 52px; height: 52px; }

.restock { display: grid; gap: 8px; margin-block: 14px 4px; }
.restock.waiting { grid-template-columns: 1fr auto; align-items: center; gap: 12px; background: var(--brand-tint); border-radius: var(--r-card); padding: 14px 16px; }
.restock.waiting p { margin: 0; }

/* ---------- product page ---------- */

.detail { display: grid; gap: 32px; grid-template-columns: 1fr; padding-block: 28px 16px; }
@media (min-width: 900px) { .detail { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 52px; } .gallery { position: sticky; inset-block-start: 92px; align-self: start; } }
.gallery .well.main { border-radius: var(--r-sheet); aspect-ratio: 1 / 1; padding: 28px; }
.thumbs { display: flex; gap: 10px; margin-block-start: 12px; flex-wrap: wrap; }
.thumb { width: 72px; height: 72px; border-radius: var(--r-input); border: 2px solid transparent; padding: 0; background: none; cursor: pointer; transition: border-color var(--t-quick) var(--ease); }
.thumb .well { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 10px; padding: 6px; }
.thumb.on { border-color: var(--brand); }

.detail-title { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.8px; margin: 2px 0 4px; font-weight: 600; }
.detail-size { color: var(--ink-muted); margin: 0 0 14px; }
.detail-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block: 14px 20px; }
.prose { color: var(--ink-soft); max-width: 62ch; white-space: pre-line; }
.buy { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 20px 22px; margin-block: 24px; }
.buy .add { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.buy .note { margin-block: 12px 0; }
.note { color: var(--ink-muted); font-size: 13px; margin-block: 6px 14px; }

/* A number box with − and + either side. The buttons are the script's; with
   no script the number box on its own still works. */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-button); background: var(--surface); overflow: hidden; }
.stepper input { width: 52px; border: 0; text-align: center; font: inherit; font-weight: 500; min-height: 46px; background: transparent; color: var(--ink); -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button { display: none; width: 42px; min-height: 46px; border: 0; background: transparent; color: var(--ink-soft); font-size: 18px; cursor: pointer; }
.js .stepper button { display: block; }
.stepper button:hover { background: var(--sunken); color: var(--ink); }

/* ---------- reviews ---------- */

.reviews { display: grid; gap: 28px; grid-template-columns: 1fr; padding-block: 12px 24px; scroll-margin-top: 90px; }
@media (min-width: 900px) { .reviews { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 52px; } }
.score { display: flex; align-items: baseline; gap: 10px; margin-block: 8px 4px; }
.score b { font-size: 46px; font-weight: 600; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; }
.bars { display: flex; flex-direction: column; gap: 7px; margin-block: 16px 22px; }
.bar { display: grid; grid-template-columns: 26px 1fr 30px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-muted); }
.bar-track { height: 8px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--ink-soft); transform-origin: left center; }
[dir="rtl"] .bar-fill { transform-origin: right center; }
.js .reveal.in .bar-fill { animation: grow 700ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }

.review { padding-block: 18px; border-block-end: 1px solid var(--hairline); }
.review:first-child { padding-block-start: 0; }
.review-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.review b { font-weight: 600; }
.review p { margin: 8px 0 0; color: var(--ink-soft); white-space: pre-line; }
.review.mine { background: var(--brand-tint); border-radius: var(--r-card); padding: 16px 18px; border: 0; margin-block-end: 12px; }

/* Five radio buttons drawn as stars. DOM order is one to five, so "this and
   everything before it" lights up — right in either reading direction. */
.picker { display: inline-flex; gap: 4px; border: 0; margin: 0; padding: 0; }
.picker input { position: absolute; opacity: 0; pointer-events: none; }
.picker label { font-size: 30px; line-height: 1; color: var(--hairline); cursor: pointer; padding: 4px; transition: color 120ms var(--ease), transform 120ms var(--ease); }
.picker label:hover { transform: translateY(-2px); }
.picker:has(input:nth-of-type(1):checked) label:nth-of-type(-n+1),
.picker:has(input:nth-of-type(2):checked) label:nth-of-type(-n+2),
.picker:has(input:nth-of-type(3):checked) label:nth-of-type(-n+3),
.picker:has(input:nth-of-type(4):checked) label:nth-of-type(-n+4),
.picker:has(input:nth-of-type(5):checked) label:nth-of-type(-n+5) { color: var(--brand); }
.picker:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1),
.picker:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2),
.picker:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3),
.picker:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4),
.picker:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) { color: var(--brand-deep); }
.picker input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 6px; }

/* ---------- basket and checkout ---------- */

.two-col { display: grid; gap: 28px; grid-template-columns: 1fr; padding-block-end: 40px; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; } .sticky { position: sticky; inset-block-start: 92px; align-self: start; } }

.lines { display: flex; flex-direction: column; gap: 12px; }
.line {
  display: grid; gap: 14px; align-items: center; grid-template-columns: 84px minmax(0, 1fr);
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px; color: var(--ink);
}
@media (min-width: 720px) { .line { grid-template-columns: 84px minmax(0, 1fr) auto auto; } }
.line.as-row { grid-template-columns: minmax(0, 1fr) auto; transition: box-shadow var(--t-quick) var(--ease), transform 220ms var(--ease); }
a.line.as-row:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); color: var(--ink); }
/* An order's row as one card: the row opens the order, and a finished order
   has Order again at its foot. The card lifts; the row inside it is bare. */
.line-group { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: box-shadow var(--t-quick) var(--ease), transform 220ms var(--ease); }
.line-group:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.line-group > a.line.as-row, .line-group > a.line.as-row:hover { background: none; box-shadow: none; transform: none; }
.line-foot { display: flex; border-block-start: 1px solid var(--hairline); }
.line-foot .link-button { flex: 1; min-height: 46px; border-end-start-radius: var(--r-card); border-end-end-radius: var(--r-card); transition: background var(--t-quick) var(--ease); }
.line-foot .link-button:hover { background: var(--brand-tint); }
.line-well .well { width: 84px; height: 84px; aspect-ratio: auto; border-radius: var(--r-input); padding: 8px; }
.line-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.line-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.line-total { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.line-qty { display: flex; align-items: center; gap: 8px; }

.totals-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 9px; }
.totals-row.light { color: var(--ink-soft); border-block-end: 1px solid var(--hairline); }
.totals-row.grand { font-weight: 600; font-size: 16px; padding-block-start: 14px; }
.unknown { font-size: 13px; font-weight: 400; color: var(--ink-muted); }

.progress { margin-block: 4px 18px; }
.progress p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-soft); }
.progress p b { color: var(--ink); }
.progress-track { height: 8px; background: var(--sunken); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--good); border-radius: var(--r-pill); transform-origin: left center; animation: grow 800ms var(--ease) both 200ms; }
[dir="rtl"] .progress-fill { transform-origin: right center; }

.choices { display: flex; flex-direction: column; gap: 10px; margin-block-end: 16px; }
.choice {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-input); padding: 14px 16px;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.choice:hover { border-color: var(--border); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.choice input { margin-block-start: 3px; accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-title { font-weight: 500; color: var(--ink); }
.sum-line { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; color: var(--ink-soft); font-size: 14px; border-block-end: 1px solid var(--hairline); }

/* ---------- account ---------- */

.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--surface);
  border-radius: var(--r-card); box-shadow: var(--shadow-card); color: var(--ink); min-height: 150px;
  transition: box-shadow var(--t-quick) var(--ease), transform 220ms var(--ease);
}
a.tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); color: var(--ink); }
.tile .eyebrow { margin: 0; }
.tile strong { font-size: 30px; font-weight: 600; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile span { color: var(--ink-muted); font-size: 13.5px; }
.tile .go { margin-block-start: auto; color: var(--brand); font-weight: 500; font-size: 14px; }

.segmented { display: inline-flex; background: var(--sunken); border-radius: var(--r-pill); padding: 4px; gap: 2px; flex-wrap: wrap; }
.segmented button {
  border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 500;
  min-height: 38px; padding-inline: 14px; border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-low); }

.menu { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.menu > a, .menu > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; min-height: 56px; color: var(--ink); border-block-end: 1px solid var(--hairline); }
.menu > :last-child { border-block-end: 0; }
.menu > a:hover { background: var(--sunken); color: var(--ink); }
.menu .chev { color: var(--ink-muted); }
.menu .menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[dir="rtl"] .menu .chev { transform: scaleX(-1); }

.points-hero { background: var(--brand); color: var(--on-brand); border-radius: var(--r-sheet); padding: 30px; display: grid; gap: 4px; }
.points-hero .eyebrow { color: inherit; opacity: 0.8; }
.points-hero strong { font-size: clamp(42px, 7vw, 64px); font-weight: 600; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.points-hero p { margin: 6px 0 0; opacity: 0.9; }
.rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rules li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.rules li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-block-start: 8px; }

.address-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.address-card .row { justify-content: space-between; }
.address-actions { display: flex; gap: 4px; align-items: center; margin-block-start: 6px; }

/* ---------- orders ---------- */

.status-pill { display: inline-flex; align-items: center; min-height: 26px; padding-inline: 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--sunken); color: var(--ink-muted); white-space: nowrap; }
.status-pill.pending_confirmation { background: var(--warn-bg); color: var(--warn); }
.status-pill.confirmed, .status-pill.out_for_delivery { background: var(--brand-tint); color: var(--brand-deep); }
.status-pill.delivered { background: var(--good-bg); color: var(--good); }
.status-pill.cancelled, .status-pill.delivery_failed { background: var(--danger-bg); color: var(--danger); }

/* The journey as a line that fills to where the order has got to. */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stop { position: relative; display: flex; flex-direction: column; gap: 2px; padding-inline-start: 34px; padding-block-end: 24px; }
.stop:last-child { padding-block-end: 0; }
.stop::before {
  content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: 6px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); z-index: 1;
}
.stop::after { content: ""; position: absolute; inset-inline-start: 12px; inset-block-start: 22px; inset-block-end: -4px; width: 2px; background: var(--hairline); }
.stop:last-child::after { display: none; }
.stop.done::before { background: var(--good); border-color: var(--good); }
.stop.done::after { background: var(--good); }
.stop.now::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-tint); }
.stop.stopped::before { background: var(--danger); border-color: var(--danger); }
.stop b { font-weight: 500; }
.stop.later b { color: var(--ink-muted); font-weight: 400; }
.stop span { color: var(--ink-muted); font-size: 13px; }
.js .reveal.in .stop.done::after { animation: grow-down 500ms var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms); }
@keyframes grow-down { from { transform: scaleY(0); transform-origin: top; } }

/* The order-placed tick draws itself once. */
.tick { width: 72px; height: 72px; margin-block-end: 18px; }
.tick circle { fill: var(--good-bg); }
.tick path { fill: none; stroke: var(--good); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 520ms var(--ease) 260ms forwards; }
.placed { text-align: center; padding-block: 48px 24px; display: flex; flex-direction: column; align-items: center; }
.placed .lede { margin-inline: auto; }
.placed .row { justify-content: center; margin-block-start: 26px; }

/* ---------- toasts ---------- */

.toasts { position: fixed; inset-block-start: 84px; inset-inline: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding-inline: 16px; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: 520px;
  background: var(--ink); color: var(--ground); border-radius: var(--r-button); padding: 12px 12px 12px 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); font-size: 14px; animation: toast-in 280ms var(--ease);
}
.toast a { color: var(--ground); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast.bad { background: var(--danger); color: #fff; }
.toast.leaving { animation: toast-out 220ms var(--ease) forwards; }
.toast button { background: none; border: 0; color: inherit; opacity: 0.7; cursor: pointer; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; }
.toast button:hover { opacity: 1; }

/* ---------- the placeholder bottle ---------- */

.glyph { width: 56%; max-width: 150px; max-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.glyph .cap { background: var(--border); margin-inline: auto; border-radius: 4px; }
/* Padding and gap in percentages, so the same glyph works in an 84px basket
   well and a 500px product well without spilling out of either. */
.glyph .body { background: var(--hairline); border-radius: 10px; aspect-ratio: 0.82; display: flex; flex-direction: column; justify-content: center; gap: 8%; padding: 12%; min-height: 0; }
.glyph .line { background: var(--border); height: 3px; flex: none; margin-inline: auto; border-radius: 2px; }
.glyph.s0 .cap { width: 46%; height: 15px; }
.glyph.s1 .cap { width: 30%; height: 17px; border-radius: 6px; }
.glyph.s2 .cap { width: 58%; aspect-ratio: 1; border-radius: 50%; }
.glyph.s1 .body { width: 72%; margin-inline: auto; }
.glyph .line.a { width: 52%; }
.glyph .line.b { width: 34%; opacity: .6; }
.line-well .glyph, .thumb .glyph { width: 46%; }

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

/* Every helper above stands still for someone who asked their device for less
   motion: content is simply there, and nothing flies, pops or draws. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .tick path { stroke-dashoffset: 0; }
  @view-transition { navigation: none; }
}

/* ---------- the welcome ---------- */

/* Once a visit, on the front door: the name comes into focus letter by
   letter on the brand's azure, the line under it follows, and the panel
   lifts away. The whole timeline is CSS, so it leaves on time with or
   without the script; a tap sends it off at once. */
.welcome { display: none; }
.intro .welcome {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--brand); color: var(--on-brand); cursor: pointer;
  animation: welcome-away 700ms var(--ease-out-soft) 1450ms forwards;
}
.intro.intro-done .welcome { animation: welcome-away 420ms var(--ease-out-soft) forwards; }
/* The mark is there from the start: only the name and the line arrive. */
.welcome-logo { width: clamp(120px, 16vw, 180px); height: auto; margin-block-end: 6px; }
.welcome-mark { display: flex; font-size: clamp(30px, 5vw, 56px); font-weight: 700; letter-spacing: -2px; line-height: 1; }
.welcome-mark span { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(40%) scale(0.92); animation: welcome-letter 760ms var(--ease-out-soft) forwards; animation-delay: calc(var(--l) * 45ms + 120ms); }
.welcome-line { margin: 0; font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0; animation: fade 600ms var(--ease) 700ms forwards; }
@keyframes welcome-letter { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes welcome-away { to { transform: translateY(-100%); visibility: hidden; } }
/* While the panel is up, the page under it waits: nothing fades in behind a curtain. */
.intro:not(.intro-done) body { overflow: hidden; }

/* ---------- things that glide between pages ---------- */

/* The current page's highlight in the nav, and the chosen brand chip, each
   carry a transition name: moving between pages, the browser slides them
   from where they were to where they are now. */
.nav a { position: relative; isolation: isolate; }
.nav a.on { background: transparent; }
.nav-pill { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-pill); background: var(--brand-tint); view-transition-name: nav-pill; }
.chip.on { view-transition-name: chip-on; }
::view-transition-group(nav-pill), ::view-transition-group(chip-on), ::view-transition-group(subchip-on) { animation-duration: 460ms; animation-timing-function: var(--ease-out-soft); }

/* The header slims once the page is scrolled, and the line under the name
   folds away. */
.masthead-row { transition: min-height 260ms var(--ease); }
.wordmark-words > span { transition: opacity 200ms var(--ease), max-height 260ms var(--ease); max-height: 20px; overflow: hidden; }
.masthead.scrolled { box-shadow: 0 6px 24px rgba(90, 62, 40, 0.08); }
.masthead.scrolled .masthead-row { min-height: 56px; }
.masthead.scrolled .wordmark-words > span { opacity: 0; max-height: 0; }

/* ---------- the product gallery ---------- */

.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: inline mandatory; scroll-behavior: smooth;
  border-radius: var(--r-sheet); scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: start; }
.dashes { display: flex; align-items: center; gap: 6px; margin-block-start: 14px; }
.dash { width: 14px; height: 4px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--border); cursor: pointer; transition: width 420ms var(--ease-out-soft), background 300ms var(--ease); }
.dash:hover { background: var(--ink-muted); }
.dash.on { width: 34px; background: var(--ink); }
/* The dashes are small to see but large to hit. */
.dash { position: relative; }
.dash::before { content: ""; position: absolute; inset: -20px -4px; }
.dash-count { margin-inline-start: auto; font-size: 12px; color: var(--ink-muted); letter-spacing: 0.6px; }
.dash-count b { color: var(--ink); font-weight: 600; }

/* ---------- into the basket ---------- */

/* A small copy of the product's picture travels to the basket before the
   form goes. Drawn by the script with the Web Animations API. */
.flier { position: fixed; z-index: 90; pointer-events: none; border-radius: 16px; overflow: hidden; background: var(--sunken); box-shadow: var(--shadow-lift); }
.flier img, .flier .glyph { width: 100%; height: 100%; object-fit: contain; }
.basket.catch { animation: pop 260ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .intro .welcome { display: none; }
  .js [data-split] .split-word > span { transform: none; opacity: 1; filter: none; }
  .js .reveal { filter: none; }
  .save-button.on svg { animation: none; }
}

/* Promotions staff put on the home page: sand cards, a picture at the end. */
.promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.promo { display: flex; align-items: center; gap: 16px; min-height: 148px; padding: 24px; border-radius: var(--r-card); background: var(--sunken); color: var(--ink); text-decoration: none; transition: transform var(--t-quick) var(--ease); }
.promo:hover { transform: translateY(-2px); color: var(--ink); }
.promo > div { display: grid; gap: 6px; flex: 1; min-width: 0; }
.promo .eyebrow { margin: 0; color: var(--ink-muted); }
.promo strong { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.4px; line-height: 1.15; font-weight: 600; }
.promo span { color: var(--ink-soft); }
.promo img { width: 40%; max-width: 160px; aspect-ratio: 1; object-fit: contain; }


/* ---------- a photograph develops ---------- */

/* Until it has loaded a picture is soft and a touch large; when it lands it
   sharpens and settles, the way the app's photographs arrive. A picture that
   was already in the browser's memory is simply there. */
.js img[data-fade] { opacity: 0; filter: blur(10px); transform: scale(1.06); }
.js img[data-fade].loaded {
  opacity: 1; filter: none; transform: none;
  transition: opacity 420ms var(--ease), filter 620ms var(--ease-out-soft), transform 760ms var(--ease-out-soft);
}

/* ---------- the name goes with the picture ---------- */

/* The picture already flies from the card to the product page. Its brand and
   name go with it, so the card does not dissolve around a photograph that
   stays: the two pages read as one thing opening. */
::view-transition-group(product-title), ::view-transition-group(product-brand) {
  animation-duration: 420ms; animation-timing-function: var(--ease-out-soft);
}

/* ---------- the theme washes in ---------- */

/* The old colours hold still underneath while the new ones sweep over them
   in a circle, out from the button that was pressed. The script only says
   where the circle starts and how far it must reach. */
.theme-wash::view-transition-old(root) { animation: none; }
.theme-wash::view-transition-new(root) {
  animation: wash 560ms var(--ease-out-soft) both;
  mix-blend-mode: normal;
}
.theme-wash::view-transition-image-pair(root) { isolation: auto; }
@keyframes wash {
  from { clip-path: circle(0 at var(--wash-x, 50%) var(--wash-y, 50%)); }
  to { clip-path: circle(var(--wash-r, 150vmax) at var(--wash-x, 50%) var(--wash-y, 50%)); }
}

/* ---------- the shelf behind the headline ---------- */

/* The three photographs beside the headline drift a little as the page
   scrolls — tied to the scroll itself, not to a clock, so they move only
   while the customer does. Browsers without scroll-linked animation simply
   leave them where they are. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .stage-items { animation: drift linear both; animation-timeline: view(); animation-range: entry 20% exit 80%; --drift: -10px; }
    @keyframes drift { to { transform: translateY(var(--drift, 0)); } }
  }
}

/* ---------- the app, offered in the hero ---------- */

/* Under the hero's buttons: a quiet card with the app's icon (the white
   monogram on the logo's own blue, as on a phone's home screen), one line of
   why, and the stores. */
.hero-app {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px;
  margin-block-start: 28px; padding: 14px 16px; max-width: 640px;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.app-icon {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 12px; background: #1246AB; box-shadow: var(--shadow-low);
}
.app-icon img { width: 32px; height: auto; display: block; }
.hero-app .stores { grid-column: 2; }
.hero-app-words { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.35; }
.hero-app-words b { font-weight: 600; font-size: 15px; color: var(--ink); }
.hero-app-words span { color: var(--ink-soft); font-size: 13.5px; }
.stores { display: flex; gap: 8px; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding-inline: 12px 16px;
  border-radius: var(--r-button); background: var(--ink); color: var(--ground);
  font-weight: 600; font-size: 14.5px; line-height: 1.05; white-space: nowrap;
  transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.store:hover { color: var(--ground); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.store:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.store svg { fill: currentColor; flex: none; }
.store span { display: flex; flex-direction: column; }
.store small { font-size: 10.5px; font-weight: 400; opacity: 0.8; }
@media (max-width: 640px) {
  .hero-app .stores { grid-column: 1 / -1; }
  .hero-app .store { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .store, .store:hover { transition: none; transform: none; }
}

/* ---------- the shop elsewhere ---------- */

/* .footer ul lays links out in a column; these sit in a row. */
.footer .social { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.social a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--sunken); color: var(--ink-soft);
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.social a:hover { background: var(--brand-tint); color: var(--brand); transform: translateY(-2px); }
.social a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.social svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social svg .dot { fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) {
  .social a, .social a:hover { transition: none; transform: none; }
}

/* ---------- a category's subcategories ---------- */

/* Under the heading: All, then each subcategory with its count. Larger than
   the brand chips below and lifted on the surface, because this is where the
   page itself is chosen. On a phone the row scrolls sideways rather than
   wrapping into a wall of pills. */
.subcategories {
  display: flex; gap: 10px; margin-block: 4px 22px; padding-block: 4px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain;
}
.subcategories::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .subcategories { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}
.chip.sub {
  flex: none; min-height: 46px; padding-inline: 18px; font-size: 14.5px;
  border-color: transparent; box-shadow: var(--shadow-card);
}
.chip.sub:hover { box-shadow: var(--shadow-lift); }
/* Its own name for the moving pill: the brand chips below have theirs. */
.chip.sub.on { view-transition-name: subchip-on; box-shadow: none; }
.eyebrow-back { color: var(--brand); }
.eyebrow-back::before { content: "‹ "; }
[dir="rtl"] .eyebrow-back::before { content: "› "; }


/* ---------- a phone: the shop under the thumb ---------- */

/* Built for the phone first, because that is where most of the shop is
   used: five places in a bar at the bottom (as in the app), the search the
   home page opens on, the aisles straight after the front door, and the
   price and button kept in reach on a product. */
.tabbar, .phone-search, .buy-bar, .app-banner { display: none; }

@media (max-width: 760px) {
  body { padding-block-end: calc(68px + env(safe-area-inset-bottom)); }
  .masthead .nav, .masthead .basket, .masthead .search-button { display: none; }
  .masthead-row { min-height: 56px; }
  /* Said at the top, under the name: the bottom belongs to the bar and the button. */
  .toasts { inset-block-start: 66px; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    border-block-start: 1px solid var(--hairline);
  }
  .tab {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding-block: 4px 2px;
    color: var(--ink-muted); text-decoration: none; font-size: 11px; font-weight: 500;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-icon {
    position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--r-pill);
    transition: background var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
  }
  .tab:active .tab-icon { transform: scale(0.92); }
  .tab-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tab.on { color: var(--brand-deep); font-weight: 600; }
  .tab.on .tab-icon { background: var(--brand-tint); }
  .tab-badge {
    position: absolute; inset-block-start: -3px; inset-inline-end: 6px; min-width: 18px; height: 18px; padding-inline: 5px;
    border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand);
    font-size: 10.5px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums;
  }

  /* Home opens on its search, a field to tap, as in the app. */
  .phone-search {
    display: flex; align-items: center; gap: 10px; margin-block: 14px 0; padding-inline: 16px; height: 52px;
    background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card, var(--shadow-low));
  }
  .phone-search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; }
  .phone-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
  .phone-search:focus-within { box-shadow: 0 0 0 2px var(--brand); }

  /* A shorter front door: the headline, the buttons, the brands, the shelf. */
  .hero { padding-block: 22px 8px; gap: 18px; }
  .hero h1 { font-size: 30px; letter-spacing: -0.9px; margin-block-end: 18px; }
  .hero .lede { display: none; }
  /* The banner at the top offers the app on a phone; once is enough. */
  .hero-app { display: none; }
  .hero .row .button { flex: 1; justify-content: center; }
  .hero-brands { margin-block-start: 20px; }
  .hero-brands-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-block: 2px 6px; }
  .hero-brands-row::-webkit-scrollbar { display: none; }
  .hero-logo { flex: none; }

  /* The three steps as one row to swipe, not three cards to scroll past. */
  .promises { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .promises::-webkit-scrollbar { display: none; }
  .promise { flex: 0 0 82%; scroll-snap-align: start; padding: 14px 16px; }
  .promise + .promise { border-block-start: 0; border-inline-start: 1px solid var(--hairline); }

  /* What the shop chose, as a row to swipe — as the app shows it — rather
     than a column that pushes the shelves two screens down. */
  .promos {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
  }
  .promos::-webkit-scrollbar { display: none; }
  .promo { flex: 0 0 86%; scroll-snap-align: start; min-height: 136px; padding: 18px; }
  .promo img { width: 34%; }

  /* The price and the button, kept in reach while a product is read. */
  .buy-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; inset-inline: 10px; inset-block-end: calc(76px + env(safe-area-inset-bottom)); z-index: 44;
    padding: 10px 10px 10px 16px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lift);
    opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity 200ms var(--ease), transform 260ms var(--ease);
  }
  .buy-bar.show { opacity: 1; transform: none; pointer-events: auto; }
  .buy-bar-price { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .buy-bar .price { font-size: 19px; }
  .buy-bar-name { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buy-bar .button { flex: none; }

  /* The app, offered at the top of a phone's page, once. */
  .app-banner.show {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 6px;
    background: var(--surface); border-block-end: 1px solid var(--hairline);
  }
  .app-banner .app-icon { width: 40px; height: 40px; border-radius: 10px; }
  .app-banner .app-icon img { width: 26px; }
  .app-banner-words { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .app-banner-words b { font-size: 14px; font-weight: 600; color: var(--ink); }
  .app-banner-words span { font-size: 12px; color: var(--ink-soft); }
  .app-banner-get {
    flex: none; padding: 8px 14px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand);
    font-size: 13px; font-weight: 600; text-decoration: none;
  }
  .app-banner-close { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--ink-muted); font-size: 20px; line-height: 1; cursor: pointer; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .buy-bar { transition: none; }
}

/* After an order, the app as the way to follow it. */
.placed-app {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; text-align: start;
  margin-block-start: 22px; padding: 14px 16px; max-width: 520px; width: 100%;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.placed-app .stores { grid-column: 1 / -1; }