/* ---- blatjang (Blatjang — Preserves & hot sauce 93) ------------------------
   THE STRUCTURAL MOVE: a double priced spine. The catalogue runs twice, back to
   back, with nothing between the two blocks. The first pass drops its
   photographs altogether and becomes a menu — name left, rand hard right, one
   hairline a row — and the second brings the same eight jars straight back as a
   four-across photo wall, so the pair reads as one long menu that changes its
   mind about pictures halfway down.
   Second move: the hero's call to action is welded to the floor of the stage as
   a bar laid over the photographs rather than sitting under the sub, and the
   banner below carries no top margin, so two full-bleed blocks stack before a
   text column ever appears.
   Ground is bone the whole way through the middle; charcoal is spent only on
   the chrome, the stage and the closing band. Burnt amber lands on prices, on
   the cart badge (free — it comes off var(--brand)) and on the ghost bar's
   rule, nowhere else, which is why the buttons are charcoal slabs and
   .sc-buy-cat is hidden rather than recoloured. The two credential rows are
   told apart by :has(img) — the upper one is six text tiles with no photograph
   in it, the lower one four badges. */
body.t-blatjang {
  background: #f7f2e7;
  color: #3a342b;
  --blj-amber: #b8611a;
  --blj-char: #191712;
  --blj-edge: #2e2a21;
  --surface: #fffdf7;
  --surface-2: #efe8d9;
  --line: #ded5c2;
  --line-strong: #c2b79f;
  --heading: #191712;
  --text: #3a342b;
  --muted: #776e5f;
  --header-bg: #191712;
  --radius: 0;
  --shadow: none;
}

/* charcoal top and tail. The bar is NOT sticky and never goes glassy, so it
   scrolls away and hands the viewport to the photographs. */
body.t-blatjang .sf-header, body.t-blatjang .sf-head,
body.t-blatjang .sf-footer, body.t-blatjang .sf-foot,
body.t-blatjang .sc-contact-band {
  position: static; background: var(--blj-char); color: #ece5d6; border-color: var(--blj-edge);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-blatjang .sf-name, body.t-blatjang .sf-cart, body.t-blatjang .sf-footer a { color: #ece5d6; }
/* the side panel keeps the charcoal, so the pale menu links stay readable */
body.t-blatjang .sf-header-burger.open::before { background: #221f18; border-color: var(--blj-edge); }
body.t-blatjang .btn.brand { background: var(--blj-char); border-color: var(--blj-char); color: #f6f1e5; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; padding: 13px 22px; }
/* on the two dark grounds the slab flips rather than borrowing the accent */
body.t-blatjang .sc-banner .btn.brand, body.t-blatjang .sc-contact-band .btn.brand { background: #f2ece0; border-color: #f2ece0; color: #14120d; }

/* one sans in three weights: 700 small caps for section labels, 400 for copy,
   800 for the price column. No colour here — the band inherits its own ink. */
body.t-blatjang .sc-h2 { text-align: left; text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(11px, 1.3vw, 12.5px); font-weight: 700; margin: 0 0 24px; }

/* THE STAGE — full viewport, three cross-fading photographs, heading centred in
   the middle of it, and the CTA welded to the floor as a bar. The inner wrapper
   is stretched to the full stage so the bar can be pinned to it. */
body.t-blatjang .sc-hero { min-height: 100vh; padding: 0; align-items: stretch; }
body.t-blatjang .sc-hero-inner { max-width: none; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(80px, 12vh, 130px) 20px clamp(130px, 20vh, 210px); }
body.t-blatjang .sc-hero .btn.brand.sc-hero-ghost { position: absolute; left: 50%; bottom: clamp(28px, 6vh, 66px); transform: translateX(-50%); width: min(560px, calc(100% - 40px)); background: rgba(14, 13, 9, 0.66); border-color: var(--blj-amber); color: #f6f1e5; padding: 21px 24px; letter-spacing: 0.26em; }

/* the second full-bleed block, butted straight onto the foot of the stage */
body.t-blatjang .sc-banner { margin: 0 calc(50% - 50vw); min-height: 58vh; display: flex; align-items: flex-end; padding: 70px 28px 58px; }

/* two credential rows of opposite character — six text tiles, then four badges */
body.t-blatjang .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(18px, 3.4vw, 44px); }
body.t-blatjang .sc-strip:has(img) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.t-blatjang .sc-buy-media, body.t-blatjang .sc-buy-cat,
body.t-blatjang .sc-strip-card:not(:has(img)) .sc-strip-img { display: none; }
body.t-blatjang .sc-strip-card:not(:has(img)) { border-top: 1px solid var(--line-strong); padding: 16px 0 34px; text-align: left; }
body.t-blatjang .sc-strip-card:not(:has(img)) .sc-strip-label { margin: 0; font-size: clamp(17px, 2.3vw, 22px); font-weight: 400; letter-spacing: -0.01em; color: var(--heading); }

/* --- THE MENU: first half of the spine, ruled rows, no photographs at all --- */
body.t-blatjang .sc-buygrid { max-width: 880px; padding: clamp(58px, 9vh, 90px) 20px 8px; }
body.t-blatjang .sc-buy-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-strong); }
body.t-blatjang .sc-buy-card { flex-direction: row; align-items: center; gap: clamp(14px, 3vw, 32px); text-align: left; padding: 17px 0 16px; border-bottom: 1px solid var(--line); }
body.t-blatjang .sc-buy-p, body.t-blatjang .product-card .p { margin: 0 0 0 auto; color: var(--blj-amber); font-weight: 800; font-size: clamp(16px, 1.9vw, 20px); font-variant-numeric: tabular-nums; }
body.t-blatjang .sc-buy-form, body.t-blatjang .sc-buy-btn { margin: 0; }
/* --- second half: the same eight jars, four across, gaps down to a hairline --- */
body.t-blatjang .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 8px 0 clamp(54px, 8vh, 84px); }

/* the pull quote: one oversized line over a dark photograph, attribution under */
body.t-blatjang .sc-about-overlay .sc-h2 { text-align: center; text-transform: none; letter-spacing: -0.025em; font-size: clamp(25px, 4.2vw, 46px); font-weight: 400; line-height: 1.22; margin: 0 0 28px; }
body.t-blatjang .sc-about-overlay p { text-transform: uppercase; letter-spacing: 0.22em; font-size: 10.5px; color: rgba(246, 241, 229, 0.7); }

/* the closing band: address and hours on the left, three fields on the right */
body.t-blatjang .sc-contact-band-inner { max-width: 1000px; display: grid; grid-template-columns: 1fr 1.15fr; column-gap: clamp(30px, 6vw, 80px); row-gap: 14px; text-align: left; align-items: start; }
body.t-blatjang .sc-contact-band .sc-contact-form { grid-column: 2; grid-row: 1 / span 2; }
body.t-blatjang .sc-contact-band .sc-contact-sub { color: #c7bfae; margin: 0; max-width: 34ch; }
body.t-blatjang .sc-contact-band .sc-field input, body.t-blatjang .sc-contact-band .sc-field textarea { background: #221f18; border-color: #3a352a; color: #f2ece0; }

@media (max-width: 860px) {
  body.t-blatjang .sc-strip-row, body.t-blatjang .sc-strip:has(img) .sc-strip-row,
  body.t-blatjang .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-blatjang .sc-contact-band-inner { grid-template-columns: 1fr; }
  body.t-blatjang .sc-contact-band .sc-contact-form { grid-column: 1; grid-row: auto; }
}

/* NIGHT — the bone middle goes to a dark roast, the amber lifts a step to hold
   against it, and the charcoal slabs flip to bone because charcoal-on-charcoal
   would disappear. Everything else follows the tokens. */
html[data-theme="dark"] body.t-blatjang {
  background: #14120d;
  color: #c6bfb0;
  --blj-amber: #e08a2e;
  --blj-char: #0c0b07;
  --blj-edge: #2c2820;
  --surface: #1c1913;
  --surface-2: #23201a;
  --line: #322d24;
  --line-strong: #453f33;
  --heading: #f6f1e5;
  --text: #c6bfb0;
  --muted: #8f8779;
  --header-bg: #0c0b07;
}
html[data-theme="dark"] body.t-blatjang .btn.brand { background: #f2ece0; border-color: #f2ece0; color: #14120d; }