/* --- AANDRYF — hub-motor e-bikes, scooters and packs, Albert Road ----------
   THE STRUCTURAL MOVE: the gapless four-across process row. Directly under a
   full-viewport slider the strip gives up its container, its gutters and its
   card chrome entirely — four cells running edge to edge, an icon-scale
   photograph over a tracked grey label, divided by nothing but an inset
   hairline. Everything else is asphalt: one near-black ground wall to wall,
   kerbstone off-white type, captions and prices dropped to mid grey, and a
   single hazard amber rationed to the buy slab, the rand figure and the hero's
   hairline outline. There is no white inversion anywhere on the page, which is
   what keeps it apart from the other dark stores. Nothing here touches the
   header, the nav, or the order or position of a single item inside them. -- */
body.t-aandryf {
  background: #141416;
  color: #d5d1cb;
  --ad-amber: #e8892a;
  --ad-amber-hi: #f79c3d;
  --bg-flat: #141416;
  --header-bg: #141416;
  --surface: #1a1a1d;
  --surface-2: #1f1f23;
  --line: #2a2a2e;
  --line-strong: #3c3c42;
  --heading: #f2f0ec;
  --text: #d5d1cb;
  --muted: #8b8b86;
  --radius: 0;
  --shadow: none;
}

/* a flat asphalt bar at the same value as the page, so the slider begins under
   the header rather than behind it. Colour, type and tracking only. */
body.t-aandryf .sf-head, body.t-aandryf .sf-header,
body.t-aandryf .sf-foot, body.t-aandryf .sf-footer, body.t-aandryf .sf-cats {
  background: #141416; border-color: #2a2a2e;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-aandryf .sf-name, body.t-aandryf .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* AMBER 1 of 3 — the buy control, a flat edgeless slab with asphalt type on it */
body.t-aandryf .btn.brand { background: var(--ad-amber); border: 0; box-shadow: none; color: #141416; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; font-weight: 700; padding: 14px 26px; }
body.t-aandryf .btn.brand:hover { background: var(--ad-amber-hi); color: #141416; }

/* the whole first screen and nothing under it: three photographs cross-fading
   full-bleed to all four edges, the line dead centre on the vertical midline,
   and AMBER 2 of 3 — the hairline the ghost control is drawn with, never a slab */
body.t-aandryf .sc-hero { min-height: 100vh; padding: 120px 24px; }
body.t-aandryf .sc-hero h1 { font-size: clamp(34px, 6.6vw, 76px); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 22px; }
body.t-aandryf .sc-hero p { text-transform: uppercase; letter-spacing: 0.26em; font-size: clamp(9.5px, 1.2vw, 11.5px); font-weight: 600; margin: 0 0 40px; }
body.t-aandryf .sc-hero .btn.brand.sc-hero-ghost { background: transparent; border: 1px solid var(--ad-amber); color: #f2f0ec; }
body.t-aandryf .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--ad-amber); color: #141416; }

/* every small label on the page is the same object: tracked mid-grey caps */
body.t-aandryf .sc-h2, body.t-aandryf .sc-buy-cat, body.t-aandryf .sc-strip-label {
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.24em; font-size: clamp(9.5px, 1.2vw, 11px); font-weight: 600;
}

/* THE GAPLESS ROW — the strip loses its container, its gutters and its card
   chrome: four cells edge to edge on a half-step ground, an icon-scale
   photograph over a centred label, separated by an inset hairline and nothing
   else. This is the move the page is built around. */
body.t-aandryf .sc-strip { max-width: none; margin: 0; padding: 0; }
body.t-aandryf .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-aandryf .sc-strip-card { background: var(--surface); padding: 58px 24px 54px; }
body.t-aandryf .sc-strip-card + .sc-strip-card { box-shadow: inset 1px 0 0 var(--line); }
body.t-aandryf .sc-strip-img { width: 68px; height: 68px; margin: 0 auto; border: 0; background: transparent; }
body.t-aandryf .sc-strip-label { margin-top: 18px; }

/* the shop's own account — image hard LEFT and running off the page edge, copy
   in the right half. The page never flips its image side. */
body.t-aandryf .sc-about-split { max-width: none; margin: 0; padding: 0; gap: 0; align-items: stretch; }
body.t-aandryf .sc-about-media img { height: 100%; min-height: 60vh; aspect-ratio: auto; }
body.t-aandryf .sc-about-copy { padding: 10vh 7vw 10vh 5vw; }
body.t-aandryf .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.95; }

/* one full-bleed photograph carrying a single enormous line straight across the
   page — no supporting column, no button, nothing beside it */
body.t-aandryf .sc-banner { margin: 0 calc(50% - 50vw); min-height: 74vh; display: flex; align-items: center; justify-content: center; padding: 90px 24px; }
body.t-aandryf .sc-banner-inner { max-width: 1180px; }
body.t-aandryf .sc-banner h2 { font-size: clamp(26px, 4.8vw, 66px); font-weight: 600; line-height: 1.06; letter-spacing: -0.04em; margin: 0; text-shadow: none; }

/* the catalogue, arriving only at position five: four across in two full rows,
   the white-ground flat-lays sitting on the asphalt like machines under a
   workshop lamp. AMBER 3 of 3 is the rand figure and it appears nowhere else. */
body.t-aandryf .sc-buygrid { padding: 96px 20px 88px; }
body.t-aandryf .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 26px; }
body.t-aandryf .sc-buy-p { color: var(--ad-amber); font-size: 15px; font-weight: 600; }

@media (max-width: 900px) {
  body.t-aandryf .sc-hero { min-height: 86vh; padding: 96px 20px; }
  body.t-aandryf .sc-strip-row, body.t-aandryf .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-aandryf .sc-about-media img { min-height: 0; aspect-ratio: 4 / 3; }
  body.t-aandryf .sc-about-copy { padding: 34px 20px 62px; }
  body.t-aandryf .sc-banner { min-height: 52vh; padding: 64px 20px; }
}

/* NIGHT — nothing on this page inverts, so night goes the other way instead:
   the asphalt drops two more stops to tar, the hairlines close up, and the
   amber lifts so the buy slab, the rand figure and the hero's outline still
   carry against the lower ground. */
html[data-theme="dark"] body.t-aandryf {
  background: #0a0a0b;
  color: #cdc9c2;
  --ad-amber: #f09a3e;
  --ad-amber-hi: #ffae55;
  --bg-flat: #0a0a0b;
  --header-bg: #0a0a0b;
  --surface: #121214;
  --surface-2: #17171a;
  --line: #232326;
  --line-strong: #34343a;
  --heading: #f6f4f0;
  --text: #cdc9c2;
  --muted: #7e7e79;
}
html[data-theme="dark"] body.t-aandryf .sf-head, html[data-theme="dark"] body.t-aandryf .sf-header,
html[data-theme="dark"] body.t-aandryf .sf-foot, html[data-theme="dark"] body.t-aandryf .sf-footer,
html[data-theme="dark"] body.t-aandryf .sf-cats { background: #0a0a0b; border-color: #232326; }
html[data-theme="dark"] body.t-aandryf .btn.brand { color: #0a0a0b; }