/* ---- suikerbos (Suikerbos — Nougat, fudge & Turkish delight 304) -----------
   THE STRUCTURAL MOVE: the hero is not a banner. The slide stack is un-absoluted
   into a NARROW LEFT COLUMN of four uncaptioned pictures at a 10px gap with
   deliberately mismatched heights, the right half of the screen left as bare
   blush ground, and the h1 set in a solid blush plaque pinned to the BOTTOM-LEFT
   corner of the first picture — translateY(-100%), so it lands on that edge
   whatever the type does. The scrim baked into the hero layer is sized to 0 0
   so the pictures stay bright. Under it the catalogue runs as a staggered
   two-column masonry, captions BELOW the picture with the title above the
   category line, and a fixed mat frames all four edges over the sticky header.
   Two colours only — sugar blush #f5e3da and near-black #171310 — with the
   flat-lays lifted onto plain white cards so each tile cuts out of the ground. */
body.t-suikerbos {
  background: #f5e3da; color: #171310;
  --radius: 0;
  --header-bg: #f5e3da;
  --surface: #f5e3da;
  --surface-2: #eed6ca;
  --line: #e3c8bb;
  --line-strong: #c9a493;
  --heading: #171310;
  --text: #171310;
  --muted: #6d5a52;
  --brand: #171310;
  --sbs-col: min(560px, 47vw);
  --sbs-first: clamp(250px, 36vh, 420px);
  --sbs-pad: clamp(26px, 4vh, 54px);
  --sbs-gut: clamp(20px, 5vw, 74px);
}
/* THE MAT — a frame drawn over all four edges, above the sticky header */
body.t-suikerbos::after { content: ''; position: fixed; inset: 0; z-index: 60; border: clamp(9px, 1.2vw, 18px) solid #ead2c6; pointer-events: none; }
body.t-suikerbos .sf-header, body.t-suikerbos .sf-footer { background: #f5e3da; border-color: #e3c8bb; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-suikerbos .btn.brand { background: #171310; border-color: #171310; color: #f5e3da; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600; padding: 16px 30px; }
body.t-suikerbos .sc-h2 { text-align: left; font-size: clamp(19px, 2.4vw, 27px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: clamp(18px, 2.6vw, 34px); }

/* THE LEFT STACK — four pictures down one narrow column, nothing beside them */
body.t-suikerbos .sc-hero { display: block; background-color: #f5e3da; padding: var(--sbs-pad) 20px clamp(46px, 7vh, 92px) var(--sbs-gut); }
body.t-suikerbos .sc-hero:has(.sc-hero-slides) { background-size: 0 0; }
body.t-suikerbos .sc-hero-slides { position: static; display: grid; gap: 10px; width: var(--sbs-col); }
body.t-suikerbos .sc-hero-slide { position: static; opacity: 1; height: clamp(150px, 22vh, 260px); background-size: 0 0, cover; }
body.t-suikerbos .sc-hero-slide:nth-child(1) { height: var(--sbs-first); }
body.t-suikerbos .sc-hero-slide:nth-child(4) { height: clamp(260px, 40vh, 460px); }
body.t-suikerbos .sc-hero-inner { position: absolute; z-index: 2; top: calc(var(--sbs-pad) + var(--sbs-first)); left: var(--sbs-gut); transform: translateY(-100%); width: min(400px, calc(var(--sbs-col) - 40px)); max-width: none; margin: 0; background: #f5e3da; padding: 22px 26px 24px; }
body.t-suikerbos .sc-hero h1 { color: #171310; font-size: clamp(23px, 2.9vw, 34px); font-weight: 600; line-height: 1.16; letter-spacing: -0.02em; text-shadow: none; margin: 0 0 16px; }
body.t-suikerbos .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 0; box-shadow: inset 0 -1px 0 #171310; color: #171310; padding: 7px 1px; }

/* THE STAGGERED WALL — two columns, real gutters, caption under the picture with
   the title above the category line (order 3 / 4 reverses the markup, which puts
   the category and the price after the name without touching the header) */
body.t-suikerbos .sc-mas-grid { column-count: 2; column-gap: clamp(20px, 3.2vw, 42px); }
body.t-suikerbos .sc-mas-item { display: flex; flex-direction: column; margin: 0 0 clamp(26px, 3.4vw, 46px); }
body.t-suikerbos .sc-mas-media, body.t-suikerbos .sc-strip-img { background: #ffffff; border: 0; padding: clamp(9px, 1.3vw, 18px); }
body.t-suikerbos .sc-mas-item:hover .sc-mas-media img, body.t-suikerbos .sc-strip-card:hover .sc-strip-img img { transform: none; }
body.t-suikerbos .sc-mas-t { margin-top: 15px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
body.t-suikerbos .sc-mas-cat, body.t-suikerbos .sc-strip-label { order: 3; margin-top: 6px; color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
body.t-suikerbos .sc-mas-p { order: 4; margin-top: 10px; color: #171310; font-size: 13px; letter-spacing: 0.05em; }

/* the 50/50 spine said once more: one tall picture, one short column of words */
body.t-suikerbos .sc-about-media img { aspect-ratio: 3 / 4; max-width: 400px; }
body.t-suikerbos .sc-contact-lead p { white-space: pre-line; }

@media (max-width: 900px) { body.t-suikerbos { --sbs-col: 100%; } }
@media (max-width: 620px) { body.t-suikerbos .sc-mas-grid { column-count: 1; } }

/* NIGHT — the shop after closing: the blush ground becomes the ink and the ink
   becomes the light. The tiles stay bright, because a flat-lay of pale nougat on
   a dark card stops reading as a cut-out card at all. */
html[data-theme="dark"] body.t-suikerbos {
  background: #181210; color: #f2ded4;
  --header-bg: #181210; --surface: #181210; --surface-2: #221a17;
  --line: #302422; --line-strong: #493833; --heading: #f7e7de; --text: #f2ded4; --muted: #a08a80; --brand: #f2ded4;
}
html[data-theme="dark"] body.t-suikerbos::after { border-color: #241a17; }
html[data-theme="dark"] body.t-suikerbos .sf-header, html[data-theme="dark"] body.t-suikerbos .sf-footer { background: #181210; border-color: #302422; }
html[data-theme="dark"] body.t-suikerbos .btn.brand, html[data-theme="dark"] body.t-suikerbos .sf-cart .badge { background: #f2ded4; border-color: #f2ded4; color: #181210; }
html[data-theme="dark"] body.t-suikerbos .sc-hero { background-color: #181210; }
html[data-theme="dark"] body.t-suikerbos .sc-hero-inner { background: #181210; }
html[data-theme="dark"] body.t-suikerbos .sc-hero h1 { color: #f7e7de; }
html[data-theme="dark"] body.t-suikerbos .sc-hero .btn.brand.sc-hero-ghost { background: transparent; box-shadow: inset 0 -1px 0 #f2ded4; color: #f2ded4; }
html[data-theme="dark"] body.t-suikerbos .sc-mas-media, html[data-theme="dark"] body.t-suikerbos .sc-strip-img { background: #efe1d9; }
html[data-theme="dark"] body.t-suikerbos .sc-mas-p { color: #f7e7de; }