/* ---- sambreel (Sambreel — Umbrellas & wet-weather wear 239) ----------------
   THE STRUCTURAL MOVE: the page is night in daylight. Wet slate #14161a is the
   DAY ground, not the night one, so the reference's sun-bleached summer
   storefront runs here in reverse season — and the four-slide full-viewport
   stage is welded to a gapless four-across doorway with no gutter, no hairline
   and no change of ground, so stage and doorway read as one slab before a word
   of prose. The two strips are told apart honestly, by how many cards they
   carry: four sets the doorway's variables, six flips them to the wordless run
   at the foot, so ONE set of rules dresses both. Oilskin yellow is spent on
   exactly three jobs — every button, the price under every grid tile and the
   price on every showcase panel — and nothing else on the page is coloured. */
body.t-sambreel {
  background: #14161a;
  color: #a7adb6;
  --smb-oil: #e0a92e;
  --bg-flat: #14161a;
  --surface: #191c21;
  --surface-2: #1e2228;
  --line: #2a2e35;
  --line-strong: #3b4049;
  --heading: #eef0f2;
  --text: #a7adb6;
  --muted: #7d848e;
  --header-bg: #14161a;
  --radius: 0;
  --shadow: none;
}

/* slate bar and slate foot, unblurred, the wordmark tracked out wide */
body.t-sambreel .sf-header, body.t-sambreel .sf-head,
body.t-sambreel .sf-footer, body.t-sambreel .sf-foot, body.t-sambreel .sf-cats {
  background: #14161a; border-color: #2a2e35;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-sambreel .sf-name { text-transform: uppercase; letter-spacing: 0.26em; font-size: 14px; font-weight: 700; }
body.t-sambreel .sf-cart .badge { background: var(--smb-oil); color: #14161a; border-radius: 0; box-shadow: none; }

/* the bar floats over slide one and scrolls away with it, and the category rail
   steps aside, so nothing shares the opening screen with the photograph */
body.t-sambreel:has(.sc-hero) .sf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom-color: transparent; }
body.t-sambreel:has(.sc-hero) .sf-cats { display: none; }

/* oilskin yellow, flat slab, no edge — job one of three */
body.t-sambreel .btn.brand { background: var(--smb-oil); border-color: var(--smb-oil); color: #14161a; border-radius: 0; box-shadow: none; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 15px 28px; }
body.t-sambreel .btn.brand:hover { background: #f2bd45; border-color: #f2bd45; opacity: 1; }

/* the stage — one whole viewport, four plates, the hairline ghost dead centre */
body.t-sambreel .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-sambreel .sc-hero h1 { font-size: clamp(34px, 6.2vw, 76px); font-weight: 700; line-height: 1.03; letter-spacing: -0.035em; max-width: 16ch; margin: 0 auto 18px; }

/* every section heading sits left of its column, never over the middle */
body.t-sambreel .sc-h2 { text-align: left; font-size: clamp(21px, 2.9vw, 33px); font-weight: 700; letter-spacing: -0.028em; color: var(--heading); }

/* THE WELD AND THE RUN — four cards means the doorway: full-bleed, gapless,
   flush against the floor of the stage with the label lying on the picture.
   Six means the wordless run at the foot, square and grey until touched. The
   count switches the variables; the six rules underneath dress both strips. */
body.t-sambreel .sc-strip { --smb-cols: 4; --smb-ar: 3 / 4; --smb-grey: 0; --smb-label: 1; width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-sambreel .sc-strip:has(.sc-strip-card:nth-child(6)) { --smb-cols: 6; --smb-ar: 1; --smb-grey: 1; --smb-label: 0; margin: 96px calc(50% - 50vw) 0; }
body.t-sambreel .sc-strip-row { grid-template-columns: repeat(var(--smb-cols), 1fr); gap: 0; }
body.t-sambreel .sc-strip-card { position: relative; }
body.t-sambreel .sc-strip-img { aspect-ratio: var(--smb-ar); border: 0; border-radius: 0; filter: grayscale(var(--smb-grey)); transition: filter 0.45s ease; }
body.t-sambreel .sc-strip-card:hover .sc-strip-img { filter: none; }
body.t-sambreel .sc-strip-label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 84px 12px 24px; color: #eef0f2; background: linear-gradient(rgba(10, 11, 13, 0), rgba(10, 11, 13, 0.84)); font-size: 11.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; opacity: var(--smb-label); transition: opacity 0.3s ease; }
body.t-sambreel .sc-strip-card:hover .sc-strip-label { opacity: 1; }

/* WALL ONE — contained, gapped, four across, tile text under the photograph and
   the price the only thing on that tile allowed a colour */
body.t-sambreel .sc-products { padding: 94px 20px 10px; }
body.t-sambreel .product-grid { grid-template-columns: repeat(4, 1fr); gap: 34px 22px; padding: 26px 0 0; }
body.t-sambreel .product-card, body.t-sambreel .product-card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.t-sambreel .product-card .ph { aspect-ratio: 3 / 4; background: #1b1e23; }
body.t-sambreel .product-card .meta { padding: 14px 0 0; }
body.t-sambreel .product-card .p { color: var(--smb-oil); font-weight: 700; margin-top: 4px; }
body.t-sambreel #products .product-card:nth-child(n + 5) { display: none; }

/* WALL TWO — the other half of the same catalogue on half-width panels that
   keep the slate ground instead of the shared checkerboard */
body.t-sambreel .sc-show-item, body.t-sambreel .sc-show-item:nth-child(4n + 2),
body.t-sambreel .sc-show-item:nth-child(4n + 3) { background: #14161a; box-shadow: inset 0 0 0 1px #23272e; }
body.t-sambreel .sc-show-cat { color: var(--muted); }
body.t-sambreel .sc-show-price { color: var(--smb-oil); font-weight: 700; }
body.t-sambreel #products-2 .sc-show-item:nth-child(-n + 4) { display: none; }

/* the band that breaks the catalogue in half: no product, no button, and the
   only place on the page two columns of prose run side by side. The parcel band
   under wall two keeps the shared centred column — the page's one centred CTA. */
body.t-sambreel .sc-banner { margin: 96px calc(50% - 50vw); padding: clamp(90px, 13vh, 150px) 28px; }
body.t-sambreel .sc-banner h2 { font-size: clamp(24px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.03em; }
body.t-sambreel .sc-banner:not(:has(.btn)) .sc-banner-inner { max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; text-align: left; }
body.t-sambreel .sc-banner:has(.btn) { padding: clamp(64px, 9vh, 104px) 28px; }

/* the hours panel — type in the left half, one photograph in the right, which
   reverses the shared stylesheet's picture-first order and still stacks copy
   above picture when the split collapses to one column */
body.t-sambreel .sc-about-split { gap: 62px; padding: 96px 20px 20px; }
body.t-sambreel .sc-about-copy { order: -1; }
body.t-sambreel .sc-about-media img { aspect-ratio: 4 / 5; border-radius: 0; }

body.t-sambreel .sc-contact-split { padding: 72px 20px 92px; }
body.t-sambreel .sc-field input, body.t-sambreel .sc-field textarea { background: #191c21; border-color: #2a2e35; border-radius: 0; color: #eef0f2; }

@media (max-width: 900px) {
  body.t-sambreel .sc-strip { --smb-cols: 2; }
  body.t-sambreel .sc-strip:has(.sc-strip-card:nth-child(6)) { --smb-cols: 3; }
  body.t-sambreel .product-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-sambreel .sc-banner:not(:has(.btn)) .sc-banner-inner { grid-template-columns: 1fr; gap: 20px; }
}

/* NIGHT — the slate drops to a true wet black, the oilskin lifts a shade
   because it is still carrying every button and both prices on its own, and the
   showcase panels go down with the ground so wall two never floats off it. */
html[data-theme="dark"] body.t-sambreel {
  background: #0a0b0d;
  color: #969ca5;
  --smb-oil: #f2bd45;
  --bg-flat: #0a0b0d;
  --surface: #101216;
  --surface-2: #15181d;
  --line: #1e2126;
  --line-strong: #2e3239;
  --heading: #f4f6f8;
  --text: #969ca5;
  --muted: #6f757e;
  --header-bg: #0a0b0d;
}
html[data-theme="dark"] body.t-sambreel .sf-header, html[data-theme="dark"] body.t-sambreel .sf-head,
html[data-theme="dark"] body.t-sambreel .sf-footer, html[data-theme="dark"] body.t-sambreel .sf-foot,
html[data-theme="dark"] body.t-sambreel .sf-cats { background: #0a0b0d; border-color: #1e2126; }
html[data-theme="dark"] body.t-sambreel .sc-show-item,
html[data-theme="dark"] body.t-sambreel .sc-show-item:nth-child(4n + 2),
html[data-theme="dark"] body.t-sambreel .sc-show-item:nth-child(4n + 3) { background: #0a0b0d; box-shadow: inset 0 0 0 1px #191c21; }
html[data-theme="dark"] body.t-sambreel .product-card .ph { background: #101216; }
html[data-theme="dark"] body.t-sambreel .sc-field input,
html[data-theme="dark"] body.t-sambreel .sc-field textarea { background: #101216; border-color: #1e2126; color: #f4f6f8; }