/* ══════════════════════════════════════════
   EiGHT's CHiLi — CSS VARIABLES
   ══════════════════════════════════════════ */
:root {

  /* Layout */
  --sidebar-width: 240px;
  --topbar-h: 36px;
  --announcement-h: 24px;
  --subpage-header-h: calc(44px + var(--space-md) * 2);   /* logo + top/bottom padding — shared by subpage header + sticky columns */
  --btn-h: 25px;        /* shared height: buttons, inputs, qty stepper */
  --cart-panel-w: 320px;

  /* Spacing — base unit: 6px */
  --space-unit: 6px;
  --space-xs: var(--space-unit);
  --space-sm: calc(var(--space-unit) * 2);
  --space-md: calc(var(--space-unit) * 4);
  --space-lg: calc(var(--space-unit) * 6);
  --space-xl: calc(var(--space-unit) * 12);
  --space-2xl: calc(var(--space-unit) * 24);

  /* ── WIDTH ALGORITHM ──
     One span-n-of-12 formula, gaps included, used at two levels:
       • Columns (.layout-row): native 12-col CSS grid, gap --space-xl.
       • Block items (product tiles, carousel media, etc.): the SAME 12
         cells, but the smaller --block-gap below.
     span(n) = n cells + (n-1) gaps. So a block item at span 8 is exactly
     two span-4 items + the gap between them — proportional, like tetris
     on one cell size. The --block-* tokens are the ready-made variants.
     The cell is anchored to the CONTENT width, not the immediate column,
     so a --block-2-3 is 2/3 of the content whether it sits in a full
     column or the 2/3 panel of a split layout — the ratio stays fixed,
     the block doesn't shrink just because its column is narrower.
     Measured with a container-query unit: .content is a container
     (container-type: inline-size, see layout.css), so 100cqi is exactly
     the real content width — no 100vw/scrollbar guesswork. A span-8
     block then equals a span-8 column exactly (2 tiles + gap fit). */
  --block-gap: var(--space-xs);
  --block-cell: calc((100cqi - var(--block-gap) * 11) / 12);
  --block-1-4: calc(var(--block-cell) * 3 + var(--block-gap) * 2);   /* span 3 */
  --block-1-3: calc(var(--block-cell) * 4 + var(--block-gap) * 3);   /* span 4  — product tile, recipe item */
  --block-1-2: calc(var(--block-cell) * 6 + var(--block-gap) * 5);   /* span 6  — taste card */
  --block-2-3: calc(var(--block-cell) * 8 + var(--block-gap) * 7);   /* span 8  — carousel media (= 2 products + gap) */
  --block-3-4: calc(var(--block-cell) * 9 + var(--block-gap) * 8);   /* span 9 */

  /* Colors */
  --dark: #000000;
  --red: #EF4136;
  --cream: #FCF8F2;
  --muted: #999;
  --color-grey-1: #f4f4f4;
  --color-red-wash: #96140a10;
  --border: var(--dark);
  --border-line: 0.5px solid var(--border);

  /* Typography — font families */
  --font-aileron: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-archivo: 'Archivo Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-body: var(--font-aileron);

  /* Typography — font sizes */
  --fs-label: 10px;
  --fs-body: 12px;
  --fs-headline: 20px;
  --fs-hero: 40px;
  --fs-serif-headline: 28px;

  /* Typography — line heights */
  --line-height-body: 1.4;
  --line-height-label: 1;
  --line-height-headline: 1;
  --line-height-hero: 1;

  /* Media blocks — laptop (default) */
  --hero-h: 730px;

  /* Transitions */
  --transition: 0.3s ease;
}

/* Media blocks — desktop */
.is-desktop {
  --hero-h: 818px;
}

/* Media blocks — mobile */
.is-mobile {
  --hero-h: 100vw;
  --card-h-mobile: 240px;
}