/* Wedgetail guides design tokens. Derived from the live wedgetailrack.com.au theme (read 7 October 2026):
   header and footer #141617, brand green #719E55, page background #F2F3F5, display face Lulo,
   body face Atkinson Hyperlegible, navigation and buttons Avenir Light. */

@font-face {
  font-family: "lulo";
  src: url("/wp-content/uploads/2024/08/39a2c7f346d5cfae7045aeb2fb50d9ad.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Light";
  src: url("/wp-content/uploads/2024/08/Avenir-Light.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* Atkinson Hyperlegible (SIL Open Font Licence) is self hosted with the guides. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/guides/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/guides/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Colour */
  --wg-ink: #141617;          /* header, footer, body text */
  --wg-ink-2: #23272a;        /* raised panels on dark */
  --wg-paper: #f2f3f5;        /* page background (live site body) */
  --wg-surface: #ffffff;      /* cards, tables */
  --wg-line: #d9dce0;         /* hairlines */
  --wg-line-strong: #b8bec4;
  --wg-muted: #5a6066;        /* secondary text, 6.4:1 on white */
  --wg-green: #719e55;        /* brand green: accents, borders, text on dark (5.8:1 on ink) */
  --wg-green-strong: #4e7639; /* links and buttons on light, 5.3:1 on white */
  --wg-green-tint: #eef4ea;   /* lead answer and note backgrounds */
  --wg-amber-tint: #fbf5e6;   /* "not published" and pending notes */
  --wg-amber-line: #d9b45a;
  --wg-on-dark: #ffffff;
  --wg-on-dark-muted: #b8bec4;

  /* Type */
  --wg-font-display: "lulo", "Krona One", "Arial Black", sans-serif;
  --wg-font-body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --wg-font-ui: "Avenir Light", "Nunito Sans", "Segoe UI", Arial, sans-serif;
  --wg-text-xs: 0.8125rem;   /* 13 */
  --wg-text-sm: 0.875rem;    /* 14 */
  --wg-text-md: 1rem;        /* 16 */
  --wg-text-lg: 1.125rem;    /* 18 */
  --wg-text-xl: 1.25rem;     /* 20 */
  --wg-h3: 1.0625rem;        /* 17, display face is wide */
  --wg-h2: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);
  --wg-h1: clamp(1.375rem, 0.95rem + 2.2vw, 2.25rem);
  --wg-leading: 1.65;
  --wg-tracking-display: 0.04em;

  /* Space (4 px base) */
  --wg-s1: 4px;
  --wg-s2: 8px;
  --wg-s3: 12px;
  --wg-s4: 16px;
  --wg-s5: 24px;
  --wg-s6: 32px;
  --wg-s7: 48px;
  --wg-s8: 64px;

  /* Radius (buttons 4 px like the live theme; panels 16 px like the /vehicle/ banner) */
  --wg-r-sm: 4px;
  --wg-r-md: 8px;
  --wg-r-lg: 16px;

  /* Layout */
  --wg-max: 1180px;
  --wg-measure: 72ch;
  --wg-gutter: 16px;
  /* Breakpoints (used in media queries): 600 px small tablet, 900 px tablet, 1200 px desktop */
}

/* Wedgetail guides: base layout and component library. Mobile first. Requires tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wg-paper);
  color: var(--wg-ink);
  font-family: var(--wg-font-body);
  font-size: var(--wg-text-md);
  line-height: var(--wg-leading);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--wg-green-strong); text-underline-offset: 2px; }
a[href^="tel:"] { white-space: nowrap; }
a:hover { color: var(--wg-ink); }
:focus-visible { outline: 3px solid var(--wg-green); outline-offset: 2px; }
.wg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wg-skip { position: absolute; left: -999px; top: 0; background: var(--wg-surface); padding: var(--wg-s2) var(--wg-s4); z-index: 10; }
.wg-skip:focus { left: var(--wg-s4); }
.wg-wrap { width: 100%; max-width: var(--wg-max); margin: 0 auto; padding: 0 var(--wg-gutter); }

/* Headings */
h1, h2, h3, .wg-display {
  font-family: var(--wg-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--wg-tracking-display);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--wg-h1); }
h2 { font-size: var(--wg-h2); margin: var(--wg-s7) 0 var(--wg-s4); }
h3 { font-size: var(--wg-h3); margin: var(--wg-s5) 0 var(--wg-s2); }
p, ul, ol { margin: 0 0 var(--wg-s4); max-width: var(--wg-measure); }
li { margin-bottom: var(--wg-s1); }

/* Header (mirrors the WordPress header) */
.wg-header { background: var(--wg-ink); color: var(--wg-on-dark); }
.wg-header__bar { display: flex; align-items: center; gap: var(--wg-s4); min-height: 72px; }
.wg-header__logo { display: block; flex: 0 0 auto; }
.wg-header__logo img { width: 120px; height: auto; }
.wg-nav { display: none; margin-left: auto; font-family: var(--wg-font-ui); }
.wg-nav a { color: var(--wg-on-dark); text-decoration: none; padding: var(--wg-s2) var(--wg-s3); font-size: var(--wg-text-md); }
.wg-nav a:hover, .wg-nav a[aria-current="page"] { color: var(--wg-green); }
.wg-header__actions { display: flex; gap: var(--wg-s2); margin-left: auto; }
.wg-menu { position: relative; font-family: var(--wg-font-ui); }
.wg-menu summary { list-style: none; cursor: pointer; color: var(--wg-on-dark); border: 1px solid var(--wg-on-dark-muted); border-radius: var(--wg-r-sm); padding: 9px 12px; font-size: var(--wg-text-sm); }
.wg-menu summary::-webkit-details-marker { display: none; }
.wg-menu[open] .wg-menu__panel { display: grid; }
.wg-menu__panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--wg-ink-2); border-radius: var(--wg-r-md); padding: var(--wg-s2); min-width: 220px; z-index: 5; }
.wg-menu__panel a { color: var(--wg-on-dark); text-decoration: none; padding: var(--wg-s2) var(--wg-s3); }

/* Buttons */
.wg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wg-s2);
  font-family: var(--wg-font-ui); font-size: var(--wg-text-md); line-height: 1.2;
  padding: 12px 18px; border-radius: var(--wg-r-sm); text-decoration: none; border: 1px solid transparent;
  min-height: 44px;
}
.wg-btn--primary { background: var(--wg-green-strong); color: #fff; }
.wg-btn--primary:hover { background: var(--wg-ink); color: #fff; }
.wg-btn--light { background: #fff; color: var(--wg-ink); }
.wg-btn--light:hover { background: var(--wg-green-tint); color: var(--wg-ink); }
.wg-btn--ghost { border-color: var(--wg-line-strong); color: var(--wg-ink); background: var(--wg-surface); }
.wg-header .wg-btn { padding: 9px 12px; font-size: var(--wg-text-sm); min-height: 40px; }
.wg-header .wg-btn--find { display: none; }

/* Breadcrumb */
.wg-crumbs { font-family: var(--wg-font-ui); font-size: var(--wg-text-sm); padding: var(--wg-s4) 0 var(--wg-s3); color: var(--wg-muted); }
.wg-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wg-s1) var(--wg-s2); padding: 0; margin: 0; max-width: none; }
.wg-crumbs li { margin: 0; }
.wg-crumbs li + li::before { content: "/"; margin-right: var(--wg-s2); color: var(--wg-line-strong); }
.wg-crumbs a { color: var(--wg-muted); }

/* Hero (echoes the black rounded /vehicle/ banner) */
.wg-hero { background: var(--wg-ink); color: var(--wg-on-dark); border-radius: var(--wg-r-lg); padding: var(--wg-s6) var(--wg-s5); }
.wg-hero__eyebrow { font-family: var(--wg-font-ui); font-size: var(--wg-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wg-green); margin: 0 0 var(--wg-s3); }
.wg-hero h1 { color: var(--wg-on-dark); }
.wg-hero__sub { margin: var(--wg-s3) 0 0; color: var(--wg-on-dark-muted); font-size: var(--wg-text-md); }

/* Lead answer: always the first block after the H1, before any image */
.wg-lead { background: var(--wg-surface); border-left: 6px solid var(--wg-green); border-radius: 0 var(--wg-r-md) var(--wg-r-md) 0; padding: var(--wg-s5); margin: var(--wg-s5) 0 0; box-shadow: 0 1px 0 var(--wg-line); }
.wg-lead__label { font-family: var(--wg-font-ui); font-size: var(--wg-text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--wg-green-strong); margin: 0 0 var(--wg-s2); }
.wg-lead__text { font-size: var(--wg-text-lg); line-height: 1.55; margin: 0; max-width: none; }
.wg-table-note { font-family: var(--wg-font-ui); font-size: var(--wg-text-sm); color: var(--wg-ink); background: var(--wg-paper); border-radius: var(--wg-r-sm); padding: var(--wg-s2) var(--wg-s3); margin: var(--wg-s4) 0 var(--wg-s2); max-width: none; }
.wg-table-note strong { font-weight: 700; }
.wg-source { font-family: var(--wg-font-ui); font-size: var(--wg-text-sm); color: var(--wg-muted); margin: var(--wg-s3) 0 0; }

/* Key facts strip */
.wg-facts { display: grid; grid-template-columns: 1fr; gap: var(--wg-s2); margin: var(--wg-s4) 0 0; padding: 0; }
.wg-facts div { background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); padding: var(--wg-s3) var(--wg-s4); }
.wg-facts dt { font-family: var(--wg-font-ui); font-size: var(--wg-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wg-muted); }
.wg-facts dd { margin: 2px 0 0; font-weight: 700; font-family: var(--wg-font-ui); font-size: var(--wg-text-lg); }

/* Main body */
.wg-main { padding-bottom: var(--wg-s8); }
.wg-body { margin-top: var(--wg-s5); }
.wg-section { margin: 0; }
.wg-card > :first-child { margin-top: 0; }
.wg-card > :last-child { margin-bottom: 0; }
.wg-card { background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); padding: var(--wg-s5); margin: var(--wg-s4) 0; }

/* Inline shop CTA */
.wg-cta { display: grid; gap: var(--wg-s3); background: var(--wg-ink); color: var(--wg-on-dark); border-radius: var(--wg-r-md); padding: var(--wg-s5); margin: var(--wg-s5) 0; }
.wg-cta p { margin: 0; }
.wg-cta__title { font-family: var(--wg-font-display); text-transform: uppercase; letter-spacing: var(--wg-tracking-display); font-size: var(--wg-text-md); }
.wg-cta__actions { display: flex; flex-wrap: wrap; gap: var(--wg-s2); }

/* Rating block */
.wg-rating { display: inline-grid; gap: 2px; }
.wg-rating__dyn { font-weight: 700; white-space: nowrap; }
.wg-rating__static, .wg-rating__note { font-size: var(--wg-text-sm); color: var(--wg-muted); }
.wg-rating--none .wg-rating__dyn { font-weight: 400; color: var(--wg-muted); }

/* Tables: real tables on wide screens, labelled stacked rows on phones */
.wg-table-wrap { margin: var(--wg-s4) 0; }
.wg-table { font-family: var(--wg-font-ui); width: 100%; border-collapse: collapse; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); font-size: var(--wg-text-sm); }
.wg-table caption { text-align: left; font-family: var(--wg-font-ui); color: var(--wg-muted); padding: 0 0 var(--wg-s2); caption-side: top; font-size: var(--wg-text-sm); }
.wg-table th, .wg-table td { text-align: left; vertical-align: top; padding: var(--wg-s3); border-bottom: 1px solid var(--wg-line); }
.wg-table thead th { font-family: var(--wg-font-ui); font-weight: 400; color: var(--wg-muted); background: var(--wg-paper); font-size: var(--wg-text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.wg-table tbody th { font-weight: 700; }
.wg-table .wg-code { display: block; font-weight: 400; font-size: var(--wg-text-xs); color: var(--wg-muted); }
.wg-table .wg-num { white-space: nowrap; }
.wg-cell-src { display: block; font-size: var(--wg-text-xs); }
.wg-table td.wg-us { background: var(--wg-green-tint); }
@media (max-width: 899px) {
  .wg-table--stack, .wg-table--stack tbody, .wg-table--stack tr, .wg-table--stack td, .wg-table--stack th { display: block; width: 100%; }
  .wg-table--stack { border: 0; background: transparent; }
  .wg-table--stack caption { display: block; width: 100%; }
  .wg-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wg-table--stack tr { background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); margin: 0 0 var(--wg-s3); padding: var(--wg-s2) 0; }
  .wg-table--stack td, .wg-table--stack tbody th { border: 0; padding: 6px var(--wg-s4); display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: var(--wg-s3); }
  .wg-table--stack tbody th { grid-template-columns: 1fr; font-size: var(--wg-text-md); }
  .wg-table--stack td::before { content: attr(data-label); font-family: var(--wg-font-ui); color: var(--wg-muted); font-size: var(--wg-text-xs); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
  .wg-table--stack td:empty { display: none; }
}

/* Generation section */
.wg-gen { background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-lg); padding: var(--wg-s5); margin: var(--wg-s6) 0; }
.wg-gen h2 { margin-top: 0; }
.wg-gen__meta { display: flex; flex-wrap: wrap; gap: var(--wg-s2); margin: 0 0 var(--wg-s4); padding: 0; list-style: none; max-width: none; }
.wg-gen__meta li { margin: 0; background: var(--wg-paper); border-radius: 999px; padding: 4px 12px; font-family: var(--wg-font-ui); font-size: var(--wg-text-sm); }
.wg-gen__media { display: grid; gap: var(--wg-s4); align-items: start; }
.wg-figure { margin: 0; background: #fff; border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); overflow: hidden; }
.wg-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.wg-figure figcaption { font-size: var(--wg-text-xs); color: var(--wg-muted); padding: var(--wg-s2) var(--wg-s3); border-top: 1px solid var(--wg-line); }
.wg-shop { display: flex; flex-wrap: wrap; gap: var(--wg-s2); margin: var(--wg-s4) 0 0; padding: 0; list-style: none; max-width: none; }
.wg-shop li { margin: 0; }
.wg-gen__empty { background: var(--wg-amber-tint); border-left: 4px solid var(--wg-amber-line); padding: var(--wg-s3) var(--wg-s4); border-radius: 0 var(--wg-r-sm) var(--wg-r-sm) 0; }

/* Notes (noise, roof limit, Oval Steel, pending data) */
.wg-note { display: grid; grid-template-columns: 28px 1fr; gap: var(--wg-s3); background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); padding: var(--wg-s4); margin: var(--wg-s4) 0; font-size: var(--wg-text-md); }
.wg-note p { margin: 0; }
.wg-note__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--wg-green-tint); color: var(--wg-green-strong); display: grid; place-items: center; font-weight: 700; font-family: var(--wg-font-ui); }
.wg-note--pending { background: var(--wg-amber-tint); border-color: var(--wg-amber-line); }
.wg-note--pending .wg-note__icon { background: #fff; color: #7a5a12; }
.wg-note__title { font-weight: 700; display: block; }

/* Picks (best for and use case) */
.wg-picks { display: grid; gap: var(--wg-s4); margin: var(--wg-s4) 0; padding: 0; list-style: none; max-width: none; }
.wg-pick { background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); overflow: hidden; display: grid; margin: 0; }
.wg-pick__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-bottom: 1px solid var(--wg-line); }
.wg-pick__body { padding: var(--wg-s4) var(--wg-s5) var(--wg-s5); }
.wg-pick__rank { font-family: var(--wg-font-ui); font-size: var(--wg-text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wg-green-strong); }
.wg-pick h3 { margin-top: var(--wg-s1); }
.wg-pick dl { font-family: var(--wg-font-ui); display: grid; grid-template-columns: auto 1fr; gap: 4px var(--wg-s3); margin: var(--wg-s3) 0; font-size: var(--wg-text-sm); }
.wg-pick dt { color: var(--wg-muted); font-family: var(--wg-font-ui); }
.wg-pick dd { margin: 0; font-weight: 700; }

/* Steps (how-to) */
.wg-steps { counter-reset: step; list-style: none; padding: 0; margin: var(--wg-s4) 0; max-width: none; }
.wg-steps > li { counter-increment: step; position: relative; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); padding: var(--wg-s4) var(--wg-s4) var(--wg-s4) 64px; margin-bottom: var(--wg-s3); }
.wg-steps > li::before { content: counter(step); position: absolute; left: var(--wg-s4); top: var(--wg-s4); width: 32px; height: 32px; border-radius: 50%; background: var(--wg-ink); color: #fff; display: grid; place-items: center; font-family: var(--wg-font-display); font-size: var(--wg-text-sm); }
.wg-steps h3 { margin: 2px 0 var(--wg-s1); font-size: var(--wg-text-md); }
.wg-steps p { margin: 0; }

/* FAQ: every answer is in the HTML and visible on load */
.wg-faq { margin: var(--wg-s4) 0; }
.wg-faq__item { border-top: 1px solid var(--wg-line); padding: var(--wg-s4) 0; }
.wg-faq__item:last-child { border-bottom: 1px solid var(--wg-line); }
.wg-faq__q { font-family: var(--wg-font-body); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: var(--wg-text-lg); margin: 0 0 var(--wg-s2); }
.wg-faq__a p:last-child { margin-bottom: 0; }

/* Stockists */
.wg-stockists { display: grid; gap: var(--wg-s3); margin: var(--wg-s3) 0 var(--wg-s5); padding: 0; list-style: none; max-width: none; }
.wg-stockist { background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); padding: var(--wg-s4); margin: 0; }
.wg-stockist h4 { margin: 0 0 var(--wg-s1); font-size: var(--wg-text-md); }
.wg-stockist p { margin: 0; font-size: var(--wg-text-sm); }
.wg-stockist__links { display: flex; flex-wrap: wrap; gap: var(--wg-s2) var(--wg-s4); margin-top: var(--wg-s2); font-family: var(--wg-font-ui); font-size: var(--wg-text-sm); }
.wg-state-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wg-s2); margin: var(--wg-s4) 0; padding: 0; }
.wg-state-counts div { background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); padding: var(--wg-s2); text-align: center; }
.wg-state-counts dt { font-family: var(--wg-font-ui); font-size: var(--wg-text-xs); color: var(--wg-muted); }
.wg-state-counts dd { margin: 0; font-family: var(--wg-font-display); font-size: var(--wg-text-lg); }
.wg-map { background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); padding: var(--wg-s3); margin: var(--wg-s4) 0; }
.wg-map svg { width: 100%; height: auto; display: block; }
.wg-map figcaption { font-size: var(--wg-text-xs); color: var(--wg-muted); padding-top: var(--wg-s2); }
.wg-factory { border-left: 6px solid var(--wg-green); }

/* Video: thumbnail link that swaps to the player on click (no third-party script on load) */
.wg-video { margin: var(--wg-s4) 0; max-width: 760px; }
.wg-video__frame { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--wg-ink); border-radius: var(--wg-r-md); overflow: hidden; }
.wg-video__frame img, .wg-video__frame iframe, .wg-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.wg-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(20, 22, 23, 0.85); display: grid; place-items: center; }
.wg-video__play::after { content: ""; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.wg-video figcaption { font-size: var(--wg-text-sm); color: var(--wg-muted); padding-top: var(--wg-s2); }

/* Comparison */
.wg-compare th[scope="col"] { min-width: 140px; }

/* Internal links and related guides */
.wg-links { margin: var(--wg-s7) 0 0; }
.wg-links ul { list-style: none; padding: 0; display: grid; gap: var(--wg-s2); max-width: none; }
.wg-links li { margin: 0; }
.wg-links a { display: block; background: var(--wg-surface); border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); padding: var(--wg-s3) var(--wg-s4); text-decoration: none; color: var(--wg-ink); font-weight: 700; }
.wg-links a:hover { border-color: var(--wg-green); }
.wg-links small { display: block; font-weight: 400; color: var(--wg-muted); }

/* Hub */
.wg-hub-group { margin: var(--wg-s6) 0; }
.wg-hub-group .wg-links { margin-top: 0; }
.wg-hub-group ul { list-style: none; padding: 0; display: grid; gap: var(--wg-s2); max-width: none; }

/* Sources */
.wg-sources { font-size: var(--wg-text-sm); color: var(--wg-muted); }
.wg-sources ol { padding-left: 1.2em; }

/* Footer (mirrors the WordPress footer) */
.wg-footer { background: var(--wg-ink); color: var(--wg-on-dark); padding: var(--wg-s7) 0 var(--wg-s5); font-family: var(--wg-font-ui); }
.wg-footer__grid { display: grid; gap: var(--wg-s6); }
.wg-footer h2 { font-size: var(--wg-text-md); margin: 0 0 var(--wg-s3); color: var(--wg-on-dark); }
.wg-footer ul { list-style: none; padding: 0; margin: 0; }
.wg-footer li { margin: 0 0 var(--wg-s2); }
.wg-footer a { color: var(--wg-on-dark); text-decoration: none; }
.wg-footer a:hover { color: var(--wg-green); }
.wg-footer p { color: var(--wg-on-dark-muted); font-size: var(--wg-text-sm); }
.wg-footer__logo img { width: 150px; }
.wg-footer__base { max-width: none; border-top: 1px solid #3a3f43; margin-top: var(--wg-s6); padding-top: var(--wg-s4); font-size: var(--wg-text-sm); color: var(--wg-on-dark-muted); }
.wg-social { display: flex; gap: var(--wg-s3); flex-wrap: wrap; margin-top: var(--wg-s3); }
.wg-social a { color: var(--wg-green); }

/* Reusable spec block (Workstream 04 product pages) */
.wg-spec { font-family: var(--wg-font-ui); display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--wg-line); border-radius: var(--wg-r-md); background: var(--wg-surface); margin: var(--wg-s4) 0; }
.wg-spec div { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: var(--wg-s3); padding: var(--wg-s3) var(--wg-s4); border-bottom: 1px solid var(--wg-line); }
.wg-spec div:last-child { border-bottom: 0; }
.wg-spec dt { font-family: var(--wg-font-ui); color: var(--wg-muted); font-size: var(--wg-text-sm); }
.wg-spec dd { margin: 0; font-weight: 700; }

@media (min-width: 600px) {
  .wg-facts { grid-template-columns: repeat(2, 1fr); }
  .wg-stockists { grid-template-columns: repeat(2, 1fr); }
  .wg-links ul { grid-template-columns: repeat(2, 1fr); }
  .wg-hub-group ul { grid-template-columns: repeat(2, 1fr); }
  .wg-picks { grid-template-columns: repeat(2, 1fr); }
  .wg-header .wg-btn--find { display: inline-flex; }
  .wg-hero { padding: var(--wg-s7) var(--wg-s6); }
  .wg-state-counts { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 900px) {
  :root { --wg-gutter: 24px; }
  .wg-facts { grid-template-columns: repeat(4, 1fr); }
  .wg-gen__media { grid-template-columns: 280px 1fr; }
  .wg-cta { grid-template-columns: 1fr auto; align-items: center; }
  .wg-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .wg-picks { grid-template-columns: repeat(3, 1fr); }
  .wg-header__logo img { width: 150px; }
}
@media (min-width: 1200px) {
  .wg-nav { display: flex; }
  .wg-menu { display: none; }
  .wg-header__actions { margin-left: var(--wg-s4); }
  .wg-stockists { grid-template-columns: repeat(3, 1fr); }
}
@media print {
  .wg-header__actions, .wg-menu, .wg-skip { display: none; }
  .wg-gen, .wg-pick, .wg-steps > li, .wg-stockist, .wg-note, tr { break-inside: avoid; }
}