/* ---------- Crimp — Climbing gear & bouldering wall 235 (store) ----------
   THE STRUCTURAL MOVE: the page alternates full-bleed photograph with a
   contained four-up, and no heading is ever allowed to compete with either.
   Every .sc-h2 is shrunk to an 11px letterspaced stencil mark flush left with
   a short burnt-ochre rule stamped under it, while the single line of type on
   the full-bleed band is left enormous — so the pictures and the band carry
   the page and the headings only label it. Rock-black on the stage, the band
   and the closing contact strip; plain bone wherever the flat-lays live. */
body.t-crimp {
  background: #f3efe6;
  color: #211f1c;
  --cr-ochre: #c2662c;
  --cr-rock: #111110;
  --bg-flat: #f3efe6;
  --surface: #ffffff;
  --surface-2: #e9e3d7;
  --line: #ddd5c6;
  --line-strong: #c5bca8;
  --heading: #111110;
  --text: #211f1c;
  --muted: #6d685f;
  --header-bg: #f3efe6;
  --radius: 0;
  --shadow: none;
}

/* flat bone bar and foot — no panel, no blur, no rounded anything */
body.t-crimp .sf-header, body.t-crimp .sf-head,
body.t-crimp .sf-footer, body.t-crimp .sf-foot, body.t-crimp .sf-cats {
  background: #f3efe6; border-color: #ddd5c6;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-crimp .sf-name { font-weight: 800; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; }

/* on the landing page only, the bar rides over the rock with no ground under
   it and scrolls away with the stage; white ink would vanish on a bone product
   page, so the guard matters. The category rail steps aside too, so the first
   screen is photograph, headline and button and nothing else. */
body.t-crimp:has(.sc-hero) .sf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-crimp:has(.sc-hero) .sf-name, body.t-crimp:has(.sc-hero) .sf-header .sf-cart,
body.t-crimp:has(.sc-hero) .sf-searchbtn, body.t-crimp:has(.sc-hero) .sf-header .theme-toggle { color: #efe9df; }
body.t-crimp:has(.sc-hero) .sf-cats { display: none; }

/* flat ochre slabs, no edge on any of them */
body.t-crimp .btn.brand { background: var(--cr-ochre); border: 0; box-shadow: none; color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 30px; }
body.t-crimp .btn.brand:hover { background: #a5541f; opacity: 1; }

/* THE MARK — the one thing repeated on every block: a tiny stencil heading
   flush left with a short ochre rule stamped under it */
body.t-crimp .sc-h2 { font-size: 11px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--heading); text-align: left; margin: 0 0 34px; }
body.t-crimp .sc-h2::after { content: ''; display: block; width: 34px; height: 3px; margin-top: 13px; background: var(--cr-ochre); }

/* the stage owns the whole first screen */
body.t-crimp .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-crimp .sc-hero h1 { font-size: clamp(34px, 5.8vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; max-width: 800px; margin: 0 auto 34px; }

/* four gapped plates, contained, straight under the stage */
body.t-crimp .sc-strip { padding: 96px 20px 12px; }
body.t-crimp .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
body.t-crimp .sc-strip-img { aspect-ratio: 3 / 4; border: 0; background: #ffffff; }
body.t-crimp .sc-strip-label { margin-top: 14px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cr-ochre); }

/* the band breaks the column entirely and the type on it is left enormous */
body.t-crimp .sc-banner { min-height: 66vh; display: flex; align-items: center; margin: 104px calc(50% - 50vw); }
body.t-crimp .sc-banner-inner { max-width: 940px; }
body.t-crimp .sc-banner h2 { color: #efe9df; font-size: clamp(28px, 5.4vw, 68px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; margin: 0; }

/* eight in two clean rows of four, title and rand under each and nothing else */
body.t-crimp .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 54px 24px; }
body.t-crimp .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-crimp .sc-buy-media { background: #ffffff; }
body.t-crimp .sc-buy-cat { display: none; }
body.t-crimp .sc-buy-p { margin-top: 5px; color: var(--cr-ochre); font-weight: 700; }

/* halves roughly equal, workshop photograph beside the prose */
body.t-crimp .sc-about-split { grid-template-columns: 1fr 1fr; gap: 56px; padding: 24px 20px 104px; }

/* the closing band, rock-black, with the facts stacked on their own lines */
body.t-crimp .sc-contact-band { background: var(--cr-rock); color: #efe9df; padding: 92px 0 100px; --heading: #efe9df; }
body.t-crimp .sc-contact-band-inner { text-align: left; }
body.t-crimp .sc-contact-band .sc-contact-sub { color: #a29b90; white-space: pre-line; line-height: 2; margin-bottom: 32px; }
body.t-crimp .sc-contact-band .sc-field input, body.t-crimp .sc-contact-band .sc-field textarea { background: #1c1b19; border-color: #35322d; color: #efe9df; }

@media (max-width: 900px) {
  body.t-crimp .sc-strip-row, body.t-crimp .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-crimp .sc-about-split { grid-template-columns: 1fr; }
}

/* NIGHT — bone drops to a shed dark and the ochre lifts, because it is still
   carrying every slab, every price and every heading rule on its own. The
   transparent bar has to be re-asserted or the solid night header paints back
   over the stage, and the closing band drops another shade so it stays the
   darkest thing on the page. */
html[data-theme="dark"] body.t-crimp {
  background: #131211;
  color: #cdc7bc;
  --cr-ochre: #e08a4a;
  --bg-flat: #131211;
  --surface: #1b1a18;
  --surface-2: #201f1c;
  --line: #2c2a27;
  --line-strong: #423f3a;
  --heading: #f4efe6;
  --text: #cdc7bc;
  --muted: #8b857b;
  --header-bg: #131211;
}
html[data-theme="dark"] body.t-crimp .sf-header, html[data-theme="dark"] body.t-crimp .sf-head,
html[data-theme="dark"] body.t-crimp .sf-footer, html[data-theme="dark"] body.t-crimp .sf-foot,
html[data-theme="dark"] body.t-crimp .sf-cats { background: #131211; border-color: #2c2a27; }
html[data-theme="dark"] body.t-crimp:has(.sc-hero) .sf-header { background: transparent; border-bottom-color: transparent; }
html[data-theme="dark"] body.t-crimp .sc-strip-img, html[data-theme="dark"] body.t-crimp .sc-buy-media { background: #1b1a18; }
html[data-theme="dark"] body.t-crimp .sc-contact-band { background: #0a0a09; }
html[data-theme="dark"] body.t-crimp .sc-contact-band .sc-field input, html[data-theme="dark"] body.t-crimp .sc-contact-band .sc-field textarea { background: #16151300; border-color: #2c2a26; }