/* ---- hearth (Dryhouse — Firewood & braai wood 65) --------------------------
   THE STRUCTURAL MOVE: the catalogue is built as a PRICE TABLE, not a browse
   wall. .sc-buy-grid is locked to exactly four columns so eight products land
   as two clean rows, every tile is left-aligned on one ruled column, and the
   rand figure is set larger and heavier than the title in the only green on
   the page — so the eye reads down each row as a ladder of packages. Feeding
   it: a full-viewport rotating opener with the wordmark on its own centred
   line above a short menu, then a contained four-tile rail arriving with almost
   no air under the slider, BEFORE any prose. Ground is frost grey rather than
   the roster's creams and ash, and the only warmth is in the photographs. */
body.t-hearth {
  background: #e8eaea;
  color: #384042;
  --radius: 0;
  --header-bg: #e8eaea;
  --surface: #ffffff;
  --surface-2: #dee1e1;
  --line: #cdd2d1;
  --line-strong: #b6bdbb;
  --heading: #14181a;
  --text: #384042;
  --muted: #6a7274;
}
body.t-hearth .sf-header, body.t-hearth .sf-footer { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #cdd2d1; }
/* the wordmark takes a centred line of its own and the short menu drops beneath it */
body.t-hearth .sf-header .container { row-gap: 8px; flex-wrap: wrap; }
body.t-hearth .sf-name { text-transform: uppercase; letter-spacing: 0.3em; font-size: 15px; font-weight: 700; }
body.t-hearth .btn.brand { background: #2c4a3c; border-color: #2c4a3c; color: #eef1f0; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; padding: 14px 26px; }
body.t-hearth .btn.brand:hover { background: #1f3730; }

/* the rotating opener fills the viewport under the bar, copy hard left and low */
body.t-hearth .sc-hero { min-height: calc(100vh - 92px); padding: 92px clamp(20px, 6vw, 78px); }
body.t-hearth .sc-hero h1 { font-weight: 600; font-size: clamp(32px, 5.4vw, 66px); line-height: 1.04; letter-spacing: -0.025em; max-width: 15ch; }
body.t-hearth .sc-hero p { font-size: 16px; line-height: 1.6; max-width: 46ch; }
body.t-hearth .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(11px, 1.2vw, 13px); font-weight: 700; color: #14181a; margin-bottom: 30px; }

/* the rail hugs the slider — four square tiles, one word each, then it stops */
body.t-hearth .sc-strip { padding: 26px 20px 6px; }
body.t-hearth .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 24px); }
body.t-hearth .sc-strip-label { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 700; margin-top: 11px; }

/* the drying-shed photograph runs flush to the page edge, words in a half column */
body.t-hearth .sc-about-split { max-width: none; padding: 0; gap: clamp(26px, 5vw, 64px); align-items: center; }
body.t-hearth .sc-about-copy { max-width: 470px; padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 60px) clamp(56px, 8vw, 104px) 0; }

/* the package table */
body.t-hearth .sc-buygrid { padding: 20px 20px 62px; }
body.t-hearth .sc-buy-grid { grid-template-columns: repeat(4, 1fr); gap: 44px 26px; }
body.t-hearth .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-hearth .sc-buy-media img { aspect-ratio: 1; }
body.t-hearth .sc-buy-cat { color: #6a7274; letter-spacing: 0.2em; font-size: 10px; }
body.t-hearth .sc-buy-p { margin-top: 8px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: #2c4a3c; }
body.t-hearth .sc-buy-form, body.t-hearth .sc-buy-btn { width: 100%; }

/* the breather has no photograph in it at all, then one last full-bleed band */
body.t-hearth .sc-richtext { max-width: 620px; padding: 30px 20px 72px; }
body.t-hearth .sc-richtext p { font-size: 16px; line-height: 1.85; }
body.t-hearth .sc-banner { min-height: 46vh; display: flex; align-items: center; justify-content: center; }

@media (max-width: 900px) {
  body.t-hearth .sc-strip-row, body.t-hearth .sc-buy-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-hearth .sc-about-split, body.t-hearth .sc-contact-split { grid-template-columns: 1fr; }
  body.t-hearth .sc-about-copy { max-width: none; padding: 30px 20px 62px; }
}

/* NIGHT — the frost and the spruce trade places; the pine lifts to a pale
   needle green so the price column still carries on a near-black ground */
html[data-theme="dark"] body.t-hearth {
  background: #121618;
  color: #b2bab9;
  --header-bg: #121618;
  --surface: #1a1f21;
  --surface-2: #1e2426;
  --line: #2a3133;
  --line-strong: #3a4245;
  --heading: #e6ebea;
  --text: #b2bab9;
  --muted: #7f8a89;
}
html[data-theme="dark"] body.t-hearth .sf-header, html[data-theme="dark"] body.t-hearth .sf-footer { border-color: #2a3133; }
html[data-theme="dark"] body.t-hearth .sc-h2 { color: #e6ebea; }
html[data-theme="dark"] body.t-hearth .sc-buy-p { color: #7fbfa1; }
html[data-theme="dark"] body.t-hearth .btn.brand { background: #7fbfa1; border-color: #7fbfa1; color: #121618; }
html[data-theme="dark"] body.t-hearth .btn.brand:hover { background: #9ad2b7; }
html[data-theme="dark"] body.t-hearth .sc-field input, html[data-theme="dark"] body.t-hearth .sc-field textarea { background: #1a1f21; border-color: #2a3133; color: #e6ebea; }