/* ---- gondola (Gondola — Shop fittings & display 114) — a trade counter, not
   an editorial. Ground is cool aisle white, all type is graphite, and one
   petrol teal is rationed to three jobs: the button fills, the rand figures and
   the hairline under the nav. THE STRUCTURAL MOVE: the four-tile range strip is
   welded flush onto the bottom of a hero that deliberately stops short of the
   full-viewport lock — no gap above the band, no gutter between the tiles, and
   a half-tone ground a shade cooler than the page holding it there. It is the
   page's only gapless row, and the banner is the page's only dark block. */
body.t-gondola {
  background: #f2f4f3;
  color: #3a4241;
  --gd-teal: #1f6f6b;
  --radius: 0;
  --shadow: none;
  --header-bg: rgba(242, 244, 243, 0.94);
  --surface: #ffffff;
  --surface-2: #e6ebea;
  --line: #d3dad8;
  --line-strong: #b6c0be;
  --heading: #1a1d1c;
  --text: #3a4241;
  --muted: #6d7877;
}
body.t-gondola .sf-head, body.t-gondola .sf-foot, body.t-gondola .sf-footer { background: #f2f4f3; border-color: #d3dad8; }
/* the hairline under the nav — teal's second resting place, and the only rule
   on the page that is not grey */
body.t-gondola .sf-header { border-bottom: 2px solid var(--gd-teal); }
body.t-gondola .btn.brand { background: var(--gd-teal); border-color: var(--gd-teal); color: #ffffff; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 11.5px; padding: 15px 30px; }

/* a tall stage that stops short of the viewport lock, so the band below it is
   already on screen when the page lands */
body.t-gondola .sc-hero { min-height: 68vh; padding: 118px 20px 100px; }
body.t-gondola .sc-hero h1 { font-weight: 700; font-size: clamp(29px, 4.6vw, 52px); letter-spacing: -0.03em; line-height: 1.06; }
body.t-gondola .sc-h2 { text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 1.5vw, 13px); font-weight: 700; color: var(--muted); }

/* THE WELD — full-bleed half-tone band pushed hard up against the bottom of the
   hero, four tiles across with no gutter at all */
body.t-gondola .sc-strip { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; padding: 0; background: #e6ebea; border-bottom: 1px solid #d3dad8; }
body.t-gondola .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-gondola .sc-strip-img { aspect-ratio: 16 / 7; border: 0; border-radius: 0; }
body.t-gondola .sc-strip-label { margin: 0; padding: 13px 10px 16px; color: var(--heading); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; }

/* the range announcement: type on plain ground, no photograph anywhere near it */
body.t-gondola .sc-richtext { max-width: 600px; padding: 94px 20px 76px; }
body.t-gondola .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 2; font-variant-numeric: tabular-nums; }

/* four across, two rows that fill — the tile reads price first, the way a trade
   counter is actually read */
body.t-gondola .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 22px; }
body.t-gondola .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-gondola .sc-buy-media img { aspect-ratio: 1; }
body.t-gondola .sc-buy-p { margin-top: 5px; color: var(--gd-teal); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* the one dark block on the page: graphite laid over the photograph with an
   inset slab, so the inline hero-style gradient stays untouched */
body.t-gondola .sc-banner { min-height: 46vh; display: flex; align-items: center; box-shadow: inset 0 0 0 100vmax rgba(26, 29, 28, 0.8); }
body.t-gondola .sc-about-split { padding: 88px 20px 92px; gap: 56px; }
body.t-gondola .sc-contact { max-width: 560px; padding: 90px 20px 108px; }
@media (max-width: 900px) {
  body.t-gondola .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-gondola .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the aisle after closing. The ground drops to graphite, the strip band
   holds a shade off it so the weld still reads as a separate slab, and the teal
   lifts a step so the rand figures still carry. */
html[data-theme="dark"] body.t-gondola {
  background: #141817;
  color: #b9c2c0;
  --gd-teal: #4fa9a3;
  --header-bg: rgba(20, 24, 23, 0.94);
  --surface: #1b201f;
  --surface-2: #202625;
  --line: #2e3634;
  --line-strong: #414a48;
  --heading: #eef1f0;
  --text: #b9c2c0;
  --muted: #7f8a88;
}
html[data-theme="dark"] body.t-gondola .sf-head, html[data-theme="dark"] body.t-gondola .sf-foot,
html[data-theme="dark"] body.t-gondola .sf-footer { background: #141817; border-color: #2e3634; }
html[data-theme="dark"] body.t-gondola .sc-strip { background: #202625; border-bottom-color: #2e3634; }
html[data-theme="dark"] body.t-gondola .btn.brand { background: var(--gd-teal); border-color: var(--gd-teal); color: #101413; }