/* ---------- Kist — Handmade gifts & keepsakes 199 (store) ----------
   THE STRUCTURAL MOVE: the lookbook ships as full-bleed alternating rows, and
   here it is rebuilt as a four-across wall of tall 3:4 portraits with the buy
   control lifted out of the copy and laid on the bottom of the picture — then
   run TWICE under the same repeated heading, the first pass carrying products
   1–4 and the second 5–8, with a full-bleed photographic line of type driven
   between them. Both passes render identical markup, so they are told apart by
   the anchor ids the renderer already assigns (#products / #products-2) and
   never by a positional selector on the section. The two strips are separated
   the same honest way: the opening one carries no heading, so
   :not(:has(.sc-h2)) turns its tiles into bare photographs with a hairline
   button lying on them, while :has(.sc-h2) takes the closing one full-width
   onto near-black and greys it until it is touched. Jade is spent on exactly
   two jobs — the first letter of every heading and the edge of every button —
   and the band redefines both tokens locally so the dark strip needs no
   second set of colour rules. */
body.t-kist {
  background: #ffffff;
  color: #2a2c29;
  --kst-jade: #3f6d59;
  --bg-flat: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f1;
  --line: #e5e5e0;
  --line-strong: #cfcfc8;
  --heading: #121412;
  --text: #2a2c29;
  --muted: #767871;
  --header-bg: #ffffff;
  --radius: 0;
  --shadow: none;
}

/* paper bar, flat and unblurred, brand name hard left in the display cut */
body.t-kist .sf-header, body.t-kist .sf-head,
body.t-kist .sf-footer, body.t-kist .sf-foot, body.t-kist .sf-cats {
  background: #ffffff; border-color: #e5e5e0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kist .sf-name { font-family: var(--sf-serif); font-weight: 500; font-size: 22px; letter-spacing: 0.015em; }

/* it floats over the first slide and scrolls away with it — but only on the
   landing page, because white ink on a white product page would vanish. The
   category rail steps aside there too, so the opening fold is picture alone. */
body.t-kist:has(.sc-hero) .sf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom-color: transparent; }
body.t-kist:has(.sc-hero) .sf-name, body.t-kist:has(.sc-hero) .sf-header .sf-cart,
body.t-kist:has(.sc-hero) .sf-searchbtn, body.t-kist:has(.sc-hero) .sf-header .theme-toggle,
body.t-kist:has(.sc-hero) .sf-makeyours { color: #ffffff; }
body.t-kist:has(.sc-hero) .sf-cats { display: none; }

/* white-filled with a jade hairline until it fills jade */
body.t-kist .btn.brand { background: transparent; border-color: var(--kst-jade); color: var(--heading); border-radius: 0; box-shadow: none; font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 26px; }
body.t-kist .btn.brand:hover { background: var(--kst-jade); color: #ffffff; opacity: 1; }

/* the stage: four plates, a two-line cut and a hairline ghost, dead centre */
body.t-kist .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-kist .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(36px, 6.2vw, 80px); line-height: 1.06; letter-spacing: -0.02em; max-width: 640px; margin: 0 auto 32px; }
body.t-kist .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; }

body.t-kist .sc-h2 { font-family: var(--sf-serif); font-weight: 400; color: var(--heading); font-size: clamp(24px, 3.2vw, 38px); letter-spacing: -0.01em; margin: 0; }
body.t-kist .sc-h2::first-letter { color: var(--kst-jade); }

/* THE WALL — alternating rows flattened into four tall portraits, twice */
body.t-kist .sc-lookbook { display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 26px; max-width: 1080px; margin: 0 auto; padding: 0 20px 24px; }
body.t-kist .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 100px 0 12px; text-align: center; }
body.t-kist .sc-look-row { display: block; }
body.t-kist .sc-look-media img { aspect-ratio: 3 / 4; }
body.t-kist .sc-look-copy { position: relative; padding: 16px 0 0; text-align: center; }
body.t-kist .sc-look-cat, body.t-kist .sc-look-desc { display: none; }
body.t-kist .sc-look-t { margin: 0; font-family: var(--sf-serif); font-weight: 400; font-size: 18px; letter-spacing: 0; }
body.t-kist .sc-look-p { margin: 5px 0 0; font-weight: 400; font-size: 15px; color: var(--muted); }
/* the buy control does not sit under the tile with the title and price — it is
   pinned to the bottom edge of the photograph above it */
body.t-kist .sc-look-copy .sc-buy-form, body.t-kist a.sc-look-btn { position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translateX(-50%); margin: 0; }
body.t-kist .btn.brand.sc-look-btn { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.92); color: #121412; padding: 11px 20px; margin: 0; }
body.t-kist .btn.brand.sc-look-btn:hover { background: var(--kst-jade); border-color: var(--kst-jade); color: #ffffff; }
/* one catalogue, shown in two halves of four under the same heading */
body.t-kist #products .sc-look-row:nth-child(n + 6) { display: none; }
body.t-kist #products-2 .sc-look-row:nth-child(-n + 5) { display: none; }

body.t-kist .sc-strip { padding: 76px 20px 0; }
body.t-kist .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* the headingless opening strip: no label, no body copy, one hairline button
   lying on the picture and nothing else */
body.t-kist .sc-strip:not(:has(.sc-h2)) .sc-strip-card { position: relative; }
body.t-kist .sc-strip:not(:has(.sc-h2)) .sc-strip-img { aspect-ratio: 4 / 5; border: 0; }
body.t-kist .sc-strip:not(:has(.sc-h2)) .sc-strip-label { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); margin: 0; padding: 12px 22px; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }

/* the closing band — the only dark ground on the page, six makers wide, grey
   until touched. Redefining --heading and --kst-jade here recolours the
   heading, its jade initial and every label in one rule. */
body.t-kist .sc-strip:has(.sc-h2) { width: 100vw; max-width: 100vw; margin: 100px calc(50% - 50vw) 0; background: #0d0f0e; color: #8f948d; padding: 82px clamp(20px, 5vw, 70px) 90px; --heading: #f3f2ed; --kst-jade: #7fae97; }
body.t-kist .sc-strip:has(.sc-h2) .sc-h2 { margin-bottom: 40px; text-align: center; }
body.t-kist .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(6, 1fr); gap: 20px; }
body.t-kist .sc-strip:has(.sc-h2) .sc-strip-img { filter: grayscale(1); background: #0d0f0e; border: 0; transition: filter 0.45s ease; }
body.t-kist .sc-strip:has(.sc-h2) .sc-strip-card:hover .sc-strip-img { filter: grayscale(0); }
body.t-kist .sc-strip:has(.sc-h2) .sc-strip-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }

/* band one: photograph, one centred line of display type, nothing else */
body.t-kist .sc-banner { min-height: 62vh; display: flex; align-items: center; justify-content: center; margin: 100px calc(50% - 50vw); }
body.t-kist .sc-banner-inner { max-width: 800px; }
body.t-kist .sc-banner h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(26px, 4vw, 52px); line-height: 1.2; margin: 0; }
/* band two runs deeper and splits: copy and a filled slab in one half, the
   other half left as bare photograph */
body.t-kist .sc-banner:has(.btn) { min-height: 82vh; justify-content: flex-start; padding: 0; text-align: left; }
body.t-kist .sc-banner:has(.btn) .sc-banner-inner { width: 50%; max-width: none; margin: 0; padding: 12vh clamp(24px, 6vw, 90px); background: linear-gradient(90deg, rgba(9, 11, 10, 0.52), rgba(9, 11, 10, 0.16)); }
body.t-kist .sc-banner .btn.brand { background: #ffffff; border-color: #ffffff; color: #121412; }
body.t-kist .sc-banner .btn.brand:hover { background: var(--kst-jade); border-color: var(--kst-jade); color: #ffffff; }

@media (max-width: 900px) {
  body.t-kist .sc-lookbook { grid-template-columns: repeat(2, 1fr); }
  body.t-kist .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-kist .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(3, 1fr); }
  body.t-kist .sc-banner:has(.btn) .sc-banner-inner { width: 100%; }
}

/* NIGHT — the paper goes to a cool near-black, the jade lifts because it is
   still carrying every button edge and every heading initial on its own, and
   the closing band drops another shade so it stays the darkest thing here. */
html[data-theme="dark"] body.t-kist {
  background: #101211;
  color: #c4c7c2;
  --kst-jade: #7fae97;
  --bg-flat: #101211;
  --surface: #171a18;
  --surface-2: #1d201e;
  --line: #282c2a;
  --line-strong: #3c413e;
  --heading: #f1f2ee;
  --text: #c4c7c2;
  --muted: #868a84;
  --header-bg: #101211;
}
html[data-theme="dark"] body.t-kist .sf-header, html[data-theme="dark"] body.t-kist .sf-head,
html[data-theme="dark"] body.t-kist .sf-footer, html[data-theme="dark"] body.t-kist .sf-foot,
html[data-theme="dark"] body.t-kist .sf-cats { background: #101211; border-color: #282c2a; }
html[data-theme="dark"] body.t-kist .btn.brand:hover,
html[data-theme="dark"] body.t-kist .sc-banner .btn.brand:hover { color: #0b120f; }
html[data-theme="dark"] body.t-kist .sc-strip:has(.sc-h2) { background: #070908; }