/*
 * Braai Culture design tokens — the only place for colours, type, spacing, radius, lines, shadows and the container.
 * No page or component sets its own values (new-website roadmap §5.1).
 *
 * Breakpoints (CSS cannot read custom properties in media queries, so these four values are used literally):
 *   wide    ≥ 1500 px
 *   desktop ≤ 1500 px (default)
 *   tablet  ≤ 1100 px
 *   phone   ≤ 760 px
 *   small   ≤ 480 px
 */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800.woff2") format("woff2"); }
/* Black: only the product page's add-on card numbers (01, 02 …; the Codex pages), so browsers fetch it only there. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/montserrat-900.woff2") format("woff2"); }
/* The shop pages' H1: the Braai Culture wordmark lettering (BC-047; 04-execution/scripts/bc047/build-wordmark-font.py; capitals only, 1.4 KB). */
@font-face { font-family: "BC Wordmark"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bc-wordmark.woff2") format("woff2"); }

:root {
	/* Colour (N7: one brand red, #D3303B everywhere) */
	--color-red: #d3303b;
	--color-red-dark: #ad202a;          /* hover and pressed */
	--color-red-tint: #fbecef;          /* selected chips */
	--color-on-red: #ffffff;
	--color-on-red-muted: #f4bfc4;
	--color-ink: #333333;               /* body text */
	--color-ink-strong: #242427;        /* headings, dark surfaces (contact bar, footer) */
	--color-muted: #6e6e70;             /* the one muted grey (4.9:1 on white) */
	--color-line: #e6e5e3;              /* lines and the product photo frame */
	--color-cream: #f6f5f2;             /* banner and panel background */
	--color-surface: #ffffff;
	--color-success: #426144;           /* in stock */
	--color-warning: #8a5a00;           /* backorder */
	--color-dark-bar: #202023;
	--color-dark-text: #d4d4d4;
	--color-footer-text: #d2d2d5;
	--color-footer-muted: #8e8e96;
	--color-focus: var(--color-red-dark);
	--color-free-tint: #f2f7ef;         /* free delivery and in-stock panels (BC-046) */
	--color-free-line: #d6e2cf;
	--color-free-ink: #305c32;          /* "Free delivery" text (7.3:1 on white) */
	--color-whatsapp: #25d366;          /* the established WhatsApp button (TSK-030) */
	--color-whatsapp-dark: #1ebe57;

	/* Type */
	--font-sans: "Montserrat", Arial, sans-serif;
	--font-display: "BC Wordmark", "Montserrat", Arial, sans-serif; /* the logo lettering (shop pages' H1) */
	--text-xs: 12.2px;
	--text-sm: 13.2px;
	--text-base: 15px;
	--text-md: 17px;
	--text-lg: 23px;
	--text-xl: 30px;
	--text-2xl: 34px;
	--leading-tight: 1.23;
	--leading-base: 1.6;
	--weight-regular: 400;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-heavy: 800;
	--weight-black: 900;
	--tracking-eyebrow: 1.6px;

	/* Spacing scale (4 to 96 px) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* Shape */
	--radius: 5px;
	--radius-pill: 99px;
	--line: 1px solid var(--color-line);
	--shadow-panel: 0 12px 32px rgba(0, 0, 0, .14);
	--color-backdrop: rgba(24, 24, 27, .62); /* behind an open dialog */
	--shadow-dock: 0 -8px 24px rgba(0, 0, 0, .12); /* the docked purchase row */

	/* Layout */
	--container: min(1320px, 92%);
	--header-height: 95px;
	--control-height: 44px;
	--control-height-lg: 46px;          /* the product page's purchase row */
	--control-height-sm: 38px;          /* the quantity box in an add-on card (the Codex pages) */
	--control-height-card: 42px;        /* an add-on card's dropdown (the Codex pages) */
	--space-card-row: 10px;             /* an add-on card's dropdown to its quantity row (the Codex pages) */
	--measure: 900px;                   /* the widest line of long text (sections, accordions) */
	--badge-round: 52px;                /* the round "Sale!" badge on the product photo */
	--badge-round-phone: 46px;
	--icon-sm: 18px;
	--icon-md: 22px;
	--rule-weight: 3px;                 /* the short rule under a title, the savings pill corners */
	--tracking-tight: -.6px;            /* big prices */
	--tracking-label: 1px;              /* the section menu */
	--lightbox-height: 72vh;
	--dialog-width: 720px;              /* the dialog shell: default and wide */
	--dialog-width-wide: 1120px;

	/* The four round seals */
	--seal-size: 96px;
	--seal-size-phone: 88px;
	--seal-size-small: 76px;

	/* Page banner (N6) */
	--banner-desktop-min: 365px;
	--banner-desktop-aspect: 1.85;
	--banner-desktop-max: 420px;        /* the banner stops growing on wide screens; the photo crops in (Owl, 2026-10-22) */
	--banner-logo-height: 40px;       /* a brand logo above the banner's small line (the Codex brand pages) */
	--banner-tablet-height: 420px;
	--banner-phone-photo: 150px;

	/* Feature cards on the shop pages (the approved category scenes, 20 Oct; text on the photo's clear top-left) */
	--card-aspect-wide: 2170 / 970;     /* two cards in a row (Shop) */
	--card-aspect-row: 1.474;           /* three cards in a row (categories) */
	--card-row-height: 292px;           /* one card alone at the height of a row of three (1,320 px wrap: 430 / 1.474) */
	--card-copy-width: 44%;             /* the text column on the photo */
	--card-copy-width-narrow: 38%;      /* square crops (tablet, phone) */
	--card-title: 21px;
	--card-title-phone: 17px;
	--filter-column: 230px;             /* the filter column beside the grid (desktop; the Codex category page) */
	--banner-display: 50px;             /* the shop pages' H1 in the wordmark font: 35 px capitals, as the Codex lettering */
	--banner-display-phone: 44px;       /* 31 px capitals */
	--picture-aspect: 1.4;              /* the product card's photo box (the Codex pages: 240 px high, about 337 px wide) */
	--card-action-size: 40px;           /* the cart icon on the card's photo (BC-016, Owl's review 22 Oct) */
	--card-action-inset: 10px;          /* its distance from the photo box's edges */
	--color-whatsapp-ink: #073b2a;      /* text on the green WhatsApp help banner */
	--section-gap: 50px;                /* space between the sections below the grid */
	--text-intro: 14px;                 /* the shop pages' banner paragraph and range intro */
	--text-guide: 14.5px;               /* buying guide and FAQ answers */
	--text-label: 13.7px;               /* accordion titles, filter group titles */
	--text-link: 12.7px;                /* small text links ("Browse the range ↓") */
	--text-step: 11px;                  /* the add-on card numbers 01, 02 … (BC-046, the Codex pages) */
	--color-step: #999999;              /* their light grey (decorative; the card title beside them carries the meaning) */
	--color-fit-tint: #f8f5ef;          /* the product page's "Will it fit" helper box (BC-046, the Codex .fit-note) */
	--color-fit-line: #c1ac83;          /* its left line */
	--color-fit-ink: #6b6253;           /* its text (5.6:1 on the tint; the Codex #827967 was 3.9:1) */
	--text-input: 16px;                 /* form text on phones: iOS does not zoom a field at 16 px or more */
	--card-row-title: 18px;             /* three photo cards in a row */
	--card-row-text: 11.5px;
	--card-row-eyebrow: 9px;
	--number-display: 45px;             /* the big red numbers of the help-me-choose cards */
	--brand-word: 21px;                 /* brand names in the brands row */

	/* Cart, checkout and order pages (BC-016 main-line request M6; the V2 design's sizes) */
	--flow-width: 1160px;               /* the content width of the cart, checkout and order pages */
	--flow-gap: 52px;                   /* between the main column and the summary column */
	--flow-aside: 390px;                /* the checkout's summary column */
	--flow-aside-cart: 365px;           /* the cart's summary column */
	--flow-aside-tablet: 330px;
	--line-thumb: 120px;                /* the cart line's picture */
	--line-thumb-drawer: 84px;
	--line-thumb-summary: 74px;
	--drawer-width: 470px;
	--toast-width: 390px;
	--color-warn-tint: #fff5ed;         /* stock changed, window closed, payment failed */
	--color-warn-line: #ecd7c5;
	--color-warn-ink: #744326;          /* 8.6:1 on the tint */
	--color-error-tint: #fff3f3;        /* the form's error summary */
	--z-toast: 55;
	--z-dock: 60;                       /* the docked pay button on phones */
	--options-picture: 300px;           /* the quick view's picture (desktop; the Codex quick view) */
	--options-picture-phone: 190px;
	--empty-width: 620px;               /* the empty cart's text column */
	--coupon-width: 420px;
	--pay-window-width: 520px;          /* the SnapScan payment window on a computer (V2's measured values) */
	--pay-window-height: 760px;
	--pay-window-frame-short: 400px;    /* the provider's frame in a short (landscape) window: the window scrolls */
	--pay-window-logo: 143px;
	--pay-window-logo-phone: 126px;
	--z-pay-window: 2147483647;         /* the payment window above everything (the provider sets 1000) */
}

@media (min-width: 1500px) {
	:root { --container: 1320px; --header-height: 100px; }
}
@media (max-width: 760px) {
	:root { --container: 90%; --text-xl: 25px; --text-2xl: 27px; --text-lg: 19px; }
}