/* ---- grit (Grit — Skate & BMX 62) ------------------------------------------
   THE STRUCTURAL MOVE: no buffer. The product wall butts straight up against
   the bottom of the carousel — .sc-buygrid loses its top padding entirely and
   the catalogue heading becomes a rule rather than a title — so the second
   thing on the page is stock, not a welcome. Whitespace lives only in the
   gutters between tiles; every join below is a hard edge. The second pass at
   the same stock is cut to four panels so it reads as a shortlist, not a
   repeat. Concrete grey ground, griptape black bar, tiles on flat white, and
   the high-vis yellow appears on the buy control and nowhere else. */
body.t-grit {
  background: #cfd1cf;
  color: #26292a;
  --radius: 0;
  --header-bg: #141414;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --line: #b4b8b6;
  --line-strong: #9aa09d;
  --heading: #141414;
  --text: #26292a;
  --muted: #62676a;
}
/* solid from the first pixel — the carousel starts under a hard rule, never behind it */
body.t-grit .sf-header { background: #141414; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: #141414; }
body.t-grit .sf-header .container { position: relative; }
body.t-grit .sf-name { color: #f2f3f1; text-transform: uppercase; letter-spacing: 0.36em; font-size: 15px; }
body.t-grit .sf-header .sf-cart, body.t-grit .sf-searchbtn { color: #b9bdbb; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; }
body.t-grit .sf-footer { background: #141414; border-color: #141414; color: #b9bdbb; }
body.t-grit .btn.brand { background: #d8e600; border-color: #d8e600; color: #141414; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 800; padding: 13px 26px; }
body.t-grit .btn.brand:hover { background: #c2cf00; border-color: #c2cf00; color: #141414; opacity: 1; }
/* nearly wordless, hard left, full bleed */
body.t-grit .sc-hero { min-height: 78vh; padding: 0 clamp(20px, 6vw, 76px); }
body.t-grit .sc-hero h1 { text-transform: uppercase; font-weight: 800; font-size: clamp(38px, 7.4vw, 96px); line-height: 0.94; letter-spacing: -0.02em; margin-bottom: 10px; }
body.t-grit .sc-hero p { text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; font-weight: 700; margin-bottom: 30px; }
body.t-grit .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border-color: #d8e600; color: #d8e600; }
body.t-grit .sc-hero .btn.brand.sc-hero-ghost:hover { background: #d8e600; color: #141414; }
body.t-grit .sc-h2 { text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; font-weight: 800; margin: 0 0 18px; }
/* THE MOVE — zero top padding, so the wall is the very next thing after the photograph */
body.t-grit .sc-buygrid { padding: 0 20px 4px; }
body.t-grit .sc-buygrid .sc-h2 { text-align: left; margin: 0; padding: 26px 0 18px; border-bottom: 1px solid #b4b8b6; }
body.t-grit .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 30px; padding-top: 34px; }
/* the shot takes about seventy percent of the card and sits on flat white */
body.t-grit .sc-buy-media img { aspect-ratio: 1; object-fit: contain; padding: 20px; }
body.t-grit .sc-buy-cat, body.t-grit .sc-show-cat, body.t-grit .sc-strip-label { color: #62676a; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 800; }
body.t-grit .sc-buy-p, body.t-grit .sc-show-price { color: #141414; font-weight: 700; }
/* the filter sidebar laid horizontal, six across, AFTER the grid */
body.t-grit .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
/* the slow second pass: same stock, cut to four panels */
body.t-grit .sc-show-item:nth-child(n + 5) { display: none; }
body.t-grit .sc-show-item:nth-child(4n + 2), body.t-grit .sc-show-item:nth-child(4n + 3) { background: #e4e6e4; }
/* the page terminates on a hard black bar rather than tapering out */
body.t-grit .sc-contact-band { background: #141414; padding: 56px 0 62px; }
body.t-grit .sc-contact-band .sc-h2 { color: #f2f3f1; }
body.t-grit .sc-contact-band .sc-contact-sub, body.t-grit .sc-contact-band .sc-field label { color: #9aa09d; }
@media (max-width: 1000px) {
  body.t-grit .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
  body.t-grit .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-grit .sf-name { letter-spacing: 0.24em; }
}

/* NIGHT — the yard under the floodlights. Concrete goes to charcoal and the bar
   goes blacker still, but the product tiles stay pale so the flat-lays keep
   reading, and the high-vis does not move. */
html[data-theme="dark"] body.t-grit {
  background: #1b1d1d;
  color: #b6bab8;
  --header-bg: #0c0d0d;
  --surface: #232626;
  --surface-2: #eceeec;
  --line: #2f3333;
  --line-strong: #414646;
  --heading: #f2f3f1;
  --text: #b6bab8;
  --muted: #868c8a;
}
html[data-theme="dark"] body.t-grit .sf-header { background: #0c0d0d; border-bottom-color: #0c0d0d; }
html[data-theme="dark"] body.t-grit .sf-footer { background: #0c0d0d; border-color: #0c0d0d; }
html[data-theme="dark"] body.t-grit .sc-buygrid .sc-h2 { border-bottom-color: #2f3333; }
html[data-theme="dark"] body.t-grit .sc-buy-cat, html[data-theme="dark"] body.t-grit .sc-show-cat, html[data-theme="dark"] body.t-grit .sc-strip-label { color: #868c8a; }
html[data-theme="dark"] body.t-grit .sc-buy-p, html[data-theme="dark"] body.t-grit .sc-show-price { color: #f2f3f1; }
html[data-theme="dark"] body.t-grit .sc-show-item:nth-child(4n + 2), html[data-theme="dark"] body.t-grit .sc-show-item:nth-child(4n + 3) { background: #1e2121; }
html[data-theme="dark"] body.t-grit .sc-about-copy p { color: #a4a9a7; }
html[data-theme="dark"] body.t-grit .sc-contact-band { background: #0c0d0d; }