/* ---------- Snaffle — riding school & tack room (STORE) --------------------
   THE STRUCTURAL MOVE: ONE AXIS, TWO BLEEDS. Every heading, sub, slab, quote,
   field and submit on this page sits on the same centre line — nothing is set
   left, nothing is split image-one-side/copy-the-other — and the only two
   things allowed to touch the viewport edge are the full-height stage at the
   top and the closing photograph near the foot. Between them the rhythm is a
   contained centred column of type, then a row of four equal photo tiles,
   twice, so the twin strips bracket the single catalogue with the bare quote
   sitting quiet in the middle. One padding value and one gap value carry all
   three tile bands, and no block on the page has a fill, a frame or a shadow.
   The two strips are addressed off the ids the renderer emits on the richtext
   blocks (#about, #about-2) rather than :nth-of-type, which — the hero being
   the first section — would silently land on the hero instead. */
body.t-snaffle {
  background: #f7f2e7;
  color: #4a3a2a;
  --sn-dark: #2b2118;
  --sn-ochre: #b0812f;
  --sn-ochre-ink: #8a6222;
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --radius: 0;
  --shadow: none;
  --bg-flat: #f7f2e7;
  --header-bg: #2b2118;
  --surface: #fdfaf3;
  --surface-2: #efe8d9;
  --line: #ded3bf;
  --line-strong: #c6b89e;
  --heading: #2b2118;
  --text: #4a3a2a;
  --muted: #7d6d5b;
}

/* THE BAR — saddle-brown and flat, and it stays dark over the stage instead of
   going transparent. Wordmark hard left as always, the rest tracked out right */
body.t-snaffle .sf-header, body.t-snaffle .sf-head,
body.t-snaffle .sf-footer, body.t-snaffle .sf-foot, body.t-snaffle .sf-cats {
  background: var(--sn-dark); border-color: #3d3024;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-snaffle .sf-name { color: #f7f2e7; text-transform: uppercase; letter-spacing: 0.28em; font-size: 13px; font-weight: 700; }
body.t-snaffle .sf-header-right, body.t-snaffle .sf-header .sf-cart,
body.t-snaffle .sf-footer, body.t-snaffle .sf-footer a { color: #cbbda8; }

/* every control is one flat ochre slab — nothing on this page carries a border */
body.t-snaffle .btn.brand { background: var(--sn-ochre); border: 0; color: #241a10; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; font-weight: 700; padding: 15px 30px; }
body.t-snaffle .btn.brand:hover { background: var(--sn-ochre-ink); color: #f7f2e7; opacity: 1; }

/* BLEED 1 of 2 — the whole first screen is one photograph with three things on
   the axis and nothing else competing for it */
body.t-snaffle .sc-hero { min-height: 100vh; padding: 120px 20px; }
body.t-snaffle .sc-hero h1 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(38px, 6.4vw, 84px); line-height: 1.03; letter-spacing: -0.02em; }

/* the contained column: one measure, one axis, leading opened right out */
body.t-snaffle .sc-h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(22px, 2.9vw, 34px); letter-spacing: -0.01em; color: var(--heading); margin-bottom: clamp(26px, 3.4vw, 42px); }
body.t-snaffle .sc-richtext { max-width: 660px; padding: clamp(76px, 9vw, 124px) 20px clamp(52px, 6vw, 84px); }
body.t-snaffle .sc-richtext p { color: var(--text); font-size: 16.5px; line-height: 2; }

/* THE QUIET MIDDLE — the second richtext carries no photograph and no section
   heading of its own: the quoted sentence IS the heading, set large on the
   axis, and the ochre rule under it is the only mark in the whole band */
body.t-snaffle #about-2 { max-width: 800px; padding: clamp(88px, 10vw, 136px) 20px clamp(88px, 10vw, 136px); }
body.t-snaffle #about-2 .sc-h2 { font-size: clamp(25px, 3.7vw, 44px); line-height: 1.32; margin-bottom: 0; }
body.t-snaffle #about-2 p { color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; }
body.t-snaffle #about-2 p::before { content: ""; display: block; width: 54px; height: 2px; background: var(--sn-ochre); margin: 36px auto 26px; }

/* THE TWIN STRIPS AND THE CATALOGUE — one padding value and one gap for all
   three tile bands, so they read as a single rhythm rather than three sections;
   four across in every one of them, which is why the counts are 4, 8 and 4 */
body.t-snaffle #about + .sc-strip, body.t-snaffle #about-2 + .sc-strip,
body.t-snaffle .sc-products { padding: 0 20px clamp(76px, 9vw, 120px); }
body.t-snaffle .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-snaffle .sc-strip-img { border: 0; aspect-ratio: 4 / 5; }
body.t-snaffle .sc-strip-label { margin-top: 16px; color: var(--sn-ochre-ink); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; line-height: 1.55; }
body.t-snaffle .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 26px; padding: 0; }
body.t-snaffle .product-card, body.t-snaffle .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-snaffle .product-card .ph { aspect-ratio: 4 / 5; }
body.t-snaffle .product-card .meta { padding: 15px 0 0; text-align: center; }
body.t-snaffle .product-card .p { color: var(--sn-ochre-ink); font-weight: 700; margin-top: 5px; }

/* BLEED 2 of 2 — the closing photograph: a heading and one slab over it */
body.t-snaffle .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 88px 24px; }
body.t-snaffle .sc-banner h2 { font-family: var(--sf-serif); font-weight: 400; font-size: clamp(27px, 4.1vw, 48px); letter-spacing: -0.01em; margin-bottom: 28px; }

/* THE FOOT — a narrow field stack on the same axis, with the submit pulled onto
   the centre line rather than left where the shared form leaves it */
body.t-snaffle .sc-contact { max-width: 470px; padding: clamp(76px, 9vw, 120px) 20px clamp(80px, 9vw, 124px); }
body.t-snaffle .sc-contact-form .btn { align-self: center; margin-top: 16px; }

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

/* NIGHT — the paper drops to the inside of a stable before first light, the bar
   and the footer drop below that so they still read as separate strips, and the
   ochre lifts because it is carrying every price and every tile label alone. */
html[data-theme="dark"] body.t-snaffle {
  background: #1c1610;
  color: #c8bba7;
  --sn-dark: #120d08;
  --sn-ochre: #d3a44b;
  --sn-ochre-ink: #e0b86c;
  --bg-flat: #1c1610;
  --header-bg: #120d08;
  --surface: #241d15;
  --surface-2: #2c241a;
  --line: #382e22;
  --line-strong: #4d4030;
  --heading: #f4ece0;
  --text: #c8bba7;
  --muted: #8d806e;
}
html[data-theme="dark"] body.t-snaffle .sf-header, html[data-theme="dark"] body.t-snaffle .sf-head,
html[data-theme="dark"] body.t-snaffle .sf-footer, html[data-theme="dark"] body.t-snaffle .sf-foot,
html[data-theme="dark"] body.t-snaffle .sf-cats { border-color: #2a2118; }
html[data-theme="dark"] body.t-snaffle .btn.brand:hover { background: var(--sn-ochre-ink); color: #1c1610; }