/* ---- sterrewag (Sterrewag — Telescopes & dark-sky gear 179) — observatory
   charcoal, bone display type, one head-torch red ----------------------------
   THE STRUCTURAL MOVE: CONTAINED EXACTLY ONCE. Every band on this page gives up
   the container — the stage runs a full viewport with the bar floating over the
   photograph, the four labelled tiles weld gapless from edge to edge, the banner
   is a second stage, the catalogue is a gutterless four-across mosaic pushed
   past the gutters, and the page closes on a painted band — and the ONE block
   that keeps a margin either side of it is the centred richtext, held to a 560px
   measure. Stage, narrow column, band, stage, wall, band; the narrowness is what
   makes the bleeds land. Red is spent on exactly three things — the solid
   buttons, the rand figures and a nav link under the cursor — so the category
   label is pulled off the brand colour to grey on purpose, leaving the price as
   the only coloured thing inside a tile. */
body.t-sterrewag {
  background: #121316;
  color: #b0b4bd;
  --sw-red: #c0392c;
  --sw-flat: #121316;
  --sw-deep: #0a0b0d;
  --radius: 0;
  --shadow: none;
  --header-bg: #121316;
  --surface: #191b20;
  --surface-2: #212429;
  --line: rgba(240, 237, 229, 0.12);
  --line-strong: rgba(240, 237, 229, 0.26);
  --heading: #f0ede5;
  --text: #b0b4bd;
  --muted: #7b7f88;
}

/* flat bars, no glass — off the shop front the header is an ordinary strip on
   the same charcoal, so nothing on a cart or product page glows */
body.t-sterrewag .sf-header, body.t-sterrewag .sf-head,
body.t-sterrewag .sf-footer, body.t-sterrewag .sf-foot, body.t-sterrewag .sf-cats {
  background: var(--sw-flat); border-color: var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* ...except over the stage, where it floats transparent on the photograph with
   the shop name still hard left. Scoped by :has, because cart, search and
   product pages have no stage to float over and need the solid bar back. */
body.t-sterrewag:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-sterrewag:has(.sc-hero) .sf-name, body.t-sterrewag:has(.sc-hero) .sf-navlink,
body.t-sterrewag:has(.sc-hero) .sf-cart, body.t-sterrewag:has(.sc-hero) .theme-toggle { color: #f0ede5; }
/* RED 1 of 3 — the link under the cursor */
body.t-sterrewag .sf-navlink:hover, body.t-sterrewag .sc-buy-t:hover { color: var(--sw-red); }

/* RED 2 of 3 — a flat slab, no ring, no border */
body.t-sterrewag .btn.brand { background: var(--sw-red); border: 0; color: #f7f2ea; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 16px 34px; }

/* the stage and the second stage share one display treatment, so the banner
   reads as another full screen of picture rather than a captioned strip */
body.t-sterrewag .sc-hero { min-height: 100vh; padding: 150px 20px 110px; }
body.t-sterrewag .sc-hero h1, body.t-sterrewag .sc-banner h2 { font-weight: 700; font-size: clamp(32px, 5.6vw, 72px); line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 20px; }
body.t-sterrewag .sc-banner { margin: 0 calc(50% - 50vw); min-height: 74vh; display: flex; align-items: center; justify-content: center; padding: 100px 28px; }

/* section headings stay small and quiet — the pictures carry the page */
body.t-sterrewag .sc-h2 { font-size: clamp(18px, 2.1vw, 24px); font-weight: 600; letter-spacing: -0.01em; }

/* THE ONE CONTAINED BLOCK — the only thing on the page with margin either side */
body.t-sterrewag .sc-richtext { max-width: 560px; padding: 132px 20px 128px; }
body.t-sterrewag .sc-richtext p { color: var(--text); font-size: 16px; line-height: 2.05; margin-top: 24px; }

/* THE BAND — four uniform tiles welded to each other and to the window edges */
body.t-sterrewag .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-sterrewag .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-sterrewag .sc-strip-img { aspect-ratio: 5 / 4; border: 0; border-radius: 0; }
body.t-sterrewag .sc-strip-label { margin: 0; padding: 22px 24px 26px; background: var(--surface); color: var(--heading); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.6; }

/* THE WALL — the grid alone breaks the gutters, so the heading keeps its 20px
   and the photographs run to both window edges on a single hairline seam */
body.t-sterrewag .sc-buygrid { max-width: none; padding: 112px 20px 104px; }
body.t-sterrewag .sc-buy-grid { margin: 44px -20px 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
body.t-sterrewag .sc-buy-card { background: var(--sw-flat); padding: 0 22px 34px; align-items: stretch; text-align: left; }
body.t-sterrewag .sc-buy-media { width: auto; margin: 0 -22px; }
body.t-sterrewag .sc-buy-cat { color: var(--muted); margin-top: 20px; }
/* RED 3 of 3 — the rand figure, and nothing else in the tile */
body.t-sterrewag .sc-buy-p { color: var(--sw-red); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
body.t-sterrewag .sc-buy-btn { width: 100%; padding: 13px 16px; letter-spacing: 0.14em; }

/* the close: one painted band, everything stacked on the centre axis, the form
   narrower than the heading above it */
body.t-sterrewag .sc-contact-band { background: var(--sw-deep); padding: 116px 0 132px; border-top: 1px solid var(--line); }
body.t-sterrewag .sc-contact-band .sc-contact-form { max-width: 420px; margin: 0 auto; }
body.t-sterrewag .sc-contact-band .sc-field input, body.t-sterrewag .sc-contact-band .sc-field textarea { background: var(--surface); border-color: var(--line-strong); color: var(--heading); }
body.t-sterrewag .sc-contact-band .sc-contact-form .btn { align-self: center; }

@media (max-width: 1000px) {
  body.t-sterrewag .sc-hero { min-height: 86vh; }
  body.t-sterrewag .sc-strip-row, body.t-sterrewag .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the ground drops the last step to true observatory black, the deep
   closing band goes with it so the footer still separates from the wall above,
   and the red lifts one notch: #c0392c was picked to sit against #121316 and
   goes muddy on black, which is exactly the drift a dim signal red cannot
   afford. Every other surface is a token, so it follows on its own. */
html[data-theme="dark"] body.t-sterrewag {
  background: #08090b;
  color: #a5a9b2;
  --sw-red: #d4453a;
  --sw-flat: #08090b;
  --sw-deep: #030405;
  --header-bg: #08090b;
  --surface: #101215;
  --surface-2: #171a1e;
  --line: rgba(240, 237, 229, 0.1);
  --line-strong: rgba(240, 237, 229, 0.22);
  --heading: #f5f2ea;
  --text: #a5a9b2;
  --muted: #71757e;
}