/* ---------- Soutpan — West Coast salt works 142 (store) ----------
   THE STRUCTURAL MOVE: goods before story. The stage is one photograph a full
   viewport deep with the wordmark floating on the centre axis of a split bar;
   the moment it ends the page contains itself hard and lands eight priced
   tiles, four across in two rows, with no category strip, no counters and no
   testimonials between the picture and the price. The split about block is the
   second half of that move: the photograph runs edge to edge into the left half
   with no gutter and no containment, while the copy beside it holds a 34ch
   measure inside roughly twice its own width in air — so the page reads as a
   photograph interrupted by one paragraph, not the other way round. Two colours
   only. Every control is a flat slate slab; the brine pink of the evaporation
   ponds is spent on the rand figure and the hero underline and nowhere else,
   which is why the category label is pulled off --brand and back to muted. */
body.t-soutpan {
  background: #f6f4ef;
  color: #2b3230;
  --sp-brine: #c97f7a;
  --sp-band: #2b3230;
  --sp-ctl: #2b3230;
  --sp-ctl-ink: #f6f4ef;
  --sp-ctl-hover: #171b1a;
  --radius: 0;
  --shadow: none;
  --bg-flat: #f6f4ef;
  --header-bg: #f6f4ef;
  --surface: #fcfbf8;
  --surface-2: #efece4;
  --line: #dfdbd1;
  --line-strong: #c7c2b6;
  --heading: #1e2422;
  --text: #2b3230;
  --muted: #6e7570;
}

/* the chrome takes the same bleached ground, flat — no blur and nothing glassy */
body.t-soutpan .sf-header, body.t-soutpan .sf-head,
body.t-soutpan .sf-footer, body.t-soutpan .sf-foot, body.t-soutpan .sf-cats {
  background: #f6f4ef; border-color: #dfdbd1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* THE BAR — wordmark parked on the centre axis with the menu and the cart total
   pushed hard against the right edge, so the bar reads as split around a mark */
body.t-soutpan .sf-header .container { position: relative; }
body.t-soutpan .sf-name { text-transform: uppercase; letter-spacing: 0.3em; font-size: 13px; font-weight: 600; }

/* every control on the page is one flat slate slab; the tokens flip at night so
   no second .btn rule is needed down there */
body.t-soutpan .btn.brand { background: var(--sp-ctl); border-color: var(--sp-ctl); color: var(--sp-ctl-ink); box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 600; padding: 14px 26px; }
body.t-soutpan .btn.brand:hover { background: var(--sp-ctl-hover); border-color: var(--sp-ctl-hover); }

/* the whole first screen is one photograph — three slides, copy dead centre */
body.t-soutpan .sc-hero { min-height: 100vh; }
body.t-soutpan .sc-hero h1 { font-size: clamp(34px, 6vw, 78px); font-weight: 500; line-height: 1.06; letter-spacing: -0.025em; }
/* BRINE 1 of 2 — the CTA underline, drawn as an inset shadow so the control
   carries no border at all (house rule: flat slabs; this one is flatter still) */
body.t-soutpan .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 0; color: #ffffff; box-shadow: inset 0 -2px 0 var(--sp-brine); }

body.t-soutpan .sc-h2 { font-weight: 500; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.01em; color: var(--heading); margin-bottom: clamp(30px, 4vw, 46px); }

/* THE CONTAINMENT — off the full-bleed stage straight into a held column of
   goods. All the whitespace is taken vertically, above and below the counter */
body.t-soutpan .sc-buygrid { max-width: 1160px; padding: clamp(76px, 10vw, 132px) 20px clamp(80px, 10vw, 140px); }
body.t-soutpan .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 30px; }
body.t-soutpan .sc-buy-cat { color: var(--muted); letter-spacing: 0.22em; font-size: 10px; font-weight: 600; }
/* BRINE 2 of 2 — the rand figure, and that is the whole of the accent */
body.t-soutpan .sc-buy-p { color: var(--sp-brine); font-weight: 600; font-size: 15px; }

/* THE SPLIT — the photograph fills the left half edge to edge, gutterless and
   uncontained; the copy holds a narrow measure inside about twice its own width
   of air, with the leading opened right out. No rule, no caption, no icons. */
body.t-soutpan .sc-about-split { max-width: none; width: 100%; padding: 0; gap: 0; grid-template-columns: 1fr 1fr; align-items: stretch; }
body.t-soutpan .sc-about-media img { aspect-ratio: auto; height: 100%; min-height: clamp(420px, 56vw, 700px); border-radius: 0; }
body.t-soutpan .sc-about-copy { max-width: 34ch; padding: clamp(56px, 8vw, 104px) clamp(24px, 6vw, 96px); }
body.t-soutpan .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 2.05; }

/* one full-bleed photograph with type over it between the story and the foot */
body.t-soutpan .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; }

/* THE FOOT — one slate strip closing the page: a line of copy left, the fields
   laid inline across the band, the submit at the right edge of the row */
body.t-soutpan .sc-contact-band { background: var(--sp-band); color: #f6f4ef; border-top: 0; padding: clamp(64px, 8vw, 96px) 0 clamp(70px, 9vw, 104px); }
body.t-soutpan .sc-contact-band-inner { max-width: 1160px; text-align: left; }
body.t-soutpan .sc-contact-band .sc-h2, body.t-soutpan .sc-contact-band .sc-field label { color: #f6f4ef; text-align: left; }
body.t-soutpan .sc-contact-band .sc-contact-sub { color: rgba(246, 244, 239, 0.62); margin-bottom: 34px; }
body.t-soutpan .sc-contact-band .sc-contact-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 18px; }
body.t-soutpan .sc-contact-band .sc-field { flex: 1 1 190px; }
body.t-soutpan .sc-contact-band .sc-field input, body.t-soutpan .sc-contact-band .sc-field textarea { background: rgba(246, 244, 239, 0.07); border-color: rgba(246, 244, 239, 0.24); color: #f6f4ef; }
body.t-soutpan .sc-contact-band .sc-field textarea { height: 45px; min-height: 45px; resize: vertical; }
body.t-soutpan .sc-contact-band .btn.brand { background: rgba(246, 244, 239, 0.14); border-color: rgba(246, 244, 239, 0.14); color: #f6f4ef; margin-top: 0; }

@media (max-width: 900px) {
  body.t-soutpan .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-soutpan .sc-about-copy { max-width: none; }
}

/* NIGHT — the ground goes to a wet pan floor, the closing strip drops below it
   so it still separates, the control slab inverts to bone, and the brine lifts
   because it is carrying every rand figure on the page on its own. */
html[data-theme="dark"] body.t-soutpan {
  background: #171b1a;
  color: #c6cbc7;
  --sp-brine: #de9a93;
  --sp-band: #0f1312;
  --sp-ctl: #f2f1ec;
  --sp-ctl-ink: #171b1a;
  --sp-ctl-hover: #de9a93;
  --bg-flat: #171b1a;
  --header-bg: #171b1a;
  --surface: #1e2422;
  --surface-2: #242a28;
  --line: #2e3533;
  --line-strong: #424946;
  --heading: #f2f1ec;
  --text: #c6cbc7;
  --muted: #848b86;
}
html[data-theme="dark"] body.t-soutpan .sf-header, html[data-theme="dark"] body.t-soutpan .sf-head,
html[data-theme="dark"] body.t-soutpan .sf-footer, html[data-theme="dark"] body.t-soutpan .sf-foot,
html[data-theme="dark"] body.t-soutpan .sf-cats { background: #171b1a; border-color: #2e3533; }