/* ---- stamen (Stamen — Cut flowers & studio 117) ---------------------------
   THE STRUCTURAL MOVE: the gapped four-across shop grid is WELDED onto a
   gapless six-tile band. .sc-products gives up its bottom padding, .product-grid
   gives up its own, and the strip breaks out to the full viewport with gap: 0 —
   so the one place on the page where whitespace disappears sits hard against
   the one place it was most generous. Everything else is bone white with
   near-black ink and all the saturation left to the photographs; the clay rose
   is rationed to exactly three homes — the hero's ghost outline, the price
   under each tile, and the strip labels — and never fills a background.
   The two darker interruptions (the strip band and the second catalogue) share
   one --st-band token, so night only has to move the token. */
body.t-stamen {
  background: #f7f4ef;
  color: #45413b;
  --st-rose: #9c5a50;
  --st-band: #e9e5dd;
  --bg-flat: #f7f4ef;
  --surface: #ffffff;
  --surface-2: #efebe3;
  --line: #e0dbd2;
  --line-strong: #c7c0b4;
  --heading: #14120f;
  --text: #45413b;
  --muted: #837c72;
  --header-bg: #f7f4ef;
  --radius: 0;
  --shadow: none;
}

/* the bar stays a solid pale ground rather than going glassy over the stage,
   and the logo is pulled out of the flow so it sits dead centre with the cart
   and the toggle pushed hard right — the reference's exact header */
body.t-stamen .sf-header, body.t-stamen .sf-cats, body.t-stamen .sf-footer {
  background: #f7f4ef; border-color: #e0dbd2;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-stamen .sf-header .container { position: relative; padding-top: 22px; padding-bottom: 20px; }
body.t-stamen .sf-name { font-size: 19px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; }
/* the four categories become the short centred menu that sits beneath the logo */
body.t-stamen .sf-cats .container { justify-content: center; gap: 4px 34px; padding: 13px 0 14px; }
body.t-stamen .sf-cats a, body.t-stamen .sc-show-cat { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 600; color: var(--muted); }
body.t-stamen .sc-h2 { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 600; color: var(--muted); margin: 0 0 34px; }

body.t-stamen .btn.brand { background: #14120f; border-color: #14120f; color: #f7f4ef; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; padding: 15px 28px; }

/* the stage holds the whole first screen; the copy stacks dead centre and the
   only outlined control on the page carries ROSE 1 of 3 */
body.t-stamen .sc-hero { min-height: 100vh; }
body.t-stamen .sc-hero h1 { font-weight: 400; font-size: clamp(34px, 5.8vw, 70px); line-height: 1.06; letter-spacing: -0.03em; }
body.t-stamen .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--st-rose); color: #ffffff; }

/* the bare centred paragraph that sits alone on white before any product */
body.t-stamen .sc-richtext { max-width: 640px; padding: 118px 20px 94px; }
body.t-stamen .sc-richtext p { color: var(--heading); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.8; }

/* --- THE WELD: gapped four-across tiles, then nothing between them and the band --- */
body.t-stamen .sc-products { padding-bottom: 0; }
body.t-stamen .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 26px; padding: 0; }
body.t-stamen .product-card, body.t-stamen .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; text-align: center; }
body.t-stamen .product-card .ph { background: #ffffff; }
/* ROSE 2 of 3 — the price reads as a caption under the flat-lay, not a figure */
body.t-stamen .product-card .p, body.t-stamen .sc-show-price { color: var(--st-rose); font-size: 13.5px; letter-spacing: 0.06em; }
body.t-stamen .sc-strip { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; background: var(--st-band); }
body.t-stamen .sc-strip-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-stamen .sc-strip-img { aspect-ratio: 3 / 4; border: 0; }
/* ROSE 3 of 3 — the six labels */
body.t-stamen .sc-strip-label { margin: 0; padding: 15px 10px 20px; color: var(--st-rose); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; font-weight: 600; }

/* the second pass over the same catalogue: four across on the warm band with
   hairline gutters and the panel height released — botanical notes, not tiles */
body.t-stamen .sc-showcase, body.t-stamen .sc-show-item,
body.t-stamen .sc-show-item:nth-child(4n + 2), body.t-stamen .sc-show-item:nth-child(4n + 3) { background: var(--st-band); }
body.t-stamen .sc-show-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.t-stamen .sc-show-inner { min-height: 0; padding: 36px 24px 42px; border-left: 1px solid var(--line); }

body.t-stamen .sc-banner { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); min-height: 64vh; }

/* the page closes on a horizontal rule of a form rather than a contact page */
body.t-stamen .sc-contact-band { background: #f7f4ef; border-top: 1px solid #e0dbd2; padding: 80px 0 92px; }
body.t-stamen .sc-contact-band-inner { max-width: 900px; }
body.t-stamen .sc-contact-band .sc-contact-form { flex-direction: row; align-items: flex-end; gap: 14px; }
body.t-stamen .sc-contact-band .sc-field { flex: 1; }
body.t-stamen .sc-contact-band .sc-field textarea { height: 43px; min-height: 43px; resize: vertical; }
body.t-stamen .sc-contact-band .sc-contact-form .btn { align-self: flex-end; margin-top: 0; }

@media (max-width: 900px) {
  body.t-stamen .sf-name { letter-spacing: 0.2em; }
  body.t-stamen .product-grid, body.t-stamen .sc-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-stamen .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-stamen .sc-contact-band .sc-contact-form { flex-direction: column; align-items: stretch; }
}

/* NIGHT — the bone ground drops to a warm near-black, the band token moves with
   it so the strip and the second catalogue stay the darker interruptions, the
   rose lifts to hold its contrast, and the flat-lays keep a paper ground so a
   row of cut-out white product shots does not glare in a dark room. */
html[data-theme="dark"] body.t-stamen {
  background: #171613;
  color: #c6c1b7;
  --st-rose: #cb8b7e;
  --st-band: #201f1b;
  --bg-flat: #171613;
  --surface: #1e1d19;
  --surface-2: #232219;
  --line: #2c2b26;
  --line-strong: #3d3c35;
  --heading: #f5f2ea;
  --text: #c6c1b7;
  --muted: #8a847a;
  --header-bg: #171613;
}
html[data-theme="dark"] body.t-stamen .sf-header, html[data-theme="dark"] body.t-stamen .sf-cats,
html[data-theme="dark"] body.t-stamen .sf-footer, html[data-theme="dark"] body.t-stamen .sc-contact-band {
  background: #171613; border-color: #2c2b26;
}
html[data-theme="dark"] body.t-stamen .product-card .ph { background: #f2efe8; }
html[data-theme="dark"] body.t-stamen .btn.brand { background: #f5f2ea; border-color: #f5f2ea; color: #171613; }