/* ---------- Verf — Paint, brushes & decorating 159 (store) ----------
   THE STRUCTURAL MOVE: one welded photograph wall in a page that is otherwise
   all gutters. A transparent split bar rides over a full-viewport three-slide
   stage with the copy held LOW and LEFT, sitting on the same left margin the
   container uses, so the headline lines up with everything that follows it.
   After that every block drops into the contained column and keeps its gaps —
   four action tiles, a six-tile masonry catalogue, a narrow photograph-free
   column of figures — and exactly ONE block gives them up: six photographs
   welded three across and twice down with `gap: 0` and their captions taken out
   of the flow entirely, so the wall reads as one continuous painted surface
   rather than six pictures. The wall is picked off its fifth card rather than a
   heading, so it can stay headingless the way the reference's gallery is.
   Ground is whitewash from the bar to the figures; oxide red lands on three
   things only — the stage button, the rule under each price, and the dark band
   that closes the page, which is the only inverted ground in the template. */
body.t-verf {
  background: #f6f4f0;
  color: #141414;
  --vf-oxide: #8f3a24;
  --vf-on-oxide: #fdf8f4;
  --vf-dark: #2c1611;
  --vf-on-dark: #f2ece5;
  --bg-flat: #f6f4f0;
  --surface: #ffffff;
  --surface-2: #ebe7e0;
  --line: #e2ded6;
  --line-strong: #c9c2b6;
  --heading: #141414;
  --text: #141414;
  --muted: #6f6a62;
  --header-bg: #f6f4f0;
  --radius: 0;
  --shadow: none;
}
/* token-driven, so all the chrome follows the ground into the night block on
   its own instead of needing a second set of rules down there */
body.t-verf .sf-head, body.t-verf .sf-cats,
body.t-verf .sf-foot, body.t-verf .sf-footer { background: var(--bg-flat); border-color: var(--line); }

/* the split bar floats over the stage — mark hard left, links hard right,
   nothing centred and nothing stacked. Scoped by :has, because the cart, search
   and product pages have no photograph under the bar and want the solid one. */
body.t-verf:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
body.t-verf:has(.sc-hero) .sf-name, body.t-verf:has(.sc-hero) .sf-cart,
body.t-verf:has(.sc-hero) .sf-navlink, body.t-verf:has(.sc-hero) .sf-searchbtn,
body.t-verf:has(.sc-hero) .theme-toggle { color: #f6f4f0; }
body.t-verf .sf-name { font-weight: 800; font-size: 16px; letter-spacing: 0.24em; text-transform: uppercase; }

/* OXIDE 1 of 3 — the controls, as flat slabs. The border only exists to kill
   the base ring; it is the same colour as the fill. */
body.t-verf .btn.brand { background: var(--vf-oxide); border-color: var(--vf-oxide); color: var(--vf-on-oxide); box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; font-weight: 700; padding: 15px 30px; }

/* the stage takes the whole first screen and the copy sits LOW and LEFT on it,
   held to the container's own left margin so it lines up with the column below */
body.t-verf .sc-hero { min-height: 100vh; align-items: flex-end; padding: 120px max(20px, calc(50vw - 520px)) clamp(66px, 9vh, 108px); }
body.t-verf .sc-hero h1 { font-weight: 800; font-size: clamp(34px, 5.8vw, 70px); line-height: 1.03; letter-spacing: -0.035em; }
body.t-verf .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(11px, 1.3vw, 13px); font-weight: 700; color: var(--muted); margin: 0 0 30px; }

/* FOUR action tiles, gapped in every direction, the label under the photograph
   rather than over it, so nothing prints on top of a picture anywhere */
body.t-verf .sc-strip { padding: clamp(58px, 7vw, 90px) 20px clamp(30px, 4vw, 46px); }
body.t-verf .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-verf .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 3 / 4; background: var(--surface-2); }
body.t-verf .sc-strip-label { margin-top: 13px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--heading); }

/* THE WALL — the one block on the page with no gutter anywhere. Six tiles
   welded three across and twice down, captions pulled out of the flow, so the
   photographs meet edge to edge and read as a single painted surface. */
body.t-verf .sc-strip:has(.sc-strip-row > :nth-child(5)) .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-verf .sc-strip:has(.sc-strip-row > :nth-child(5)) .sc-strip-img { aspect-ratio: 4 / 3; }
body.t-verf .sc-strip:has(.sc-strip-row > :nth-child(5)) .sc-strip-label { display: none; }

/* the densest block on the page — the category caps go quiet so the oxide is
   not spent a fourth time on them */
body.t-verf .sc-mas-cat { color: var(--muted); letter-spacing: 0.2em; font-weight: 600; }
/* OXIDE 2 of 3 — a rule under the rand figure, only as wide as the figure */
body.t-verf .sc-mas-p { display: inline-block; margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--vf-oxide); color: var(--vf-oxide); font-weight: 700; font-size: 15px; }

/* the single uninterrupted rectangle where the reference put its video */
body.t-verf .sc-banner { margin: clamp(30px, 4vw, 52px) calc(50% - 50vw); min-height: 58vh; display: flex; align-items: center; justify-content: center; padding: clamp(64px, 8vw, 100px) 24px; }

/* the counter row folded into a narrow photograph-free column: the three
   figures oversized on one line, the three lines that explain them under it */
body.t-verf .sc-richtext { max-width: 640px; padding: clamp(58px, 7vw, 88px) 20px clamp(62px, 8vw, 96px); }
body.t-verf .sc-richtext .sc-h2 { text-transform: none; letter-spacing: -0.03em; font-size: clamp(23px, 3.4vw, 42px); font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; margin: 0 0 26px; }
body.t-verf .sc-richtext p { font-size: 15.5px; line-height: 2; }

/* OXIDE 3 of 3 — the only inverted ground on the page, and it closes it */
body.t-verf .sc-contact-band { background: var(--vf-dark); color: var(--vf-on-dark); padding: clamp(66px, 8vw, 100px) 0 clamp(76px, 9vw, 112px); }
body.t-verf .sc-contact-band .sc-h2, body.t-verf .sc-contact-band .sc-contact-sub,
body.t-verf .sc-contact-band .sc-field label { color: var(--vf-on-dark); }
body.t-verf .sc-contact-band .sc-field input, body.t-verf .sc-contact-band .sc-field textarea { background: rgba(242, 236, 229, 0.06); border-color: rgba(242, 236, 229, 0.26); color: var(--vf-on-dark); }
/* the control standing on the dark band fills whitewash — oxide on oxide would
   disappear, and a second accent is not on the table */
body.t-verf .sc-contact-band .btn.brand { background: var(--vf-on-dark); border-color: var(--vf-on-dark); color: var(--vf-dark); }

@media (max-width: 900px) {
  body.t-verf .sc-strip-row,
  body.t-verf .sc-strip:has(.sc-strip-row > :nth-child(5)) .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — whitewash drops to soot and the ink flips, but the closing band is
   held one step LIGHTER than the ground so the inversion still reads as an
   inversion rather than vanishing into the page. Oxide lifts to a warmer brick
   that survives on both grounds, and the button ink flips with it through
   --vf-on-oxide, so no control needs a rule of its own down here. */
html[data-theme="dark"] body.t-verf {
  background: #141210;
  color: #cbc5bc;
  --vf-oxide: #c96a4a;
  --vf-on-oxide: #1a120e;
  --vf-dark: #241a15;
  --vf-on-dark: #f0e8de;
  --bg-flat: #141210;
  --surface: #1c1a17;
  --surface-2: #232019;
  --line: #2f2b25;
  --line-strong: #443f37;
  --heading: #f4efe7;
  --text: #cbc5bc;
  --muted: #8d867c;
  --header-bg: #141210;
}
html[data-theme="dark"] body.t-verf .sc-contact-band { border-top: 1px solid #33291f; }