/* ---- corbel (Corbel — Precast concrete yard 98) ----------------------------
   THE STRUCTURAL MOVE: the numeral is the display type. A yard sells countable
   units, so the rand figure is set larger and tighter than the product name
   sitting above it, and the two full-bleed figure moments — the culvert band
   and the casting-bed overlay — are typeset off that same oversized scale.
   Section headings are demoted to small tracked caps so nothing competes with
   a number, and photography drops to a backdrop for one. Ground is a cool
   cured-slab off-white, ink is wet cement, and the single oxide ochre lands on
   prices, range labels and the hero's button rule — nowhere else. */
body.t-corbel {
  background: #eaebe7;
  color: #333a3d;
  --cb-ochre: #a8601f;
  --radius: 0;
  --shadow: none;
  --header-bg: rgba(234, 235, 231, 0.92);
  --surface: #f4f5f2;
  --surface-2: #dfe1dc;
  --line: #cfd2cc;
  --line-strong: #b3b8b1;
  --heading: #1f2629;
  --text: #333a3d;
  --muted: #6b7276;
}
body.t-corbel .sf-head, body.t-corbel .sf-foot, body.t-corbel .sf-footer { background: #eaebe7; border-color: #cfd2cc; }

/* the bar rides transparent over the short banner — logo hard left, links hard
   right, nothing behind them. Scoped by :has so the product, cart and search
   pages, which have no hero to float over, keep an ordinary solid header. */
body.t-corbel:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
body.t-corbel:has(.sc-hero) .sf-name, body.t-corbel:has(.sc-hero) .sf-cart, body.t-corbel:has(.sc-hero) .theme-toggle { color: #f3f3ef; }
/* the category rail would land underneath a floating bar, and the six ranges
   are already spelled out edge to edge further down the page */
body.t-corbel:has(.sc-hero) .sf-cats { display: none; }

body.t-corbel .btn.brand { background: var(--cb-ochre); border-color: var(--cb-ochre); color: #ffffff; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 11.5px; padding: 15px 30px; }
/* the button rule — ochre's third and last resting place */
body.t-corbel .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-width: 1px; border-color: var(--cb-ochre); color: #ffffff; }

/* a short banner, not a full-viewport stage */
body.t-corbel .sc-hero { min-height: 54vh; padding: 152px 20px 94px; }
body.t-corbel .sc-hero h1 { font-weight: 700; font-size: clamp(28px, 4.4vw, 50px); letter-spacing: -0.025em; line-height: 1.08; }
body.t-corbel .sc-h2 { text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 1.5vw, 13px); font-weight: 700; color: var(--muted); }

/* the contained, photograph-free claim column: narrow, tall, mostly air */
body.t-corbel .sc-richtext { max-width: 560px; padding: 114px 20px 118px; }
body.t-corbel .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 2.05; font-variant-numeric: tabular-nums; }

/* the labelled row runs edge to edge, where the reference put its logo carousel */
body.t-corbel .sc-strip { padding: 0 0 8px; margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; }
body.t-corbel .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
body.t-corbel .sc-strip-img { border: 0; }
body.t-corbel .sc-strip-label { margin-top: 11px; padding-bottom: 24px; color: var(--cb-ochre); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; }

/* the two figure moments, set from the same scale as the price wall */
body.t-corbel .sc-banner { min-height: 56vh; display: flex; align-items: center; }
body.t-corbel .sc-banner h2, body.t-corbel .sc-about-overlay .sc-h2 { font-size: clamp(42px, 7.6vw, 100px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.96; font-variant-numeric: tabular-nums; text-transform: none; color: #ffffff; }

/* --- THE PRICE WALL: six tiles, three across, two full rows. The rand figure
       is bigger and tighter than the title above it, so the tile reads price
       first — which is how a trade counter is actually read. --- */
body.t-corbel .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 58px 34px; }
body.t-corbel .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-corbel .sc-buy-media img { aspect-ratio: 5 / 4; }
body.t-corbel .sc-buy-cat { color: var(--muted); letter-spacing: 0.2em; font-size: 10px; }
body.t-corbel .sc-buy-p { margin-top: 6px; color: var(--cb-ochre); font-size: clamp(27px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
@media (max-width: 900px) {
  body.t-corbel .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  body.t-corbel .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* the reference's four-column footer collapsed into one full-width closing band */
body.t-corbel .sc-contact-band { background: #dfe1dc; border-top: 1px solid #cfd2cc; padding: 96px 0 108px; }

/* NIGHT — the slab in shadow: the ground drops to wet cement, the ink comes up
   to chalk, and the ochre lifts a step so prices still carry on the dark. */
html[data-theme="dark"] body.t-corbel {
  background: #191d1f;
  color: #c3c8c9;
  --cb-ochre: #d2833a;
  --header-bg: rgba(25, 29, 31, 0.92);
  --surface: #202527;
  --surface-2: #262c2e;
  --line: #313739;
  --line-strong: #454c4e;
  --heading: #eef0ee;
  --text: #c3c8c9;
  --muted: #868d8f;
}
html[data-theme="dark"] body.t-corbel .sf-head, html[data-theme="dark"] body.t-corbel .sf-foot,
html[data-theme="dark"] body.t-corbel .sf-footer { background: #191d1f; border-color: #313739; }
html[data-theme="dark"] body.t-corbel .sc-contact-band { background: #202527; border-top-color: #313739; }
html[data-theme="dark"] body.t-corbel .btn.brand { background: var(--cb-ochre); border-color: var(--cb-ochre); color: #14181a; }