/* ============================================================
   Retail Template (ZA) — Wagenmakers Trading Co.
   Light gallery / editorial. A product-led shop: rug and homeware
   gallery at the front, provisions counter at the back.

   Fonts: Bodoni Moda (headings) + DM Sans (body), Google Fonts.
   Neither is used by any sibling template. The two default UI sans
   faces that are banned family-wide are named in the TEMPLATE-README
   self-checks — this file greps clean for them, keep it that way.

   TOKEN DIALECT: "A" (--bg/--surface/--text/--accent/…), the
   portable one, plus --step-* fluid type and .visually-hidden
   borrowed from the wine-estate build.

   RE-SKIN NOTE: to rebrand for a client, edit the VALUES in
   :root below and nothing else. Keep every variable NAME.
   The WhatsApp green further down is the one exception — it is
   WhatsApp's own brand colour and is not driven from :root.
   ============================================================ */

:root {
  /* --- surfaces: warm gallery white --- */
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f1ece2;
  --surface-3: #17150f;          /* inverted band */
  --line: rgba(23, 21, 15, 0.13);
  --line-strong: rgba(23, 21, 15, 0.26);

  /* --- text --- */
  --text: #17150f;
  --muted: #6a6357;              /* 5.6:1 on --bg — do not lighten */
  --on-dark: #f4f1ea;
  --on-dark-muted: #b3aa99;

  /* --- accents: petrol teal (the shop) + madder red (the dyes) --- */
  --accent: #0e5a54;             /* 7.6:1 on --bg */
  --accent-dark: #0a443f;
  --accent-2: #8c3b2e;           /* 7.1:1 on --bg — flags, sale, counter */
  --accent-soft: rgba(14, 90, 84, 0.09);
  --accent-line: rgba(14, 90, 84, 0.36);
  /* text colour that sits ON --accent — must stay AA (4.5:1) */
  --on-accent: #ffffff;

  --font-head: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* fluid type steps */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.31rem + 0.7vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.53rem + 1.35vw, 2.7rem);
  --step-4: clamp(2.2rem, 1.7rem + 2.5vw, 3.9rem);

  --wrap: 1200px;
  --measure: 66ch;
  --radius: 4px;                 /* gallery-flat, not rounded-app */
  --radius-lg: 8px;
  --shadow: 0 18px 44px rgba(23, 21, 15, 0.1);
  --shadow-sm: 0 4px 14px rgba(23, 21, 15, 0.07);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* one z-scale, so nothing fights */
  --z-header: 60;
  --z-fab: 70;
  --z-drawer: 90;
  --z-skip: 200;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 860px; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Prices, quantities and totals must not jitter as digits change. */
.num, .product__price, .enquiry-line__sum, .enquiry__row strong,
.counter-row__price, .step output { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Every interactive element keeps a visible ring. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: var(--z-skip);
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- reveal animations ----------
   NOTE: never put .reveal on an element that can be display:none —
   it would never intersect and would sit at opacity 0 forever. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13px 26px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 600; font-size: 0.96rem;
  letter-spacing: 0.01em; cursor: pointer; text-align: center;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text); background: rgba(23, 21, 15, 0.04); }

.btn--light { background: var(--surface); color: var(--text); border-color: var(--surface); }
.btn--light:hover { background: var(--surface-2); border-color: var(--surface-2); }

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 0.9rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- eyebrow / section heads ---------- */
.eyebrow {
  display: inline-block; font-family: var(--font-body);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.eyebrow--alt { color: var(--accent-2); }
.eyebrow--dark { color: var(--on-dark-muted); }

.section { padding: clamp(60px, 8vw, 110px) 0; }
.section--tight { padding: clamp(44px, 5vw, 70px) 0; }
.section--muted { background: var(--surface-2); }
.section--dark { background: var(--surface-3); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-muted); }

.section__head { max-width: var(--measure); margin-bottom: clamp(30px, 4vw, 52px); }
.section__head p { color: var(--muted); margin-top: 14px; font-size: var(--step-1); line-height: 1.5; }
.section--dark .section__head p { color: var(--on-dark-muted); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--muted); max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.prose { max-width: var(--measure); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 18px;
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand__mark {
  width: 42px; height: 42px; flex: none; border-radius: 3px;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--font-head); font-weight: 600; font-size: 1.24rem; letter-spacing: -0.01em;
}
.brand__tag {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 10px 13px; border-radius: var(--radius);
  font-size: 0.94rem; font-weight: 500; color: var(--muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav a:hover { color: var(--text); background: rgba(23, 21, 15, 0.05); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 700; }

.header__cta { display: flex; align-items: center; gap: 10px; }
.header__phone {
  font-weight: 600; font-size: 0.94rem; color: var(--text);
  padding: 10px 6px; white-space: nowrap;
}
.header__phone:hover { color: var(--accent); }

/* list button + badge (distinct from the family's .nav__basket) */
.nav__list {
  position: relative; width: 48px; height: 48px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__list:hover { border-color: var(--line-strong); background: rgba(23, 21, 15, 0.04); }
.nav__list svg { width: 22px; height: 22px; }
.nav__list.has-items { border-color: var(--accent-line); }
.nav__list-count {
  position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 11px; background: var(--accent-2); color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 21px; text-align: center;
}
.nav__list-count[hidden] { display: none; }

.nav-toggle {
  display: none; width: 48px; height: 48px; flex: none;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; padding: 13px 12px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(23, 21, 15, 0.82) 0%, rgba(23, 21, 15, 0.62) 46%, rgba(23, 21, 15, 0.22) 100%);
}
.hero__content {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(88px, 13vw, 168px) 24px clamp(70px, 10vw, 128px);
  color: var(--on-dark);
}
.hero__inner { max-width: 660px; }
.hero h1 { color: #fff; }
.hero__lede { margin-top: 20px; font-size: var(--step-1); line-height: 1.55; color: #ece7dc; max-width: 54ch; }
.hero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__trust {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 0.9rem; color: #ddd6c8;
}
.hero__trust li { display: flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 16px; height: 16px; color: #9ecfc7; flex: none; }

/* compact hero for inner pages */
.page-hero { position: relative; isolation: isolate; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(23, 21, 15, 0.84) 0%, rgba(23, 21, 15, 0.58) 100%);
}
.page-hero__content {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(62px, 8vw, 104px) 24px clamp(52px, 7vw, 88px);
  color: var(--on-dark);
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { margin-top: 16px; color: #ddd6c8; max-width: 58ch; font-size: var(--step-1); line-height: 1.55; }

/* ---------- category tiles ---------- */
.cats { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.cat {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--surface-3); isolation: isolate;
}
.cat img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.7s var(--ease); opacity: 0.86;
}
.cat:hover img { transform: scale(1.05); }
.cat__body {
  position: absolute; inset: auto 0 0 0; padding: 26px 24px 22px; color: #fff;
  background: linear-gradient(to top, rgba(23, 21, 15, 0.9) 20%, rgba(23, 21, 15, 0) 100%);
}
.cat__body h3 { font-size: var(--step-2); color: #fff; }
.cat__body p { margin-top: 6px; font-size: 0.9rem; color: #ded7c9; }
.cat__go {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #9ecfc7;
}

/* ---------- editorial split ---------- */
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: 1fr 1fr; }
.split--flip .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.split__badge {
  position: absolute; left: -14px; bottom: 22px;
  background: var(--accent); color: var(--on-accent);
  padding: 14px 20px; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  font-size: 0.86rem; line-height: 1.35; max-width: 220px;
}
.split__badge strong { display: block; font-size: 1.35rem; font-family: var(--font-head); }

/* ---------- tick list ---------- */
.ticklist { display: grid; gap: 13px; margin-top: 26px; }
.ticklist li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.ticklist svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 3px; }
.section--dark .ticklist svg { color: #6fbdb2; }

/* ---------- figures / stats ---------- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.figure {
  padding: 26px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.section--dark .figure { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.figure strong {
  display: block; font-family: var(--font-head); font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 600; line-height: 1; color: var(--accent);
}
.section--dark .figure strong { color: #6fbdb2; }
.figure span { display: block; margin-top: 9px; font-size: 0.9rem; color: var(--muted); }
.section--dark .figure span { color: var(--on-dark-muted); }

/* ============================================================
   PRODUCT CATALOGUE
   Sector-specific. `.product` / `.filter` / `.step` / `.enquiry-*`
   exist in no other template — the wedding build uses `.bottle`
   and the wine build uses `.wine-card`. Do not mix excerpts.
   ============================================================ */

/* ---------- filter bar ---------- */
.filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px;
}
.filter__label {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px;
}
.filter__btn {
  min-height: 44px; padding: 10px 18px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.9rem; font-weight: 500; color: var(--text);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.filter__btn:hover { border-color: var(--text); }
.filter__btn[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}
.filter__count { margin-left: auto; font-size: 0.88rem; color: var(--muted); }

/* ---------- product grid ---------- */
.products { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
.products--four { grid-template-columns: repeat(4, 1fr); }

.product {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.product:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.product[hidden] { display: none; }

.product__media { position: relative; overflow: hidden; background: var(--surface-2); }
.product__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.product:hover .product__media img { transform: scale(1.04); }

.product__flag {
  position: absolute; top: 12px; left: 12px;
  background: var(--accent-2); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.product__flag--stock { background: var(--surface-3); }

.product__body { padding: 20px 20px 0; display: flex; flex-direction: column; flex: 1; }
.product__cat {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.product__name { font-size: var(--step-1); line-height: 1.2; }
.product__meta { margin-top: 6px; font-size: 0.84rem; color: var(--muted); }
.product__note { margin-top: 11px; font-size: 0.9rem; color: var(--muted); line-height: 1.55; }
.product__price {
  margin-top: 16px; font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; line-height: 1;
}
.product__price small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--muted); }

.product__foot {
  margin-top: auto; padding: 18px 20px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.product__ask {
  font-size: 0.86rem; font-weight: 600; color: var(--accent);
  padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
}
.product__ask:hover { color: var(--accent-dark); text-decoration: underline; }
.product__ask svg { width: 16px; height: 16px; }

.product--out { opacity: 0.82; }
.product--out .product__media img { filter: grayscale(0.72); }

/* ---------- quantity stepper (cards + drawer) ---------- */
.step {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden;
}
.step button {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  transition: background 0.2s var(--ease);
}
.step button:hover { background: rgba(23, 21, 15, 0.06); }
.step button svg { width: 15px; height: 15px; }
.step input, .step output {
  width: 44px; height: 44px; line-height: 44px; text-align: center;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: transparent; font-size: 0.96rem; font-weight: 600;
  -moz-appearance: textfield;
}
.step input::-webkit-outer-spin-button,
.step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- counter board (the deli half) ---------- */
.counter-board {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.counter-board__head {
  padding: 22px 26px; background: var(--surface-3); color: var(--on-dark);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
}
.counter-board__head h3 { color: #fff; font-size: var(--step-2); }
.counter-board__head span { font-size: 0.86rem; color: var(--on-dark-muted); }
.counter-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: baseline;
  padding: 18px 26px; border-top: 1px solid var(--line);
}
.counter-row:first-of-type { border-top: 0; }
.counter-row__name { font-weight: 600; font-size: 1.04rem; }
.counter-row__note { grid-column: 1; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.counter-row__price {
  font-family: var(--font-head); font-size: 1.22rem; font-weight: 600; white-space: nowrap;
}
.counter-row__price small { font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; color: var(--muted); }

/* ---------- steps / process ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.stepcard {
  padding: 30px 26px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); position: relative;
}
.stepcard::before {
  counter-increment: s; content: counter(s);
  font-family: var(--font-head); font-size: 2.4rem; font-weight: 600; line-height: 1;
  color: var(--accent-line); display: block; margin-bottom: 14px;
}
.stepcard h3 { font-size: var(--step-1); }
.stepcard p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review {
  padding: 28px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
}
.review__stars { display: flex; gap: 3px; color: var(--accent-2); margin-bottom: 14px; }
.review__stars svg { width: 17px; height: 17px; }
.review p { font-size: 1rem; line-height: 1.6; }
.review footer { margin-top: 18px; font-size: 0.86rem; color: var(--muted); }
.review footer strong { display: block; color: var(--text); font-size: 0.94rem; }

/* ---------- gallery mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.mosaic figure { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; }
.mosaic figure.is-tall { grid-row: span 2; aspect-ratio: 4 / 6.3; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--surface-3); color: var(--on-dark); }
.cta-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px; padding: clamp(40px, 6vw, 66px) 0;
}
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { margin-top: 12px; color: var(--on-dark-muted); max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- contact / form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.contact-card {
  padding: 30px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.contact-card h3 { font-size: var(--step-1); margin-bottom: 6px; }
.contact-card ul { display: grid; gap: 14px; margin-top: 18px; }
.contact-card li { display: flex; gap: 13px; align-items: flex-start; font-size: 0.96rem; }
.contact-card svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 4px; }
.contact-card a:hover { color: var(--accent); text-decoration: underline; }
.contact-card dl { margin-top: 6px; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 0.95rem; }
.contact-card dt { color: var(--muted); }
.contact-card dd { text-align: right; font-variant-numeric: tabular-nums; }

.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.88rem; font-weight: 600; }
.field .req { color: var(--accent-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.field small { font-size: 0.82rem; color: var(--muted); }
.form-note { font-size: 0.88rem; color: var(--muted); }
.form-status {
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 0.94rem; line-height: 1.6;
}
.form-status[hidden] { display: none; }

/* ---------- demo honesty callout ---------- */
.demo-callout {
  padding: 18px 22px; border-radius: var(--radius);
  background: #fdf6ec; border: 1px solid rgba(140, 59, 46, 0.32); border-left: 4px solid var(--accent-2);
  font-size: 0.92rem; line-height: 1.6; color: #4a3a34;
}
.demo-callout strong { color: var(--accent-2); }

/* ============================================================
   ENQUIRY LIST DRAWER
   This composes a WhatsApp message. It takes no payment and has
   no card fields — see .enquiry__note, the .demo-callout on
   shop.html, and the .demo-note on every page.
   ============================================================ */
.enquiry { position: fixed; inset: 0; z-index: var(--z-drawer); }
.enquiry[hidden] { display: none; }
.enquiry__scrim {
  position: absolute; inset: 0; background: rgba(23, 21, 15, 0.55);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.enquiry.is-open .enquiry__scrim { opacity: 1; }
.enquiry__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%);
  background: var(--bg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.32s var(--ease);
  box-shadow: -20px 0 60px rgba(23, 21, 15, 0.28);
}
.enquiry.is-open .enquiry__panel { transform: none; }
.enquiry__head {
  padding: 20px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.enquiry__head h2 { font-size: var(--step-2); }
.enquiry__close {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.enquiry__close:hover { background: rgba(23, 21, 15, 0.05); }
.enquiry__close svg { width: 19px; height: 19px; }
.enquiry__body { flex: 1; overflow-y: auto; padding: 6px 22px 22px; -webkit-overflow-scrolling: touch; }

.enquiry-line { display: grid; grid-template-columns: 62px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.enquiry-line__media img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--radius); }
.enquiry-line__name { font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.enquiry-line__meta { margin-top: 3px; font-size: 0.82rem; color: var(--muted); }
.enquiry-line__foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.enquiry-line__sum { font-weight: 700; font-size: 0.98rem; }
.enquiry-empty { padding: 34px 0; color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.enquiry-empty[hidden] { display: none; }

.enquiry__foot { padding: 20px 22px; border-top: 1px solid var(--line); background: var(--surface); display: grid; gap: 12px; }
.enquiry__foot[hidden] { display: none; }
.enquiry__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.95rem; }
.enquiry__row--total { font-size: 1.15rem; font-weight: 700; padding-top: 12px; border-top: 1px solid var(--line); }
.enquiry__row--total strong { font-family: var(--font-head); font-size: 1.45rem; font-weight: 600; }
.enquiry__note {
  font-size: 0.84rem; line-height: 1.55; color: var(--muted);
  padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius);
}
.enquiry__note strong { color: var(--accent-2); }

/* ---------- footer ---------- */
.footer { background: var(--surface-3); color: var(--on-dark-muted); padding: clamp(48px, 6vw, 76px) 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; }
.footer h4 { color: #fff; font-size: 1.02rem; margin-bottom: 15px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.02em; }
.footer p { font-size: 0.92rem; line-height: 1.65; }
.footer ul { display: grid; gap: 9px; font-size: 0.92rem; }
.footer ul a:hover, .footer p a:hover { color: #fff; text-decoration: underline; }
.footer__brand .brand__mark { background: var(--accent); }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__tag { color: var(--on-dark-muted); }
.footer__brand .brand { margin-bottom: 16px; }
.footer__bottom {
  margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.13);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.86rem;
}

/* ---------- WhatsApp ---------- */
/* WhatsApp is the default customer channel in South Africa, so this float shows
   on every breakpoint, not just mobile. The green is WhatsApp's own brand colour
   and is deliberately NOT driven from the :root accent tokens — leave it alone
   when re-skinning. */
.wa-fab {
  position: fixed; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: var(--z-fab);
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #04240f; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
  transition: transform 0.25s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; }

.btn--whatsapp { background: #25d366; color: #04240f; border-color: #25d366; }
.btn--whatsapp:hover { background: #1fbe5b; border-color: #1fbe5b; color: #04240f; }
.btn--whatsapp svg { width: 20px; height: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .products, .products--four { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  .nav {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 10px 16px 20px; box-shadow: var(--shadow);
    transform: translateY(-130%); transition: transform 0.32s var(--ease);
    max-height: calc(100dvh - 66px); overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a { padding: 15px 12px; font-size: 1.02rem; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: block; }
  .header__phone { display: none; }

  .cats { grid-template-columns: 1fr; }
  .products, .products--four { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__badge { left: 14px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .steps, .reviews { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic figure.is-tall { grid-row: span 1; aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  .header__inner { padding: 10px 16px; gap: 10px; }
  .wrap { padding: 0 18px; }
  .brand__tag { display: none; }
  .brand__mark { width: 38px; height: 38px; }
  .products, .products--four { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .counter-row { padding: 16px 18px; }
  .counter-board__head { padding: 18px; }
  .filter__count { margin-left: 0; width: 100%; }
  /* comfortable tap targets + clearance so the float never sits on the last line */
  .footer ul a { display: inline-block; padding: 6px 0; }
  .demo-note { padding-bottom: 96px; }
}

/* ---------- demo ribbon (remove when handing a real site over) ---------- */
.demo-note {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 14px 24px; text-align: center; font-size: 0.84rem; color: var(--muted);
  line-height: 1.6;
}
.demo-note strong { color: var(--accent-2); font-weight: 700; }