/* ---- krat (Krat — Specialty produce & weekly veg crates 245) ---------------
   THE STRUCTURAL MOVE: the page swings and never settles. A full-viewport
   photograph, then a hard contraction into one 1040px column of flat-lays on
   seamless white, then full bleed again with a single line of type laid
   straight onto the picture, then a contraction to one sentence on bare ecru —
   and the swing is closed by six squares welded edge to edge with no gutter and
   no ecru showing through. Wet-leaf green is spent on exactly two things, the
   price line and the buttons, so the flat-lays carry every other colour. */
body.t-krat {
  background: #f5f2ea; color: #26231c;
  --bg-flat: #f5f2ea; --surface: #ffffff; --surface-2: #efeadd;
  --line: #e0d7c4; --line-strong: #c9b79a;
  --heading: #17150f; --text: #26231c; --muted: #7a7263; --header-bg: #f5f2ea;
  --kr-green: #3d6b39; --kr-pine: #c9b79a;
}
body.t-krat .sf-head, body.t-krat .sf-header, body.t-krat .sf-foot,
body.t-krat .sf-footer, body.t-krat .sf-cats { background: #f5f2ea; border-color: #e0d7c4; }
body.t-krat .sf-name { text-transform: uppercase; letter-spacing: .28em; font-size: 13px; font-weight: 700; }

/* green 1 of 2 — flat slabs, never an outline */
body.t-krat .btn.brand { background: var(--kr-green); color: #f5f2ea; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-krat .btn.brand:hover { background: #2e5330; color: #f5f2ea; }

/* the whole first screen, three frames, copy dead centre */
body.t-krat .sc-hero { min-height: 100vh; padding: 100px 20px; }
body.t-krat .sc-hero h1 { font-size: clamp(34px, 6vw, 74px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; max-width: 17ch; margin: 0 auto 18px; }

/* section headings small, wide-tracked, always in the ink */
body.t-krat .sc-h2 { color: var(--heading); text-transform: uppercase; letter-spacing: .28em; font-size: 12px; font-weight: 700; line-height: 1.7; margin: 0 0 36px; }

/* THE CONTRACTION — eight flat-lays four across in two rows that fill exactly,
   seamless white behind each, title above and the rand directly under it */
body.t-krat .sc-products { max-width: 1040px; padding: 108px 20px 100px; }
body.t-krat .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; padding: 0; }
body.t-krat .product-card, body.t-krat .product-card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.t-krat .product-card .ph { background: #ffffff; border-radius: 0; }
body.t-krat .product-card .meta { padding: 15px 0 0; text-align: center; }
body.t-krat .product-card .t { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
/* green 2 of 2 */
body.t-krat .product-card .p { color: var(--kr-green); font-size: 14.5px; font-weight: 700; margin-top: 7px; }

/* the story breaks the rhythm — a tight measure left, one photograph right */
body.t-krat .sc-about-split { max-width: 1040px; gap: 64px; padding: 8px 20px 104px; align-items: start; }
body.t-krat .sc-about-media { order: 2; }
body.t-krat .sc-about-media img { border-radius: 0; aspect-ratio: 4 / 5; }
body.t-krat .sc-about-copy p { max-width: 46ch; color: var(--text); font-size: 15.5px; line-height: 1.9; }

/* the crate row — four equal quarters, portrait, still inside the column. The
   heading is the hook: it is what tells this strip from the wall at the close. */
body.t-krat .sc-strip:has(.sc-h2) { max-width: 1040px; padding: 0 20px 104px; }
body.t-krat .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-krat .sc-strip:has(.sc-h2) .sc-strip-img { background: #ffffff; border: 0; border-radius: 0; aspect-ratio: 4 / 5; }
body.t-krat .sc-strip-label { text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 700; margin-top: 15px; }

/* the band — the one line of type laid straight onto the photograph */
body.t-krat .sc-banner { min-height: 66vh; display: flex; align-items: center; justify-content: center; margin: 0 calc(50% - 50vw); padding: 0 24px; }
body.t-krat .sc-banner-inner { max-width: 760px; }
body.t-krat .sc-banner h2 { font-size: clamp(26px, 4.6vw, 58px); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; margin: 0 0 28px; }

/* the breather — one sentence on bare ecru, no heading and no picture */
body.t-krat .sc-richtext { max-width: 660px; padding: 104px 20px; }
body.t-krat .sc-richtext p { color: var(--heading); font-size: clamp(15px, 2vw, 20px); line-height: 1.9; }

/* THE CLOSE — six squares butted edge to edge, no gutter and no caption */
body.t-krat .sc-strip:not(:has(.sc-h2)) { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-krat .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-krat .sc-strip:not(:has(.sc-h2)) .sc-strip-img { border: 0; border-radius: 0; }
body.t-krat .sc-strip:not(:has(.sc-h2)) .sc-strip-label { display: none; }

/* the quiet ask, where the reference put its newsletter — pine hairlines only */
body.t-krat .sc-contact { max-width: 560px; padding: 100px 20px 108px; }
body.t-krat .sc-field label { text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 700; color: var(--muted); }
body.t-krat .sc-field input, body.t-krat .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--kr-pine); border-radius: 0; padding: 12px 2px; color: var(--heading); }

@media (max-width: 860px) {
  body.t-krat .product-grid,
  body.t-krat .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-krat .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* NIGHT — the ecru goes to a cool loam black, the pine hairline drops back and
   the green lifts, because it is still carrying every price and every slab on
   its own. The flat-lay tiles stay pale on purpose: the photographs are shot on
   seamless white and a black tile would cut a hard square out of each one. */
html[data-theme="dark"] body.t-krat {
  background: #141310; color: #c0bbb0;
  --bg-flat: #141310; --surface: #1b1a16; --surface-2: #211f19;
  --line: #2b2822; --line-strong: #3d3830;
  --heading: #f2efe6; --text: #c0bbb0; --muted: #847d70; --header-bg: #141310;
  --kr-green: #82b06d; --kr-pine: #4a4338;
}
html[data-theme="dark"] body.t-krat .sf-head, html[data-theme="dark"] body.t-krat .sf-header,
html[data-theme="dark"] body.t-krat .sf-foot, html[data-theme="dark"] body.t-krat .sf-footer,
html[data-theme="dark"] body.t-krat .sf-cats { background: #141310; border-color: #2b2822; }
html[data-theme="dark"] body.t-krat .btn.brand { color: #121710; }
html[data-theme="dark"] body.t-krat .btn.brand:hover { background: #9dc78a; color: #121710; }
html[data-theme="dark"] body.t-krat .product-card .ph,
html[data-theme="dark"] body.t-krat .sc-strip:has(.sc-h2) .sc-strip-img { background: #ece7dc; }