/* ---- swaai (Swaai — Wooden jungle gyms & swing sets 314) --------------------
   THE ONE STRUCTURAL MOVE: the page is pulled wide and squeezed narrow, over
   and over. Every block of type — hero lockup, every heading, the about copy,
   the closing form — sits on the SAME 640px measure dead centre, and every
   photograph runs the full width of the window with nothing containing it. The
   squeeze lands hardest in the middle, where the taxonomy band welds EIGHT
   square tiles edge to edge with no gutter, no card and no border; it is built
   as two four-item strips back to back because parseSections clamps a single
   strip to six, and the second row's top padding goes to nothing so the eight
   read as one block. Sanded pine for ground, bushveld green for headings and
   the buy slab, and one zest green spent on nothing but the rand figure — set
   as a small slab so it stays legible on sand — and the button hover. Nothing
   here touches the order or position of anything inside the header. */
body.t-swaai {
  background: #e8ddcc; color: #33302a;
  --radius: 0;
  --header-bg: #e8ddcc;
  --surface: #e8ddcc;
  --surface-2: #ddd0ba;
  --line: #cdbfa6;
  --line-strong: #b09b7d;
  --heading: #22402f;
  --text: #33302a;
  --muted: #6d675c;
}
body.t-swaai .sf-header, body.t-swaai .sf-footer { backdrop-filter: none; -webkit-backdrop-filter: none; background: #e8ddcc; border-color: #cdbfa6; }
body.t-swaai .btn.brand { background: #22402f; color: #f2ead9; box-shadow: none; font-weight: 600; letter-spacing: 0.03em; }
body.t-swaai .btn.brand:hover { background: #c9d94a; color: #1b2b12; }

/* THE MEASURE — one column width for every word on the page, wherever it sits */
body.t-swaai .sc-hero-inner,
body.t-swaai .sc-about-overlay-inner,
body.t-swaai .sc-contact-band-inner,
body.t-swaai .sc-h2 { max-width: 640px; margin-left: auto; margin-right: auto; }
body.t-swaai .sc-h2 { font-size: clamp(23px, 3.2vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: clamp(30px, 4.5vh, 52px); padding: 0 20px; }

/* WIDE — one still frame at the full height of the window, lockup dead centre */
body.t-swaai .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-swaai .sc-hero h1 { font-size: clamp(33px, 5.4vw, 58px); font-weight: 600; line-height: 1.08; }

/* NARROW — the one gapped, contained block: six structures three across, with
   the card chrome taken off so the photographs sit straight on the pine */
body.t-swaai .sc-products { padding: clamp(74px, 11vh, 132px) 20px clamp(56px, 8vh, 96px); }
body.t-swaai .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; padding: 0; }
body.t-swaai .product-card, body.t-swaai .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-swaai .product-card .ph { aspect-ratio: 4 / 3; }
body.t-swaai .product-card .meta { padding: 13px 0 0; }
body.t-swaai .product-card .t { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
body.t-swaai .product-card .p { display: inline-block; margin-top: 9px; padding: 3px 9px; background: #c9d94a; color: #1b2b12; font-size: 13.5px; font-weight: 700; opacity: 1; }

/* WIDE — the taxonomy band: eight identical tiles welded edge to edge */
body.t-swaai .sc-strip { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: clamp(26px, 5vh, 54px) 0 0; }
body.t-swaai .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-swaai .sc-strip + .sc-strip { padding-top: 0; }
body.t-swaai .sc-strip-img { border: 0; }
body.t-swaai .sc-strip-label { margin: 0; padding: 11px 10px 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* WIDE — the photograph with no container at all around it */
body.t-swaai .container:has(> .sc-banner) { max-width: none; padding: 0; }
body.t-swaai .sc-banner { width: auto; max-width: none; margin: clamp(46px, 7vh, 92px) 0 0; min-height: 66vh; display: flex; align-items: center; }

/* WIDE, then narrow inside it — the two blocks that close the page */
body.t-swaai .sc-about-overlay, body.t-swaai .sc-contact-band { padding: clamp(92px, 14vh, 158px) 20px; }

@media (max-width: 860px) {
  body.t-swaai .product-grid, body.t-swaai .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the yard after the floodlight goes on: the pine goes to wet bark and
   the zest, which had to be held back on sand, finally gets to be the brightest
   thing on the page and takes the buy slab with it. */
html[data-theme="dark"] body.t-swaai {
  background: #191c17; color: #ddd7c8;
  --header-bg: #191c17; --surface: #191c17; --surface-2: #242820;
  --line: #333829; --line-strong: #4b513a; --heading: #ebe5d4; --text: #ddd7c8; --muted: #8b8676;
}
html[data-theme="dark"] body.t-swaai .sf-header, html[data-theme="dark"] body.t-swaai .sf-footer { background: #191c17; border-color: #333829; }
html[data-theme="dark"] body.t-swaai .btn.brand { background: #c9d94a; color: #1b2b12; }
html[data-theme="dark"] body.t-swaai .btn.brand:hover { background: #e2ef7d; }