/* ---- aalwyn (Aalwyn — Aloe ferox tapping farm & apothecary 302) ----
   THE ONE STRUCTURAL MOVE: a stripe rhythm the page holds end to end —
   contained, contained, FULL-BLEED, contained, contained, contained,
   FULL-BLEED. Everything sits inside the gutters except two deliberate
   breaks, and both take the same deep succulent green: the promo band,
   where the green is MULTIPLIED through the photograph, and the closing
   contact strip, where it goes flat and becomes the loudest colour change
   on the page. The two breaks bracket the selling; nothing else is allowed
   to reach the edge. Chalk-white plaster ground, near-black type kept small
   and wide-tracked so the veld and workroom photography carries the page,
   and one bitter amber — aloe sap drying on the open pan — spent on the
   rand figure alone.
   The two strips are told apart by CHILD COUNT, `:has(> :nth-child(5))`,
   never by :nth-of-type: every band on this page renders as a bare
   <section>, so an of-type selector would be counting heroes and grids and
   would silently miss. Six squares across at the top, four landscape crops
   lower down — both counts fill their rows exactly. */
body.t-aalwyn {
  background: #f4f2ea; color: #3a3b33;
  --radius: 0; --surface: #fbfaf5; --surface-2: #e9e6da;
  --line: #ddd9cb; --line-strong: #c3bda9;
  --heading: #14160f; --text: #3a3b33; --muted: #75776a; --header-bg: #f4f2ea;
  --alw-green: #24452c; --alw-amber: #9d6410; --alw-wash: #4d7d55;
}
body.t-aalwyn .sf-header, body.t-aalwyn .sf-footer { background: #f4f2ea; border-color: #ddd9cb; }
body.t-aalwyn .sf-name { font-size: 15px; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700; }
/* flat slabs, no border anywhere near them */
body.t-aalwyn .btn.brand { background: var(--alw-green); color: #f4f2ea; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 15px 34px; }
body.t-aalwyn .btn.brand:hover { background: #16301c; }
/* headings small and quiet — the photography is the loud thing here */
body.t-aalwyn .sc-h2 { text-transform: uppercase; letter-spacing: 0.3em; font-size: 12px; font-weight: 700; color: var(--heading); margin: 0 0 28px; }
/* the opener: the whole first screen, three frames cross-fading under it */
body.t-aalwyn .sc-hero { min-height: 100vh; padding: 120px 20px; }
body.t-aalwyn .sc-hero h1 { font-size: clamp(32px, 5.4vw, 64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; margin: 0 0 18px; }
body.t-aalwyn .sc-hero p { text-transform: uppercase; letter-spacing: 0.26em; font-size: 12px; font-weight: 700; margin: 0 0 32px; }
/* both strips: bare pictures on the plaster, no card, no border, no radius */
body.t-aalwyn .sc-strip { padding: 76px 20px 12px; }
body.t-aalwyn .sc-strip-img, body.t-aalwyn .sc-about-media img { border: 0; border-radius: 0; background: var(--surface-2); }
body.t-aalwyn .sc-strip-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; color: var(--muted); margin-top: 11px; }
/* SIX — the range at a glance, one contained row of squares */
body.t-aalwyn .sc-strip-row:has(> :nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
/* FOUR — how the tapping works, one evenly spaced line of landscape crops */
body.t-aalwyn .sc-strip-row:not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
body.t-aalwyn .sc-strip-row:not(:has(> :nth-child(5))) .sc-strip-img { aspect-ratio: 4 / 3; }
/* BREAK ONE — the promo band leaves the gutters and pulls the green
   straight through the photograph rather than sitting beside it */
body.t-aalwyn .sc-banner { margin: 88px calc(50% - 50vw) 24px; min-height: 56vh; display: flex; align-items: center; justify-content: center; background-color: var(--alw-wash); background-blend-mode: multiply; }
body.t-aalwyn .sc-banner h2 { font-size: clamp(24px, 3.6vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 14px; }
/* EIGHT, four across, two even rows — flat tiles with the chrome stripped off */
body.t-aalwyn .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; padding: 0 0 12px; }
body.t-aalwyn .product-card, body.t-aalwyn .product-card:hover { background: transparent; border-color: transparent; box-shadow: none; transform: none; }
body.t-aalwyn .product-card .meta { padding: 14px 0 0; }
/* the amber, and the only place on the page it is allowed */
body.t-aalwyn .product-card .p { color: var(--alw-amber); font-size: 14.5px; font-weight: 700; }
/* the cutting season — photograph hard on the left, copy to its right */
body.t-aalwyn .sc-about-split { gap: 56px; padding: 92px 20px 84px; align-items: start; }
body.t-aalwyn .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.9; }
/* BREAK TWO — flat green, edge to edge, and the last thing on the page */
body.t-aalwyn .sc-contact-band { background: var(--alw-green); color: #eae7db; margin-top: 92px; padding: 88px 0 96px; }
body.t-aalwyn .sc-contact-band .sc-h2, body.t-aalwyn .sc-contact-band .sc-contact-sub, body.t-aalwyn .sc-contact-band .sc-field label { color: #eae7db; }
body.t-aalwyn .sc-contact-band .sc-field input, body.t-aalwyn .sc-contact-band .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(234, 231, 219, 0.42); border-radius: 0; padding: 11px 2px; color: #f4f2ea; }
body.t-aalwyn .sc-contact-band .btn.brand { background: #f4f2ea; color: #14160f; }
body.t-aalwyn .sc-contact-band .btn.brand:hover { background: #d6d1bd; }
@media (max-width: 900px) {
  body.t-aalwyn .sc-strip-row:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-aalwyn .sc-strip-row:not(:has(> :nth-child(5))), body.t-aalwyn .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the plaster drops to the colour of the shed after dark. Both
   full-bleed breaks stay exactly where they were: the green deepens so the
   contact strip still reads as an interruption against a near-black ground,
   the wash over the promo photograph lifts so the band does not go to mud,
   and the amber warms because it is still carrying every price on the page. */
html[data-theme="dark"] body.t-aalwyn {
  background: #14160f; color: #c4c7b8;
  --surface: #1b1e15; --surface-2: #23271b;
  --line: #2c3123; --line-strong: #454c3a;
  --heading: #f2f1e6; --text: #c4c7b8; --muted: #838775; --header-bg: #14160f;
  --alw-green: #1f3f27; --alw-amber: #d09a35; --alw-wash: #5c8a63;
}
html[data-theme="dark"] body.t-aalwyn .sf-header, html[data-theme="dark"] body.t-aalwyn .sf-footer { background: #14160f; border-color: #2c3123; }
html[data-theme="dark"] body.t-aalwyn .btn.brand { background: #82b166; color: #11150c; }
html[data-theme="dark"] body.t-aalwyn .btn.brand:hover { background: #9cc781; }
html[data-theme="dark"] body.t-aalwyn .sc-contact-band .btn.brand { background: #ece9db; color: #14160f; }
html[data-theme="dark"] body.t-aalwyn .sc-contact-band .btn.brand:hover { background: #cfcbb9; }