/* ---------- Kruk — Mobility aids & home care equipment 208 (store) -----------
   THE STRUCTURAL MOVE: THE DOUBLE HEADING. The reference titles every block
   with a small line stacked directly on a heavier one, and that two-deck title
   is the whole page's signature. So every heading in this template carries a
   real newline in its copy, `white-space: pre-line` renders the break, and
   ::first-line paints the top deck small, tracked and heather while the deck
   below stays full-size charcoal — one selector doing what the reference
   needed a second element for, and it works identically on the stage headline,
   the section titles and the banner. The break is a FORCED one, so the pseudo
   can never spill onto the wrong words. Everything else follows: an oat page,
   charcoal ink, one heather rationed to the eyebrow, the rand figure and the
   button, and the two prose rows split 7/5 with the picture RIGHT then 8/4
   with it LEFT, reached by their own anchor ids and never by counting
   sections. The catalogue drops the checkerboard for one pure white band,
   because every flat-lay was shot on white and the panel should disappear
   behind it. -------------------------------------------------------------- */
body.t-kruk {
  background: #f4f1ea;
  color: #3a3833;
  --kk-heather: #6f5b8e;
  --kk-heather-lit: #cdbfe0;
  --kk-panel: #ffffff;
  --kk-panel-ink: #1f1e1c;
  --kk-panel-mute: #6f6b62;
  --kk-price: #6f5b8e;
  --bg-flat: #f4f1ea;
  --header-bg: #f4f1ea;
  --surface: #ffffff;
  --surface-2: #ebe7dd;
  --line: #ded9cd;
  --line-strong: #c6bfae;
  --heading: #1f1e1c;
  --text: #3a3833;
  --muted: #6f6b62;
  --radius: 12px;
  --shadow: none;
}

/* the bar never floats over the photograph — flat oat, one hairline, and the
   stage begins underneath it the way the reference's fixed header does */
body.t-kruk .sf-head, body.t-kruk .sf-header,
body.t-kruk .sf-foot, body.t-kruk .sf-footer, body.t-kruk .sf-cats {
  background: #f4f1ea; border-color: #ded9cd;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* HEATHER 1 of 3 — every control is a flat heather slab with no edge on it */
body.t-kruk .btn.brand { background: var(--kk-heather); border: 0; color: #ffffff; box-shadow: none; font-weight: 600; letter-spacing: 0.03em; padding: 15px 32px; }
body.t-kruk .btn.brand:hover { background: #584673; color: #ffffff; }

/* THE DOUBLE HEADING, everywhere */
body.t-kruk .sc-hero h1, body.t-kruk .sc-h2, body.t-kruk .sc-banner h2 { white-space: pre-line; }
/* HEATHER 2 of 3 — the eyebrow deck, and the eyebrow deck only */
body.t-kruk .sc-h2::first-line { font-size: 0.36em; font-weight: 700; letter-spacing: 0.2em; line-height: 2.4; text-transform: uppercase; color: var(--kk-heather); }
/* the two decks that sit over a photograph take the heather lifted, so the
   eyebrow still reads once there is a picture behind it */
body.t-kruk .sc-hero h1::first-line, body.t-kruk .sc-banner h2::first-line { font-size: 0.34em; font-weight: 700; letter-spacing: 0.22em; line-height: 2.2; text-transform: uppercase; color: var(--kk-heather-lit); }

/* the stage: three cross-fading slides, copy inset LEFT on the reference's own
   223px and locked to the vertical middle, paragraph capped at its 642px */
body.t-kruk .sc-hero { min-height: 92vh; padding: 96px max(24px, calc(50vw - 497px)); }
body.t-kruk .sc-hero-left .sc-hero-inner { margin: 0; max-width: 642px; }
body.t-kruk .sc-hero h1 { font-size: clamp(34px, 5.6vw, 70px); line-height: 1.06; letter-spacing: -0.02em; margin-bottom: 20px; }
body.t-kruk .sc-hero p { font-size: clamp(16px, 1.8vw, 22px); line-height: 1.55; margin-bottom: 32px; }
body.t-kruk .sc-h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; line-height: 1.2; color: var(--heading); margin: 0 0 22px; }

/* ASYMMETRY, TWICE — 7/5 with the picture on the RIGHT, then 8/4 with it on
   the LEFT. Only the media is placed by hand; the copy auto-fills the cell
   left over, which is why one rule flips the row instead of two. */
body.t-kruk .sc-about-split { gap: 58px; padding: 92px 20px 44px; align-items: center; }
body.t-kruk #about { grid-template-columns: 7fr 5fr; }
body.t-kruk #about .sc-about-media { grid-column: 2; grid-row: 1; }
body.t-kruk #about-2 { grid-template-columns: 4fr 8fr; padding: 44px 20px 92px; }
body.t-kruk .sc-about-copy p { color: var(--text); font-size: 17px; line-height: 1.8; }

/* SIX GAPPED CARDS, 3 × 2 — rounded, photograph on top, one short label ranged
   left underneath, exactly the way the reference splits its services in two */
body.t-kruk .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
body.t-kruk .sc-strip-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-align: left; }
body.t-kruk .sc-strip-img { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
body.t-kruk .sc-strip-label { margin: 0; padding: 16px 20px 20px; font-size: 15.5px; font-weight: 600; color: var(--heading); }

/* THE WHITE BAND — the checkerboard is dropped and every panel goes pure
   white, because the flat-lays were shot on white and the panel behind them
   should vanish. One hairline of grid gap is all that separates them.
   HEATHER 3 of 3 is the rand figure, and it appears nowhere else. */
body.t-kruk .sc-show-grid { gap: 1px; background: var(--line); }
body.t-kruk .sc-show-item, body.t-kruk .sc-show-item:nth-child(4n + 2),
body.t-kruk .sc-show-item:nth-child(4n + 3) { background: var(--kk-panel); color: var(--kk-panel-ink); }
body.t-kruk .sc-show-cat { color: var(--kk-panel-mute); letter-spacing: 0.18em; }
body.t-kruk .sc-show-t { text-transform: none; letter-spacing: 0; font-size: clamp(17px, 1.8vw, 22px); }
body.t-kruk .sc-show-price { color: var(--kk-price); font-weight: 700; font-size: clamp(20px, 2.1vw, 27px); }

/* the close is a contained column under one hairline, not a band — the page
   ends inside its own measure the same way it opened inside its own inset */
body.t-kruk .sc-contact { max-width: 640px; padding: 78px 20px 92px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  body.t-kruk .sc-hero { min-height: 78vh; }
  body.t-kruk .sc-about-split, body.t-kruk #about, body.t-kruk #about-2 { grid-template-columns: 1fr; gap: 28px; }
  body.t-kruk #about .sc-about-media { grid-column: 1; grid-row: auto; }
  body.t-kruk .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the oat drops to a warm near-black and the heather lifts two stops so
   the eyebrow and the buttons keep their contrast against it. The catalogue
   deliberately KEEPS its daylight: the flat-lays were shot on white, so the
   panels stay pale and the band across the middle of the page becomes the one
   lit thing on it. The panel tokens carry that on their own, which is why the
   showcase needs no night rules beyond the deeper heather on its two controls. */
html[data-theme="dark"] body.t-kruk {
  background: #1a1917;
  color: #c9c3b8;
  --kk-heather: #ac93cf;
  --kk-heather-lit: #d5c6e8;
  --kk-panel: #f6f4ef;
  --kk-panel-ink: #1f1e1c;
  --kk-panel-mute: #6f6b62;
  --kk-price: #584673;
  --bg-flat: #1a1917;
  --header-bg: #1a1917;
  --surface: #232120;
  --surface-2: #2b2826;
  --line: #33302c;
  --line-strong: #4a4640;
  --heading: #f3efe7;
  --text: #c9c3b8;
  --muted: #918b80;
}
html[data-theme="dark"] body.t-kruk .sf-head, html[data-theme="dark"] body.t-kruk .sf-header,
html[data-theme="dark"] body.t-kruk .sf-foot, html[data-theme="dark"] body.t-kruk .sf-footer,
html[data-theme="dark"] body.t-kruk .sf-cats { background: #1a1917; border-color: #33302c; }
html[data-theme="dark"] body.t-kruk .btn.brand { color: #17130f; }
html[data-theme="dark"] body.t-kruk .sc-show-grid { background: #cfc8ba; }
html[data-theme="dark"] body.t-kruk .sc-show-btn { background: #584673; color: #ffffff; }