/* ---- kremetart (Kremetart — Baobab & moringa powders 220) ------------------
   THE STRUCTURAL MOVE: ONLY THE CATALOGUE IS GRIDDED. Every other band on the
   page gives up its container and runs to the window edges — the four-tile
   strip welded gapless onto the floor of the full-viewport stage with its
   labels fused into one unbroken bark-brown band, the grower story with its
   photograph bleeding off the left edge, and the promotional band and the
   closing contact strip both inverted to bark-brown edge to edge with the
   footer painted the same colour so nothing opens underneath. The eight-tile
   buy grid is the one object that steps back inside the 1080px measure with
   real gutters, four white tiles across in two rows that fill, so the only
   gapped thing on the page is the only thing you can actually buy. Chalk
   limewash ground, bark-brown ink, and one dusty moringa green spent on the
   ghost outline, the category labels and the controls on the dark bands. */
body.t-kremetart {
  background: #f1ebdf;
  color: #3a2e21;
  --km-green: #5f7b48;
  --km-bark: #241b12;
  --bg-flat: #f1ebdf;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --line: #ddd3bf;
  --line-strong: #c6b99f;
  --heading: #241b12;
  --text: #3a2e21;
  --muted: #7a6b58;
  --header-bg: #f1ebdf;
  --radius: 0;
  --shadow: none;
}

/* the bar dissolves into the limewash — no panel, no blur, nothing moved */
body.t-kremetart .sf-header, body.t-kremetart .sf-head, body.t-kremetart .sf-cats {
  background: #f1ebdf; border-color: #ddd3bf;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* flat bark slabs, no border and no shadow */
body.t-kremetart .btn.brand {
  background: var(--km-bark); border: 0; box-shadow: none; color: #f4efe3;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 16px 34px;
}

/* the stage owns the whole first screen; the strip welds onto its floor */
body.t-kremetart .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-kremetart .sc-hero h1 {
  font-weight: 400; font-size: clamp(33px, 5.8vw, 72px); line-height: 1.08;
  letter-spacing: -0.01em; margin: 0 0 22px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
body.t-kremetart .sc-hero p {
  color: rgba(244, 238, 226, 0.94); font-size: clamp(11.5px, 1.4vw, 13.5px);
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 2.1; max-width: 560px; margin: 0 auto 34px;
}
/* a moringa hairline drawn on the photograph rather than a slab pasted over it */
body.t-kremetart .sc-hero .btn.brand.sc-hero-ghost {
  background: transparent; border: 1px solid rgba(178, 204, 148, 0.9); color: #e2ecd6; letter-spacing: 0.22em;
}

body.t-kremetart .sc-h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--heading); margin-bottom: 30px;
}

/* THE WELD — pod, leaf, stone, cup, four across with no gutter and no card */
body.t-kremetart .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-kremetart .sc-strip .sc-h2 { padding: 92px 20px 30px; margin: 0; }
body.t-kremetart .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-kremetart .sc-strip-img { aspect-ratio: 4 / 5; border: 0; background: #e8e0d0; }
body.t-kremetart .sc-strip-label {
  margin: 0; padding: 19px 22px 22px; background: var(--km-bark); color: #e6dcc4;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700;
}

/* the grower story — photograph bleeding off the left edge, copy on the right */
body.t-kremetart .sc-about-split {
  max-width: none; padding: 0; gap: 0; align-items: stretch; grid-template-columns: 1.05fr 1fr;
}
body.t-kremetart .sc-about-media img { aspect-ratio: auto; height: 100%; min-height: 64vh; }
body.t-kremetart .sc-about-copy { align-self: center; padding: 94px clamp(24px, 6vw, 110px); }

/* THE ONE GRIDDED OBJECT — eight tiles, four across, two rows that fill */
body.t-kremetart .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 26px; }
body.t-kremetart .sc-buy-p { color: var(--heading); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }

/* the promotional band, welded flush and multiplied down into bark-brown */
body.t-kremetart .sc-banner {
  margin: 0 calc(50% - 50vw); min-height: 60vh; padding: 96px 28px;
  background-color: var(--km-bark); background-blend-mode: multiply, multiply;
}

/* the close — a wide strip of hairlines, not a boxed form in a column */
body.t-kremetart .sc-contact-band { background: var(--km-bark); color: #e6dcc4; padding: 96px 0 92px; }
body.t-kremetart .sc-contact-band-inner { max-width: none; text-align: left; }
body.t-kremetart .sc-contact-band .sc-h2,
body.t-kremetart .sc-contact-band .sc-contact-sub,
body.t-kremetart .sc-contact-band .sc-field label { color: #ecdfc8; }
body.t-kremetart .sc-contact-band .sc-field input, body.t-kremetart .sc-contact-band .sc-field textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(236, 223, 200, 0.34);
  padding: 9px 0; color: #f4efe3; max-width: 640px;
}
body.t-kremetart .sc-contact-band .btn.brand, body.t-kremetart .sc-banner .btn.brand {
  background: var(--km-green); color: #f4f1e6;
}
body.t-kremetart .sf-footer, body.t-kremetart .sf-foot {
  margin-top: 0; background: var(--km-bark); border-top: 0; color: #a8977c;
}

@media (max-width: 900px) {
  body.t-kremetart .sc-strip-row, body.t-kremetart .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kremetart .sc-about-split { grid-template-columns: 1fr; }
  body.t-kremetart .sc-about-media img { min-height: 44vh; }
  body.t-kremetart .sc-about-copy { padding: 54px 20px 64px; }
}

/* NIGHT — the limewash drops to wet bark and the ink inverts to bone, so the
   two dark bands stop being the exception and the page reads as one brown
   room. The moringa lifts to a dried-leaf green so the labels and the send
   button stay the single coloured thing, and the brand slab flips to bone,
   because a bark slab on a bark ground is a button nobody can see. */
html[data-theme="dark"] body.t-kremetart {
  background: #1a140e;
  color: #d9cdb8;
  --km-green: #9cbb7c;
  --km-bark: #100c08;
  --bg-flat: #1a140e;
  --surface: #241c14;
  --surface-2: #241c14;
  --line: #33291d;
  --line-strong: #493c2b;
  --heading: #f4ecda;
  --text: #d9cdb8;
  --muted: #9a8a72;
  --header-bg: #1a140e;
}
html[data-theme="dark"] body.t-kremetart .sf-header, html[data-theme="dark"] body.t-kremetart .sf-head,
html[data-theme="dark"] body.t-kremetart .sf-cats { background: #1a140e; border-color: #33291d; }
html[data-theme="dark"] body.t-kremetart .btn.brand { background: #e9dfc9; color: #1a140e; }
html[data-theme="dark"] body.t-kremetart .sc-strip-img { background: #241c14; }
html[data-theme="dark"] body.t-kremetart .sc-strip-label { background: #100c08; color: #c9b99c; }
html[data-theme="dark"] body.t-kremetart .sc-buy-cat { color: var(--km-green); }
html[data-theme="dark"] body.t-kremetart .sc-contact-band { background: #100c08; }
html[data-theme="dark"] body.t-kremetart .sf-footer, html[data-theme="dark"] body.t-kremetart .sf-foot { background: #100c08; color: #8d7d66; }