/* ---- luik (Luik — Jaffle truck & hatch counter 341) -------------------------
   THE STRUCTURAL MOVE: the whole page is a hatch, not a poster. The opener is a
   60vh image BAND — deliberately not a full-viewport screen and not a slider —
   with the copy pushed down onto a scrim across its lower third, and welded
   straight onto that bottom edge is a gapless six-tile counter strip: six
   squares, zero gutters anywhere, one word under each. The anchor block is
   eight SQUARE tiles in a gapped 4x2 grid carrying nothing but a name and a
   rand figure. Charcoal griddle steel wall to wall, warm bone type, and the
   mustard-amber is spent on exactly three things: the hero button, the price
   under each tile, and the six strip labels. Nothing else gets it. */
body.t-luik {
  background: #211f1b;
  color: #cdc4b4;
  --surface: #211f1b;
  --surface-2: #2a2723;
  --line: #38342e;
  --line-strong: #4a453d;
  --heading: #f6efe1;
  --text: #cdc4b4;
  --muted: #948b7c;
  --header-bg: #211f1b;
  --radius: 0;
  --shadow: none;
}
/* solid on its own ground, the way a truck stands on tar — never floating */
body.t-luik .sf-header, body.t-luik .sf-footer { background: #211f1b; border-color: #38342e; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-luik .sf-cart .badge { background: transparent; color: #f6efe1; box-shadow: none; padding: 0; margin-left: 7px; font-weight: 700; }
/* every slab is bone; the amber is held back for the hero button alone */
body.t-luik .btn.brand { background: #efe6d5; border-color: #efe6d5; color: #201e1a; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 700; padding: 13px 24px; }
body.t-luik .btn.brand:hover { background: #fff8ea; border-color: #fff8ea; opacity: 1; }
body.t-luik .sc-h2 { text-align: left; text-transform: uppercase; letter-spacing: 0.24em; font-weight: 700; font-size: clamp(10.5px, 1.2vw, 12.5px); color: #948b7c; }

/* THE BAND — 60vh, copy down on the lower third, and no full screen anywhere */
body.t-luik .sc-hero { min-height: 60vh; align-items: flex-end; padding: 92px 20px 52px; }
body.t-luik .sc-hero::after { content: ''; position: absolute; inset: 42% 0 0; background: linear-gradient(rgba(18, 17, 15, 0), rgba(18, 17, 15, 0.9)); }
body.t-luik .sc-hero h1 { text-transform: uppercase; letter-spacing: 0.01em; font-weight: 800; font-size: clamp(26px, 4.8vw, 58px); line-height: 1.05; text-shadow: none; }
body.t-luik .sc-hero p { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; margin-bottom: 22px; text-shadow: none; }
body.t-luik .sc-hero .btn.brand { background: #e79a1b; border-color: #e79a1b; color: #1a1714; }
body.t-luik .sc-hero .btn.brand:hover { background: #f7b03b; border-color: #f7b03b; }

/* THE COUNTER — pressed onto the bottom of the band: six squares, zero gutters */
body.t-luik .sc-strip { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0 0 30px; }
body.t-luik .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-luik .sc-strip-img { aspect-ratio: 1; border: 0; }
body.t-luik .sc-strip-label { margin: 0; padding: 11px 6px 0; color: #e79a1b; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; font-weight: 700; }

/* THE GRID — eight squares, 4x2, roughly 80/20 picture to type and no captions */
body.t-luik .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px; }
body.t-luik .sc-buy-media img { aspect-ratio: 1; }
body.t-luik .sc-buy-cat { display: none; }
body.t-luik .sc-buy-t { margin-top: 13px; font-size: 14px; }
body.t-luik .sc-buy-p { margin-top: 3px; font-size: 14px; font-weight: 700; color: #e79a1b; }
body.t-luik .sc-buy-btn { padding: 9px 18px; font-size: 9.5px; }

/* the one centred thing on the page, and the only break in the rhythm */
body.t-luik .sc-banner { margin: 26px calc(50% - 50vw); min-height: 46vh; display: flex; align-items: center; justify-content: center; }
body.t-luik .sc-banner h2 { text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800; font-size: clamp(19px, 3vw, 36px); text-shadow: none; }
body.t-luik .sc-about-media img { aspect-ratio: 3 / 4; }

/* the close: one dark band the width of the street, headings hard left */
body.t-luik .sc-contact-band { background: #171613; padding: 58px 0 66px; }
body.t-luik .sc-contact-band-inner { max-width: 100%; text-align: left; }

@media (max-width: 900px) {
  body.t-luik .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-luik .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the Bellville station lot after four: the steel goes to tar, the bone
   holds, and the amber comes up a shade so it still reads as a lit hatch. */
html[data-theme="dark"] body.t-luik {
  background: #121110;
  color: #d3caba;
  --surface: #121110;
  --surface-2: #1c1a17;
  --line: #292520;
  --line-strong: #3b352d;
  --heading: #f8f1e3;
  --text: #d3caba;
  --muted: #8d8474;
  --header-bg: #121110;
  --radius: 0;
  --shadow: none;
}
html[data-theme="dark"] body.t-luik .sf-header, html[data-theme="dark"] body.t-luik .sf-footer { background: #121110; border-color: #292520; }
html[data-theme="dark"] body.t-luik .sc-contact-band { background: #0b0a09; }
html[data-theme="dark"] body.t-luik .sc-hero::after { background: linear-gradient(rgba(9, 8, 7, 0), rgba(9, 8, 7, 0.92)); }
html[data-theme="dark"] body.t-luik .sc-strip-label, html[data-theme="dark"] body.t-luik .sc-buy-p { color: #f7b03b; }
html[data-theme="dark"] body.t-luik .btn.brand { background: #f2ead9; border-color: #f2ead9; color: #121110; }
html[data-theme="dark"] body.t-luik .btn.brand:hover { background: #ffffff; border-color: #ffffff; }
html[data-theme="dark"] body.t-luik .sc-hero .btn.brand { background: #f7b03b; border-color: #f7b03b; color: #14120f; }