/* ---- krul (Krul — Textured hair care & salon 171) ---------------------------
   STRUCTURAL MOVE: near-black at the head and the tail, with ONE unbroken warm
   bone ground carrying everything between them, so the middle of the page reads
   as a single lit room. The ink at the top is a continuous mass — sticky bar,
   full-viewport stage, then a strap carrying the phone line — and the branch
   band is hoisted to position TWO, welded gapless straight off the stage floor
   BEFORE any about copy. `.sc-hero + .sc-strip` is those two address tiles;
   `.sc-hero + .sc-strip + .sc-strip` is the photograph-free capability row where
   the bone begins. The closing wall is matched by `.sc-about-split + .sc-strip`,
   because the split richtext ahead of it renders as .sc-about-split and never as
   .sc-strip's own element type. Henna is spent three ways only: the hairline
   under every heading, the two buttons, the catalogue's category line. */
body.t-krul { background: #efe9df; color: #3a322b; --radius: 0; --surface: #f6f1e9; --surface-2: #e6dfd2; --line: #ddd4c5; --line-strong: #c3b7a3; --heading: #141210; --text: #3a322b; --muted: #756a5e; --krul-rule: #9c4a2f; }
/* the bar is the top of the stage, not a shelf standing above it */
body.t-krul .sf-header, body.t-krul .sf-footer { background: #141210; --line: #2c2721; --heading: #efe9df; --text: #cdc4b8; --muted: #9b9086; }
body.t-krul .btn.brand { background: #9c4a2f; border-color: #9c4a2f; color: #f6f1e9; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 11px; padding: 15px 32px; }
body.t-krul .btn.brand:hover { background: #7d3823; border-color: #7d3823; }
body.t-krul .sc-hero { min-height: 100vh; padding: 96px clamp(20px, 7vw, 92px); }
body.t-krul .sc-hero h1 { font-weight: 600; font-size: clamp(32px, 5.6vw, 66px); letter-spacing: -0.035em; line-height: 1.05; }
/* the page's one ornament, and the only place the henna rule appears */
body.t-krul .sc-h2 { font-size: clamp(12px, 1.5vw, 15px); text-transform: uppercase; letter-spacing: 0.24em; font-weight: 700; margin: 0 0 44px; }
body.t-krul .sc-h2::after { content: ''; display: block; width: 42px; height: 2px; background: var(--krul-rule); margin: 20px auto 0; }
body.t-krul .sc-strip-img { border: 0; aspect-ratio: 4 / 3; }
/* THE WELD — position two, full bleed, zero gap, straight off the stage floor */
body.t-krul .sc-hero + .sc-strip { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); padding: 0; }
body.t-krul .sc-hero + .sc-strip .sc-h2 { background: #141210; --heading: #efe9df; --krul-rule: #c2694a; margin: 0; padding: 26px 20px 24px; }
body.t-krul .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: 1fr 1fr; gap: 0; }
body.t-krul .sc-hero + .sc-strip .sc-strip-label { margin: 0; padding: 20px clamp(20px, 4vw, 46px) 0; text-align: left; font-size: 15px; font-weight: 500; }
/* where the bone starts: four capability tiles with no photograph in them at
   all, divided by hairlines instead of gaps */
body.t-krul .sc-hero + .sc-strip + .sc-strip { padding: clamp(66px, 8vw, 104px) 20px 0; }
body.t-krul .sc-hero + .sc-strip + .sc-strip .sc-strip-img { display: none; }
body.t-krul .sc-hero + .sc-strip + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 1px; background: #ddd4c5; border-top: 1px solid #ddd4c5; border-bottom: 1px solid #ddd4c5; }
body.t-krul .sc-hero + .sc-strip + .sc-strip .sc-strip-card { background: #efe9df; padding: 26px 24px 34px; }
/* the shelf: four across, two rows that fill */
body.t-krul .sc-buygrid, body.t-krul .sc-products { padding: clamp(72px, 9vw, 112px) 20px; }
body.t-krul .sc-buy-grid, body.t-krul .product-grid { grid-template-columns: repeat(4, 1fr); gap: 44px 26px; }
/* the figures block: the widest measure on the page, and no photograph in it */
body.t-krul .sc-richtext { max-width: 780px; padding: 0 20px clamp(72px, 9vw, 112px); }
body.t-krul .sc-richtext p { color: var(--text); font-size: 17.5px; line-height: 1.85; }
/* the tail — both near-black bands, the wall full bleed and three across */
body.t-krul .sc-about-split + .sc-strip, body.t-krul .sc-contact-band { background: #141210; color: #d9d1c6; --surface: #1f1b17; --line: #352e26; --heading: #efe9df; --text: #d9d1c6; --muted: #9b9086; --krul-rule: #c2694a; padding: clamp(70px, 8vw, 104px) 0; }
body.t-krul .sc-about-split + .sc-strip { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px); }
body.t-krul .sc-about-split + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) {
  body.t-krul .sc-buy-grid, body.t-krul .product-grid,
  body.t-krul .sc-hero + .sc-strip + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
}

/* NIGHT — the bone goes out and the near-black becomes the whole room. The head
   and the tail drop one step further so they still read as separate bands, and
   the henna lifts so the hairline and the buttons still carry on ink. */
html[data-theme="dark"] body.t-krul { background: #141210; color: #cdc4b8; --surface: #1d1a16; --surface-2: #24201b; --line: #302a23; --line-strong: rgba(255, 255, 255, 0.16); --heading: #efe9df; --text: #cdc4b8; --muted: #8e8377; --krul-rule: #c2694a; }
html[data-theme="dark"] body.t-krul .sf-header, html[data-theme="dark"] body.t-krul .sf-footer { background: #0c0a09; --line: #262019; }
html[data-theme="dark"] body.t-krul .btn.brand { background: #c2694a; border-color: #c2694a; color: #141210; }
html[data-theme="dark"] body.t-krul .btn.brand:hover { background: #d98862; border-color: #d98862; }
html[data-theme="dark"] body.t-krul .sc-hero + .sc-strip .sc-h2 { background: #0c0a09; }
html[data-theme="dark"] body.t-krul .sc-hero + .sc-strip + .sc-strip .sc-strip-row { background: #302a23; border-top-color: #302a23; border-bottom-color: #302a23; }
html[data-theme="dark"] body.t-krul .sc-hero + .sc-strip + .sc-strip .sc-strip-card { background: #141210; }
html[data-theme="dark"] body.t-krul .sc-about-split + .sc-strip, html[data-theme="dark"] body.t-krul .sc-contact-band { background: #0c0a09; --surface: #1d1a16; --line: #2b251e; }