/* ---- sampioen (Sampioen — Mushroom farm & grow kits 268) -------------------
   THE STRUCTURAL MOVE: the opener is a BAND, not a screen. The three-slide
   carousel is capped at two thirds of the window so the four-across picture
   rail welded underneath it — no gutter between the tiles, no gutter between
   the rail and the hero — is already in frame at the fold. After that the page
   keeps one beat: a narrow centred column on oat, a white cut-out catalogue,
   full-bleed peat, a white box row welded into one line, full-bleed peat again,
   and a peat contact band whose three fields and slab are a single welded bar.
   Oyster pink does three jobs only — the slabs, the rand figure and the submit.
   No gradients, no second accent, and deliberately no green on a mushroom farm.
   (--sm-ink-pink is that same accent darkened so it is legible as type on oat.) */
body.t-sampioen {
  background: #f3ede2; color: #221d18;
  --bg-flat: #f3ede2; --surface: #ffffff; --surface-2: #eae2d4;
  --line: #ddd3c1; --line-strong: #c3b6a0;
  --heading: #16120f; --text: #221d18; --muted: #7c7264; --header-bg: #f3ede2;
  --sm-peat: #221d18; --sm-pink: #d98f7e; --sm-ink-pink: #a85a45; --sm-oat: #f3ede2;
}
body.t-sampioen .sf-head, body.t-sampioen .sf-header, body.t-sampioen .sf-foot,
body.t-sampioen .sf-footer, body.t-sampioen .sf-cats { background: #f3ede2; border-color: #ddd3c1; }
body.t-sampioen .sf-name { text-transform: uppercase; letter-spacing: .3em; font-size: 12.5px; font-weight: 700; }

/* pink 1 of 3 — flat slabs, never an outline */
body.t-sampioen .btn.brand { background: var(--sm-pink); color: #221d18; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 700; padding: 16px 32px; }
body.t-sampioen .btn.brand:hover { background: #c87b68; color: #221d18; }

/* THE BAND OPENER — two thirds of the window and not a pixel more, so the rail
   below it is already showing before anybody scrolls */
body.t-sampioen .sc-hero { min-height: 66vh; padding: 92px 20px; }
body.t-sampioen .sc-hero h1 { font-size: clamp(30px, 5vw, 58px); font-weight: 700; letter-spacing: -.03em; line-height: 1.06; max-width: 17ch; margin: 0 auto 16px; }

/* the centred punctuation stack, used everywhere a heading appears */
body.t-sampioen .sc-h2 { color: var(--heading); font-size: clamp(22px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 22px; }
body.t-sampioen .sc-richtext { max-width: 560px; padding: 96px 20px; }
body.t-sampioen .sc-richtext p { max-width: 520px; margin: 0 auto; color: var(--text); font-size: 16.5px; line-height: 1.9; }

/* THE RAIL — four tiles welded to each other and to the hero, one word each */
body.t-sampioen .sc-strip:not(:has(.sc-h2)) { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0 0 6px; }
body.t-sampioen .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-sampioen .sc-strip:not(:has(.sc-h2)) .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 5 / 4; }
body.t-sampioen .sc-strip-label { text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 700; color: var(--muted); margin-top: 12px; }

/* THE BOX ROW — four white cards butted into one gapless line, contained */
body.t-sampioen .sc-strip:has(.sc-h2) { max-width: 1180px; padding: 0 20px 104px; }
body.t-sampioen .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-sampioen .sc-strip:has(.sc-h2) .sc-strip-img { background: #ffffff; border: 0; border-radius: 0; aspect-ratio: 1; }
body.t-sampioen .sc-strip:has(.sc-h2) .sc-strip-label { background: #ffffff; color: var(--heading); letter-spacing: .12em; font-size: 11px; margin: 0; padding: 17px 12px 24px; }

/* THE CATALOGUE — eight cut-outs four across in two rows that fill exactly,
   each floating on pure white with the type centred beneath it */
body.t-sampioen .sc-products, body.t-sampioen .sc-buygrid { max-width: 1180px; padding: 100px 20px 96px; }
body.t-sampioen .product-grid, body.t-sampioen .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 54px 30px; padding: 0; }
body.t-sampioen .sc-buy-media, body.t-sampioen .product-card .ph { background: #ffffff; border: 0; border-radius: 0; padding: 20px; }
body.t-sampioen .sc-buy-cat { color: var(--muted); letter-spacing: .22em; font-size: 10px; margin-top: 16px; }
/* pink 2 of 3 — the rand figure, darkened just enough to read on oat */
body.t-sampioen .sc-buy-p, body.t-sampioen .product-card .p { color: var(--sm-ink-pink); font-size: 14.5px; font-weight: 700; }

/* THE TWO BREAKS — peat over a photograph, copy dead centre both times */
body.t-sampioen .sc-banner { min-height: 62vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); padding: 0 24px; }
body.t-sampioen .sc-banner h2 { color: var(--sm-oat); font-size: clamp(26px, 4.4vw, 50px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 18px; }
/* the statement band carries no paragraph at all — one big line and a ghost */
body.t-sampioen .sc-banner:not(:has(p)) h2 { font-size: clamp(30px, 5.4vw, 62px); max-width: 19ch; margin: 0 auto 32px; }
body.t-sampioen .sc-banner:not(:has(p)) .btn.brand { background: transparent; color: var(--sm-oat); box-shadow: inset 0 0 0 1px rgba(243, 237, 226, .7); }

/* THE CLOSE — peat wall, and the form is one welded bar with no gap in it */
body.t-sampioen .sc-contact-band { background: var(--sm-peat); padding: 96px 0 104px; }
body.t-sampioen .sc-contact-band-inner { max-width: 880px; }
body.t-sampioen .sc-contact-band .sc-h2, body.t-sampioen .sc-contact-band .sc-contact-sub { color: var(--sm-oat); margin: 0 0 26px; }
body.t-sampioen .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: 1fr 1fr 1.5fr auto; gap: 0; align-items: stretch; }
body.t-sampioen .sc-contact-band .sc-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.t-sampioen .sc-contact-band .sc-field input, body.t-sampioen .sc-contact-band .sc-field textarea { background: rgba(243, 237, 226, .06); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(243, 237, 226, .2); color: var(--sm-oat); height: 56px; padding: 0 16px; resize: none; }
/* pink 3 of 3 — flush against the last field, no gap and no card around it */
body.t-sampioen .sc-contact-band .sc-contact-form .btn { align-self: stretch; height: 56px; margin: 0; padding: 0 36px; }

@media (max-width: 900px) {
  body.t-sampioen .product-grid, body.t-sampioen .sc-buy-grid,
  body.t-sampioen .sc-strip:has(.sc-h2) .sc-strip-row,
  body.t-sampioen .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-sampioen .sc-contact-band .sc-contact-form { grid-template-columns: 1fr; }
}

/* NIGHT — the oat paper drops to a dark loam, the pink lifts a stop because it
   is still carrying every price and every slab on its own, and the peat goes
   one shade blacker so the two full-bleed bands and the contact wall still read
   as darker than the page around them. The catalogue and box-row tiles stay
   pale on purpose: those flat-lays are shot on white and a black tile would cut
   a hard square out of every one of them. */
html[data-theme="dark"] body.t-sampioen {
  background: #17140f; color: #c3bbad;
  --bg-flat: #17140f; --surface: #1e1a15; --surface-2: #241f18;
  --line: #2d2820; --line-strong: #40392e;
  --heading: #f4efe4; --text: #c3bbad; --muted: #857c6d; --header-bg: #17140f;
  --sm-peat: #0e0c09; --sm-pink: #e5a08e; --sm-ink-pink: #e5a08e; --sm-oat: #f4efe4;
}
html[data-theme="dark"] body.t-sampioen .sf-head, html[data-theme="dark"] body.t-sampioen .sf-header,
html[data-theme="dark"] body.t-sampioen .sf-foot, html[data-theme="dark"] body.t-sampioen .sf-footer,
html[data-theme="dark"] body.t-sampioen .sf-cats { background: #17140f; border-color: #2d2820; }
html[data-theme="dark"] body.t-sampioen .sc-buy-media, html[data-theme="dark"] body.t-sampioen .product-card .ph,
html[data-theme="dark"] body.t-sampioen .sc-strip:has(.sc-h2) .sc-strip-img,
html[data-theme="dark"] body.t-sampioen .sc-strip:has(.sc-h2) .sc-strip-label { background: #ece5d8; color: #17140f; }