/* ---- kelp (Kelp — False Bay dive shop & air fills 166) ---------------------
   THE STRUCTURAL MOVE: THE BOOKEND. Two gapless welded photo walls and nothing
   of that kind between them — a four-up fused flush onto the floor of the stage
   with no heading above it, and a six-up wall dropped straight onto the contact
   band at the foot. Between the two bookends there is exactly ONE priced block,
   so the four-across buy grid lands as an event rather than a rhythm, announced
   by the page's only oversized full-bleed title. The near-black green runs
   unbroken from the menu bar through every band to the contact strip; kelp-gold
   is spent on prices, the rule under the catalogue title, the hairline over the
   contact band and the buy slabs, and nowhere else. The product flat-lays are
   the only white on the page, which is what makes the grid punch. The two strips
   are told apart by CARD COUNT — :has(.sc-strip-card:nth-child(5)) is the closing
   wall, the weld has four — and the second banner by having no body copy, because
   both banners render as the same .sc-banner and neither is reachable by element
   type. */
body.t-kelp {
  background: #0c1a17;
  color: #d9d5ca;
  --kp-gold: #c9a227;
  --kp-bone: #e8e4da;
  --radius: 0;
  --shadow: none;
  --header-bg: #0c1a17;
  --surface: #11231f;
  --surface-2: #16302a;
  --line: #21403a;
  --line-strong: #35564e;
  --heading: #e8e4da;
  --text: #d9d5ca;
  --muted: #8d9a94;
}

/* the bar is the same water as the page and never changes state — flat, nothing
   glassy, so the ground is unbroken from the menu down to the contact strip */
body.t-kelp .sf-header, body.t-kelp .sf-head,
body.t-kelp .sf-cats, body.t-kelp .sf-foot, body.t-kelp .sf-footer {
  background: #0c1a17; border-color: #21403a;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* brand hard left, small and tracked, so the menu can sit hard right against it */
body.t-kelp .sf-name { text-transform: uppercase; letter-spacing: 0.24em; font-size: 14px; font-weight: 700; }
body.t-kelp .btn.brand { background: var(--kp-gold); border: 0; color: #0c1a17; box-shadow: none; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; font-size: 11px; padding: 16px 32px; }

/* the stage: three slides, the whole first screen, one line of caps dead centre
   with a ghost outline under it and no card or panel behind either */
body.t-kelp .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-kelp .sc-hero h1 { text-transform: uppercase; font-weight: 800; font-size: clamp(30px, 6.6vw, 80px); line-height: 1; letter-spacing: 0.01em; margin-bottom: 18px; }

/* BOTH BOOKENDS give up the container, the padding and the gutters. This is the
   only pair of rules the two walls share; everything below is per-wall. */
body.t-kelp .sc-hero + .sc-strip,
body.t-kelp .sc-strip:has(.sc-strip-card:nth-child(5)) { max-width: none; width: 100%; margin: 0; padding: 0; }

/* BOOKEND ONE — four welded onto the floor of the stage, every label a figure
   rather than a category word, printed gold on a painted bar */
body.t-kelp .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-kelp .sc-hero + .sc-strip .sc-strip-img { aspect-ratio: 16 / 11; border: 0; }
body.t-kelp .sc-hero + .sc-strip .sc-strip-label { margin: 0; padding: 20px 22px 24px; background: var(--surface); color: var(--kp-gold); text-align: left; font-size: clamp(13px, 1.35vw, 17px); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }

/* THE ONE PRICED BLOCK ON THE PAGE — announced by the only oversized full-bleed
   title, ruled off in gold, then four across in two rows that fill */
body.t-kelp .sc-buygrid { padding: 104px 20px 96px; }
body.t-kelp .sc-buygrid .sc-h2 { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw) 52px; padding: 0 max(20px, calc(50vw - 520px)) 24px; border-bottom: 1px solid var(--kp-gold); text-align: left; text-transform: uppercase; font-weight: 800; font-size: clamp(30px, 7.2vw, 86px); line-height: 0.95; letter-spacing: -0.01em; color: var(--heading); }
body.t-kelp .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; }
/* the flat-lays are the only white anywhere, so the grid reads as bright holes
   cut into the dark ground */
body.t-kelp .sc-buy-media { background: #ffffff; }
body.t-kelp .sc-buy-cat { color: var(--muted); letter-spacing: 0.2em; }
body.t-kelp .sc-buy-p { color: var(--kp-gold); font-weight: 700; font-size: 16px; }

/* the two full-bleed bands bracketing the prose. Vertical margin goes to zero so
   they weld to their neighbours; the second carries no body copy, which is how
   it is reached, and closes to a dark centred frame instead of a photograph. */
body.t-kelp .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; padding: 20px; display: flex; align-items: center; justify-content: center; }
body.t-kelp .sc-banner:not(:has(p)) { min-height: 44vh; box-shadow: inset 0 0 0 100vmax rgba(6, 15, 13, 0.66); }

/* the single prose block on the whole page — one photograph, one column */
body.t-kelp .sc-about-split { padding: 104px 20px; gap: 60px; }
body.t-kelp .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* BOOKEND TWO — the closing wall, six across, gapless, labels burnt into the
   bottom of each picture, landing straight onto the contact band with no gap */
body.t-kelp .sc-strip:has(.sc-strip-card:nth-child(5)) .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-kelp .sc-strip:has(.sc-strip-card:nth-child(5)) .sc-strip-card { position: relative; }
body.t-kelp .sc-strip:has(.sc-strip-card:nth-child(5)) .sc-strip-img { aspect-ratio: 3 / 4; border: 0; }
body.t-kelp .sc-strip:has(.sc-strip-card:nth-child(5)) .sc-strip-label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 44px 14px 14px; background: linear-gradient(rgba(6, 15, 13, 0), rgba(6, 15, 13, 0.9)); color: var(--kp-bone); font-size: 12px; font-weight: 600; line-height: 1.35; }

/* the terminal block sits on the same water as everything above it, separated by
   one gold hairline rather than by a change of ground */
body.t-kelp .sc-contact-band { background: #0c1a17; border-top: 1px solid var(--kp-gold); margin-top: 0; padding: 96px 0 104px; --surface: #11231f; --line: #2a4a43; }

@media (max-width: 1000px) {
  body.t-kelp .sc-hero { min-height: 84vh; }
  body.t-kelp .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kelp .sc-strip:has(.sc-strip-card:nth-child(5)) .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-kelp .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.t-kelp .sc-buygrid { padding: 64px 20px 60px; }
  body.t-kelp .sc-strip:has(.sc-strip-card:nth-child(5)) .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the bay after sunset. The ground drops another two steps so the painted
   label bar under the weld and the panels inside the contact band stay a shade
   off it instead of merging, and the gold lifts a little: #c9a227 was picked to
   hold against #0c1a17 and goes muddy on near-black, so at night it brightens
   while the slab keeps dark type. The flat-lay white is left alone — it is the
   one thing on the page that is meant to stay the same brightness in both. */
html[data-theme="dark"] body.t-kelp {
  background: #060f0d;
  color: #c3c0b6;
  --kp-gold: #d9b53c;
  --header-bg: #060f0d;
  --surface: #0c1a17;
  --surface-2: #112420;
  --line: #1b332e;
  --line-strong: #2c4841;
  --heading: #e8e4da;
  --text: #c3c0b6;
  --muted: #7d8a84;
}
html[data-theme="dark"] body.t-kelp .sf-header, html[data-theme="dark"] body.t-kelp .sf-head,
html[data-theme="dark"] body.t-kelp .sf-cats, html[data-theme="dark"] body.t-kelp .sf-foot,
html[data-theme="dark"] body.t-kelp .sf-footer { background: #060f0d; border-color: #1b332e; }
html[data-theme="dark"] body.t-kelp .btn.brand { color: #060f0d; }
html[data-theme="dark"] body.t-kelp .sc-contact-band { background: #060f0d; --surface: #0c1a17; --line: #24413b; }