/* ============================== SPENS ==============================
   Home preserving & bottling supply, Greyton. Chalk-white ground the whole way
   down, deep bottle-green ink for every heading and every line of body, and one
   damson kept strictly to the solid slabs and the rand figures — the brand token
   itself is the green, so nothing else on the page can leak the accent.
   THE STRUCTURAL MOVE: total centre symmetry. The single split band in the tree
   is folded into ONE centred column and its photograph is ordered BENEATH the
   copy (`.sc-about-split` goes column-flex, `.sc-about-media` takes order 2), so
   the page never once runs image beside text and never wraps a paragraph around
   anything. Blocks are opened by a green hairline at a tenth and nothing else:
   no cards, no boxes, no shadows. The only place two colour photographs touch is
   the four-up wall welded flush to the bottom edge of the banner. */
body.t-spens {
  background: #faf8f3;
  color: #1f3b2c;
  --sp-damson: #6b2740;
  --sp-rule: rgba(31, 59, 44, 0.1);
  --bg-flat: #faf8f3;
  --surface: #ffffff;
  --surface-2: #f3f0e8;
  --line: #dde1d7;
  --line-strong: #c2ccc0;
  --heading: #1f3b2c;
  --text: #1f3b2c;
  --muted: #56675c;
  --header-bg: #faf8f3;
  --radius: 0;
  --shadow: none;
}

/* flat chalk furniture on a green hairline — nothing glassy, nothing blurred */
body.t-spens .sf-header, body.t-spens .sf-head,
body.t-spens .sf-footer, body.t-spens .sf-foot, body.t-spens .sf-cats {
  background: #faf8f3; border-color: var(--sp-rule);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* the bar floats ON the stage rather than above it: name hard left, the short
   menu hard right, and no ground under any of it until the hero scrolls past */
body.t-spens:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; background: transparent; border-bottom: 0; }
body.t-spens:has(.sc-hero) .sf-name, body.t-spens:has(.sc-hero) .sf-navlink,
body.t-spens:has(.sc-hero) .sf-cart, body.t-spens:has(.sc-hero) .sf-searchbtn,
body.t-spens:has(.sc-hero) .theme-toggle { color: #f6f3ea; }
body.t-spens .sf-name { font-weight: 700; font-size: 19px; letter-spacing: 0.2em; text-transform: uppercase; }

/* the one damson, and the only two places it is allowed to appear */
body.t-spens .btn.brand { background: var(--sp-damson); border: 0; color: #f9f4f0; box-shadow: none; font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 34px; }
body.t-spens .btn.brand:hover { background: #571e33; }
body.t-spens .sc-show-price, body.t-spens .pdp .price, body.t-spens .product-card .p { color: var(--sp-damson); font-weight: 700; font-variant-numeric: tabular-nums; }

/* the stage: the whole first screen, three plates cross-fading, copy dead centre */
body.t-spens .sc-hero { min-height: 100vh; padding: 124px 20px 96px; }
body.t-spens .sc-hero h1 { font-size: clamp(36px, 6.4vw, 76px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 18px; }
body.t-spens .sc-h2 { font-size: clamp(12.5px, 1.4vw, 15px); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--heading); margin-bottom: 28px; }

/* every contained block: one narrow centred measure, opened by a hairline
   instead of a card edge */
body.t-spens .sc-richtext, body.t-spens .sc-contact { max-width: 640px; border-top: 1px solid var(--sp-rule); padding: 104px 20px 110px; }
body.t-spens .sc-richtext p, body.t-spens .sc-about-copy p { color: var(--text); font-size: 17px; line-height: 1.95; }

/* THE MOVE — the split band folded into one centred column, photograph last */
body.t-spens .sc-about-split { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 760px; border-top: 1px solid var(--sp-rule); padding: 104px 20px 112px; }
body.t-spens .sc-about-media { order: 2; width: 100%; margin-top: 42px; }
body.t-spens .sc-about-copy .sc-h2 { text-align: center; }

/* THE WELD — banner and four-up wall are one uninterrupted photographic event:
   no bottom margin under the banner, no gutter anywhere between the tiles */
body.t-spens .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; display: flex; align-items: center; justify-content: center; }
body.t-spens .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-spens .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-spens .sc-strip-card { position: relative; }
body.t-spens .sc-strip-img { border: 0; }
body.t-spens .sc-strip-label { position: absolute; left: 20px; right: 20px; bottom: 20px; margin: 0; color: #f6f3ea; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65); }

/* six panels, three across in two rows that FILL, on unbroken chalk — the shared
   checkerboard is switched off so no tile carries a ground of its own, and the
   shot sits UNDER its heading exactly as every other image on the page does */
body.t-spens .sc-show-grid, body.t-spens .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; }
body.t-spens .sc-show-item, body.t-spens .sc-show-item:nth-child(4n + 2),
body.t-spens .sc-show-item:nth-child(4n + 3) { background: transparent; border-top: 1px solid var(--sp-rule); }
body.t-spens .sc-show-inner { padding: 44px 8px 54px; min-height: 0; }
body.t-spens .sc-show-media img { width: 100%; max-width: 100%; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 900px) {
  body.t-spens .sc-show-grid, body.t-spens .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-spens .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-spens .sc-hero { min-height: 88vh; padding: 104px 20px 76px; }
}

/* NIGHT — the chalk drops to the inside of a dark pantry, the ink inverts to a
   pale chalk, and the damson lifts to a brighter plum because it is still
   carrying every solid slab and every rand figure on its own. The hairline is
   redefined once and every rule above picks it up. */
html[data-theme="dark"] body.t-spens {
  background: #131a15;
  color: #c6d1c6;
  --sp-damson: #c96a8a;
  --sp-rule: rgba(226, 234, 224, 0.13);
  --bg-flat: #131a15;
  --surface: #1a231c;
  --surface-2: #1f2a21;
  --line: #2c3a2f;
  --line-strong: #435046;
  --heading: #e8efe6;
  --text: #c6d1c6;
  --muted: #8b9a8d;
  --header-bg: #131a15;
}
html[data-theme="dark"] body.t-spens .sf-header, html[data-theme="dark"] body.t-spens .sf-head,
html[data-theme="dark"] body.t-spens .sf-footer, html[data-theme="dark"] body.t-spens .sf-foot,
html[data-theme="dark"] body.t-spens .sf-cats { background: #131a15; border-color: var(--sp-rule); }
html[data-theme="dark"] body.t-spens .btn.brand { color: #1d0d14; }