/* ---- mashie (Mashie — Golf pro shop & clubhouse 181) -----------------------
   THE STRUCTURAL MOVE: one chalk ground held from the nav to the footer with no
   band-to-band alternation anywhere, and the SAME four-across gapped row stated
   twice — priced stock first, the people behind the counter last. The strip row,
   the buy grid and the product grid all take their columns from ONE declaration,
   so the four-up is identical by construction rather than by coincidence.
   Separation is air, not paint: the stage ends in clear space instead of welding
   a row onto its floor, and the overlay richtext is the page's only full-bleed,
   so that single break reads as an event. Green lives in the photographs and in
   exactly two painted places (the closing band, the add-to-cart); brass is
   rationed to three (the hero slab, the buy-grid prices, the submit on the band)
   and is not allowed anywhere else — which is why .sc-buy-cat is pulled off
   var(--brand) and held to grey. */
body.t-mashie {
  background: #f6f6f1;
  color: #2f3a34;
  --ms-green: #123a28;
  --ms-brass: #a07c2f;
  --radius: 2px;
  --shadow: none;
  --header-bg: #f6f6f1;
  --surface: #f6f6f1;
  --surface-2: #e7e9e0;
  --line: #d9dbd0;
  --line-strong: #bcbfb1;
  --heading: #123a28;
  --text: #2f3a34;
  --muted: #6d776f;
}

/* the menu floats transparent over the stage — wordmark hard left, links right —
   and drops back onto chalk on every page that has no hero under it */
body.t-mashie .sf-head, body.t-mashie .sf-header,
body.t-mashie .sf-foot, body.t-mashie .sf-footer, body.t-mashie .sf-cats {
  background: #f6f6f1; border-color: #d9dbd0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-mashie:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 0; }
body.t-mashie:has(.sc-hero) .sf-name, body.t-mashie:has(.sc-hero) .sf-navlink,
body.t-mashie:has(.sc-hero) .sf-cart, body.t-mashie:has(.sc-hero) .theme-toggle { color: #f6f6f1; }
body.t-mashie .btn.brand { background: var(--ms-brass); border: 0; color: #fffcf3; box-shadow: none; text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; font-weight: 700; padding: 15px 30px; }

/* the stage: three slides, the whole first screen, copy dead centre, and nothing
   fastened to its bottom edge */
body.t-mashie .sc-hero { min-height: 100vh; padding: 124px 20px; }
body.t-mashie .sc-hero h1 { font-weight: 600; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -0.025em; }
body.t-mashie .sc-h2 { color: var(--heading); font-weight: 600; font-size: clamp(20px, 2.7vw, 30px); letter-spacing: -0.015em; margin-bottom: clamp(30px, 4vw, 46px); }

/* THE FIGURE, DECLARED ONCE, PRINTED FOUR TIMES — both strips and both catalogue
   blocks take their columns from this line, which is what makes the page read as
   one grid stated repeatedly instead of four grids that happen to agree */
body.t-mashie .sc-strip-row, body.t-mashie .sc-buy-grid, body.t-mashie .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 28px; }
body.t-mashie .sc-strip-img { aspect-ratio: 3 / 2; border: 0; }
body.t-mashie .sc-strip-label { margin-top: 14px; text-align: left; font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--heading); }
body.t-mashie .sc-hero + .sc-strip { padding: clamp(88px, 11vw, 148px) 20px 0; }
body.t-mashie .sc-products + .sc-strip { padding: 8px 20px clamp(84px, 10vw, 128px); }

/* THE ONE BLEED — the tenth at last light, full width. Nothing else below the
   stage leaves the container, so this is the only event on the ladder. */
body.t-mashie .sc-about-overlay { margin-top: clamp(88px, 11vw, 140px); padding: clamp(124px, 16vw, 200px) 20px; }

/* the narrow imageless column, carrying more air above and below it than
   anything else on the page gets */
body.t-mashie .sc-richtext { max-width: 620px; padding: clamp(112px, 15vw, 184px) 20px; text-align: center; }
body.t-mashie .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* the priced four-up, then the unpriced one under it. Neither set of cards keeps
   a box of its own, so the chalk never breaks into panels. */
body.t-mashie .sc-buy-cat { color: var(--muted); letter-spacing: 0.18em; font-weight: 600; }
body.t-mashie .sc-buy-p { color: var(--ms-brass); font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
body.t-mashie .btn.brand.sc-buy-btn { background: var(--ms-green); color: #f2f4ee; }
body.t-mashie .product-card { background: transparent; border: 0; border-radius: 0; }
body.t-mashie .product-card .ph { aspect-ratio: 3 / 2; border-radius: 0; }
body.t-mashie .product-card .meta { padding: 12px 0 0; }

/* the page closes on one unbroken painted strip — the only paint below the hero.
   Form tokens are re-pointed inside it so the inputs sit on green, not chalk. */
body.t-mashie .sc-contact-band { background: var(--ms-green); color: #eef1ea; margin-top: 0; padding: clamp(76px, 9vw, 112px) 0 clamp(84px, 10vw, 124px); --muted: #a9bcb0; --surface: #1b4632; --line: #3c604e; }
body.t-mashie .sc-contact-band .sc-h2, body.t-mashie .sc-contact-band .sc-field label,
body.t-mashie .sc-contact-band .sc-field input, body.t-mashie .sc-contact-band .sc-field textarea { color: #eef1ea; }
body.t-mashie .sc-contact-band .btn.brand { background: var(--ms-brass); color: #1d1506; }

@media (max-width: 900px) {
  body.t-mashie .sc-hero { min-height: 86vh; }
  body.t-mashie .sc-strip-row, body.t-mashie .sc-buy-grid, body.t-mashie .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
}

/* NIGHT — the clubhouse after the last group is in. Chalk goes to a green-black
   and the bottle green stops being ink and becomes the only thing it can still
   be at night: a band a shade off the ground. Brass lifts two steps, because
   #a07c2f was chosen against chalk and goes to mud on near-black, so the slab
   takes dark type instead of light — except the add-to-cart, which is sitting on
   green rather than brass and has to be pulled back to a light ink by hand. */
html[data-theme="dark"] body.t-mashie {
  background: #111512;
  color: #b4bdb6;
  --ms-green: #1b3a2a;
  --ms-brass: #c79a41;
  --header-bg: #111512;
  --surface: #111512;
  --surface-2: #1b201c;
  --line: #262d27;
  --line-strong: #3a433c;
  --heading: #eef1ea;
  --text: #b4bdb6;
  --muted: #7f8a82;
}
html[data-theme="dark"] body.t-mashie .sf-head, html[data-theme="dark"] body.t-mashie .sf-header,
html[data-theme="dark"] body.t-mashie .sf-foot, html[data-theme="dark"] body.t-mashie .sf-footer,
html[data-theme="dark"] body.t-mashie .sf-cats { background: #111512; border-color: #262d27; }
html[data-theme="dark"] body.t-mashie .btn.brand { color: #1a1305; }
html[data-theme="dark"] body.t-mashie .btn.brand.sc-buy-btn { color: #eef1ea; }
html[data-theme="dark"] body.t-mashie .sc-contact-band { --muted: #9bab9f; --surface: #24462f; --line: #3f5c4a; }