/* ---- fieldglass (Fieldglass — Binoculars & birding optics 112) -------------
   THE STRUCTURAL MOVE: the bottom of the page is ONE welded field of sixteen
   tiles. The first catalogue block is turned into a flush four-across photo
   wall — 3px gutters, no card, and the title and price stripped out from under
   every tile, so it is glass on white and nothing else — and the priced buy
   grid immediately beneath it repeats the identical four-column geometry with
   no strip, banner or rule allowed between them. Everything above stays quiet
   on purpose: a full-viewport three-slide stage, one side-by-side split, and
   six labelled tiles standing on empty ground. Sodium orange has exactly three
   homes — the nav link under the pointer, the hero's outline and the rand
   figure — and appears nowhere else on the page. */
body.t-fieldglass {
  background: #eef1f4;
  color: #333e4a;
  --fg-sodium: #e8622a;
  --bg-flat: #eef1f4;
  --surface: #ffffff;
  --surface-2: #e2e7ec;
  --line: #ccd4dc;
  --line-strong: #b2bdc8;
  --heading: #10141a;
  --text: #333e4a;
  --muted: #6c7883;
  --header-bg: #1c2430;
  --radius: 0;
  --shadow: none;
}

/* the two cold blue-grey bands — the bar floating over the three slides, and
   the one-line footer that closes the page. Solid, never glassy: pale type on
   a photograph and pale type on a translucent bar would otherwise meet. */
body.t-fieldglass .sf-header, body.t-fieldglass .sf-footer {
  background: #1c2430; border-color: #1c2430;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-fieldglass .sf-name { color: #eef1f4; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
body.t-fieldglass .sf-navlink, body.t-fieldglass .sf-cart,
body.t-fieldglass .sf-footer, body.t-fieldglass .sf-footer a { color: #9fadba; font-weight: 500; }
/* SODIUM 1 of 3 — the nav item under the pointer, the only colour on the bar */
body.t-fieldglass .sf-navlink:hover, body.t-fieldglass .sf-cart:hover { color: var(--fg-sodium); }
body.t-fieldglass .btn.brand { background: var(--fg-sodium); border-color: var(--fg-sodium); color: #17110c; box-shadow: none; font-weight: 700; padding: 13px 26px; }

/* the stage holds the entire first screen and the copy sits on the left rail */
body.t-fieldglass .sc-hero { min-height: 100vh; padding: 0 8vw; }
body.t-fieldglass .sc-hero-inner { max-width: 880px; }
body.t-fieldglass .sc-hero h1 { font-weight: 500; font-size: clamp(40px, 7.4vw, 94px); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 18px; }
/* SODIUM 2 of 3 — the hero outline, the one control on the page that is not a slab */
body.t-fieldglass .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--fg-sodium); color: #eef1f4; }
body.t-fieldglass .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--fg-sodium); color: #17110c; }

/* section headings sit left with no eyebrow above them, everywhere on the page */
body.t-fieldglass .sc-h2 { text-align: left; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 1.3vw, 12.5px); font-weight: 700; color: var(--heading); margin-bottom: 28px; }

/* the quiet middle: six labels on empty ground, more air than anything else gets */
body.t-fieldglass .sc-strip { padding: 104px 20px 100px; }
body.t-fieldglass .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
body.t-fieldglass .sc-strip-img { aspect-ratio: 4 / 3; border: 0; background: #ffffff; }
body.t-fieldglass .sc-strip-label { margin-top: 12px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; color: var(--heading); }

/* --- THE WALL, half one: eight square flat-lays, four across, flush, and no
   words under any of them. This is a photo wall, not a catalogue. --- */
body.t-fieldglass .sc-products { padding-bottom: 0; }
body.t-fieldglass .sc-products .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 0; }
body.t-fieldglass .sc-products .product-card { background: transparent; border: 0; transform: none; }
body.t-fieldglass .sc-products .product-card .meta, body.t-fieldglass .sc-products .sc-sample-note { display: none; }
body.t-fieldglass .sc-products .product-card .ph, body.t-fieldglass .sc-buy-media { background: #ffffff; }
body.t-fieldglass .sc-buy-media img { aspect-ratio: 1; }

/* --- THE WALL, half two: the same four columns, welded straight on, this time
   with the price and the buy control. Nothing is allowed in between. --- */
body.t-fieldglass .sc-buygrid { padding: 3px 20px 96px; }
body.t-fieldglass .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 3px; }
body.t-fieldglass .sc-buy-cat { color: var(--muted); font-weight: 600; margin-top: 16px; }
/* SODIUM 3 of 3 — the rand figure, and no other number on the page */
body.t-fieldglass .sc-buy-p { color: var(--fg-sodium); font-size: 16px; font-weight: 700; }

/* the page ends quietly: one narrow left-aligned column after two dense walls */
body.t-fieldglass .sc-contact { text-align: left; padding: 96px 20px 88px; max-width: 560px; }

@media (max-width: 900px) {
  body.t-fieldglass .sc-products .product-grid,
  body.t-fieldglass .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-fieldglass .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-fieldglass .sc-hero { padding: 0 24px; }
}

/* NIGHT — the page turns inside out. The cold blue-grey that was the bar becomes
   the ground, the pale band becomes the type, the sodium lifts a shade to hold
   its contrast against it, and the flat-lays come off pure white so sixteen
   tiles in a row stop glaring in a dark room. */
html[data-theme="dark"] body.t-fieldglass {
  background: #141a23;
  color: #b0bcc8;
  --fg-sodium: #f4783f;
  --bg-flat: #141a23;
  --surface: #1c2430;
  --surface-2: #212b38;
  --line: #2b3542;
  --line-strong: #3c4857;
  --heading: #eef1f4;
  --text: #b0bcc8;
  --muted: #7d8996;
  --header-bg: #0e131a;
}
html[data-theme="dark"] body.t-fieldglass .sf-header,
html[data-theme="dark"] body.t-fieldglass .sf-footer { background: #0e131a; border-color: #0e131a; }
html[data-theme="dark"] body.t-fieldglass .sc-products .product-card .ph,
html[data-theme="dark"] body.t-fieldglass .sc-buy-media,
html[data-theme="dark"] body.t-fieldglass .sc-strip-img { background: #dde3e8; }
html[data-theme="dark"] body.t-fieldglass .btn.brand { color: #140f0a; }