/* ---- bundu (Bundu — 4x4 & bakkie kit 83) — dust, steel, one oxidised orange --
   THE STRUCTURAL MOVE: strip, grid, strip. Four full-bleed dark bands — the
   rotating stage, the four category panels welded straight under it, the
   photographic band, and the ask welded onto the footer — take turns with two
   pale contained catalogues, so the page runs bleed, contained, bleed the whole
   way down and whitespace lives only inside the contained blocks. The two
   strips are the SAME component turned inside out: the first is edge to edge
   with no gutter and its label lies ON the photograph; the second is contained,
   numbered by a CSS counter and its picture demoted to a letterbox — the
   quietest block on the page built from the loudest block's markup. Each is
   reached through its preceding sibling, never by position, so neither rule can
   drift onto the other. Orange is buttons and price figures only: the category
   labels are pulled back to muted so it never appears twice in one block. */
body.t-bundu {
  background: #f4f2ee;
  color: #3a3c35;
  --radius: 0;
  --header-bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #eae7e0;
  --line: #ded9d0;
  --line-strong: #c8c2b6;
  --heading: #22241f;
  --text: #3a3c35;
  --muted: #7e7f76;
}

/* deck one of a two-deck header: the workshop number and the bay hours sit
   above the menu on the dark, exactly where the reference keeps them */
body.t-bundu .sf-header::before {
  content: 'Workshop 012 663 4180 · Mon–Fri 07:30–17:00 · Sat 08:00–13:00';
  display: block;
  text-align: center;
  background: #22241f;
  color: #d9d4c7;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.t-bundu .btn.brand { background: #c25a1e; color: #ffffff; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; padding: 15px 30px; }
body.t-bundu .btn.brand:hover { background: #a44916; }

/* band one: the stage takes the screen, the copy stays on the centre line */
body.t-bundu .sc-hero { min-height: calc(100vh - 96px); }
body.t-bundu .sc-hero h1 { font-size: clamp(32px, 5.6vw, 64px); font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }

/* band two: FOUR panels welded onto the hero — no gutter, no heading, and the
   label lying on the photograph instead of sitting under it */
body.t-bundu .sc-strip-img { border: 0; }
body.t-bundu .sc-hero + .sc-strip { max-width: none; padding: 0; }
body.t-bundu .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-bundu .sc-hero + .sc-strip .sc-strip-card { position: relative; }
body.t-bundu .sc-hero + .sc-strip .sc-strip-label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 54px 20px 20px; background: linear-gradient(rgba(34, 36, 31, 0), rgba(34, 36, 31, 0.86)); color: #f4f2ee; text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 700; }

/* the slab: six big priced tiles three across, split by hairlines rather than
   gaps, so two rows read as one surface instead of six floating cards */
body.t-bundu .sc-show-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
body.t-bundu .sc-show-item { background: var(--surface); }
body.t-bundu .sc-show-price, body.t-bundu .sc-buy-p { color: #c25a1e; font-weight: 800; }
body.t-bundu .sc-show-cat, body.t-bundu .sc-buy-cat { color: var(--muted); }

/* the quiet block: the wall above, contained and counted, picture demoted */
body.t-bundu .sc-showcase + .sc-strip { padding: 96px 20px 100px; }
body.t-bundu .sc-showcase + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; counter-reset: fitstep; }
body.t-bundu .sc-showcase + .sc-strip .sc-strip-card { text-align: left; border-top: 2px solid currentColor; padding-top: 14px; }
body.t-bundu .sc-showcase + .sc-strip .sc-strip-card::before { counter-increment: fitstep; content: counter(fitstep, decimal-leading-zero); display: block; margin-bottom: 16px; font-size: 32px; font-weight: 800; line-height: 1; color: #c25a1e; }
body.t-bundu .sc-showcase + .sc-strip .sc-strip-img { aspect-ratio: 16 / 6; opacity: 0.62; }

/* band three: the photograph loses its gutters and becomes a screen */
body.t-bundu .sc-banner { margin: 0 calc(50% - 50vw); min-height: 58vh; }

/* the dense row: three across, so six products fall as two full rows */
body.t-bundu .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 30px; }

/* band four: the ask welded onto the footer — number and address on the left of
   the same band, form on the right, and the page ends on the dark it opened on */
body.t-bundu .sc-contact-band, body.t-bundu .sf-footer { background: #22241f; color: #cfcabd; margin-top: 0; border-top-color: #3a3d34; }
body.t-bundu .sc-contact-band-inner { max-width: 1080px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 60px; align-items: start; text-align: left; }
body.t-bundu .sc-contact-band .sc-h2, body.t-bundu .sf-footer a { color: #f4f2ee; text-align: left; }
body.t-bundu .sc-contact-band .sc-contact-sub { color: #b6b1a3; margin: 0; line-height: 1.7; }
body.t-bundu .sc-contact-band .sc-contact-form { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 900px) {
  body.t-bundu .sc-hero + .sc-strip .sc-strip-row,
  body.t-bundu .sc-showcase + .sc-strip .sc-strip-row,
  body.t-bundu .sc-show-grid,
  body.t-bundu .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-bundu .sc-contact-band-inner { grid-template-columns: 1fr; }
  body.t-bundu .sc-contact-band .sc-contact-form { grid-column: 1; grid-row: auto; margin-top: 22px; }
}
@media (max-width: 560px) {
  body.t-bundu .sc-show-grid, body.t-bundu .sc-buy-grid { grid-template-columns: 1fr; }
}

/* NIGHT — the same yard after dark. Bone ground drops to bushveld charcoal, and
   because the page's rhythm is dark bands against a pale ground, the four bands
   have to go darker still to keep reading as bands. The orange warms half a step
   so the price figures and the step numbers hold their bite on a low ground. */
html[data-theme="dark"] body.t-bundu {
  background: #191a16;
  color: #c7c4b8;
  --header-bg: #191a16;
  --surface: #1f211c;
  --surface-2: #25271f;
  --line: #2f322a;
  --line-strong: #3e4237;
  --heading: #f2efe6;
  --text: #c7c4b8;
  --muted: #87887d;
}
html[data-theme="dark"] body.t-bundu .sf-header::before,
html[data-theme="dark"] body.t-bundu .sc-contact-band,
html[data-theme="dark"] body.t-bundu .sf-footer { background: #0f100c; border-top-color: #2a2c24; }
html[data-theme="dark"] body.t-bundu .sc-show-price,
html[data-theme="dark"] body.t-bundu .sc-buy-p,
html[data-theme="dark"] body.t-bundu .sc-showcase + .sc-strip .sc-strip-card::before { color: #e07a37; }
html[data-theme="dark"] body.t-bundu .sc-field input, html[data-theme="dark"] body.t-bundu .sc-field textarea { background: #25271f; border-color: #2f322a; color: #f2efe6; }