/* ============================== KAARS ==============================
   THE STRUCTURAL MOVE: the four category pictures TOUCH. The strip is pulled
   out of the 1080 container to the full window, its gutter is taken to zero,
   the tile borders come off and the labels are set over the bottom of each
   frame instead of under it — so the band reads as one continuous photograph
   four frames wide rather than as four gapped cards. The hero above it is held
   to 68vh ON PURPOSE, short of a screen, so that band is already showing
   before anybody scrolls. Below it the page collapses back into the container
   for a small-tile grid, then breaks out once for an umber banner and once
   more for the umber foot. Cream and honey; no true black on the page.
   Nothing here touches header order, position or alignment — type and colour
   only. The showcase checkerboard is inherited free: --surface and --surface-2
   are already the cream and the oat, so no rule is spent on it. */
body.t-kaars {
  background: #f5eddd;
  color: #3a2c1e;
  --kr-gold: #a9762a;
  --kr-lit: #8a5f1f;
  --kr-umber: #5c3d23;
  --bg-flat: #f5eddd;
  --header-bg: #f5eddd;
  --surface: #f5eddd;
  --surface-2: #efe4cd;
  --line: #e2d3ba;
  --line-strong: #cdb894;
  --heading: #3a2c1e;
  --text: #3a2c1e;
  --muted: #7d6a52;
  --radius: 0;
  --shadow: none;
}

/* a flat cream bar the same colour as the ground, so the short hero band starts
   under the header rather than behind it. Background and border only. */
body.t-kaars .sf-head, body.t-kaars .sf-header,
body.t-kaars .sf-foot, body.t-kaars .sf-footer, body.t-kaars .sf-cats {
  background: #f5eddd; border-color: #e2d3ba;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* GOLD 1 of 3 — every control is a flat honey slab with no edge on it */
body.t-kaars .btn.brand { background: var(--kr-gold); color: #fdf7ea; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; padding: 14px 30px; }
body.t-kaars .btn.brand:hover { background: var(--kr-lit); color: #ffffff; }

/* SHORT ON PURPOSE — a band, not a screen. 68vh is what leaves the top of the
   gapless category row visible above the fold. */
body.t-kaars .sc-hero { min-height: 68vh; padding: 80px 20px; }
body.t-kaars .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(30px, 4.6vw, 56px); letter-spacing: -0.01em; }
body.t-kaars .sc-hero p { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 600; }

/* GOLD 2 of 3 — every heading is a centred serif line closed by one hairline */
body.t-kaars .sc-h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -0.01em; }
body.t-kaars .sc-h2::after { content: ''; display: block; width: 34px; height: 1px; background: var(--kr-gold); margin: 16px auto 0; }

/* ★ THE BAND — out of the container, across the whole window, gutter zero, no
   borders and no radius, so the four pictures meet edge to edge with nothing
   between them. Four across fills exactly one row; two across on a phone. */
body.t-kaars .sc-strip { padding: 0; margin: 0 calc(50% - 50vw) 6px; width: 100vw; max-width: 100vw; }
body.t-kaars .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-kaars .sc-strip-card { position: relative; display: block; }
body.t-kaars .sc-strip-img { aspect-ratio: 4 / 5; border: 0; }
body.t-kaars .sc-strip-label {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 54px 14px 18px;
  background: linear-gradient(rgba(58, 44, 30, 0), rgba(58, 44, 30, 0.74)); color: #fdf7ea;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 600;
}

/* contained again: small flat tiles on bare cream, no card frame at all, the
   caption centred under the picture at a high image-to-text ratio */
body.t-kaars .product-card { background: transparent; border-color: transparent; box-shadow: none; }
body.t-kaars .product-card:hover { transform: none; border-color: transparent; box-shadow: none; }
body.t-kaars .product-card .meta { padding: 12px 2px 0; text-align: center; }
body.t-kaars .product-card .p { color: var(--kr-gold); font-weight: 700; margin-top: 4px; }

/* UMBER 1 of 2 — the inset wash covers the photograph and sits under the type,
   so the band breaks the cream in umber instead of going black */
body.t-kaars .sc-banner { min-height: 46vh; box-shadow: inset 0 0 0 100vmax rgba(92, 61, 35, 0.62); }

/* the second catalogue: same container, deliberately bigger cells and a bigger
   shot, so it reads as a feature rather than a repeat of the grid above it */
body.t-kaars .sc-show-inner { min-height: 600px; padding: 60px 44px 68px; }
body.t-kaars .sc-show-media img { max-width: 80%; max-height: 320px; }
body.t-kaars .sc-show-price { font-family: var(--sf-serif); color: var(--kr-gold); }

/* UMBER 2 of 2 — the page ends on the only other dark ground */
body.t-kaars .sc-contact-band { background: var(--kr-umber); color: #f5eddd; margin-top: 44px; }
body.t-kaars .sc-contact-band .sc-h2, body.t-kaars .sc-contact-band .sc-contact-sub, body.t-kaars .sc-contact-band .sc-field label { color: #f5eddd; }
body.t-kaars .sc-contact-band .sc-field input, body.t-kaars .sc-contact-band .sc-field textarea { background: #6d4b2c; border-color: #7f5c39; color: #f7efe1; }

@media (max-width: 760px) {
  body.t-kaars .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kaars .sc-hero { min-height: 58vh; }
  body.t-kaars .sc-show-inner { min-height: 0; padding: 40px 22px 48px; }
}

/* NIGHT — the cream drops to the brown a workshop goes when the lamps are off
   and the honey gold is lifted to the colour a lit taper actually throws, so
   the rand figures and the slabs still carry. The gapless band becomes the one
   lit thing on the page, which is closer to what the shop looks like at seven
   in the evening than the day version is. */
html[data-theme="dark"] body.t-kaars {
  background: #1e1811;
  color: #ece0cb;
  --kr-gold: #d9a94b;
  --kr-lit: #e8bd68;
  --kr-umber: #2b2016;
  --bg-flat: #1e1811;
  --header-bg: #1e1811;
  --surface: #1e1811;
  --surface-2: #272016;
  --line: #33281c;
  --line-strong: #493a29;
  --heading: #f2e8d6;
  --text: #ece0cb;
  --muted: #a1907a;
}
html[data-theme="dark"] body.t-kaars .sf-head, html[data-theme="dark"] body.t-kaars .sf-header,
html[data-theme="dark"] body.t-kaars .sf-foot, html[data-theme="dark"] body.t-kaars .sf-footer,
html[data-theme="dark"] body.t-kaars .sf-cats { background: #1e1811; border-color: #33281c; }
html[data-theme="dark"] body.t-kaars .btn.brand { color: #1e1811; }
html[data-theme="dark"] body.t-kaars .btn.brand:hover { color: #1e1811; }
html[data-theme="dark"] body.t-kaars .sc-banner { box-shadow: inset 0 0 0 100vmax rgba(43, 32, 22, 0.68); }
html[data-theme="dark"] body.t-kaars .sc-contact-band { color: #ece0cb; }
html[data-theme="dark"] body.t-kaars .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-kaars .sc-contact-band .sc-field textarea { background: #1e1811; border-color: #3d2f21; color: #ece0cb; }