/* ---------- Loer — Trail cameras & bush monitoring 218 (store) ----------
   THE STRUCTURAL MOVE: the page is near-black from the header to the footer
   except for TWO pale bone bands cut the full width of the window — one under
   the spec paragraph, one under the buy grid. Both are ordinary .container
   sections pushed back out to 100vw and then re-contained with a padding
   clamp, so the bone runs edge to edge while the words and the tiles stay on
   the same column as everything else. The bands exist for one reason: the
   product photographs are flat-lays shot on white and would dissolve into the
   charcoal without a light ground under them. Every other band on the page is
   the ground itself. One dry-grass khaki carries the prices, the add-to-cart
   controls and the stage button and is spent nowhere else on the page.
   Both bands are reached by plain class — the split richtext renders as
   .sc-about-split, so .sc-richtext is the centred spec band and nothing else,
   and no positional selector is needed anywhere. */
body.t-loer {
  background: #0e0f0d;
  color: #ece7d8;
  --lo-khaki: #c9a227;
  --lo-band: #e8e3d3;
  --lo-ink: #14150f;
  --bg-flat: #0e0f0d;
  --surface: #16180f;
  --surface-2: #1c1e17;
  --line: #2a2d22;
  --line-strong: #3b3f31;
  --heading: #f4f0e4;
  --text: #ece7d8;
  --muted: #9a9a8b;
  --header-bg: #0e0f0d;
  --radius: 0;
  --shadow: none;
}

/* the bar and the footer disappear into the charcoal — no panel, no blur; the
   wordmark keeps the position the shared header already gives it */
body.t-loer .sf-header, body.t-loer .sf-head,
body.t-loer .sf-footer, body.t-loer .sf-foot, body.t-loer .sf-cats {
  background: #0e0f0d; border-color: #1e2018;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-loer .sf-name { font-weight: 700; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; }

/* flat khaki slabs with dark ink — no border, no inset hairline */
body.t-loer .btn.brand { background: var(--lo-khaki); border: 0; box-shadow: none; color: #14150f; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 28px; }
body.t-loer .btn.brand:hover { background: #b08f1e; opacity: 1; }
body.t-loer .sc-buy-btn { padding: 11px 20px; font-size: 11px; letter-spacing: 0.12em; }

/* headings are small stencilled marks, never display type */
body.t-loer .sc-h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 26px; }

/* the stage owns the whole first screen and the copy sits in the lower-left
   third, so the cross-fade has clear sky above it */
body.t-loer .sc-hero { min-height: 100vh; align-items: flex-end; padding: 120px 20px 13vh; }
body.t-loer .sc-hero-inner { max-width: 560px; }
body.t-loer .sc-hero h1 { font-size: clamp(32px, 5.4vw, 60px); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; margin-bottom: 16px; }
body.t-loer .sc-hero p { font-size: 16px; line-height: 1.6; margin-bottom: 30px; }

/* four capability tiles across one row that fills, labels in khaki */
body.t-loer .sc-strip { padding: 92px 20px 84px; }
body.t-loer .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.t-loer .sc-strip-img { aspect-ratio: 4 / 3; border: 0; background: #16180f; }
body.t-loer .sc-strip-label { margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lo-khaki); }

/* BAND ONE — the spec paragraph, bone edge to edge, heading centred over a
   left-reading column of figures */
body.t-loer .sc-richtext {
  width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw);
  background: var(--lo-band); padding: 88px max(20px, calc(50vw - 330px)) 92px;
}
body.t-loer .sc-richtext p { text-align: left; color: #33352a; font-size: 15px; line-height: 2.05; }

/* BAND TWO — the catalogue, same bone, three across in two rows that fill */
body.t-loer .sc-buygrid {
  width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw);
  background: var(--lo-band); padding: 82px max(20px, calc(50vw - 540px)) 96px;
}
body.t-loer .sc-richtext .sc-h2, body.t-loer .sc-buygrid .sc-h2, body.t-loer .sc-buy-t { color: var(--lo-ink); }
body.t-loer .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 32px; }
body.t-loer .sc-buy-media { background: #f4f1e6; }
body.t-loer .sc-buy-media img { aspect-ratio: 1; }
body.t-loer .sc-buy-cat { color: #6d6f5f; }
/* the same dry grass taken two stops down, because #c9a227 goes to nothing on
   bone — still one colour, not a second accent */
body.t-loer .sc-buy-p { color: #8a6a12; font-weight: 700; font-size: 15px; }

/* the page closes on the darkest strip on it */
body.t-loer .sc-contact-band { background: #0a0b09; padding: 96px 0 104px; border-top: 1px solid #1e2018; }

@media (max-width: 900px) {
  body.t-loer .sc-strip-row, body.t-loer .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the charcoal drops to true black and the two bone bands go with it,
   inverting into dark green-black panels with bone type. The bands still read
   as bands because they are a shade lighter than the ground, and the khaki
   lifts to a brighter dry grass so the prices and the controls stay the only
   coloured thing on a page that has gone properly dark. */
html[data-theme="dark"] body.t-loer {
  background: #050604;
  color: #f2efe4;
  --lo-khaki: #dbb63a;
  --lo-band: #14160e;
  --lo-ink: #f2efe4;
  --bg-flat: #050604;
  --surface: #0d0f0a;
  --surface-2: #121410;
  --line: #1e2118;
  --line-strong: #2d3125;
  --heading: #ffffff;
  --text: #f2efe4;
  --muted: #8b8b7d;
  --header-bg: #050604;
}
html[data-theme="dark"] body.t-loer .sf-header, html[data-theme="dark"] body.t-loer .sf-head,
html[data-theme="dark"] body.t-loer .sf-footer, html[data-theme="dark"] body.t-loer .sf-foot,
html[data-theme="dark"] body.t-loer .sf-cats { background: #050604; border-color: #14160e; }
html[data-theme="dark"] body.t-loer .sc-richtext p { color: #b5b3a3; }
html[data-theme="dark"] body.t-loer .sc-strip-img { background: #0d0f0a; }
html[data-theme="dark"] body.t-loer .sc-buy-media { background: #1b1e15; }
html[data-theme="dark"] body.t-loer .sc-buy-cat { color: #8b8b7d; }
html[data-theme="dark"] body.t-loer .sc-buy-p { color: var(--lo-khaki); }
html[data-theme="dark"] body.t-loer .sc-contact-band { background: #000000; border-top-color: #14160e; }