/* ---------- Saailand — seed, lick & soil merchant (bridge 136) --------------
   STRUCTURAL MOVE — THE CATALOGUE IS BRACKETED BY TWO SIX-TILE ROWS. The first
   is welded three across and two down, full-bleed edge to edge with zero gutter
   and a soil caption bar butted onto the floor of every frame, so the six read
   as one continuous band and not as six cards in a container. The second keeps
   the same three-by-two count but pulls back inside the container, gapped and
   hung under ochre hairlines, answering the wall at half the weight. The two
   strips are told apart by whether the block carries a heading —
   :not(:has(.sc-h2)) / :has(.sc-h2) — never by :nth-of-type, which matches the
   element and would land on the hero. Between and around them the width
   oscillates bleed → contain → bleed → contain, and the page ends on the weld:
   the closing photograph's margins are zeroed so the soil contact strip lands
   flush on its bottom edge and the last thing you see is two stacked full-bleed
   blocks. Colour is withheld the whole way down — ochre carries the rules and
   the headings, and the single veld green is spent only on the price and the
   buy control, so the commercial moment is the one place the page changes. */
body.t-saailand {
  background: #f6f2e8;
  color: #453729;
  --sld-soil: #33261a;
  --sld-on: #f1e9da;
  --sld-ochre: #a8802f;
  --sld-ochre-on: #d0a557;
  --sld-green: #2f5d3a;
  --sld-on-green: #f6f2e8;
  --bg-flat: #f6f2e8;
  --surface: #fffdf7;
  --surface-2: #ece4d3;
  --line: #ddd3bf;
  --line-strong: #c1b399;
  --heading: #241a10;
  --text: #453729;
  --muted: #7e7160;
  --header-bg: #f6f2e8;
  --radius: 0;
  --shadow: none;
}
/* token-driven so the chrome follows the ground into the night block on its own */
body.t-saailand .sf-head, body.t-saailand .sf-cats,
body.t-saailand .sf-foot, body.t-saailand .sf-footer { background: var(--bg-flat); border-color: var(--line); }

/* the bar rides transparent over the three-slide stage, so the first screen is
   uninterrupted photograph. Scoped by :has — the cart, search and product pages
   have no hero underneath and need the ordinary solid bar back. */
body.t-saailand: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-saailand:has(.sc-hero) .sf-name, body.t-saailand:has(.sc-hero) .sf-cart,
body.t-saailand:has(.sc-hero) .sf-navlink, body.t-saailand:has(.sc-hero) .sf-searchbtn,
body.t-saailand:has(.sc-hero) .theme-toggle { color: #f6f2e8; }

/* GREEN 1 of 2 — the buy control. A flat slab: the base inset ring is killed. */
body.t-saailand .btn.brand { background: var(--sld-green); border-color: var(--sld-green); color: var(--sld-on-green); box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 14px 27px; }

/* the stage holds the whole first screen and carries nothing but two lines */
body.t-saailand .sc-hero { min-height: 100vh; }
body.t-saailand .sc-hero h1 { font-weight: 700; font-size: clamp(38px, 6.4vw, 78px); line-height: 1.02; letter-spacing: -0.035em; }
body.t-saailand .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid rgba(246, 242, 232, 0.8); color: #f6f2e8; }

/* OCHRE — every section heading, sitting on the hairline that rules it off */
body.t-saailand .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(11px, 1.3vw, 13px); font-weight: 700; color: var(--sld-ochre); border-bottom: 1px solid var(--sld-ochre); padding-bottom: 13px; margin: 0 0 34px; }
body.t-saailand .sc-strip-img { border: 0; aspect-ratio: 16 / 11; background: var(--surface-2); }

/* BRACKET ONE — the loudest band on the page: six frames welded three across
   and two down, edge to edge, each caption butted flush onto its own floor */
body.t-saailand .sc-strip:not(:has(.sc-h2)) { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; }
body.t-saailand .sc-strip:not(:has(.sc-h2)) .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-saailand .sc-strip:not(:has(.sc-h2)) .sc-strip-label { margin: 0; padding: 15px 17px 17px; background: var(--sld-soil); color: var(--sld-on); text-align: left; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; }

/* BRACKET TWO — the same three by two, but contained, gapped and hung under
   ochre hairlines, so it echoes the wall at half the visual weight */
body.t-saailand .sc-strip:has(.sc-h2) { padding: clamp(66px, 8vw, 100px) 20px clamp(54px, 7vw, 82px); }
body.t-saailand .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
body.t-saailand .sc-strip:has(.sc-h2) .sc-strip-label { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sld-ochre); color: var(--heading); text-align: left; font-size: 13.5px; font-weight: 600; }

/* the story snaps the page back inward: the photograph runs off the left page
   edge while the copy holds a narrow column against it, a caption to a room */
body.t-saailand .sc-about-split { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; grid-template-columns: 52vw minmax(0, 1fr); gap: clamp(28px, 5vw, 66px); }
body.t-saailand .sc-about-copy { max-width: 42ch; padding: clamp(60px, 8vw, 104px) clamp(20px, 4vw, 56px) clamp(60px, 8vw, 104px) 0; }

/* six bags, three across and twice down, so the catalogue fills both its rows */
body.t-saailand .sc-buygrid { padding: clamp(70px, 9vw, 108px) 20px clamp(58px, 7vw, 86px); }
body.t-saailand .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 30px; }
body.t-saailand .sc-buy-cat { color: var(--muted); letter-spacing: 0.2em; font-weight: 600; }
/* GREEN 2 of 2 — the price, the only figure on the page that is not brown */
body.t-saailand .sc-buy-p { color: var(--sld-green); font-weight: 700; font-size: 17px; margin-top: 6px; }

/* THE WELD — the closing photograph loses its margins so the soil strip lands
   flush on its bottom edge and the page ends on two stacked full-bleed blocks */
body.t-saailand .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: clamp(70px, 9vw, 110px) 24px; }
body.t-saailand .sc-contact-band { --sld-ochre: var(--sld-ochre-on); background: var(--sld-soil); color: var(--sld-on); padding: clamp(66px, 8vw, 100px) 0 clamp(76px, 9vw, 112px); }
body.t-saailand .sc-contact-band .sc-contact-sub, body.t-saailand .sc-contact-band .sc-field label { color: var(--sld-on); }
body.t-saailand .sc-contact-band .sc-field input, body.t-saailand .sc-contact-band .sc-field textarea { background: rgba(246, 242, 232, 0.06); border-color: rgba(241, 233, 218, 0.28); color: var(--sld-on); }
/* the two controls standing on dark ground fill bone, not green — the green
   belongs to the catalogue and is not spent anywhere else on the page */
body.t-saailand .sc-banner .btn.brand, body.t-saailand .sc-contact-band .btn.brand { background: var(--sld-on); border-color: var(--sld-on); color: var(--sld-soil); }

@media (max-width: 900px) {
  body.t-saailand .sc-strip:not(:has(.sc-h2)) .sc-strip-row,
  body.t-saailand .sc-strip:has(.sc-h2) .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-saailand .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-saailand .sc-about-split { grid-template-columns: 1fr; }
  body.t-saailand .sc-about-copy { max-width: none; padding: 34px 20px 62px; }
}

/* NIGHT — the bone paper drops to dark soil and the ink flips to bone, but the
   two closing blocks are held a shade lighter than the page so the inversion
   still reads as an inversion. Ochre and the veld green both lift to hold their
   contrast, and the button ink flips with them via --sld-on-green. */
html[data-theme="dark"] body.t-saailand {
  background: #17120d;
  color: #c8bdae;
  --sld-soil: #241c14;
  --sld-on: #efe6d6;
  --sld-ochre: #c99a4a;
  --sld-ochre-on: #d8ae62;
  --sld-green: #5f9668;
  --sld-on-green: #14100b;
  --bg-flat: #17120d;
  --surface: #1e1810;
  --surface-2: #241d15;
  --line: #2e261c;
  --line-strong: #3f3527;
  --heading: #f4ece0;
  --text: #c8bdae;
  --muted: #8b8071;
  --header-bg: #17120d;
}