/* ---- sandtray (Sandtray — Play therapy & counselling room supplies 163) ----
   THE STRUCTURAL MOVE: THE PROMPT PRINTED ABOVE THE NAME, THEN A COUNT RHYTHM
   OF FOUR THEN SIX. The bar is solid and static, so the page opens on a strip
   and then on a wall rather than on a photograph with a menu floating over it.
   Inside the stage the copy stack is reversed with `order`, which puts the small
   prompting line ABOVE an oversized name line — the one thing the reference does
   that the shared markup cannot do on its own. Four labelled tiles are welded
   flush onto the floor of that stage: no top padding, gapped sideways, and no
   tint behind them. The six-up mark row then lands low on the page as the widest
   and lightest band of all, the far end of the same rhythm. Clay is spent only
   on the controls and the rand figures; vlei-green carries every heading and the
   closing band, and nothing else on the page is coloured at all. The six-up is
   targeted through `.sc-products + .sc-strip`, because the grid ahead of it
   renders as .sc-products and never as .sc-strip's own element type. */
body.t-sandtray {
  background: #f4efe6;
  color: #3f4a43;
  --sd-green: #1e3a33;
  --sd-clay: #c08063;
  --radius: 0;
  --shadow: none;
  --header-bg: #f4efe6;
  --surface: #fbf8f2;
  --surface-2: #e9e2d4;
  --line: #ddd4c3;
  --line-strong: #c6bba4;
  --heading: #1e3a33;
  --text: #3f4a43;
  --muted: #717d75;
}

/* the bar sits ABOVE the stage and scrolls away with it — wordmark hard left,
   links hard right, nothing floating, nothing pinned to the top of the window */
body.t-sandtray .sf-header, body.t-sandtray .sf-head,
body.t-sandtray .sf-foot, body.t-sandtray .sf-footer, body.t-sandtray .sf-cats {
  position: static; background: #f4efe6; border-color: #ddd4c3;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-sandtray .sf-name { font-family: var(--sf-serif); font-weight: 500; font-size: 23px; letter-spacing: 0.005em; }
/* the landing page carries no search and no category rail by design */
body.t-sandtray:has(.sc-hero) .sf-searchbtn, body.t-sandtray:has(.sc-hero) .sf-cats { display: none; }
body.t-sandtray .btn.brand { background: var(--sd-clay); border: 0; color: #fbf8f2; box-shadow: none; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; font-size: 11.5px; padding: 16px 34px; }

/* THE STAGE — three slides, the whole first screen, the stack dead centre */
body.t-sandtray .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-sandtray .sc-hero-inner { display: flex; flex-direction: column; align-items: center; max-width: 900px; }
/* THE REVERSAL — the prompting line is set above the oversized name line */
body.t-sandtray .sc-hero p { order: -1; margin: 0 0 22px; text-transform: uppercase; letter-spacing: 0.3em; font-size: 11px; font-weight: 700; }
body.t-sandtray .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(54px, 13vw, 150px); line-height: 0.94; letter-spacing: -0.02em; margin: 0 0 36px; }
body.t-sandtray .sc-h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(24px, 3.4vw, 40px); letter-spacing: -0.012em; color: var(--heading); margin-bottom: 28px; }

/* no tint, no frame and no rounded card behind any tile in either strip */
body.t-sandtray .sc-strip-img { border: 0; background: none; }
/* THE WELD — four labelled tiles fused to the floor of the stage, gapped
   sideways but with nothing at all between them and the photograph above */
body.t-sandtray .sc-hero + .sc-strip { padding: 0 20px; }
body.t-sandtray .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.t-sandtray .sc-hero + .sc-strip .sc-strip-label { margin-top: 15px; text-align: left; font-family: var(--sf-serif); font-weight: 400; font-size: clamp(15px, 1.7vw, 21px); color: var(--heading); }

/* the page's one asymmetric moment: photograph left, three lines and a claim right */
body.t-sandtray .sc-about-split { padding: 104px 20px 92px; gap: 64px; }
body.t-sandtray .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* THE ANCHOR — four across, twice, small object over title over price */
body.t-sandtray .sc-products { padding: 24px 20px 8px; }
body.t-sandtray .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; }
body.t-sandtray .product-card .p, body.t-sandtray .sc-buy-p { color: var(--sd-clay); font-weight: 700; font-variant-numeric: tabular-nums; }

/* THE SIX-UP — the widest and lightest band on the page, wider than the column
   everything else is held inside, with every label in text and none in the image */
body.t-sandtray .sc-products + .sc-strip { max-width: none; width: 100%; margin: 0; padding: 60px max(20px, calc(50vw - 680px)) 74px; }
body.t-sandtray .sc-products + .sc-strip .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; }
body.t-sandtray .sc-products + .sc-strip .sc-strip-label { margin-top: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 700; }

/* contained, not bled — the banner stays inside the column the lower page keeps to */
body.t-sandtray .sc-banner { margin: 0 auto 84px; width: auto; max-width: 100%; padding: 104px 28px; }
body.t-sandtray .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 24px; }

/* the page ends on one painted vlei-green band welded to the foot. Tokens are
   re-pointed inside it so the heading and the fields sit on green, not on sand. */
body.t-sandtray .sc-contact-band { background: var(--sd-green); color: #ece5d7; margin-top: 0; padding: 92px 0 100px; --heading: #f4efe6; --muted: #a9b8b0; --surface: #2a4740; --line: #46655c; }
body.t-sandtray .sc-contact-band .btn.brand { background: #f4efe6; color: #1e3a33; }

@media (max-width: 980px) {
  body.t-sandtray .sc-hero { min-height: 82vh; }
  body.t-sandtray .product-grid, body.t-sandtray .sc-buy-grid,
  body.t-sandtray .sc-hero + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-sandtray .sc-products + .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.t-sandtray .sc-products + .sc-strip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the workshop after hours. Sand goes to a warm green-black, and the
   closing band lifts to #1f2e2a so it still reads a shade off the ground instead
   of merging into it. Clay was picked against sand and goes muddy on a near-black
   page, so it lifts two steps and the slab takes dark type instead of light. */
html[data-theme="dark"] body.t-sandtray {
  background: #131a18;
  color: #b2bdb6;
  --sd-green: #1f2e2a;
  --sd-clay: #d6997c;
  --header-bg: #131a18;
  --surface: #1a2321;
  --surface-2: #212c29;
  --line: #2d3936;
  --line-strong: #3f4d49;
  --heading: #eceee6;
  --text: #b2bdb6;
  --muted: #7d8a84;
}
html[data-theme="dark"] body.t-sandtray .sf-header, html[data-theme="dark"] body.t-sandtray .sf-head,
html[data-theme="dark"] body.t-sandtray .sf-foot, html[data-theme="dark"] body.t-sandtray .sf-footer,
html[data-theme="dark"] body.t-sandtray .sf-cats { background: #131a18; border-color: #2d3936; }
html[data-theme="dark"] body.t-sandtray .btn.brand { color: #1a120c; }
html[data-theme="dark"] body.t-sandtray .sc-contact-band { color: #ccd6cf; --heading: #eceee6; --muted: #93a29b; --surface: #27352f; --line: #40514a; }
html[data-theme="dark"] body.t-sandtray .sc-contact-band .btn.brand { background: #eceee6; color: #131a18; }