/** Shopify CDN: Minification failed

Line 16:49 Unexpected "*"

**/
/* ==========================================================================
   WayBilt — design tokens (wb-* theme, forked from the sa-* port)
   Source of truth: WayBilt Brand System v1.0 — Direction 02 "The Way",
   03c refined (v1.1) expression. Palette is material, not retail: ivory /
   greige grounds, espresso ink, walnut mid-tone, Oxide as the single
   signature. Type roles: Newsreader welcomes (display/editorial), Archivo
   explains (UI/text), IBM Plex Mono proves (every held-to number).

   SCOPING (inherited from the fork, unchanged):
   - Token custom properties live on :root; inert until referenced, no
     collisions with Dawn's --color-*/--gradient-*/--font-*-family names.
   - Everything with rendering effect is scoped under .wb-page, NOT
     html/body. RULE: the outermost element of every wb- section carries
     class="wb-page".
   - Var NAMES are kept from the fork so section CSS keeps resolving;
     VALUES are WayBilt. Legacy names read oddly (forest is espresso
     now) — do not rename without sweeping all 46 wb section CSS files.

   GOVERNANCE (from the brand doc — the five ways to break this):
   - Oxide is a field or a signature, never body text below 40px
     (the terra-text var therefore maps to walnut, not oxide).
   - One blaze / one Oxide signal per screen.
   - Any number a customer can be held to — price, date, qty, dimension —
     is set in Plex Mono: use the wb-num class (or the font-mono var).
   ========================================================================== */

/* ---- self-hosted fonts (latin subsets, staged in this assets folder) ---- */
@font-face {
  font-family: "Newsreader";
  src: url("wb-newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("wb-newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("wb-archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("wb-plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("wb-plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces + ink (ivory ground, espresso ink) */
  --cream: #f6f2e9;   /* Ivory — primary ground */
  --paper: #ede6d4;   /* Greige — secondary ground */
  --charcoal: #201a13; /* Espresso — ink + dark surfaces */

  /* Primary dark ramp (legacy "green" names — espresso family now) */
  --forest: #201a13;      /* espresso — primary buttons, dark bands */
  --forest-dark: #160d08; /* hover step */
  --forest-deep: #0c0d0a; /* pitch — deepest logistics ground */
  --sage: #ded4be;        /* deep greige — soft contrast panels */

  /* Warm mid-tones + accents */
  --ink: #6a5138;        /* Walnut — secondary emphasis */
  --terracotta: #8a2f1d; /* OXIDE — the signature; one appearance per screen */
  --sun: #c4633a;        /* Clay — Second Run / off-lot accent only */
  --blush: #e3dbc9;      /* warm ground step */
  --mist: #ddd8cc;       /* hairline-tinted panel */
  --butter: #e8dfc9;     /* warm tint chip */

  /* CTA + oxide ramp (legacy terra names) */
  --cta: #8a2f1d;          /* Oxide — reserve for the one signal per screen */
  --peach: #c97a5c;        /* light ramp step */
  --terra-text: #6a5138;   /* GOVERNANCE: oxide is never small text — walnut */
  --terra-mid: #8a2f1d;
  --terra-deep: #6e2517;
  --terra-ink: #571d12;
  --terra-hover-a: #6e2517;
  --terra-hover-b: #66220f;
  --terra-band: #8a2f1d;   /* oxide as a field — endorsed use */
  --ink-deep: #4a3c25;     /* deep walnut */

  /* Neutrals */
  --border: #ddd8cc;           /* doc hairline */
  --muted: #f1ebdd;
  --muted-foreground: #5c5347; /* taupe text */

  /* Layout */
  --max-w: 1280px;

  /* Type stacks — four roles, no overlap */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius scale (unchanged) */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
}

/* ---- .wb-page scope: wrapper + reduced preflight (unchanged mechanics) ---- */
.wb-page {
  font-family: var(--font-sans);
  /* Dawn sets html { font-size: calc(var(--font-body-scale) * 62.5%) } (10px
     root). wb- CSS is authored against a 16px base and uses px throughout;
     this pins inherited text so Dawn's sizing never leaks in. */
  font-size: 16px;
  line-height: 1.5;
  /* Newsreader carries a 6..72 optical-size axis; auto lets the text cut
     appear at small sizes and the display cut at large. */
  font-optical-sizing: auto;
  background-color: var(--cream);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wb-page,
.wb-page *,
.wb-page *::before,
.wb-page *::after {
  box-sizing: border-box;
}

/* Display face defaults. Newsreader needs no stylistic sets (the ss01/ss02
   feature settings were Fraunces-specific and are gone). */
.wb-page :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Held-to numbers — prices, dates, quantities, SKUs, dimensions. Apply
   the wb-num class wherever a customer could hold us to the figure.
   Governance rule 04: no exceptions, including headlines. */
.wb-page .wb-num,
.wb-page :where([data-wb-num]) {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Mini-preflight (unchanged) */
.wb-page :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}
.wb-page :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wb-page :where(img, svg, video, picture) {
  display: block;
}
.wb-page :where(img) {
  max-width: 100%;
  height: auto;
}
.wb-page :where(a) {
  color: inherit;
  text-decoration: none;
}
.wb-page :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}
.wb-page :where(button) {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Focus ring */
.wb-page :focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 3px;
}