/* ---- kombuis (Kombuis — Recipe boxes & pantry kits 164) ---------------------
   THE STRUCTURAL MOVE: nothing bleeds. The page opens on a CONTAINED landscape
   banner — paper showing on all four sides, copy set left inside the picture —
   and every block that normally escapes to the viewport edge is pulled back
   onto the same 1080px measure: the editorial run, the promo band, even the
   closing sign-up strip. So the catalogue arrives twice down one column of
   paper, first as full-width alternating rows with an excerpt and no grid at
   all, then as eight tiles four across. Bone ground with an oat undertone,
   olive-brown ink rather than black so food photography sits warm on it, and
   one burnt paprika spent on the category labels and the rule under each price. */
body.t-kombuis { background: #f7f3e8; color: #26261a; }
body.t-kombuis .sf-header, body.t-kombuis .sf-footer { background: #f7f3e8; border-color: #e2dbc8; }
body.t-kombuis .btn.brand { background: #a8492a; color: #f9f6ee; }
body.t-kombuis .btn.brand:hover { background: #8b3a1f; }
body.t-kombuis .sc-h2 { text-align: left; font-weight: 600; letter-spacing: -0.01em; color: #26261a; }

/* the opener is a photograph ON the page, not a stage behind it */
body.t-kombuis .sc-hero { max-width: 1080px; width: calc(100% - 40px); margin: clamp(22px, 4vw, 46px) auto 0; min-height: 56vh; padding: clamp(34px, 6vw, 74px); }
body.t-kombuis .sc-hero-inner { max-width: 30ch; }

/* the editorial feed: full-width rows held to the same measure, landscape
   crops instead of the default portrait, a paprika hairline under each price */
body.t-kombuis .sc-lookbook { max-width: 1080px; margin: 0 auto; padding: clamp(38px, 5vw, 70px) 20px 6px; }
body.t-kombuis .sc-lookbook > .container { padding: 0; }
body.t-kombuis .sc-look-row { grid-template-columns: 1.12fr 1fr; margin-bottom: clamp(26px, 4vw, 54px); }
body.t-kombuis .sc-look-media img { aspect-ratio: 3 / 2; }
body.t-kombuis .sc-look-p { width: max-content; padding-bottom: 9px; border-bottom: 1px solid #a8492a; }

/* eight category tiles, four across in two gapped rows — the vertical gap
   between the two strips is set to the column gap so they read as one grid,
   and every label sits in a scrim over the picture rather than under it */
body.t-kombuis .sc-strip { padding: clamp(24px, 4vw, 48px) 20px 0; }
body.t-kombuis .sc-strip + .sc-strip { padding-top: 16px; }
body.t-kombuis .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.t-kombuis .sc-strip-card { position: relative; }
body.t-kombuis .sc-strip-img { aspect-ratio: 3 / 2; border: 0; border-radius: 0; }
body.t-kombuis .sc-strip-label { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 0 10px; background: rgba(22, 22, 14, 0.34); color: #f7f3e8; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* the only asymmetric row on the page */
body.t-kombuis .sc-about-split { grid-template-columns: 65fr 35fr; gap: clamp(24px, 4vw, 54px); padding-top: clamp(44px, 6vw, 84px); }

/* the promo band gives up its full bleed and joins the measure */
body.t-kombuis .sc-banner { width: auto; max-width: none; margin: clamp(26px, 4vw, 52px) 0; padding: clamp(52px, 7vw, 88px) 28px; }

/* four across, so eight kits land as two rows that fill */
body.t-kombuis .sc-buy-grid { grid-template-columns: repeat(4, 1fr); }

/* the pull-quote stands alone above the band. The author block renders as
   .sc-about-split, so plain .sc-richtext reaches only this one */
body.t-kombuis .sc-richtext { max-width: 900px; padding: clamp(54px, 8vw, 104px) 20px; }
body.t-kombuis .sc-richtext p { font-size: clamp(21px, 3vw, 34px); line-height: 1.34; color: #26261a; }

/* the sign-up box widened into a band, still standing inside the margin */
body.t-kombuis .sc-contact-band { background: #efe7d5; max-width: 1080px; width: calc(100% - 40px); margin: clamp(30px, 4vw, 58px) auto 0; padding: clamp(40px, 5vw, 66px) clamp(24px, 4vw, 56px); }
body.t-kombuis .sc-contact-band-inner { max-width: 560px; margin-left: 0; padding: 0; text-align: left; }

@media (max-width: 860px) {
  body.t-kombuis .sc-strip-row { grid-template-columns: 1fr 1fr; }
  body.t-kombuis .sc-buy-grid { grid-template-columns: 1fr 1fr; }
  body.t-kombuis .sc-look-row { grid-template-columns: 1fr; }
}

/* night — the paper goes to burnt olive and the paprika lifts to a clay orange
   so the category labels and the price rules survive on it */
html[data-theme="dark"] body.t-kombuis { background: #14140d; color: #c8c2ae; }
html[data-theme="dark"] body.t-kombuis .sf-header, html[data-theme="dark"] body.t-kombuis .sf-footer { background: #14140d; border-color: #2b281d; }
html[data-theme="dark"] body.t-kombuis .sc-h2, html[data-theme="dark"] body.t-kombuis .sc-richtext p { color: #f1ebd9; }
html[data-theme="dark"] body.t-kombuis .btn.brand { background: #d1663d; color: #14140d; }
html[data-theme="dark"] body.t-kombuis .btn.brand:hover { background: #e07b52; }
html[data-theme="dark"] body.t-kombuis .sc-look-cat, html[data-theme="dark"] body.t-kombuis .sc-buy-cat { color: #d1663d; }
html[data-theme="dark"] body.t-kombuis .sc-look-p { border-bottom-color: #d1663d; }
html[data-theme="dark"] body.t-kombuis .sc-contact-band { background: #1e1b13; }
html[data-theme="dark"] body.t-kombuis .sc-strip-label { background: rgba(8, 8, 4, 0.46); }