/* RIFFLE — cold water and pale gravel, image-heavy at the top and text-heavy at
   the bottom. THE STRUCTURAL MOVE: a gapless four-up welded straight onto the
   bottom edge of a full-viewport slider hero, carried on the first of two
   wet-slate full-bleed plates (the other closes the page as the contact band),
   so every bone-coloured contained section between them reads as air. One
   accent only — kingfisher teal — on buttons, prices and the rule under the
   weld. The two strips are told apart by sibling order, never by nth-of-type. */
body.t-riffle {
  background: #efece4;
  color: #23292c;
  --surface: #efece4;
  --surface-2: #e5e1d7;
  --line: #d8d3c7;
  --line-strong: #c4bdae;
  --heading: #23292c;
  --text: #4a5256;
  --muted: #858c8f;
  --header-bg: #efece4;
  --radius: 0;
}
/* the nav is its own opaque bar — it sits above the hero, never floats on it */
body.t-riffle .sf-header, body.t-riffle .sf-footer { background: #efece4; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #d8d3c7; }
body.t-riffle .btn.brand { background: #0e7d88; color: #f4f2ec; box-shadow: none; text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; font-weight: 700; padding: 14px 28px; }
body.t-riffle .btn.brand:hover { background: #0a636c; opacity: 1; }
body.t-riffle .sc-h2 { text-align: left; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; font-size: clamp(11px, 1.2vw, 12.5px); color: #858c8f; margin: 0 0 26px; }
body.t-riffle .sc-hero { min-height: 100vh; }
body.t-riffle .sc-hero h1 { font-weight: 600; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -0.025em; }
body.t-riffle .sc-hero p { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11.5px; font-weight: 600; }

/* THE WELD — the four-up leaves the container, drops every gutter and butts
   flush against the bottom of the hero. The page's one moment of compression,
   and the only place the teal is used as a rule rather than as ink. */
body.t-riffle .sc-strip { max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); padding: 0 0 26px; background: #2b3438; border-bottom: 3px solid #0e7d88; }
body.t-riffle .sc-strip .sc-h2 { padding: 24px clamp(20px, 4vw, 54px) 18px; color: #8fa0a6; }
body.t-riffle .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-riffle .sc-strip-img { border: 0; aspect-ratio: 4 / 3; background: #1e2528; }
body.t-riffle .sc-strip-label { margin-top: 11px; color: #e4e0d6; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 700; }

/* the square wall — contained again, gapped, caption UNDER each frame, no
   stagger and no masonry. Sibling order, so it never fires on the weld. */
body.t-riffle .sc-strip ~ .sc-strip { max-width: 1080px; width: auto; margin: 0 auto; padding: 80px 20px 84px; background: transparent; border-bottom: 0; }
body.t-riffle .sc-strip ~ .sc-strip .sc-h2 { padding: 0; color: #858c8f; }
body.t-riffle .sc-strip ~ .sc-strip .sc-strip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
body.t-riffle .sc-strip ~ .sc-strip .sc-strip-label { margin-top: 13px; text-align: left; color: #23292c; text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; }
body.t-riffle .sc-strip ~ .sc-strip .sc-strip-img, body.t-riffle .sc-buy-media img { aspect-ratio: 1; background: #e5e1d7; }

/* the destination row is a FIRST FOUR, never a ragged row — whatever the
   catalogue grows to, this grid keeps one filled line and the whole range
   lives in the buy grid further down. #products is the first products
   section's own anchor, so the buy grid below is untouched. */
body.t-riffle #products .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; padding: 0 0 8px; }
body.t-riffle #products .product-card:nth-child(n + 5) { display: none; }
body.t-riffle .product-card, body.t-riffle .product-card:hover { background: transparent; border: 0; box-shadow: none; transform: none; }
body.t-riffle .product-card .ph { aspect-ratio: 4 / 3; }
body.t-riffle .product-card .meta { padding: 13px 0 0; }
body.t-riffle .product-card .p, body.t-riffle .sc-buy-p { color: #0e7d88; font-weight: 600; }

/* one centred measure with real air around it and no picture near it */
body.t-riffle .sc-richtext { max-width: 660px; padding: 96px 20px 100px; }
body.t-riffle .sc-richtext .sc-h2 { text-align: center; }
body.t-riffle .sc-richtext p { font-size: 17px; line-height: 1.8; color: #4a5256; }

/* the dense buy grid, then the dusk plate with its copy held left */
body.t-riffle .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 26px; }
body.t-riffle .sc-buy-card { align-items: flex-start; text-align: left; }
body.t-riffle .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; display: flex; align-items: flex-end; text-align: left; padding: 0 clamp(20px, 4vw, 54px) 54px; }
body.t-riffle .sc-banner-inner { margin: 0; max-width: 580px; }

/* the second slate plate closes the page with the weight of the first */
body.t-riffle .sc-contact-band { background: #2b3438; color: #dfe4e5; padding: 78px 0 88px; }
body.t-riffle .sc-contact-band-inner { text-align: left; }
body.t-riffle .sc-contact-band .sc-h2, body.t-riffle .sc-contact-band .sc-contact-sub { color: #9aa9ad; }
body.t-riffle .sc-contact-band .sc-field input, body.t-riffle .sc-contact-band .sc-field textarea { color: #23292c; border-color: #465256; }

@media (max-width: 900px) {
  body.t-riffle .sc-strip-row, body.t-riffle .sc-strip ~ .sc-strip .sc-strip-row,
  body.t-riffle #products .product-grid, body.t-riffle .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the gravel goes wet, the plates darken with it, and the teal comes up
   a stop so it keeps its bite as the only colour on the page. */
html[data-theme="dark"] body.t-riffle {
  background: #14191b;
  color: #c4cbcd;
  --surface: #14191b;
  --surface-2: #1d2426;
  --line: #2a3235;
  --line-strong: #3a4448;
  --heading: #eef1ee;
  --text: #c4cbcd;
  --muted: #828b8e;
  --header-bg: #14191b;
  --radius: 0;
}
html[data-theme="dark"] body.t-riffle .sf-header, html[data-theme="dark"] body.t-riffle .sf-footer { background: #14191b; border-color: #2a3235; }
html[data-theme="dark"] body.t-riffle .sc-strip { background: #1b2225; border-bottom-color: #3ab4bd; }
html[data-theme="dark"] body.t-riffle .sc-strip ~ .sc-strip { background: transparent; }
html[data-theme="dark"] body.t-riffle .sc-strip ~ .sc-strip .sc-strip-img, html[data-theme="dark"] body.t-riffle .sc-buy-media img { background: #1d2426; }
html[data-theme="dark"] body.t-riffle .sc-strip ~ .sc-strip .sc-strip-label { color: #eef1ee; }
html[data-theme="dark"] body.t-riffle .btn.brand { background: #3ab4bd; color: #0c1113; }
html[data-theme="dark"] body.t-riffle .btn.brand:hover { background: #58c8d0; }
html[data-theme="dark"] body.t-riffle .product-card .p, html[data-theme="dark"] body.t-riffle .sc-buy-p { color: #3ab4bd; }
html[data-theme="dark"] body.t-riffle .sc-richtext p { color: #c4cbcd; }
html[data-theme="dark"] body.t-riffle .sc-contact-band { background: #1b2225; color: #c4cbcd; }
html[data-theme="dark"] body.t-riffle .sc-contact-band .sc-field input, html[data-theme="dark"] body.t-riffle .sc-contact-band .sc-field textarea { color: #eef1ee; border-color: #374245; }