/* ============================================================================
   DayFood 2.0 — type. Inter only. EC 2.0's two serif roles (page h1, section h2)
   become Inter DISPLAY: 700, tight tracking, balanced wrap — the same three sizes
   and the same rule: max 1–2 display titles per viewport, never on data, labels or
   buttons. Everything else is the Inter ramp. Times, money and quantities are
   Inter tabular figures (no monospace).
   An h1/h2 that is an ITEM title by role (a card title) opts out with .df-sans.
   ============================================================================ */

.df2 body { margin: 0; }
.df2 body, .df2.df-root { font-family: var(--df-font); color: var(--df-ink); background: var(--df-canvas); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
.df2 :where(h1, h2, h3, h4, p, dl, dd, figure, blockquote) { margin: 0; }

/* ── reset — the test site's kit, at zero specificity so no component class has to out-rank it ──
   `color` is split out on purpose: folded into the font rule it would be (0,1,1) and beat every
   .df-btn* colour, so a <button class="df-btn"> inherited the page ink instead of its own white. */
:where(.df2) *, :where(.df2) *::before, :where(.df2) *::after { box-sizing: border-box; }
:where(.df2) img { display: block; max-width: 100%; }
:where(.df2) :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
:where(.df2) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.df2) :where(button, input, select, textarea) { font: inherit; }
:where(.df2) :where(button, input, select, textarea) { color: inherit; }
/* a link the kit does not style takes the accent ink; (0,0,1) so .df-title, .df-btn and friends win */
:where(.df2) a { color: var(--df-accent-strong); }

/* ── the two display roles ── */
.df2 :is(h1, h2):not(.df-sans) {
  font-family: var(--df-font);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--df-ink);
}
.df2 h1:not(.df-sans) { font-size: var(--df-h-page); letter-spacing: -.03em; }
.df2 h2:not(.df-sans) { font-size: var(--df-h-sec); }
.df2 .df-h-hero:is(h1, h2) { font-size: var(--df-h-display); line-height: 1.04; letter-spacing: -.035em; }
.df2 .df-h-page { font-size: var(--df-h-page); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.df2 .df-h-sec { font-size: var(--df-h-sec); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }

/* ── ONE item title (card / tile title; an h1–h3 by role) ── */
.df2 :is(:is(h1, h2, h3).df-sans, .df-title) {
  margin: 0;
  font-family: var(--df-font);
  font-size: var(--df-text-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--df-ink);
}
.df2 :is(.df-title, .df-sans).df-title--sm { font-size: calc((var(--df-text-sm) + var(--df-text-md)) / 2); }

/* ── lede + run-in ── */
.df2 .df-lede { margin-top: var(--df-space-3); max-width: 60ch; font-size: var(--df-text-md); line-height: 1.55; color: var(--df-text-2); }
.df2 .df-lede--hero { font-size: var(--df-text-lg); }
.df2 .df-runin { font-size: var(--df-text-sm); line-height: 1.5; color: var(--df-text-2); }
.df2 .df-runin b { color: var(--df-ink); font-weight: 600; }

/* ── data key (Unit, Pack, Min order) — key/value LABELS only; sentence case, 13/600 ── */
.df2 :is(.df-key, .df-kv dt) {
  font-family: var(--df-font);
  font-size: var(--df-key-size);
  font-weight: 600;
  color: var(--df-muted);
}
/* .df-kv — a <dl> of key-over-value pairs; layout-neutral (the page places the pairs),
   only the UA indents go so a value sits flush under its key */
.df2 :is(.df-kv, .df-kv dd) { margin: 0; }
.df2 .df-kv dd { margin-top: 2px; font-size: var(--df-text-md); font-weight: 600; color: var(--df-ink); }

/* ── eyebrow — ONE kicker over a page / panel title ── */
.df2 .df-eyebrow {
  margin: 0 0 var(--df-space-3);
  font-size: var(--df-key-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--df-accent-strong);
}

/* ── help line (14 muted) + meta line (a quiet VALUE line: brand · pack size) ── */
.df2 .df-help { font-size: var(--df-text-sm); line-height: 1.55; color: var(--df-text-2); }
.df2 .df-help :is(b, strong) { color: var(--df-ink); font-weight: 600; }
.df2 .df-meta { font-size: var(--df-key-size); line-height: 1.45; color: var(--df-muted); font-variant-numeric: tabular-nums; }

/* ── money — THE big amount: 22/700 ink in flow, 20/700 docked in a phone bar (components §10) ── */
.df2 .df-amount {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: var(--df-ink); font-variant-numeric: tabular-nums;
}
.df2 .df-amount.is-credit { color: var(--df-ok); }

/* ── input figure — a big VALUE in a control (stepper quantity) ── */
.df2 .df-figure { font-size: var(--df-text-xl); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; color: var(--df-ink); font-variant-numeric: tabular-nums; }
.df2 .df-num { font-variant-numeric: tabular-nums; }

/* ── visually hidden (read by a screen reader, never drawn) ── */
.df2 .df-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}