/** Shopify CDN: Minification failed

Line 3285:31 Expected identifier but found whitespace
Line 3285:38 Unexpected "\"product\""
Line 3299:73 Unterminated string token

**/
/* =====================================================================
   ap-motorsport.css
   ---------------------------------------------------------------------
   MOTORSPORT VISUAL LAYER for "Apex - Reifen & Autoteile" (Dawn fork).

   A self-contained, opt-in set of UTILITY classes that give the theme a
   premium, technical, motorsport feel: thin racing-red accent rules,
   angled section edges, a subtle tyre-tread texture, a technical
   spec-readout style, and "data chip" labels.

   Loaded GLOBALLY (orchestrator links it in theme.liquid AFTER
   ap-premium.css). Everything here is purely additive: a class only does
   something when applied, and NOTHING changes layout if a class is unused.

   PRINCIPLES
   - Token-first with fallbacks: var(--ap-accent, #E1001A) etc., so every
     rule works standalone even if the token snippet never ran.
   - Scheme-relative colour: surfaces / text read on BOTH light and dark
     sections (rgb(var(--color-foreground / -background))).
   - prefers-reduced-motion safe. Touch targets / a11y respected.
   - No external deps, no JS required.

   CONTENTS
     0. Local aliases (kept local; no global :root token authoring)
     1. Racing-red accent stripe / eyebrow rule
     2. Angled / diagonal section edge (clip-path + flat fallback)
     3. Tyre-tread texture background
     4. Technical spec-readout (tabular numbers, micro-labels, units)
     5. Data chip
   ===================================================================== */


/* =====================================================================
   0. LOCAL ALIASES
   ---------------------------------------------------------------------
   Scoped to this file's utilities only (no new global tokens). Each is a
   safe fallback chain so the file is self-contained.
   ===================================================================== */
.ap-stripe,
.ap-edge,
.ap-tread,
.ap-readout,
.ap-chip {
  /* Resolved accent + hairline that read on light AND dark schemes. */
  --ap-ms-accent: var(--ap-accent, #e1001a);
  --ap-ms-hairline: rgba(var(--color-foreground), 0.12);
  --ap-ms-muted: rgba(var(--color-foreground), 0.6);
  --ap-ms-ease: var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
  --ap-ms-dur: var(--ap-motion, 200ms);
}


/* =====================================================================
   1. RACING-RED ACCENT STRIPE / EYEBROW RULE
   ---------------------------------------------------------------------
   A thin, confident racing accent. Three forms:
   - .ap-stripe            : a standalone thin red bar (block) you can drop
                             above a heading. Width is restrained by default.
   - .ap-stripe--full      : stretches full width of its container.
   - .ap-stripe--eyebrow   : a flex row "rule + UPPERCASE micro-label",
                             the classic premium eyebrow.
   The optional second "speed" segment evokes a livery stripe.
   ===================================================================== */
.ap-stripe {
  display: block;
  width: 5.6rem;
  height: 3px;
  border-radius: 999px;
  background: var(--ap-ms-accent);
  /* A faint trailing fade reads as a racing "speed" tail, not a plain bar. */
  background-image: linear-gradient(
    90deg,
    var(--ap-ms-accent) 0%,
    var(--ap-ms-accent) 72%,
    color-mix(in srgb, var(--ap-ms-accent) 35%, transparent) 100%
  );
}

.ap-stripe--full {
  width: 100%;
}

.ap-stripe--center {
  margin-inline: auto;
}

.ap-stripe--thick {
  height: 5px;
}

/* Eyebrow: thin rule + uppercase technical micro-label in the accent. */
.ap-stripe--eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-xs, 8px);
  width: auto;
  height: auto;
  background: none;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ap-ms-accent);
}

.ap-stripe--eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2px;
  border-radius: 999px;
  background: var(--ap-ms-accent);
}


/* =====================================================================
   2. ANGLED / DIAGONAL SECTION EDGE
   ---------------------------------------------------------------------
   A motorsport "cut" on the top and/or bottom edge of a section. Built on
   clip-path so it never affects flow; browsers without clip-path simply
   render a normal rectangle (graceful flat fallback).

   USAGE: add .ap-edge plus a direction modifier to a full-bleed block
   that already has a background (e.g. Dawn's color-scheme wrapper). Pair
   with extra padding on that block so the cut eats into empty space, not
   into content. The cut depth is tunable via --ap-edge-depth.
   ===================================================================== */
.ap-edge {
  /* Depth of the diagonal cut. Override inline or per-section if desired. */
  --ap-edge-depth: var(--ap-space-xl, 40px);
  position: relative;
}

/* Bottom-edge cut: slopes down-left to up-right (livery direction). */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  .ap-edge--bottom {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--ap-edge-depth)),
      0 100%
    );
  }

  /* Top-edge cut: mirror of the bottom. */
  .ap-edge--top {
    clip-path: polygon(
      0 var(--ap-edge-depth),
      100% 0,
      100% 100%,
      0 100%
    );
  }

  /* Both edges cut for a parallelogram "race banner" feel. */
  .ap-edge--both {
    clip-path: polygon(
      0 var(--ap-edge-depth),
      100% 0,
      100% calc(100% - var(--ap-edge-depth)),
      0 100%
    );
  }

  /* Reverse the slope direction (down-right) where the layout calls for it. */
  .ap-edge--reverse.ap-edge--bottom {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 calc(100% - var(--ap-edge-depth))
    );
  }
  .ap-edge--reverse.ap-edge--top {
    clip-path: polygon(0 0, 100% var(--ap-edge-depth), 100% 100%, 0 100%);
  }
}

/* On small screens a shallow cut keeps text from crowding the slope. */
@media screen and (max-width: 749px) {
  .ap-edge {
    --ap-edge-depth: var(--ap-space-lg, 24px);
  }
}


/* =====================================================================
   3. TYRE-TREAD TEXTURE BACKGROUND
   ---------------------------------------------------------------------
   A subtle, low-opacity tiling tread pattern behind a block's content.
   The pattern lives in a ::before layer so it never tints text and never
   intercepts clicks. Colour follows currentColor of the host scheme, so
   it stays legible on light and dark sections alike.

   USAGE: add .ap-tread to a position:relative container. The tread image
   comes from a CSS var --ap-tread-url which the host sets to the inlined
   SVG, e.g. (in Liquid):
     style="--ap-tread-url: url('{{ 'ap-pattern-tread.svg' | asset_url }}');"
   If --ap-tread-url is unset, NOTHING renders (clean no-op).
   ===================================================================== */
.ap-tread {
  position: relative;
  isolation: isolate;
}

.ap-tread > * {
  position: relative;
  z-index: 1;
}

.ap-tread::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* No image -> no fill -> invisible. Safe default. */
  background-image: var(--ap-tread-url, none);
  background-repeat: repeat;
  background-size: var(--ap-tread-size, 120px 120px);
  /* Quiet by default; dark sections can lift it via --ap-tread-opacity. */
  opacity: var(--ap-tread-opacity, 0.06);
}

/* A touch more presence option for hero / feature blocks. */
.ap-tread--strong {
  --ap-tread-opacity: 0.1;
}

.ap-tread--subtle {
  --ap-tread-opacity: 0.035;
}


/* =====================================================================
   4. TECHNICAL SPEC-READOUT
   ---------------------------------------------------------------------
   A reusable "instrument cluster" readout for numbers: tabular figures,
   uppercase micro-labels with units, hairline separators. Drop it
   anywhere — PDP, cards, sections — to make data feel measured and
   engineered. Pure CSS; the host supplies the markup (see class map).

   MARKUP MAP
     .ap-readout                 wrapper (flex row of items, wraps)
       .ap-readout__item         one measurement cell
         .ap-readout__label      uppercase micro-label (e.g. "Breite")
         .ap-readout__value      the figure (tabular-nums)
           .ap-readout__unit     trailing unit (e.g. "mm")
   ===================================================================== */
.ap-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ap-ms-hairline);
  border-radius: var(--ap-radius, 8px);
  overflow: hidden;
  background: var(--ap-surface, rgb(var(--color-background)));
  color: var(--ap-on-surface, rgb(var(--color-foreground)));
}

.ap-readout__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 7.5rem;
  padding: var(--ap-space-sm, 12px) var(--ap-space-md, 16px);
  /* Hairline separators between cells (the instrument-cluster look). */
  border-inline-start: 1px solid var(--ap-ms-hairline);
}

.ap-readout__item:first-child {
  border-inline-start: 0;
}

.ap-readout__label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ap-ms-muted);
}

.ap-readout__value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* THE motorsport detail: tabular, lining figures so columns align. */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.ap-readout__unit {
  margin-inline-start: 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ap-ms-muted);
}

/* Emphasise the headline figure (e.g. a price or key spec). */
.ap-readout__item--accent .ap-readout__value {
  color: var(--ap-ms-accent);
}

.ap-readout__item--accent {
  box-shadow: inset 3px 0 0 var(--ap-ms-accent);
}

/* Compact variant for dense card contexts. */
.ap-readout--compact .ap-readout__item {
  padding: var(--ap-space-xs, 8px) var(--ap-space-sm, 12px);
}
.ap-readout--compact .ap-readout__value {
  font-size: 1.5rem;
}

/* Plain variant: no frame, just the spaced figures (e.g. inline in text). */
.ap-readout--plain {
  border: 0;
  background: none;
}
.ap-readout--plain .ap-readout__item {
  border-inline-start: 0;
  padding-inline: 0;
  padding-block: var(--ap-space-2xs, 4px);
  margin-inline-end: var(--ap-space-lg, 24px);
}

/* Standalone utility: apply tabular figures to ANY element (e.g. prices). */
.ap-tnum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}


/* =====================================================================
   5. DATA CHIP
   ---------------------------------------------------------------------
   A small, technical inline token for a single spec (e.g. "M+S", "91V",
   "DOT 2024"). Quieter than a CTA badge: hairline outline, mono-ish
   figures, uppercase. Reads on light and dark. Optional accent / status
   modifiers. Use for compact, factual labels, NOT marketing shouting.
   ===================================================================== */
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-2xs, 4px);
  min-height: 2.2rem;
  padding: 0.3rem var(--ap-space-xs, 8px);
  border: 1px solid var(--ap-ms-hairline);
  border-radius: var(--ap-radius-sm, 4px);
  background: var(--ap-surface, rgb(var(--color-background)));
  color: var(--ap-on-surface, rgb(var(--color-foreground)));
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* A small leading key/label inside the chip, set quieter. */
.ap-chip__key {
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ap-ms-muted);
}

/* SVG icons (e.g. snowflake / M+S) scale to the chip text. */
.ap-chip svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
}

/* Accent chip: red hairline + accent text, fill stays light/scheme-safe. */
.ap-chip--accent {
  border-color: color-mix(in srgb, var(--ap-ms-accent) 55%, transparent);
  color: var(--ap-ms-accent);
}

/* Solid chip for the rare "must pop" case (kept restrained, sparing red). */
.ap-chip--solid {
  border-color: transparent;
  background: var(--ap-ms-accent);
  color: var(--ap-accent-contrast, #fff);
}

/* Status tints reuse the layer's semantic palette. */
.ap-chip--success {
  border-color: color-mix(in srgb, var(--ap-success, #1a7f37) 50%, transparent);
  color: var(--ap-success, #1a7f37);
}
.ap-chip--warning {
  border-color: color-mix(in srgb, var(--ap-warning, #9a6700) 50%, transparent);
  color: var(--ap-warning, #9a6700);
}

/* Hover lift is optional and motion-guarded. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ap-chip--interactive {
    transition: border-color var(--ap-ms-dur) var(--ap-ms-ease),
      color var(--ap-ms-dur) var(--ap-ms-ease);
  }
  .ap-chip--interactive:hover {
    border-color: var(--ap-ms-accent);
    color: var(--ap-ms-accent);
  }
}


/* =====================================================================
   GAUGE — supporting styles for snippets/ap-gauge.liquid
   ---------------------------------------------------------------------
   The gauge snippet renders its own inline SVG + structural markup; these
   rules style the wrapper, the segmented meter track, the active grade
   readout and the label. Kept here so the snippet ships markup-only.

   MARKUP MAP (produced by ap-gauge.liquid)
     .ap-gauge                       wrapper (role/aria on inner element)
       .ap-gauge__head               label row
         .ap-gauge__label            metric name (uppercase micro-label)
         .ap-gauge__grade            big active grade letter, EU-coloured
       .ap-gauge__track              segmented bar (A..E or A..C)
         .ap-gauge__seg              one segment; --active highlights it
   ===================================================================== */
.ap-gauge {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-2xs, 4px);
  color: var(--ap-on-surface, rgb(var(--color-foreground)));
}

.ap-gauge__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ap-space-xs, 8px);
}

.ap-gauge__label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.6);
}

.ap-gauge__grade {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  /* EU class colour injected by the snippet via --ap-gauge-color. */
  color: var(--ap-gauge-color, var(--ap-on-surface, rgb(var(--color-foreground))));
}

.ap-gauge__track {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 1rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.08);
}

.ap-gauge__seg {
  flex: 1 1 0;
  height: 100%;
  /* Inactive segments stay quiet; the active one gets its EU colour. */
  background: rgba(var(--color-foreground), 0.12);
  transition: background-color var(--ap-motion, 200ms)
    var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
}

.ap-gauge__seg--active {
  background: var(--ap-gauge-color, var(--ap-accent, #e1001a));
}

/* Segments before the active one read as a soft "fill up to" trail. */
.ap-gauge__seg--filled {
  background: color-mix(
    in srgb,
    var(--ap-gauge-color, var(--ap-accent, #e1001a)) 38%,
    transparent
  );
}

@media (prefers-reduced-motion: reduce) {
  .ap-gauge__seg {
    transition: none;
  }
}

/* =====================================================================
   APEX SIGNATURE — APPLIED GLOBAL LAYER
   ---------------------------------------------------------------------
   Everything above is opt-in (a class only does something when applied),
   which is why Dawn's real chrome still read as stock. This block APPLIES
   a coherent "technical instrument" identity DIRECTLY to Dawn's live
   elements (prices, header, cards, forms, footer) so EVERY page reads as
   bespoke — not a restyled Dawn — even on an empty store. We touch only
   colour / border / font / letter-spacing / decoration / transitions;
   never display / grid / position-flow. Loads last → wins on source order.
   ===================================================================== */

:root {
  --ap-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono",
    "Roboto Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --ap-ink-rgb: 14, 15, 18;
}

/* ---- 1. TECHNICAL DATA = MONOSPACE ----------------------------------
   Prices, quantities, the size matrix, stats, set-pricing, result counts
   render in a tabular monospace — like an instrument / datasheet readout.
   This single move is the strongest "automotive-technical" signal and it
   shows on every commerce page. */
.price,
.price .price-item,
.price-item--regular,
.price-item--sale,
.price-item--last,
.totals__total-value,
.cart-item__totals .price,
.cart-item__price-wrapper .price,
.unit-price,
.quantity__input,
.ap-quick-qty__box-qty,
.ap-card-spec__readout,
.ap-stat__value,
.ap-set-pricing__total,
.ap-set-pricing__unit,
.product-count,
.facets__summary .count,
.product-count__text {
  font-family: var(--ap-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Sale price carries the accent; regular/compare stays muted ink. */
.price--on-sale .price-item--sale,
.price__sale .price-item--sale {
  color: var(--ap-accent, #e1001a);
  font-weight: 700;
}

/* Announcement / utility bar locked in as tracked mono. */
.announcement-bar__message,
.utility-bar__message {
  font-family: var(--ap-font-mono);
  letter-spacing: 0.14em;
}

/* ---- 2. HEADER — bespoke nav ----------------------------------------
   Uppercase, tracked nav with a racing-red underline that wipes in from
   the left; header icons go red on hover; a crisp ink hairline edge. */
.header__inline-menu .header__menu-item {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.header__inline-menu .header__menu-item > span {
  position: relative;
}
.header__inline-menu .header__menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--ap-accent, #e1001a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ap-motion, 200ms)
    var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
}
.header__inline-menu .header__menu-item:hover::after,
.header__inline-menu .header__menu-item:focus-visible::after {
  transform: scaleX(1);
}
.header__icons .header__icon:hover .icon,
.header__icons .header__icon:focus-visible .icon {
  color: var(--ap-accent, #e1001a);
}
.header-wrapper {
  border-bottom: 1px solid rgba(var(--ap-ink-rgb), 0.1);
}

/* ---- 3. PRODUCT CARDS — spec tiles ----------------------------------
   A racing-red bar wipes across the card top on hover; badges become
   sharp tracked-mono tags. Price is already mono from §1. */
.card-wrapper .card__inner {
  position: relative;
}
.card-wrapper .card__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ap-accent, #e1001a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ap-motion, 200ms)
    var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
  z-index: 2;
}
.card-wrapper:hover .card__inner::before,
.card-wrapper:focus-within .card__inner::before {
  transform: scaleX(1);
}
.badge {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--ap-font-mono);
  font-weight: 700;
}

/* ---- 4. FORMS — de-generic the commerce UI -------------------------
   Sort / filter / search / variant controls: sharp corners + a racing-red
   focus ring, so the shopping UI stops looking like a stock template. */
.field__input,
.select__select,
.quantity__input,
.localization-form__select,
.customer .field input {
  border-radius: var(--ap-radius-sm, 4px);
}
.field__input:focus-visible,
.select__select:focus-visible,
.quantity__input:focus-visible,
.localization-form__select:focus-visible {
  outline: 2px solid var(--ap-accent, #e1001a);
  outline-offset: 1px;
}

/* ---- 5. FOOTER — intentional even before menus exist ----------------
   A racing-red top rule + tracked-mono block headings give the footer a
   finished, branded edge regardless of how many menu links exist yet. */
.footer {
  border-top: 3px solid var(--ap-accent, #e1001a);
}
.footer .footer-block__heading {
  font-family: var(--ap-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .header__inline-menu .header__menu-item::after,
  .card-wrapper .card__inner::before {
    transition: none;
  }
}

/* ---- 6. SHARP INDUSTRIAL CORNERS ------------------------------------
   Dawn's soft rounded corners are the single biggest "friendly Shopify
   template" tell. Snap media / cards / buttons / inputs to a crisp 2px
   technical edge for an instrument-panel, industrial-automotive feel.
   (Pills that are meant to be pills — the SALE badge, category chips —
   are left alone.) */
.global-media-settings,
.global-media-settings img,
.global-media-settings > *,
.card-wrapper .card,
.card-wrapper .card__inner,
.card .media,
.media--hover-effect,
.product__media .media,
.product__media img,
.button,
.button::after,
.shopify-payment-button__button,
.field__input,
.select__select,
.quantity,
.quantity__input,
.ap-quick-qty__box {
  border-radius: 2px !important;
}

/* ---- 7. NAV: INK WITH A RED ACCENT (dial the red back) --------------
   All-red nav links read cheap. Make them ink; red becomes the accent
   (the underline wipe from §2 + a red hover). Active state keeps Dawn's
   underline. */
.header__inline-menu .header__menu-item {
  color: rgb(var(--ap-ink-rgb)) !important;
}
.header__inline-menu .header__menu-item:hover,
.header__inline-menu .header__menu-item:focus-visible {
  color: var(--ap-accent, #e1001a) !important;
}

/* ---- 8. APEX DISPLAY TYPEFACE + DRAMATIC SCALE ----------------------
   Self-hosted "Saira Condensed" (declared in automotive-css-variables)
   drives ALL display type — headings, section/product titles, nav, the
   big buybox title. Condensed + uppercase + tight leading = a motorsport
   instrument identity that reads nothing like Dawn's default sans.
   Type system: DISPLAY = Saira Condensed · DATA = mono (§1) · BODY = Dawn. */
h1,
h2,
h3,
h4,
.h0,
.h1,
.h2,
.h3,
.h4,
.title,
.title-wrapper .title,
.banner__heading,
.product__title,
.product__title > *,
.card__heading,
.card__heading a,
.card-information__text.h4,
.ap-tabs__tab-label,
.collection__title,
.totals__total,
.cart__title,
.header__inline-menu .header__menu-item {
  font-family: var(
    --ap-font-display,
    "Saira Condensed",
    "Arial Narrow",
    sans-serif
  ) !important;
}

/* Dramatic, condensed, uppercase display sizing — far bolder than Dawn. */
h1,
.h1,
.h0,
.banner__heading,
.product__title,
.product__title > *,
.collection__title,
.cart__title {
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.012em;
}
.h0,
.banner__heading {
  font-size: clamp(3.6rem, 7vw, 8rem);
}
h2,
.h2,
.title--primary {
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.014em;
}
.header__inline-menu .header__menu-item {
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 1.5rem;
}

/* ---- 9. APEX SIGNATURE MOTIFS — chevron + racing tech-stripe --------
   A consistent motorsport signature on every page: a diagonal racing
   tech-stripe (pure CSS gradient, no asset), a red speed-chevron before
   section titles, and oversized condensed section headings. */

/* Diagonal racing tech-stripe band pinned to the top of the footer. */
.footer {
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ap-accent, #e1001a) 0 10px,
    rgba(14, 15, 18, 0.9) 10px 20px
  );
  z-index: 1;
}

/* Red speed-chevron before Dawn section titles (scoped to the section
   heading wrapper so custom eyebrowed sections are left alone). */
.title-wrapper-with-link .title::before,
.collection-hero .title::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 0.5em;
  border-right: 0.16em solid var(--ap-accent, #e1001a);
  border-bottom: 0.16em solid var(--ap-accent, #e1001a);
  transform: translateY(-0.14em) rotate(-45deg);
}

/* Oversized, condensed section titles — dramatic, motorsport-poster scale. */
.title-wrapper-with-link .title,
h2.title.title--primary,
.collection-hero__title {
  font-size: clamp(2.8rem, 4.6vw, 4.8rem);
  line-height: 0.98;
}

/* A short diagonal tech-stripe rule under product/collection page titles,
   so the commerce pages carry the same signature as the home sections. */
.product__title::after,
.collection-hero__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin-top: var(--ap-space-sm, 12px);
  background: repeating-linear-gradient(
    -45deg,
    var(--ap-accent, #e1001a) 0 6px,
    transparent 6px 12px
  );
}

/* ---- 10. CATEGORY CHIPS — technical tags (not soft pills) -----------
   The last soft-rounded element; snap to sharp tracked tags so the whole
   nav system reads industrial/technical, consistent with §6. */
.ap-collection-nav--pills .ap-collection-nav__link {
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ---- 11. COMMERCE PAGE-TITLE "INK STAGE" ----------------------------
   The collection banner (scheme-3 dark) becomes a bold ink stage: extra
   vertical presence, a faint diagonal tech-texture, and a red baseline
   stripe — so commerce pages open with the same authority as the home
   hero instead of a flat-white Dawn header. The white condensed title and
   its red §9 tech-stripe read strongly on the dark ground. */
.collection-hero.color-scheme-3,
.collection-hero--stage {
  position: relative;
  overflow: hidden;
  padding-block: var(--ap-space-xl, 40px);
  border-bottom: 4px solid var(--ap-accent, #e1001a);
}
/* The white title only forces on the genuinely dark scheme-3 ground; on a
   light scheme the .collection-hero--stage hook keeps the title readable
   (inherits the scheme foreground) — so the constant class never breaks
   contrast when the merchant picks a light scheme. */
.collection-hero.color-scheme-3 .collection-hero__title {
  color: #fff;
}

/* ---- 12. PDP — bespoke technical layout ----------------------------
   Recompose Dawn's plain "media | info" split into a technical datasheet:
   the gallery is framed like a spec photo, and the sticky buybox reads as a
   distinct CONTROL PANEL separated by a racing-red rail. DOM is unchanged
   (upgrade-safe) — pure grid/visual restructure. */
@media screen and (min-width: 990px) {
  /* Gallery media: crisp technical hairline frame. */
  .product__media-list .product__media-item > .media,
  .product__media-wrapper .product-media-container,
  .product__media-wrapper .media.media--transparent {
    border: 1px solid rgba(14, 15, 18, 0.12);
    border-radius: 2px;
  }

  /* Buybox = a distinct control panel: a full-height racing-red rail on its
     media-facing edge, with the content inset off it. */
  .product__info-container {
    position: relative;
    padding-left: var(--ap-space-lg, 24px);
  }
  .product__info-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ap-accent, #e1001a);
  }
}

/* ---- 13. Collection — technical filter panel -----------------------
   The vertical facet sidebar reads like a control panel: monospace,
   uppercase, tracked group labels + sharp active-filter chips. */
.facets-vertical .facets__heading,
.facets-vertical .facets__summary,
.facets-vertical .facet-filters__label,
.facets-vertical .facets__price .field__label {
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
.active-facets__button,
.active-facets__button-inner {
  border-radius: 2px;
}


/* ====================================================================== *
 * APEX PER-PAGE LAYOUT — scoped bespoke layout recomposition (§14)
 * Home / lower-PDP / cart / pages+contact / search+404+list / collection-grid.
 * Generated per-page (real selectors), single-author integrated. CSS only.
 * ====================================================================== */


/* ============================================================================
   HOME — templates/index.json  ·  Motorsport-magazine rhythm layer
   Scope root: main#MainContent[data-template="index"]  (home only)
   Augments the live APEX identity (global condensed headings, mono data,
   ink nav, footer stripe). Adds: section header accents (eyebrow rule),
   tech-stripe / chevron dividers between bands, deliberate panel framing for
   the logo/brand walls, and a restrained dark-band reinforcement on the
   newsletter — WITHOUT adding new dark bands (page stays mostly light).
   CSS only · real selectors only · upgrade-safe (no DOM/schema changes).
   Tokens used with fallbacks so it stands alone.
   ============================================================================ */

/* Local alias so every rule is unambiguously home-scoped. */
main#MainContent[data-template="index"] {
  --ap-home-accent: var(--ap-accent, rgb(var(--color-button, 225 0 26)));
  --ap-home-ink: var(--ap-on-surface, rgb(var(--color-foreground, 14 15 18)));
  --ap-home-surface2: var(--ap-surface-2, #f4f6f9);
  --ap-home-hair: color-mix(in srgb, var(--ap-home-ink) 12%, transparent);
}

/* --------------------------------------------------------------------------
   1) SECTION HEADER ACCENT — a short red rule sits above the main section
   heading of the major content bands, giving every band a consistent
   "magazine dept. header" entry. Graphic only (no injected copy → i18n-safe).
   Targets the real per-section heading roots; skips press-bar (it already has
   its own centered rule treatment) and reifenfinder (already has an eyebrow).
   -------------------------------------------------------------------------- */
main#MainContent[data-template="index"] .ap-brand-showcase__heading,
main#MainContent[data-template="index"] .ap-trust-row__heading,
main#MainContent[data-template="index"] .ap-promo-tiles__header .title,
main#MainContent[data-template="index"] .ap-social-proof__head .title {
  position: relative;
  padding-top: var(--ap-space-md, 16px);
}

main#MainContent[data-template="index"] .ap-brand-showcase__heading::before,
main#MainContent[data-template="index"] .ap-trust-row__heading::before,
main#MainContent[data-template="index"] .ap-promo-tiles__header .title::before,
main#MainContent[data-template="index"] .ap-social-proof__head .title::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 2.6rem;
  height: 3px;
  background: var(--ap-home-accent);
  border-radius: 0; /* sharp 2px identity — keep square */
}

/* Centered heads (brand wall is centered): center the rule too. */
main#MainContent[data-template="index"] .ap-brand-showcase__heading {
  text-align: center;
}
main#MainContent[data-template="index"] .ap-brand-showcase__heading::before {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   2) BAND DIVIDERS — a hairline + short red chevron-stripe seam between
   stacked sections so the flow reads as deliberate "issue spreads", not a
   pile of Dawn blocks. Drawn on the inner .page-width top edge (page-aligned,
   not full-bleed) so it respects gutters and never clips content.
   Applied to the structural bands that follow another light band.
   -------------------------------------------------------------------------- */
main#MainContent[data-template="index"] .section--usp-bar .page-width::before,
main#MainContent[data-template="index"] .section--brand-story .page-width::before,
main#MainContent[data-template="index"] .section--trust-row .page-width::before,
main#MainContent[data-template="index"] .section--video-testimonials .page-width::before,
main#MainContent[data-template="index"] .section--faq .page-width::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: var(--ap-space-lg, 24px);
  background:
    linear-gradient(to right,
      var(--ap-home-accent) 0,
      var(--ap-home-accent) 2.6rem,
      transparent 2.6rem),
    repeating-linear-gradient(-45deg,
      var(--ap-home-hair) 0 6px,
      transparent 6px 12px);
  background-repeat: no-repeat, repeat;
}

/* --------------------------------------------------------------------------
   3) PANEL FRAMING — turn the brand wall and press/"as featured in" wall into
   deliberate inset technical plates: surface-2 fill, hairline frame, sharp
   corners, plus corner "tick" accents. Reads premium, not busy.
   -------------------------------------------------------------------------- */
main#MainContent[data-template="index"] .ap-brand-showcase,
main#MainContent[data-template="index"] .ap-press-bar {
  position: relative;
  padding: clamp(20px, 4vw, 40px);
  background: var(--ap-home-surface2);
  border: 1px solid var(--ap-home-hair);
  border-radius: var(--ap-radius-sm, 4px);
}

/* Top-left + bottom-right red corner ticks — racing framing cue. */
main#MainContent[data-template="index"] .ap-brand-showcase::before,
main#MainContent[data-template="index"] .ap-press-bar::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: -1px;
  width: 18px;
  height: 18px;
  border-top: 3px solid var(--ap-home-accent);
  border-inline-start: 3px solid var(--ap-home-accent);
  pointer-events: none;
}
main#MainContent[data-template="index"] .ap-brand-showcase::after,
main#MainContent[data-template="index"] .ap-press-bar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  inset-inline-end: -1px;
  width: 18px;
  height: 18px;
  border-bottom: 3px solid var(--ap-home-accent);
  border-inline-end: 3px solid var(--ap-home-accent);
  pointer-events: none;
}

/* Press logos read calmer once plated: keep them muted, accent on hover. */
main#MainContent[data-template="index"] .ap-press__logo {
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(.2,.6,.2,1)),
              filter var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(.2,.6,.2,1));
}
main#MainContent[data-template="index"] .ap-press__item:hover .ap-press__logo,
main#MainContent[data-template="index"] .ap-press__link:focus-visible .ap-press__logo {
  filter: grayscale(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4) DARK-BAND REINFORCEMENT (restrained) — the JSON already darkens the
   image banner, shipping-cutoff bar and newsletter (scheme-3). We DON'T add
   new dark bands; we just make the existing newsletter band read as the
   intentional "ink stage" close to the flow: a tech-stripe top seam + a red
   baseline rail. Mostly-light cadence preserved.
   -------------------------------------------------------------------------- */
main#MainContent[data-template="index"] .section section--newsletter,
main#MainContent[data-template="index"] .newsletter {
  position: relative;
}
main#MainContent[data-template="index"] .newsletter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(-45deg,
    var(--ap-home-accent) 0 10px,
    transparent 10px 20px);
  pointer-events: none;
}
main#MainContent[data-template="index"] .newsletter::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ap-home-accent);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5) ACCENT RAIL for the editorial brand-story band — a full-height red rail
   sets the story column off as a feature spread (mirrors the PDP info rail).
   -------------------------------------------------------------------------- */
@media (min-width: 750px) {
  main#MainContent[data-template="index"] .ap-brand-story__content {
    position: relative;
    padding-inline-start: var(--ap-space-lg, 24px);
  }
  main#MainContent[data-template="index"] .ap-brand-story__content::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    inset-inline-start: 0;
    width: 3px;
    background: var(--ap-home-accent);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — disable logo/transition easing for users who opt out.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  main#MainContent[data-template="index"] .ap-press__logo {
    transition: none;
  }
}

/* =====================================================================
   APEX — PDP LOWER ZONE  ·  "Technical Datasheet"
   Scope: main[data-template="product"]  (Dawn sets data-template on <main>)
   ---------------------------------------------------------------------
   Welds the content sections BELOW the buybox into one engineered
   datasheet: a unifying section-header system (condensed-display title +
   mono index tag + red tick), a shared framed-block rhythm, hairline
   inter-section dividers, and a 2-up technical pairing for spec-table +
   EU-label. Does NOT redo each panel's internal styling (each already has
   its own red leading-edge rail + datasheet treatment) — augments only.
   Preserves the gallery hairline frame + buybox red rail in ap-motorsport.
   CSS-only, DOM unchanged, upgrade-safe. Min-width media queries; mobile
   stays stacked. Reduced-motion safe.
   ===================================================================== */

/* ---- 0. Local tokens for this zone (scoped, with global fallbacks) ---- */
main[data-template="product"] {
  --apz-hair: rgba(14, 15, 18, 0.12);
  --apz-hair-soft: rgba(14, 15, 18, 0.08);
}

/* =====================================================================
   1. UNIFYING SECTION HEADER SYSTEM
   The lower-PDP headings (spec / eu-label / tabs / steps / fitment /
   reviews) all become condensed-uppercase "datasheet" titles with a
   short red tick rule. This is what makes the zone read as ONE engineered
   document rather than six stock Dawn blocks.
   ===================================================================== */
main[data-template="product"] .ap-spec-table__heading,
main[data-template="product"] .ap-eu-label__heading,
main[data-template="product"] .ap-tabs__heading,
main[data-template="product"] .ap-steps__heading,
main[data-template="product"] .ap-fitment-service__heading,
main[data-template="product"] .ap-reviews__heading {
  font-family: var(--ap-font-display, inherit);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
}

/* A short racing-red tick beneath each datasheet heading.
   The spec-table + eu-label already carry an eyebrow tick; we only add the
   underline rule to the headings that DON'T have an eyebrow above them
   (tabs / steps / fitment / reviews) so the cue is consistent, not doubled. */
main[data-template="product"] .ap-tabs__heading,
main[data-template="product"] .ap-fitment-service__heading {
  position: relative;
  padding-bottom: var(--ap-space-sm, 12px);
}
main[data-template="product"] .ap-tabs__heading::after,
main[data-template="product"] .ap-fitment-service__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--ap-accent, #e1001a);
}

/* Steps + reviews heads are centred — give them a centred tick to match. */
main[data-template="product"] .ap-steps__heading {
  position: relative;
  display: inline-block;
  padding-bottom: var(--ap-space-sm, 12px);
}
main[data-template="product"] .ap-steps__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--ap-accent, #e1001a);
}

/* Existing eyebrows pick up the condensed display face + tighter tracking
   so the overline reads as a datasheet field label, consistent across panels. */
main[data-template="product"] .ap-spec-table__eyebrow,
main[data-template="product"] .ap-steps__eyebrow,
main[data-template="product"] .ap-fitment-service__eyebrow,
main[data-template="product"] .ap-eu-label__title {
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  letter-spacing: 0.18em;
}

/* =====================================================================
   2. SHARED FRAME RHYTHM + HAIRLINE INTER-SECTION DIVIDERS
   Give the whole zone a continuous "document" feel: a thin top hairline
   on the spec-table, eu-label, tabs, steps and fitment sections so the
   reader perceives stacked datasheet rows. Applied to the .page-width
   inner so it spans the content column, not the full-bleed band.
   ===================================================================== */
main[data-template="product"] .section--product-tabs .page-width,
main[data-template="product"] .section--how-to-steps .page-width {
  position: relative;
}
main[data-template="product"] .section--product-tabs .page-width::before,
main[data-template="product"] .section--how-to-steps .page-width::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--page-width-margin, 1.5rem);
  right: var(--page-width-margin, 1.5rem);
  height: 1px;
  background: var(--apz-hair-soft);
}

/* =====================================================================
   3. PRODUCT TABS  →  engineered tab strip
   The accordion/tab content already works; we frame it as a panel and make
   the desktop tab strip read like a technical control bar (mono labels,
   sharp 2px, red active underline already exists — we sharpen the framing).
   ===================================================================== */
main[data-template="product"] .ap-tabs__items {
  border: 1px solid var(--apz-hair);
  border-radius: 2px;
  background: var(--ap-surface, rgb(var(--color-background)));
  box-shadow: var(--ap-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
}

/* Each accordion row gets a quiet mono "field" feel on its summary label
   and a left inset so the open panel aligns under it like a datasheet cell. */
main[data-template="product"] .ap-tabs__tab {
  padding-inline: var(--ap-space-md, 16px);
  font-family: var(--ap-font-display, inherit);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
main[data-template="product"] .ap-tabs__panel {
  padding-inline: var(--ap-space-md, 16px);
}
/* Open row: faint surface-2 tint + a 2px red marker on the leading edge so
   the active datasheet field is unmistakable. */
main[data-template="product"] .ap-tabs__item[open] {
  position: relative;
  background: var(--ap-surface-2, #f4f6f9);
}
main[data-template="product"] .ap-tabs__item[open]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ap-accent, #e1001a);
}
/* Keep the existing first/last border behaviour clean inside the new frame. */
main[data-template="product"] .ap-tabs__item:last-child {
  border-bottom: 0;
}

/* Desktop enhanced tab strip: make it a true mono control bar. */
@media screen and (min-width: 750px) {
  main[data-template="product"] .ap-tabs[data-tablist-active] .ap-tabs__list-button {
    font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
    letter-spacing: 0.08em;
  }
}

/* =====================================================================
   4. SPEC-TABLE + EU-LABEL  →  paired technical row on wide screens
   These two are the heart of the datasheet. We pull the EU-label section
   up tight under the spec table and, on very wide viewports, let them read
   as a matched two-panel row by tightening vertical rhythm + matching the
   panels' sharp 2px corners to the global APEX shape (Dawn/section CSS
   defaults to 8px radius; APEX uses 2px).
   ===================================================================== */
main[data-template="product"] .ap-spec-table,
main[data-template="product"] .ap-eu-label {
  border-radius: 2px;
}
/* The feature/size row + notice + fallback share the sharp corner too. */
main[data-template="product"] .ap-spec-table__notice,
main[data-template="product"] .ap-eu-label__link,
main[data-template="product"] .ap-eu-label__grade,
main[data-template="product"] .ap-eu-label__step {
  border-radius: 2px;
}

/* Tighten the gap between the spec table and the EU label so they read as a
   continuous datasheet pair rather than two distant bands. Targets the
   section padding owned by the inline {%- style -%} blocks would be unsafe;
   instead nudge the inner heading top-margin for a calmer seam. */
main[data-template="product"] .ap-eu-label__heading {
  margin-top: 0;
}

/* =====================================================================
   5. HOW-TO-STEPS  →  sharpen to engineered chips
   The steps are already premium cards. Align them to APEX: sharp 2px
   corners, square red number plates (not soft pills), mono numerals.
   ===================================================================== */
main[data-template="product"] .ap-steps__item {
  border-radius: 2px;
  border-color: var(--apz-hair);
}
main[data-template="product"] .ap-steps__number {
  border-radius: 2px;
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  /* Square plate reads as a datasheet index, not a bubble. */
  box-shadow: 0 0 0 4px rgba(225, 0, 26, 0.1);
}
main[data-template="product"] .ap-steps__icon {
  border-radius: 2px;
}
main[data-template="product"] .ap-steps__title {
  font-family: var(--ap-font-display, inherit);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* =====================================================================
   6. FITMENT SERVICE  →  framed slot + accent rail
   The right-hand app slot becomes a distinct "control panel" matching the
   buybox treatment: sharp corners + a hairline, and the benefit checks get
   square accent tiles for the engineered look. Fitment data still owned by
   the app — we only frame the slot.
   ===================================================================== */
main[data-template="product"] .ap-fitment-service__slot {
  border-radius: 2px;
  border-color: var(--apz-hair);
  position: relative;
}
/* A racing-red rail down the leading edge of the app slot — the same
   "control panel" signature used on the buybox + spec/eu panels. */
main[data-template="product"] .ap-fitment-service__slot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ap-accent, #e1001a);
  border-radius: 2px 0 0 2px;
}
main[data-template="product"] .ap-fitment-service__benefit-icon {
  border-radius: 2px;
}
main[data-template="product"] .ap-fitment-service__placeholder-icon {
  border-radius: 2px;
}
main[data-template="product"] .ap-fitment-service__cta {
  border-radius: 2px;
}

/* =====================================================================
   7. REVIEWS  →  engineered cards
   Align review cards + summary to APEX: sharp 2px, mono score, square
   surface. The big score already uses accent red; we make it monospace so
   it reads as a data figure.
   ===================================================================== */
main[data-template="product"] .ap-reviews__summary,
main[data-template="product"] .ap-review,
main[data-template="product"] .ap-reviews__empty {
  border-radius: 2px;
}
main[data-template="product"] .ap-reviews__summary-number {
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
}
main[data-template="product"] .ap-review__title {
  font-family: var(--ap-font-display, inherit);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
main[data-template="product"] .ap-review__image {
  border-radius: 2px;
}
/* Card hover lift → keep, but make the accent a red top edge appear on hover
   so the engineered cue is consistent (no layout shift, GPU-cheap). */
@media (hover: hover) {
  main[data-template="product"] .ap-review {
    position: relative;
  }
  main[data-template="product"] .ap-review::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--ap-accent, #e1001a);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
  }
  main[data-template="product"] .ap-review:hover::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  main[data-template="product"] .ap-review::after {
    transition: none;
  }
}

/* =====================================================================
   APEX — CART PAGE  ("CHECKOUT CONSOLE")
   ---------------------------------------------------------------------
   Augments the existing APEX cart layer in component-cart.css /
   component-cart-items.css (which already frames the items panel and
   makes the summary a sticky card). This block does NOT redo those —
   it pushes the page into a bespoke "checkout console":
     • line items read as a technical datasheet (red rail + tech-stripe
       header, mono qty, sharp framed thumbs, hairline rows)
     • the summary becomes a distinct CONTROL PANEL: ink-tinted surface-2
       slab, full-height red rail, tech-stripe header strip, mono totals,
       a big condensed display-font grand total
     • the "Zur Kasse" CTA is the dominant, tallest, condensed-uppercase
       control on the page.
   Scoped under Dawn's page-unique cart IDs (#main-cart-items /
   #main-cart-footer / cart-items) so nothing leaks to the cart DRAWER or
   any other page. CSS-only; DOM/Liquid unchanged; tokens carry fallbacks.
   ===================================================================== */

/* ---- 1. ITEMS PANEL → technical datasheet --------------------------- */
/* Red left-rail + faint tech-stripe header on the framed line-item panel.
   The existing rule already gives it border/radius/shadow; we add the
   bespoke automotive framing on top with a relative context + pseudos. */
#main-cart-items .cart__items--panel {
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  #main-cart-items .cart__items--panel {
    border-left: 3px solid var(--ap-accent, #e1001a);
  }

  /* Faint -45deg racing tech-stripe pinned to the top edge of the panel,
     reading as a datasheet header band behind the column titles. */
  #main-cart-items .cart__items--panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: repeating-linear-gradient(
      -45deg,
      var(--ap-accent, #e1001a) 0 10px,
      transparent 10px 20px
    );
    opacity: 0.5;
    pointer-events: none;
  }
}

/* Column headings: tracked technical eyebrows in mono — a console readout
   header. (Base already uppercases + tracks; we lock the mono + colour.) */
#main-cart-items .cart-items thead th {
  font-family: var(--ap-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  color: var(--ap-accent, #e1001a);
  opacity: 1;
}

/* Quantity stepper reads as one sharp instrument: a hairline-boxed unit
   with a mono, centred readout. Touch targets stay >=44px (Dawn buttons). */
#main-cart-items .cart-item__quantity-wrapper .quantity {
  border: 1px solid var(--ap-hairline-strong, rgba(var(--color-foreground), 0.16));
  border-radius: var(--ap-radius-sm, 2px);
  background: var(--ap-surface, rgb(var(--color-background)));
  overflow: hidden;
}

#main-cart-items .cart-item__quantity-wrapper .quantity__input {
  font-family: var(--ap-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

#main-cart-items .cart-item__quantity-wrapper .quantity__button {
  color: var(--ap-on-surface, rgb(var(--color-foreground)));
  transition: color var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1)),
    background-color var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
}

@media (hover: hover) {
  #main-cart-items .cart-item__quantity-wrapper .quantity__button:not([disabled]):hover {
    color: var(--ap-accent-contrast, #fff);
    background: var(--ap-accent, #e1001a);
  }
}

/* Line total: anchor it with a tiny accent tick before the figure so each
   row's price reads as the key datum. (Price already mono globally.) */
@media screen and (min-width: 750px) {
  #main-cart-items .cart-item__totals .cart-item__price-wrapper {
    position: relative;
    padding-right: 0.2rem;
  }
}

/* ---- 2. SUMMARY → CONTROL PANEL ------------------------------------- */
/* Re-skin the already-sticky summary card into a distinct ink-tinted
   control slab with a full-height red rail and a tech-stripe header. */
#main-cart-footer .cart__summary {
  position: relative;
  overflow: hidden;
  background: var(--ap-surface-2, #f4f6f9);
  border-color: var(--ap-hairline-strong, rgba(var(--color-foreground), 0.16));
  border-left: 3px solid var(--ap-accent, #e1001a);
  padding-top: calc(var(--ap-space-lg, 2.4rem) + 6px);
}

/* Tech-stripe header strip across the top of the panel. */
#main-cart-footer .cart__summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ap-accent, #e1001a) 0 10px,
    transparent 10px 20px
  );
  opacity: 0.6;
  pointer-events: none;
}

/* Summary section reads as a labelled console: a mono "SUMMARY" eyebrow is
   not in the DOM, so we tag the first summary line as the header datum. */
#main-cart-footer .cart__summary-lines {
  border-bottom: 1px solid var(--ap-hairline, rgba(var(--color-foreground), 0.1));
  padding-bottom: var(--ap-space-sm, 1.2rem);
}

#main-cart-footer .cart__summary-label {
  font-family: var(--ap-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.2rem;
}

#main-cart-footer .cart__summary-value {
  font-family: var(--ap-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-variant-numeric: tabular-nums;
}

/* ---- 3. GRAND TOTAL → big condensed display readout ----------------- */
/* The label stays a tracked mono eyebrow; the VALUE jumps to the condensed
   display face at large size — the unmistakable anchor of the panel. */
#main-cart-footer .cart__summary .cart__total {
  border-top-width: 3px;
}

#main-cart-footer .cart__summary .cart__total .totals__total {
  font-family: var(--ap-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  letter-spacing: 0.14em;
}

#main-cart-footer .cart__summary .cart__total .totals__total-value {
  font-family: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 3.4rem;
  letter-spacing: 0.005em;
  color: var(--ap-on-surface, rgb(var(--color-foreground)));
}

@media screen and (min-width: 750px) {
  #main-cart-footer .cart__summary .cart__total .totals__total-value {
    font-size: 3.8rem;
  }
}

/* ---- 4. CHECKOUT CTA → dominant control ----------------------------- */
/* Tallest, boldest, condensed-uppercase control on the page; accent-locked
   with a sharp edge and a subtle hover lift of the caret (already animated
   in base). We only amplify size / type / weight here. */
#main-cart-footer .cart__summary .cart__checkout-button {
  min-height: 5.6rem;
  font-family: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 1.9rem;
  border-radius: var(--ap-radius-sm, 2px);
  background: var(--ap-accent, #e1001a);
  color: var(--ap-accent-contrast, #fff);
  box-shadow: var(--ap-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
}

#main-cart-footer .cart__summary .cart__checkout-button .cart__checkout-label {
  line-height: 1;
}

#main-cart-footer .cart__summary .cart__checkout-button:not([disabled]):focus-visible {
  outline: 2px solid var(--ap-accent, #e1001a);
  outline-offset: 3px;
}

/* Make the caret read a touch larger so the CTA feels like a "go" control. */
#main-cart-footer .cart__summary .cart__checkout-icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* Secure-checkout reassurance: lock the lead line to a tracked mono eyebrow
   so the panel footer matches the console language. */
#main-cart-footer .cart__trust-secure {
  font-family: var(--ap-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.2rem;
}

/* ---- 5. Reduced-motion safety --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #main-cart-items .cart-item__quantity-wrapper .quantity__button {
    transition: none;
  }
}

/* ============================================================
   APEX — page-contact + generic pages
   Targets: main-page.liquid (.main-page-title / .rte) and
            contact-form.liquid (.contact / .field__* / .button)
   Scope root: main[data-template="page"]  (Dawn sets data-template
   on #MainContent; "page" covers page.json AND page.contact.json).
   The contact-only rules additionally key off .contact / #ContactForm
   which exist only on the contact template.
   CSS only — DOM/liquid untouched, upgrade-safe.
   ============================================================ */

/* ---- 1. Bespoke page HEADER band ---------------------------------
   Turn the bare <h1.main-page-title> into a technical eyebrow+title
   band with a full-height red rail + tech-stripe baseline.            */
main[data-template="page"] .page-width--narrow .main-page-title {
  position: relative;
  margin-bottom: var(--ap-space-lg, 24px);
  padding: var(--ap-space-md, 16px) 0 var(--ap-space-md, 16px)
    var(--ap-space-lg, 24px);
  font-family: var(--ap-font-display, var(--font-heading-family));
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

/* full-height racing rail to the left of the page title */
main[data-template="page"] .page-width--narrow .main-page-title::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 6px;
  background: var(--ap-accent, rgb(var(--color-button)));
  border-radius: var(--ap-radius-sm, 2px);
}

/* mono eyebrow + tech-stripe underline under the header */
main[data-template="page"] .page-width--narrow .main-page-title::after {
  content: "// SERVICE";
  position: absolute;
  top: 2px;
  left: var(--ap-space-lg, 24px);
  font-family: var(--ap-font-mono, ui-monospace, monospace);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-accent, rgb(var(--color-button)));
  opacity: 0.85;
  /* TODO i18n: eyebrow label is decorative; move if surfaced */
}

@media screen and (min-width: 750px) {
  main[data-template="page"] .page-width--narrow .main-page-title {
    padding-left: var(--ap-space-xl, 40px);
    padding-top: var(--ap-space-lg, 24px);
    margin-bottom: var(--ap-space-xl, 40px);
  }
  main[data-template="page"]
    .page-width--narrow
    .main-page-title::before {
    width: 8px;
  }
  main[data-template="page"] .page-width--narrow .main-page-title::after {
    left: var(--ap-space-xl, 40px);
    font-size: 1.2rem;
  }
}

/* ---- 2. Frame the body RTE as a technical sheet ------------------- */
main[data-template="page"] .page-width--narrow .rte {
  position: relative;
}

/* tech-stripe divider above the body copy */
main[data-template="page"] .page-width--narrow .rte::before {
  content: "";
  display: block;
  height: 4px;
  margin-bottom: var(--ap-space-lg, 24px);
  background: repeating-linear-gradient(
    -45deg,
    var(--ap-accent, rgb(var(--color-button))) 0 8px,
    transparent 8px 16px
  );
  opacity: 0.5;
}

/* sub-headings inside long pages (FAQ-style copy) get the condensed
   look + a small red marker so generic pages read bespoke */
main[data-template="page"] .page-width--narrow .rte h2,
main[data-template="page"] .page-width--narrow .rte h3 {
  font-family: var(--ap-font-display, var(--font-heading-family));
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding-left: var(--ap-space-md, 16px);
  border-left: 3px solid var(--ap-accent, rgb(var(--color-button)));
}

/* monospace data emphasis — codes/sizes typed as <strong> read like specs */
main[data-template="page"] .page-width--narrow .rte strong {
  font-family: var(--ap-font-mono, ui-monospace, monospace);
  letter-spacing: 0.01em;
}

/* ---- 3. CONTACT form: panel feel + technical fields -------------- */
/* Lift the whole contact card onto a sharp surface-2 panel with a
   red top rail so it reads as a "service desk" module.               */
main[data-template="page"] .contact {
  position: relative;
}

main[data-template="page"] #ContactForm {
  position: relative;
  background: var(--ap-surface-2, #f4f6f9);
  border: 1px solid rgba(var(--color-foreground), 0.1);
  border-top: 3px solid var(--ap-accent, rgb(var(--color-button)));
  border-radius: var(--ap-radius-sm, 2px);
  padding: var(--ap-space-lg, 24px) var(--ap-space-md, 16px);
  box-shadow: var(--ap-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
}

@media screen and (min-width: 750px) {
  main[data-template="page"] #ContactForm {
    padding: var(--ap-space-xl, 40px);
  }
}

/* mono eyebrow tag floating on the panel's top rail */
main[data-template="page"] #ContactForm::before {
  content: "// KONTAKT";
  position: absolute;
  top: calc(-1 * var(--ap-space-md, 16px));
  left: var(--ap-space-md, 16px);
  padding: 2px var(--ap-space-xs, 8px);
  background: var(--ap-accent, rgb(var(--color-button)));
  color: var(--ap-accent-contrast, rgb(var(--color-button-text)));
  font-family: var(--ap-font-mono, ui-monospace, monospace);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--ap-radius-sm, 2px);
  /* TODO i18n: decorative panel tag */
}

@media screen and (min-width: 750px) {
  main[data-template="page"] #ContactForm::before {
    left: var(--ap-space-xl, 40px);
  }
}

/* Field inputs: white surface inside the grey panel, sharp corners */
main[data-template="page"] .contact .field__input,
main[data-template="page"] .contact .text-area {
  background-color: var(--ap-surface, rgb(var(--color-background)));
  border-radius: var(--ap-radius-sm, 2px);
}

/* Dawn draws the field border as .field:after box-shadow ring; keep
   it sharp-cornered to match the 2px language. */
main[data-template="page"] .contact .field:after,
main[data-template="page"] .contact .text-area:after {
  border-radius: var(--ap-radius-sm, 2px);
}

/* Accent focus ring — beat Dawn's foreground-coloured focus shadow */
main[data-template="page"] .contact .field__input:focus,
main[data-template="page"] .contact .field__input:focus-visible,
main[data-template="page"] .contact .text-area:focus {
  box-shadow: 0 0 0 2px
    var(--ap-accent, rgb(var(--color-button))) !important;
  border-radius: var(--ap-radius-sm, 2px);
  outline: 0;
}

/* Floating labels read as mono field-codes */
main[data-template="page"] .contact .field__label {
  font-family: var(--ap-font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
}

/* Submit button: condensed uppercase CTA, sharp, >=44px target */
main[data-template="page"] .contact__button .button {
  font-family: var(--ap-font-display, var(--font-heading-family));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--ap-radius-sm, 2px);
  min-height: 48px;
}

/* Error / success status pull the danger + accent palette, sharp */
main[data-template="page"] .contact .contact__field-error,
main[data-template="page"] .contact .form-status {
  font-family: var(--ap-font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
}

/* ---- 4. Reduced-motion: nothing here animates, but be explicit --- */
@media (prefers-reduced-motion: reduce) {
  main[data-template="page"] .contact .field__input,
  main[data-template="page"] .contact .text-area {
    transition: none;
  }
}

/* ============================================================================
   APEX — SEARCH / 404 / LIST-COLLECTIONS  (page-scoped augment layer)
   ----------------------------------------------------------------------------
   Three discovery/utility pages get the same "ink-stage" authority the
   collection + PDP already carry: condensed white masthead on a dark band,
   red baseline rail, mono technical captions, sharp 2px framing, and a
   technical empty/results structure.

   Scope roots (Dawn emits these on <main>):
     #MainContent[data-template="search"]          -> sections/main-search.liquid
     #MainContent[data-template="404"]             -> sections/main-404.liquid
     #MainContent[data-template="list-collections"]-> sections/main-list-collections.liquid

   AUGMENT ONLY — does NOT redo what the global layer (ap-premium / ap-motorsport
   / component-search) already ships: condensed uppercase titles, mono prices,
   sharp cards, the .ap-search-empty disc + .ap-search-chip styling, the chevron
   before .title-wrapper titles. All --ap-* tokens carry fallbacks. Mobile-first
   (min-width queries). Reduced-motion safe. Touch targets stay >= 44px.
   ============================================================================ */

/* =====================================================================
   A. SEARCH RESULTS  —  main[data-template="search"]
   ===================================================================== */

/* ---- A1. MASTHEAD = ink stage --------------------------------------
   Lift the search header out of flat-white Dawn into a dark, full-bleed
   band carrying a faint diagonal tech texture and a red baseline rail,
   echoing .collection-hero.color-scheme-3. The condensed white title and
   the search field sit centred on the ink ground. The header is .page-width
   inside .template-search; we paint the band on the header itself and let
   it bleed full-width with a symmetric viewport-margin negative inset. */
#MainContent[data-template="search"] .template-search__header {
  position: relative;
  isolation: isolate;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: var(--ap-space-xl, 40px);
  padding-bottom: var(--ap-space-lg, 24px);
  background-color: rgb(14, 15, 18);
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.035) 0 2px,
      transparent 2px 9px
    );
  border-bottom: 4px solid var(--ap-accent, #e1001a);
}

/* Faint racing tick at the foot-left of the stage (under the red rail). */
#MainContent[data-template="search"] .template-search__header::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  bottom: 0;
  width: 72px;
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ap-accent, #e1001a) 0 6px,
    transparent 6px 12px
  );
  z-index: 1;
}

/* White condensed title on the ink ground. The global layer already sets
   the condensed/uppercase scale on .h2 — we only recolour + add a mono
   eyebrow above it. */
#MainContent[data-template="search"] .template-search__header .h2 {
  position: relative;
  color: #fff;
  margin-bottom: var(--ap-space-md, 16px);
}

/* Technical mono eyebrow above the title (purely decorative, centred). */
#MainContent[data-template="search"] .template-search__header .h2::before {
  content: "// SUCHE";
  display: block;
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ap-accent, #e1001a);
  margin-bottom: var(--ap-space-xs, 8px);
}

/* The search field box reads as a control on the dark stage: keep Dawn's
   field intact but make sure the wrapper centres cleanly within the band. */
#MainContent[data-template="search"] .template-search__search {
  position: relative;
}

/* Result-count caption -> calm mono telemetry line, white-dimmed on ink. */
#MainContent[data-template="search"] .template-search__header > p[role="status"] {
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.72);
}

/* Empty-state heading/hint also live ON the ink band -> recolour for
   contrast. The .ap-search-empty disc, title accent and chips are already
   styled in component-search.css; we only fix legibility on the dark ground
   and frame the block (do NOT redo it). */
#MainContent[data-template="search"] .template-search__header .ap-search-empty__title {
  color: #fff;
}
#MainContent[data-template="search"] .template-search__header .ap-search-empty__hint,
#MainContent[data-template="search"] .template-search__header .ap-search-suggestions__label {
  color: rgba(255, 255, 255, 0.7);
}
/* Chips on the dark stage: outline reads, hover keeps the accent language. */
#MainContent[data-template="search"] .template-search__header .ap-search-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: 2px;            /* snap soft pill -> technical tag */
  color: #fff;
}
@media (hover: hover) {
  #MainContent[data-template="search"] .template-search__header .ap-search-chip:hover {
    background: var(--ap-accent, #e1001a);
    border-color: var(--ap-accent, #e1001a);
    color: var(--ap-accent-contrast, #fff);
  }
  #MainContent[data-template="search"] .template-search__header .ap-search-chip:hover .ap-chip__icon {
    color: var(--ap-accent-contrast, #fff);
  }
}

/* ---- A2. RESULTS REGION — technical header + grid rhythm ------------ */

/* The horizontal/drawer filter + sort bar reads as a control strip:
   add a thin top hairline so results feel like a distinct datasheet block. */
#MainContent[data-template="search"] .product-count-vertical,
#MainContent[data-template="search"] .facets.facets-vertical-sort {
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
}

/* Mono, tracked product-count telemetry in the results area. */
#MainContent[data-template="search"] .product-count__text,
#MainContent[data-template="search"] #ProductCountDesktop {
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1.3rem;
}

/* Filtered "no results" block (search.filters present) -> centred technical
   panel rather than a bare line. */
#MainContent[data-template="search"] .collection--empty .title-wrapper {
  padding: var(--ap-space-xl, 40px) var(--ap-space-md, 16px);
  border: 1px solid rgba(14, 15, 18, 0.12);
  border-top: 4px solid var(--ap-accent, #e1001a);
  border-radius: 2px;
  background: var(--ap-surface-2, #f4f6f9);
}

/* Slightly tighter, more deliberate grid gutters on desktop so results read
   as a precise spec grid (Dawn's default gap is looser). */
@media screen and (min-width: 990px) {
  #MainContent[data-template="search"] .template-search__results .product-grid {
    column-gap: var(--ap-space-lg, 24px);
    row-gap: var(--ap-space-xl, 40px);
  }
}

/* =====================================================================
   B. 404  —  main[data-template="404"]
   ===================================================================== */

/* Turn the bare Dawn 404 into an ink-stage error console: dark full-bleed
   panel, oversized condensed white title, a giant ghost "404" watermark,
   a mono status line, and a sharp red CTA. .template-404 is .page-width
   .center; we paint a framed panel and bleed it edge-to-edge. */
#MainContent[data-template="404"] .template-404 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  padding: var(--ap-space-xl, 40px) 1.5rem;
  background-color: rgb(14, 15, 18);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.03) 0 2px,
    transparent 2px 10px
  );
  border-bottom: 4px solid var(--ap-accent, #e1001a);
}

/* Ghost "404" watermark — condensed, huge, barely-there, behind content. */
#MainContent[data-template="404"] .template-404::before {
  content: "404";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ap-font-display, "Saira Condensed", sans-serif);
  font-weight: 800;
  font-size: clamp(14rem, 38vw, 34rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  white-space: nowrap;
}

/* Mono "error" eyebrow above the headline (was Dawn's plain subtext <p>). */
#MainContent[data-template="404"] .template-404 > p {
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ap-accent, #e1001a);
}

/* Oversized condensed white title (global layer owns the family/transform). */
#MainContent[data-template="404"] .template-404 .title {
  color: #fff;
  font-size: clamp(3.2rem, 6vw, 5.6rem);
  line-height: 0.98;
}

/* Sharp, confident red CTA on the ink ground. */
#MainContent[data-template="404"] .template-404 .button {
  border-radius: 2px;
  min-height: 4.4rem;
  letter-spacing: 0.04em;
}

/* The "Popular products" featured-collection below the 404 keeps Dawn's
   scheme but gets a technical mono eyebrow on its heading so it reads as a
   recovery rail, consistent with the search masthead. */
#MainContent[data-template="404"] .featured-collection .title-wrapper-with-link .title {
  position: relative;
}

/* =====================================================================
   C. LIST-COLLECTIONS  —  main[data-template="list-collections"]
   ===================================================================== */

/* C1. MASTHEAD — promote the plain page-width <h1 .title--primary> to an
   ink-stage band consistent with the collection hero. The section markup is
   `.page-width > h1.title--primary` directly (no wrapper div on the title),
   so we paint a band on a ::before pseudo behind a relatively-positioned
   title and add a mono eyebrow. */
#MainContent[data-template="list-collections"] .page-width > .title--primary {
  position: relative;
  isolation: isolate;
  margin-left: calc(50% - 50vw + 1.5rem);
  margin-right: calc(50% - 50vw + 1.5rem);
  padding: var(--ap-space-xl, 40px) 1.5rem var(--ap-space-lg, 24px);
  color: #fff;
  background-color: rgb(14, 15, 18);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.035) 0 2px,
    transparent 2px 9px
  );
  border-bottom: 4px solid var(--ap-accent, #e1001a);
}

/* Mono technical eyebrow above the catalogue title. */
#MainContent[data-template="list-collections"] .page-width > .title--primary::before {
  content: "// KATEGORIEN";
  display: block;
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ap-accent, #e1001a);
  margin-bottom: var(--ap-space-xs, 8px);
}

/* Short red tech-stripe rule under the title (matches collection-hero __after,
   but our title isn't .collection-hero__title so we add it explicitly here). */
#MainContent[data-template="list-collections"] .page-width > .title--primary::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin-top: var(--ap-space-sm, 12px);
  background: repeating-linear-gradient(
    -45deg,
    var(--ap-accent, #e1001a) 0 6px,
    transparent 6px 12px
  );
}

/* C2. GRID — sharp framed category cards with a red corner accent.
   .collection-list__item wraps card-collection; we frame each item and add a
   hover-lift consistent with the .ap-card--lift utility (sharp 2px, accent
   border on hover). Keep media uncropped — frame the tile, not the image. */
#MainContent[data-template="list-collections"] .collection-list {
  margin-top: var(--ap-space-xl, 40px);
}

#MainContent[data-template="list-collections"] .collection-list__item {
  position: relative;
}

/* Thin top accent rail on each tile -> reads as a tabbed datasheet card. */
#MainContent[data-template="list-collections"] .collection-list__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--ap-accent, #e1001a);
  z-index: 2;
  transition: width var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
  pointer-events: none;
}

@media (hover: hover) {
  #MainContent[data-template="list-collections"] .collection-list__item:hover::before {
    width: 100%;
  }
}

/* Reduced-motion: show the rail statically instead of animating its width. */
@media (prefers-reduced-motion: reduce) {
  #MainContent[data-template="list-collections"] .collection-list__item:hover::before {
    width: 100%;
    transition: none;
  }
}

/* Category title -> condensed/uppercase already from global; add mono tracking
   restraint and ensure it sits as a confident label under the media. */
#MainContent[data-template="list-collections"] .collection-list__item .card__heading {
  letter-spacing: 0.01em;
}


/* APEX - COLLECTION GRID + RESULTS/SORT BAR. Scope: #MainContent[data-template^='collection'] collection-component. Augments ink-stage hero, mono filter labels, .ap-card-spec tile, red card-top wipe. */
@media screen and (min-width:990px){
#MainContent[data-template^='collection'] collection-component .facets-vertical-form{justify-content:space-between;align-items:center;gap:24px;padding:4px 16px;border:1px solid rgba(var(--color-foreground),.12);border-left:3px solid var(--ap-accent,#e1001a);border-radius:2px;background:var(--ap-surface,rgb(var(--color-background)));margin-bottom:16px}
#MainContent[data-template^='collection'] collection-component .facet-filters{padding-left:0;margin-right:auto}
#MainContent[data-template^='collection'] collection-component .facet-filters__label{font-family:var(--ap-font-mono,ui-monospace,Consolas,monospace);text-transform:uppercase;letter-spacing:.14em;font-size:1.1rem;color:rgba(var(--color-foreground),.6)}
#MainContent[data-template^='collection'] collection-component .facet-filters__sort{font-family:var(--ap-font-mono,ui-monospace,Consolas,monospace);font-weight:700;color:rgb(var(--color-foreground))}
#MainContent[data-template^='collection'] collection-component .product-count-vertical{margin-left:0;padding-left:16px;border-left:1px solid rgba(var(--color-foreground),.12)}
#MainContent[data-template^='collection'] collection-component .product-count__text{font-family:var(--ap-font-mono,ui-monospace,Consolas,monospace);text-transform:uppercase;letter-spacing:.08em;font-size:1.2rem;color:rgba(var(--color-foreground),.7)}
}
@media screen and (min-width:750px){
#MainContent[data-template^='collection'] collection-component .product-grid-container .collection{position:relative;padding-left:16px;border-top:1px solid rgba(var(--color-foreground),.22)}
#MainContent[data-template^='collection'] collection-component .product-grid-container .collection::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:repeating-linear-gradient(var(--ap-accent,#e1001a) 0 10px,transparent 10px 18px);pointer-events:none}
#MainContent[data-template^='collection'] collection-component .grid__item{position:relative}
#MainContent[data-template^='collection'] collection-component .grid__item::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-12px;height:1px;background:rgba(var(--color-foreground),.12);pointer-events:none}
#MainContent[data-template^='collection'] collection-component .card-wrapper:hover .card,#MainContent[data-template^='collection'] collection-component .card-wrapper:focus-within .card{box-shadow:0 0 0 1px rgba(var(--color-foreground),.22),var(--ap-shadow-lg,0 8px 24px rgba(0,0,0,.12))}
}
#MainContent[data-template^='collection'] collection-component .pagination__item--current{color:var(--ap-accent,#e1001a);font-weight:700}
/* ---- 15. PDP DOM rebuild — lifted full-width datasheet header -------
   The product title + rating now render in a full-width editorial header
   band ABOVE the media|info grid (real DOM change in main-product.liquid);
   the duplicates inside the sticky info column are hidden. */
.ap-pdp-header {
  padding: var(--ap-space-lg, 24px) 0 var(--ap-space-md, 16px);
  border-bottom: 1px solid rgba(14, 15, 18, 0.1);
  margin-bottom: var(--ap-space-lg, 24px);
}
.ap-pdp-header__eyebrow {
  margin: 0 0 var(--ap-space-2xs, 4px);
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ap-accent, #e1001a);
}
.ap-pdp-header__title {
  margin: 0;
  font-family: var(--ap-font-display, "Saira Condensed", sans-serif);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.01em;
  font-size: clamp(3.2rem, 5.5vw, 6rem);
  color: var(--ap-on-surface, rgb(var(--color-foreground)));
}
.ap-pdp-header__meta {
  margin-top: var(--ap-space-xs, 8px);
}
/* Title + rating live in the header now — hide the column duplicates. */
.product__info-container .product__title,
.product__info-container .product__rating-stars {
  display: none;
}

/* ---- 16. Cart DOM rebuild — bespoke header -------------------------
   Item-count eyebrow above a condensed cart title. The items form/table
   and the checkout button are untouched (commerce-safe). */
.ap-cart-header {
  align-items: flex-end;
}
.ap-cart-header__eyebrow {
  margin: 0 0 var(--ap-space-2xs, 4px);
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ap-accent, #e1001a);
}
.ap-cart-header .cart__title {
  margin: 0;
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: 0.95;
}

/* ---- 17. RADICAL HOME — diagonal hero + oversized headline ---------
   Break Dawn's rectangular stacked grid: the hero ends in a diagonal
   "race-banner" slash and the headline goes oversized/full-bleed. Desktop
   only; content gets bottom room so the cut eats empty space, not text. */
@media screen and (min-width: 750px) {
  [id*="image_banner"] .banner {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%);
  }
  [id*="image_banner"] .banner__content {
    padding-bottom: 5.5vw;
  }
  [id*="image_banner"] .banner__heading {
    font-size: clamp(4.5rem, 9vw, 11rem) !important;
    line-height: 0.88;
    letter-spacing: -0.01em;
  }
  /* The section that follows slides up into the slash for a layered overlap. */
  [id*="image_banner"] {
    margin-bottom: -2vw;
    position: relative;
    z-index: 1;
  }
}

/* ---- 18. RADICAL HOME — finder floats over the hero slash -----------
   The tyre-size finder lifts up into the hero's diagonal cut as an
   elevated control panel (the section band goes transparent; only the
   panel reads as a floating card). Desktop only; mobile stays stacked. */
@media screen and (min-width: 990px) {
  [id*="reifenfinder"] {
    position: relative;
    z-index: 5;
    margin-top: -5.5vw !important;
  }
  [id*="reifenfinder"] > .gradient {
    background: transparent !important;
  }
  [id*="reifenfinder"] .ap-reifenfinder {
    background: var(--ap-surface, #fff);
    border: 1px solid rgba(14, 15, 18, 0.1);
    box-shadow: 0 22px 55px -22px rgba(0, 0, 0, 0.5);
    padding: clamp(24px, 3vw, 44px);
    border-radius: 2px;
  }
}


/* ====================================================================== *
 * APEX RADICAL ROLLOUT (§19) — diagonal edges, XXL editorial headings,
 * overlapping/floating panels across home-next/mid/end + collection/product/cart.
 * Scoped per group; desktop-gated; coherent with the shipped hero language.
 * ====================================================================== */


/* =====================================================================
   APEX · HOME-NEXT  ·  radical composition for the post-hero zone
   ---------------------------------------------------------------------
   Group: the home sections right after hero+finder, in DOM order
     trust_rating (scheme-2) · collection_nav (scheme-1) ·
     usp_bar (scheme-1) · featured_collection (Dawn, scheme-1) ·
     social_proof (scheme-1)
   Coherent with the SHIPPED language (ap-motorsport.css §17/§18):
   hero diagonal slash + finder float + XXL condensed headings + red tick.
   Augments — does NOT fight — the existing home layer.

   MOVES (restrained, premium):
     A) trust_rating = a FLOATING credibility plate that overlaps up
        toward the finder (mirrors the finder->hero float).
     B) XXL editorial eyebrow+headings on collection_nav + featured_collection
        (left-aligned) and social_proof (centered).
     C) ONE diagonal "race-banner": social_proof becomes a full-bleed
        surface-2 STAT CONSOLE with an angled top edge + compensating
        top padding, and the stat cards lift asymmetrically into the slash.

   SCOPE: every rule keyed to main#MainContent[data-template="index"] +
   the section attribute-contains id (JSON-template DOM ids), so nothing
   leaks to other templates/groups. All --ap-* tokens carry fallbacks.
   Diagonals/overlaps are desktop-only (min-width:750/990px); mobile stays
   clean + stacked. No display:none on content; reduced-motion safe;
   touch targets untouched (>=44px from section CSS).
   ===================================================================== */

main#MainContent[data-template="index"] {
  /* local aliases (with global fallbacks) so this block stands alone */
  --apn-accent: var(--ap-accent, #e1001a);
  --apn-ink: var(--ap-on-surface, rgb(var(--color-foreground, 14 15 18)));
  --apn-surface2: var(--ap-surface-2, #f4f6f9);
  --apn-hair: rgba(var(--color-foreground, 14 15 18), 0.12);
  --apn-ease: var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
}

/* =====================================================================
   B1. XXL EDITORIAL HEADINGS + RED EYEBROW TICK
   ---------------------------------------------------------------------
   The section headings go oversized + condensed with a short red tick
   above them. Left-aligned sections (collection_nav, featured_collection)
   get a left tick; the centered social_proof head gets a centered tick.
   Graphic only (no injected copy) -> i18n-safe. The global layer already
   sets the condensed display family/uppercase on h2.title; we add scale,
   tighter leading + the tick here, scoped so other groups don't shift.
   ===================================================================== */
main#MainContent[data-template="index"] [id*="collection_nav"] .ap-collection-nav__heading,
main#MainContent[data-template="index"] [id*="featured_collection"] .collection__title > .title,
main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__heading {
  position: relative;
  margin-top: 0;
  padding-top: 2.2rem; /* room for the tick so it never overlaps text */
  font-family: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.01em;
  font-size: clamp(2.8rem, 5vw, 6rem);
}

/* The red eyebrow tick (left for left-aligned heads). */
main#MainContent[data-template="index"] [id*="collection_nav"] .ap-collection-nav__heading::before,
main#MainContent[data-template="index"] [id*="featured_collection"] .collection__title > .title::before,
main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__heading::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 4.4rem;
  height: 4px;
  background: var(--apn-accent);
  border-radius: 0; /* sharp 2px identity */
}

/* social_proof head is centered -> center its heading + tick. */
main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__head {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__heading {
  align-self: center;
}
main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__heading::before {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* featured_collection description reads as a calm subtitle under the XXL title. */
main#MainContent[data-template="index"] [id*="featured_collection"] .collection__description {
  max-width: 56ch;
}

/* =====================================================================
   A. trust_rating = FLOATING CREDIBILITY PLATE
   ---------------------------------------------------------------------
   Right under the floating finder, the trust bar lifts up as an elevated
   surface-2 plate with a red leading rail + sharp corners (mirrors the
   finder->hero float + the PDP control-panel rail). On desktop it pulls
   up so the page reads as one continuous "instrument stack", not stacked
   Dawn blocks. Mobile: a plain framed plate, no overlap.
   ===================================================================== */
main#MainContent[data-template="index"] [id*="trust_rating"] .ap-trust-rating-bar {
  position: relative;
  padding: var(--ap-space-md, 16px) var(--ap-space-lg, 24px);
  padding-inline-start: var(--ap-space-lg, 24px);
  background: var(--apn-surface2);
  border: 1px solid var(--apn-hair);
  border-inline-start: 3px solid var(--apn-accent);
  border-radius: 2px;
  box-shadow: var(--ap-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
}

/* The optional trust heading picks up a condensed mono micro-eyebrow feel. */
main#MainContent[data-template="index"] [id*="trust_rating"] .ap-trust-rating-bar__heading {
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--apn-accent);
  opacity: 0.95;
}

@media screen and (min-width: 990px) {
  /* Lift the plate up toward the finder for the layered "float" look. */
  main#MainContent[data-template="index"] [id*="trust_rating"] {
    position: relative;
    z-index: 4;
    margin-top: -2.4rem;
  }
  main#MainContent[data-template="index"] [id*="trust_rating"] .ap-trust-rating-bar {
    padding-block: var(--ap-space-lg, 24px);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.42);
  }
}

/* =====================================================================
   C. social_proof = DIAGONAL "RACE-BANNER" STAT CONSOLE  (the one slash)
   ---------------------------------------------------------------------
   The single strong diagonal of this zone. The social_proof band goes
   FULL-BLEED surface-2 with an angled TOP edge (clip-path) so it reads as
   a race-banner stage carrying the stat readout — the same slash grammar
   as the hero, applied to a light feature band. Compensating top padding
   makes the slash eat EMPTY space, never the heading/stats. The band also
   pulls up under featured_collection so the next band overlaps into the
   slash (layered look). Stat cards lift asymmetrically off the band.
   Desktop only; mobile = clean flat stacked band.
   ===================================================================== */
@media screen and (min-width: 750px) {
  /* Full-bleed the section band edge-to-edge (escape .page-width gutters
     via the color-scheme wrapper) and paint the angled surface-2 stage. */
  main#MainContent[data-template="index"] [id*="social_proof"] > .gradient {
    position: relative;
    margin-top: -3vw;                 /* slide up so it overlaps the band above */
    padding-top: 4vw;                 /* compensate: slash eats this empty space */
    background: var(--apn-surface2);
    /* angled top edge: low-left -> high-right, livery direction */
    clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
  }

  /* A racing tech-stripe rides the slash's leading edge for the banner cue. */
  main#MainContent[data-template="index"] [id*="social_proof"] > .gradient::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: repeating-linear-gradient(
      -45deg,
      var(--apn-accent) 0 10px,
      transparent 10px 20px
    );
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
  }

  /* Stat cards sharpen to engineered tiles and lift off the stage; an
     asymmetric vertical offset on the middle card breaks the flat grid
     rhythm (restraint: only the centre tile is offset). */
  main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__stat {
    position: relative;
    border: 1px solid var(--apn-hair);
    border-top: 3px solid var(--apn-accent);
    border-radius: 2px;
    background: var(--ap-surface, rgb(var(--color-background)));
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
  }
  main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__stat:nth-child(2) {
    transform: translateY(-1.6rem);
  }

  /* Stat figures read as a datasheet readout (condensed + tabular). */
  main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__stat-number {
    font-family: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.005em;
    font-size: clamp(3.2rem, 4vw, 4.4rem);
  }
}

/* =====================================================================
   D. usp_bar — quiet supporting move (no overlap, no slash)
   ---------------------------------------------------------------------
   Keep the benefit row as the calm beat between the loud collection_nav
   heading and the diagonal social_proof stage. Just snap the icon chips
   to the sharp accent identity so the zone stays coherent. Restraint by
   design: NOT every band gets a radical move.
   ===================================================================== */
main#MainContent[data-template="index"] [id*="usp_bar"] .ap-usp__icon {
  border-radius: 2px;
  background: color-mix(in srgb, var(--apn-accent) 12%, transparent);
  color: var(--apn-accent);
}
main#MainContent[data-template="index"] [id*="usp_bar"] .ap-usp__title {
  font-family: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* =====================================================================
   E. REDUCED-MOTION + SAFETY
   ---------------------------------------------------------------------
   Nothing here animates on a timer; the offsets/slashes are static. We
   keep the diagonal + lift even under reduced-motion (they are layout,
   not motion) but drop the only transform-based offset to avoid any
   perceived shift for users who opt out.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__stat:nth-child(2) {
    transform: none;
  }
}

/* forced-colors: keep the slashed band + plates legible (borders survive). */
@media (forced-colors: active) {
  main#MainContent[data-template="index"] [id*="trust_rating"] .ap-trust-rating-bar,
  main#MainContent[data-template="index"] [id*="social_proof"] .ap-social-proof__stat {
    border: 1px solid CanvasText;
  }
}

/* =========================================================================
   APEX — RADICAL COMPOSITION LAYER · GROUP: home-mid
   Sections: promo_tiles · reifen_wissen · brand_story · brand_showcase · press_bar
   CSS ONLY — DOM/Liquid unchanged, upgrade-safe. Append after section CSS.

   Template context (index.json): these are scheme-2 (promo_tiles, reifen_wissen,
   brand_story) sitting as one dark-ish editorial BAND between scheme-1 neighbours,
   then scheme-1 (brand_showcase, press_bar) close it out before video_testimonials.

   Moves applied (1-2 strong per section, premium not chaotic):
   - DIAGONAL race-banner edge opening the scheme-2 band (promo_tiles top) and
     closing it (brand_showcase overlaps UP into the band's tail).
   - XXL condensed editorial headings + red eyebrow tick across the group.
   - ASYMMETRIC floating feature for brand_story (content panel lifts + overlaps
     the image, breaking the symmetric 2-col rhythm).

   IMPORTANT: JSON-template sections → target by [id*="<key>"]. The .color-scheme-*
   child div is the full-bleed band; clip-path + compensating padding live there.
   All diagonals/overlaps gated to >=990px; mobile stays clean & stacked.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Shared display tokens (local, fallback-guarded — snippet defines neither
   --ap-space-2xl nor a guaranteed --ap-font-mono on :root).
   ------------------------------------------------------------------------- */
[id*="promo_tiles"],
[id*="reifen_wissen"],
[id*="brand_story"],
[id*="brand_showcase"],
[id*="press_bar"] {
  --apx-slash: 4vw;                /* diagonal depth (desktop only)          */
  --apx-eyebrow: var(--ap-accent, #e1001a);
  --apx-display: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
}

/* =========================================================================
   1) PROMO_TILES — opens the scheme-2 band with a diagonal "race-banner" top
      edge + XXL editorial heading. Full-bleed clip on the .color-scheme-2 band.
   ========================================================================= */

/* XXL editorial heading + red eyebrow tick (left-aligned section). */
[id*="promo_tiles"] .ap-promo-tiles__header {
  position: relative;
  padding-left: clamp(0px, 2vw, 1.6rem);
}
[id*="promo_tiles"] .ap-promo-tiles__title {
  font-family: var(--apx-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-size: clamp(2.8rem, 5vw, 6rem);
}
/* Short red eyebrow tick before the heading. */
[id*="promo_tiles"] .ap-promo-tiles__header::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 5px;
  margin-bottom: var(--ap-space-md, 16px);
  background: var(--apx-eyebrow);
}

/* Diagonal top edge on the full-bleed band + matching extra top padding so the
   slash only ever eats empty space above the heading. Desktop only. */
@media screen and (min-width: 990px) {
  [id*="promo_tiles"] > .color-scheme-2 {
    position: relative;
    z-index: 1;
    clip-path: polygon(0 var(--apx-slash), 100% 0, 100% 100%, 0 100%);
    /* compensate the slash so it never clips the eyebrow/heading */
    padding-top: calc(var(--apx-slash) + var(--ap-space-md, 16px));
  }
}

/* =========================================================================
   2) REIFEN_WISSEN — band continuity (no new diagonal). Promote the existing
      eyebrow + heading to the XXL editorial scale for rhythm with promo_tiles.
   ========================================================================= */
[id*="reifen_wissen"] .ap-wissen__eyebrow {
  font-weight: 800;
  letter-spacing: 0.18em;
}
[id*="reifen_wissen"] .ap-wissen__heading {
  font-family: var(--apx-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.005em;
  font-size: clamp(2.6rem, 4.4vw, 5rem);
}

/* =========================================================================
   3) BRAND_STORY — ASYMMETRIC / FLOATING feature. Lift the text panel out of
      the grid into a sharp-cornered floating card that overlaps the image and
      sits proud of the band; oversize the heading. Breaks the symmetric split.
      Desktop only — mobile keeps the clean stacked Dawn-like layout.
   ========================================================================= */

/* XXL editorial heading (left-aligned). Keep its existing red rule, just scale. */
[id*="brand_story"] .ap-brand-story__heading {
  font-family: var(--apx-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-size: clamp(2.8rem, 4.8vw, 5.6rem);
}
/* upscale the thin eyebrow rule to match the bolder group language */
[id*="brand_story"] .ap-brand-story__heading::before {
  width: 5.6rem;
  height: 5px;
}

@media screen and (min-width: 990px) {
  /* tighten the split so the floating panel can overlap the image edge */
  [id*="brand_story"] > .color-scheme-2 .ap-brand-story {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    column-gap: 0;                 /* overlap closes the gutter */
  }

  /* The content becomes a floating, asymmetric, sharp-cornered panel that
     lifts off the band surface and bleeds back over the image. */
  [id*="brand_story"] .ap-brand-story__content {
    position: relative;
    z-index: 2;
    margin-block: var(--ap-space-xl, 40px);
    margin-inline-start: -8%;      /* pull over the image (image-left default) */
    padding: clamp(2.4rem, 3vw, 4rem);
    background: var(--ap-surface, rgb(var(--color-background)));
    border-radius: 2px;            /* sharp Apex corner */
    box-shadow: var(--ap-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  }
  /* accent spine on the panel — motorsport cue, anchors the asymmetry */
  [id*="brand_story"] .ap-brand-story__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--apx-eyebrow);
    border-radius: 2px 0 0 2px;
  }

  /* When the image is placed RIGHT, mirror the overlap to stay coherent. */
  [id*="brand_story"] .ap-brand-story--image-right .ap-brand-story__content {
    margin-inline-start: 0;
    margin-inline-end: -8%;
  }
  [id*="brand_story"] .ap-brand-story--image-right .ap-brand-story__content::before {
    left: auto;
    right: 0;
    border-radius: 0 2px 2px 0;
  }

  /* let the image read full-bleed-ish into the gutter under the panel */
  [id*="brand_story"] .ap-brand-story__media {
    position: relative;
    z-index: 1;
  }
}

/* =========================================================================
   4) BRAND_SHOWCASE — closes the scheme-2 band: this scheme-1 band overlaps
      UP into the previous section's tail (layered hero->finder feel) and gets
      an XXL centered editorial heading with a centered red eyebrow tick.
   ========================================================================= */

/* XXL heading, centered (section is centered) with a centered red tick above. */
[id*="brand_showcase"] .ap-brand-showcase__heading {
  font-family: var(--apx-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: -0.005em;
  font-size: clamp(2.4rem, 4vw, 4.6rem);
  text-align: center;
  margin-bottom: var(--ap-space-xl, 40px);
}
[id*="brand_showcase"] .ap-brand-showcase__heading::before {
  content: "";
  display: block;
  width: 4rem;
  height: 5px;
  margin: 0 auto var(--ap-space-sm, 12px);
  background: var(--apx-eyebrow);
}

/* Overlap the scheme-1 band up into the scheme-2 tail for a layered seam.
   Desktop only; the negative margin is small and the band has its own padding,
   so no content is ever covered. */
@media screen and (min-width: 990px) {
  [id*="brand_showcase"] > .color-scheme-1 {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--apx-slash));
    /* give back the pulled space so the logo grid never rides under the seam */
    padding-top: calc(var(--apx-slash) + var(--ap-space-lg, 24px));
    /* diagonal top edge mirrors promo_tiles → the band reads as one race banner */
    clip-path: polygon(0 0, 100% var(--apx-slash), 100% 100%, 0 100%);
  }
}

/* =========================================================================
   5) PRESS_BAR — resolves the group quietly. Keep the centered "as seen in"
      treatment; only firm up the eyebrow tracking so it sits in the family.
      No diagonal/overlap here (it is a calm closing strip).
   ========================================================================= */
[id*="press_bar"] .ap-press-bar__heading {
  font-weight: 800;
  letter-spacing: 0.2em;
}

/* =========================================================================
   REDUCED MOTION — the layout moves are static (no transitions added), but
   neutralise transform-based depth defensively for safety/consistency.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  [id*="brand_story"] .ap-brand-story__content,
  [id*="brand_showcase"] > .color-scheme-1 {
    transition: none;
  }
}

/* ============================================================================
   APEX · RADICAL COMPOSITION — GROUP: home-end
   ----------------------------------------------------------------------------
   Home closing run: video_testimonials · guarantee · trust_row · faq ·
   newsletter (scheme-3 dark) · recently_viewed.
   Brings the shipped hero language (#image_banner diagonal + XXL headline,
   #reifenfinder float) to the bottom of the page so the home flow CLOSES on a
   race-banner beat instead of fading out as stacked Dawn bands:
     1) XXL editorial section headings (condensed display face, uppercase,
        line-height ~0.9, big clamp) + a short red eyebrow tick.
     2) A real clip-path DIAGONAL TOP on the dark scheme-3 newsletter band,
        mirroring the hero slash, WITH compensating padding so the cut only
        eats empty space; the faq band overlaps up into it for the layered look.
     3) A closing "race-banner" feel: newsletter pulls up into the prior band,
        recently-viewed lifts as a floating epilogue rail.

   SCOPE: every rule is keyed to main#MainContent[data-template="index"] AND the
   group's JSON-template section keys via attribute-contains [id*="<key>"]
   (DOM id = shopify-section-template--XXXX__<key>), so nothing leaks to other
   groups, the footer, or other templates.

   COEXISTS WITH ap-motorsport.css §14 (home layer) — does NOT re-add:
     · the .ap-trust-row__heading red tick (§14 owns it → only upsized here)
     · the .newsletter::before tech-stripe seam / .newsletter::after red rail
       (those live on the OUTER .newsletter wrapper; our clip-path lives on the
       INNER .newsletter__wrapper dark band, so they never collide/clip).
     · the .section--video-testimonials/.section--faq .page-width::before seams.

   Tokens carry fallbacks so each rule stands alone. Diagonals + overlaps are
   desktop-only (min-width:750px / 990px); mobile stays clean + stacked.
   Touch targets unchanged (>=44px). Reduced-motion safe.
   ============================================================================ */

/* Local, group-scoped aliases (no new global tokens). */
main#MainContent[data-template="index"] [id*="video_testimonials"],
main#MainContent[data-template="index"] [id*="guarantee"],
main#MainContent[data-template="index"] [id*="trust_row"],
main#MainContent[data-template="index"] [id*="faq"],
main#MainContent[data-template="index"] [id*="newsletter"],
main#MainContent[data-template="index"] [id*="recently_viewed"] {
  --he-accent: var(--ap-accent, #e1001a);
  --he-ink: var(--ap-on-surface, rgb(var(--color-foreground, 14 15 18)));
  --he-display: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
}

/* ---------------------------------------------------------------------------
   1) XXL EDITORIAL HEADINGS + red eyebrow tick
   The closing section headings jump to the condensed motorsport-poster scale
   (matching the hero headline language) with a short red tick before them.
   Centered sections keep their tick centered; left sections get a left tick.
   --------------------------------------------------------------------------- */

/* Shared display sizing for the closing-run headings. The global ap-motorsport
   layer already enforces the condensed face/uppercase on h2; we push SCALE +
   tight leading so these read as oversized editorial titles, not stock h2. */
main#MainContent[data-template="index"] [id*="video_testimonials"] .ap-vid-testimonials__heading,
main#MainContent[data-template="index"] [id*="guarantee"] .ap-guarantee__heading,
main#MainContent[data-template="index"] [id*="trust_row"] .ap-trust-row__heading,
main#MainContent[data-template="index"] [id*="faq"] .ap-faq__heading,
main#MainContent[data-template="index"] [id*="recently_viewed"] .ap-recent__heading,
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper > .h1,
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper > .h2 {
  font-family: var(--he-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.005em;
  font-size: clamp(2.8rem, 5vw, 6rem);
}

/* Red eyebrow tick before the heading. Implemented as a ::before block element
   so it sits ABOVE the title (own line) and never clips the text.
   NOTE: trust_row is intentionally EXCLUDED — ap-motorsport §14 already gives
   .ap-trust-row__heading its own ::before tick; we only upsized it above. */
main#MainContent[data-template="index"] [id*="video_testimonials"] .ap-vid-testimonials__heading::before,
main#MainContent[data-template="index"] [id*="guarantee"] .ap-guarantee__heading::before,
main#MainContent[data-template="index"] [id*="faq"] .ap-faq__heading::before,
main#MainContent[data-template="index"] [id*="recently_viewed"] .ap-recent__heading::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 4px;
  margin-bottom: var(--ap-space-sm, 12px);
  background: var(--he-accent);
  border-radius: 0; /* sharp 2px identity */
}

/* Centered sections (video testimonials + faq headings are text-align:center):
   center the tick too so the composition stays balanced. */
main#MainContent[data-template="index"] [id*="video_testimonials"] .ap-vid-testimonials__heading::before,
main#MainContent[data-template="index"] [id*="faq"] .ap-faq__heading::before {
  margin-inline: auto;
}

/* Newsletter is a centered section; give its headline a centered eyebrow tick
   on the dark ground (accent reads on ink). The wrapper is .center already. */
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper > .h1,
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper > .h2 {
  position: relative;
}
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper > .h1::before,
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper > .h2::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 4px;
  margin: 0 auto var(--ap-space-sm, 12px);
  background: var(--he-accent);
}

/* ---------------------------------------------------------------------------
   2) DARK NEWSLETTER — diagonal "race-banner" TOP (mirrors the hero slash)
   The scheme-3 dark band is .newsletter__wrapper (full-bleed because the
   section sets full_width:true). We cut its TOP edge on the same down-left ->
   up-right diagonal as the hero (#image_banner) and ADD matching top padding
   so the slash only eats empty space — never the heading/field/button.
   Desktop only; mobile keeps a clean rectangle. clip-path is feature-queried
   so non-supporting browsers render a normal band (graceful flat fallback).
   --------------------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  @supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper {
      --he-slash: 4vw;
      clip-path: polygon(0 var(--he-slash), 100% 0, 100% 100%, 0 100%);
      /* Compensate the cut: push content clear of the slope at the top. */
      padding-top: calc(var(--ap-space-xl, 40px) + var(--he-slash));
    }
  }

  /* Layered overlap: the newsletter band slides UP into the preceding flow so
     the dark slash overlaps the band above it (faq), just like the hero ->
     finder overlap. The whole newsletter section is lifted; z-index keeps the
     dark band (and its slash) on top of the lighter faq band.
     IMPORTANT: scope the lift to the SECTION WRAPPER only ([id^="shopify-section"]).
     The bare [id*="newsletter"] also matched the Dawn newsletter INPUT (whose id
     contains "newsletter"), so the -2vw margin pulled the field up into the
     subheading (the overlap bug). The wrapper-only selector fixes it. */
  main#MainContent[data-template="index"] [id^="shopify-section"][id*="newsletter"] {
    position: relative;
    z-index: 2;
    margin-top: -2vw;
  }

  /* Give the faq band a touch of extra bottom room so the newsletter slash
     overlaps into empty space, not into the last FAQ row. */
  main#MainContent[data-template="index"] [id*="faq"] .section-padding,
  main#MainContent[data-template="index"] [id*="faq"] [class*="section-"][class*="-padding"] {
    padding-bottom: calc(var(--ap-space-xl, 40px) + 2vw);
  }
}

/* Deeper, more dramatic slash on wide viewports — full race-banner presence. */
@media screen and (min-width: 990px) {
  @supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper {
      --he-slash: 4.5vw;
    }
  }
}

/* ---------------------------------------------------------------------------
   3) CLOSING RACE-BANNER FEEL — floating epilogue + framed dark band
   The dark newsletter reads as the page's closing "banner": a heavy drop
   shadow lifts it off the flow (matching the finder card's elevation), and the
   recently-viewed run that follows floats up as a quiet epilogue rail.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  /* Elevate the dark band like the shipped finder card (sharp 2px, deep
     shadow). Shadow only — no layout shift. */
  main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper {
    box-shadow: 0 22px 55px -22px rgba(0, 0, 0, 0.55);
  }

  /* Recently-viewed: lift the epilogue up toward the closing band and lead it
     with the same red tick rhythm so the page ends on a deliberate beat, not a
     stray Dawn grid. (Section auto-hides until JS fills it — safe no-op when
     empty.) */
  main#MainContent[data-template="index"] [id*="recently_viewed"] .ap-recent-section {
    position: relative;
    z-index: 1;
    margin-top: -1vw;
  }
}

/* ---------------------------------------------------------------------------
   4) Reduced-motion — the structural moves above are static (no transitions),
   so nothing to disable; declared explicitly for clarity/future-proofing.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  main#MainContent[data-template="index"] [id*="newsletter"] .newsletter__wrapper {
    transition: none;
  }
}

/* ============================================================================
   APEX — COLLECTION PAGE  ·  "Race-banner ink stage + spec-sheet results"
   ----------------------------------------------------------------------------
   Group: collection  (templates/collection.json — banner / collection_nav /
   product-grid / trust_row). CSS ONLY · DOM + Liquid unchanged · upgrade-safe.

   Replicates the established radical home language on the collection page:
     1) DIAGONAL bottom edge ("race-banner") on the existing dark ink-stage
        hero (.collection-hero.color-scheme-3) with compensating padding so the
        slash eats EMPTY space, never the white XXL title or its tech-stripe.
     2) The CATEGORY TAGS band (collection-nav) lifts UP into that slash as a
        floating control strip (negative margin + z-index), mirroring the
        hero -> finder overlap on home.
     3) A TECHNICAL / ASYMMETRIC results bar (the vertical facet sort/form) and
        a SPEC-SHEET grid feel (hairline column rulers + mono index ticks).

   SCOPE: every rule is keyed under #MainContent[data-template="collection"] (Dawn body class)
   plus the real section roots (.collection-hero / .section--collection-nav /
   collection-component / .collection), so nothing leaks to other templates.

   AUGMENTS — does NOT redo the live layer already shipped in ap-motorsport.css:
     · §11 ink-stage hero (dark band, white condensed title, red baseline)
     · §9 title tech-stripe ::after + chevron ::before  (kept)
     · the collection grid + facet sort-bar mono framing (lines ~2192-2208)
   We only add the diagonal cut, the nav overlap, the asymmetric rail and the
   spec-sheet rulers on top.

   HARD RULES honoured: clip-path only on the full-bleed hero band WITH added
   padding (never clips text/CTAs); diagonals/overlaps gated behind
   min-width:750px / 990px so mobile stays clean + stacked; touch targets
   >=44px (untouched); reduced-motion safe. Tokens carry fallbacks.
   ============================================================================ */

/* ---- 0. Local aliases (collection-scoped; no new global tokens) ---------- */
#MainContent[data-template="collection"] {
  --apc-accent: var(--ap-accent, #e1001a);
  --apc-ink: rgb(14, 15, 18);
  --apc-hair: rgba(var(--color-foreground), 0.12);
  --apc-hair-strong: rgba(var(--color-foreground), 0.22);
  /* Depth of the race-banner slash on the hero (desktop). */
  --apc-slash: 4vw;
  /* How far the category tags ride up into the slash. */
  --apc-lift: 3.2vw;
}

/* ============================================================================
   1. RACE-BANNER DIAGONAL on the dark ink-stage hero
   ----------------------------------------------------------------------------
   The hero band is already the dark stage (§11). Here we cut its BOTTOM edge
   on the down-left -> up-right livery diagonal and add matching bottom padding
   so the cut only eats empty space below the title/tech-stripe. clip-path is
   feature-queried -> browsers without it render a clean rectangle (flat
   fallback), and the existing red baseline border simply reads straight there.
   Desktop only; mobile keeps the flat dark band.
   ========================================================================== */
@media screen and (min-width: 750px) {
  @supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    #MainContent[data-template="collection"] .collection-hero--stage {
      /* Slash bottom-right corner up -> classic race-banner cut. */
      clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--apc-slash)),
        0 100%
      );
      /* Compensate: push the cut into fresh empty space under the content. */
      padding-bottom: calc(var(--ap-space-xl, 40px) + var(--apc-slash));
      /* The 4px red baseline border is consumed by the clip; re-assert the
         racing baseline as a clipped gradient band so the edge still reads. */
      border-bottom: 0;
      position: relative;
      z-index: 1;
    }

    /* Red livery edge that follows the diagonal: a thin accent band painted as
       a background layer, revealed only along the cut by the clip-path above. */
    #MainContent[data-template="collection"] .collection-hero--stage {
      background-image:
        linear-gradient(
          to bottom,
          transparent calc(100% - 4px - var(--apc-slash)),
          var(--apc-accent) calc(100% - var(--apc-slash)),
          var(--apc-accent) 100%
        );
      background-repeat: no-repeat;
    }
  }
}

/* Deeper, more dramatic slash on wide viewports (poster scale). */
@media screen and (min-width: 1200px) {
  #MainContent[data-template="collection"] {
    --apc-slash: 4.6vw;
    --apc-lift: 3.6vw;
  }
}

/* ============================================================================
   2. CATEGORY TAGS overlap UP into the slash  (hero -> finder echo)
   ----------------------------------------------------------------------------
   The collection-nav band is the section directly under the hero. We lift it
   into the diagonal cut and let the pills read as a floating control strip on
   a sharp surface plate with a red leading rail — an asymmetric, layered move
   that breaks Dawn's stacked rhythm. Pills already have >=44px targets + their
   own active/hover accent (section-collection-nav.css); we only frame + lift.
   Desktop only; mobile stays a normal stacked scroll-row.
   ========================================================================== */
@media screen and (min-width: 750px) {
  #MainContent[data-template="collection"] .section--collection-nav {
    position: relative;
    z-index: 3;
    margin-top: calc(-1 * var(--apc-lift));
  }

  /* The lifted band becomes a transparent carrier; the inner pill cluster is
     the floating plate, so only the strip reads as elevated (not a full band). */
  #MainContent[data-template="collection"] .section--collection-nav > .gradient {
    background: transparent !important;
  }

  #MainContent[data-template="collection"] .section--collection-nav .ap-collection-nav {
    position: relative;
    padding: var(--ap-space-sm, 12px) var(--ap-space-lg, 24px)
      var(--ap-space-sm, 12px) var(--ap-space-lg, 24px);
    background: var(--ap-surface, rgb(var(--color-background)));
    border: 1px solid var(--apc-hair);
    /* Asymmetric: a confident red rail on the leading edge only. */
    border-left: 3px solid var(--apc-accent);
    border-radius: 2px;
    box-shadow: var(--ap-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  }

  /* A short mono "index" tick on the plate's top-right — datasheet corner cue
     (decorative; graphic only, no injected copy -> i18n-safe). */
  #MainContent[data-template="collection"] .section--collection-nav .ap-collection-nav::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 18px;
    height: 18px;
    border-top: 3px solid var(--apc-accent);
    border-right: 3px solid var(--apc-accent);
    pointer-events: none;
  }

  /* Optional heading inside the strip reads as a quiet mono field-label so the
     pills stay the hero of the plate. */
  #MainContent[data-template="collection"] .section--collection-nav .ap-collection-nav__heading {
    font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 1.2rem;
    color: rgba(var(--color-foreground), 0.6);
  }
}

/* On very wide screens, give the plate a touch more lift presence. */
@media screen and (min-width: 1200px) {
  #MainContent[data-template="collection"] .section--collection-nav .ap-collection-nav {
    box-shadow: 0 22px 55px -22px rgba(0, 0, 0, 0.45);
  }
}

/* ============================================================================
   3. ASYMMETRIC / TECHNICAL RESULTS BAR
   ----------------------------------------------------------------------------
   The vertical facet sort + product-count strip already reads as a mono
   control bar (ap-motorsport.css ~line 2194). We push it further into an
   ASYMMETRIC instrument header: a red index plate offset to the leading edge
   plus a diagonal tech-stripe trailing into the count, so the results region
   opens like a datasheet header rather than a centred Dawn row.
   Desktop only (the bar is small-hide on mobile anyway).
   ========================================================================== */
@media screen and (min-width: 990px) {
  #MainContent[data-template="collection"] collection-component .facets-vertical-sort {
    position: relative;
  }

  /* Offset red index plate riding the leading edge of the sort bar. */
  #MainContent[data-template="collection"] collection-component .facets-vertical-form {
    position: relative;
    overflow: visible;
  }
  #MainContent[data-template="collection"] collection-component .facets-vertical-form::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -10px;
    width: 6px;
    height: calc(100% + 12px);
    background: var(--apc-accent);
    border-radius: 2px;
    pointer-events: none;
  }

  /* A short diagonal tech-stripe trailing off the count cell -> motorsport
     telemetry seam, asymmetric to the left-aligned filter group. */
  #MainContent[data-template="collection"] collection-component .product-count-vertical {
    position: relative;
  }
  #MainContent[data-template="collection"] collection-component .product-count-vertical::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 64px;
    height: 4px;
    background: repeating-linear-gradient(
      -45deg,
      var(--apc-accent) 0 6px,
      transparent 6px 12px
    );
    pointer-events: none;
  }
}

/* ============================================================================
   4. SPEC-SHEET GRID FEEL
   ----------------------------------------------------------------------------
   Make the product grid read like an engineered spec sheet: precise gutters,
   thin vertical hairline rulers between columns (drawn on the card-wrapper's
   leading edge so they never affect flow or clip content), and a mono index
   tick the column rhythm. Augments the existing horizontal row hairline
   (ap-motorsport grid__item::after) — we add the VERTICAL rulers + tighter
   measured gutters; we do not duplicate the row divider.
   ========================================================================== */
@media screen and (min-width: 990px) {
  /* Precise, measured gutters — datasheet cells, not loose Dawn spacing. */
  #MainContent[data-template="collection"] collection-component .product-grid {
    column-gap: var(--ap-space-lg, 24px);
    row-gap: var(--ap-space-xl, 40px);
  }

  /* Vertical hairline ruler on the leading edge of each grid cell, suppressed
     on the first column of each desktop row so the sheet edges stay clean. */
  #MainContent[data-template="collection"]
    collection-component
    .product-grid.grid--4-col-desktop
    > .grid__item {
    position: relative;
  }
  #MainContent[data-template="collection"]
    collection-component
    .product-grid.grid--4-col-desktop
    > .grid__item::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: calc(-1 * (var(--ap-space-lg, 24px) / 2));
    width: 1px;
    background: var(--apc-hair);
    pointer-events: none;
  }
  #MainContent[data-template="collection"]
    collection-component
    .product-grid.grid--4-col-desktop
    > .grid__item:nth-child(4n + 1)::before {
    display: none;
  }
}

/* ============================================================================
   5. EMPTY-STATE — keep it on-brand as a technical panel on the collection.
   ----------------------------------------------------------------------------
   (template-collection.css already centres + pads the empty state; here we
   give it the sharp red-topped plate so a filtered "no results" reads bespoke.)
   ========================================================================== */
#MainContent[data-template="collection"] .collection--empty .title-wrapper {
  border: 1px solid var(--apc-hair);
  border-top: 4px solid var(--apc-accent);
  border-radius: 2px;
  background: var(--ap-surface-2, #f4f6f9);
}

/* ============================================================================
   6. REDUCED MOTION — nothing here animates, but be explicit/safe.
   The diagonal, overlap, rails and rulers are all static geometry, so there is
   nothing to disable; this block documents intent and guards future hover add.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #MainContent[data-template="collection"] .section--collection-nav .ap-collection-nav {
    transition: none;
  }
}

   APEX — RADICAL LANGUAGE :: GROUP "product"  (lower PDP section flow)
   CSS ONLY. DOM/Liquid unchanged, upgrade-safe.
   Augments — never fights — the already-shipped PDP work:
     main-product .ap-pdp-header (lifted editorial header), framed gallery,
     control-panel rail, sticky-atc, cart console.
   These are JSON-template sections, so DOM ids are
   shopify-section-template--XXXX__<key>. We target by ATTRIBUTE-CONTAINS
   [id*="<key>"] and scope everything under #MainContent[data-template="product"] so blocks
   on other templates can never collide.

   Three moves, applied with restraint to the STACKED lower bands:
     1) Diagonal "race-banner" edges on full-bleed dark/accent bands
        (clip-path + compensating padding-block, desktop only).
     2) XXL editorial headings (Saira Condensed, 800, uppercase, lh .9)
        with the shipped red eyebrow tick — reusing each section's REAL
        heading/eyebrow selectors.
     3) One overlap + one asymmetric step — guarantee panel lifts into the
        band above it; how-to steps gain an offset rhythm.
   Mobile (<750px) stays clean/stacked. Reduced-motion safe (no animation here).
   ============================================================================ */

/* -- local tokens (fall back to the live globals) -------------------------- */
#MainContent[data-template="product"] {
  --apx-slash: 3.5vw;          /* diagonal depth, desktop */
  --apx-slash-max: 64px;       /* hard cap so it never gets silly on ultrawide */
  --apx-ink: var(--ap-on-surface, rgb(14, 15, 18));
  --apx-accent: var(--ap-accent, #e1001a);
}

/* ----------------------------------------------------------------------------
   2) XXL EDITORIAL HEADINGS + RED EYEBROW TICK
   Reuse each lower-PDP section's REAL heading selector. Left-aligned sections
   (spec table, steps, fitment, reviews) stay left; centered ones (guarantee)
   stay centered via their own layout — we only restyle the type.
   ---------------------------------------------------------------------------- */
#MainContent[data-template="product"] :is(
  [id*="tyre_spec_table"] .ap-spec-table__heading,
  [id*="tyre_eu_label"]   .ap-eu-label__heading,
  [id*="product_tabs"]    .ap-tabs__heading,
  [id*="how_to_steps"]    .ap-steps__heading,
  [id*="fitment_service"] .ap-fitment-service__heading,
  [id*="trust_row"]       .ap-trust-row__heading,
  [id*="guarantee"]       .ap-guarantee__heading,
  [id*="product_reviews"] .ap-reviews__heading,
  [id*="video_testimonials"] .ap-reviews__heading
) {
  font-family: var(--ap-font-display, "Saira Condensed", "Saira", sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-size: clamp(2.2rem, 4.4vw, 4.4rem);
  margin-block: 0 var(--ap-space-md, 16px);
  text-wrap: balance;
}

/* Red eyebrow tick BEFORE the heading. Sections that already render their own
   eyebrow element (spec table, steps, fitment) keep theirs — we restyle those
   to the shipped .ap-eyebrow look and SUPPRESS the synthetic tick to avoid a
   double rule (see "no double-tick" rule further down). */
#MainContent[data-template="product"] :is(
  [id*="tyre_eu_label"]   .ap-eu-label__heading,
  [id*="product_tabs"]    .ap-tabs__heading,
  [id*="trust_row"]       .ap-trust-row__heading,
  [id*="product_reviews"] .ap-reviews__heading,
  [id*="video_testimonials"] .ap-reviews__heading
)::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  margin-bottom: var(--ap-space-xs, 8px);
  background: var(--apx-accent);
}

/* Restyle the sections that ship a native eyebrow span to match the shipped
   .ap-eyebrow treatment (uppercase, 800, red, leading red rule). */
#MainContent[data-template="product"] :is(
  [id*="tyre_spec_table"] .ap-spec-table__eyebrow,
  [id*="how_to_steps"]    .ap-steps__eyebrow,
  [id*="fitment_service"] .ap-fitment-service__eyebrow
) {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-xs, 8px);
  font-family: var(--ap-font-display, "Saira Condensed", "Saira", sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apx-accent);
  margin-bottom: var(--ap-space-2xs, 4px);
}
#MainContent[data-template="product"] :is(
  [id*="tyre_spec_table"] .ap-spec-table__eyebrow,
  [id*="how_to_steps"]    .ap-steps__eyebrow,
  [id*="fitment_service"] .ap-fitment-service__eyebrow
)::before {
  content: "";
  width: 2.4rem;
  height: 2px;
  background: var(--apx-accent);
}

/* ----------------------------------------------------------------------------
   1) DIAGONAL "RACE-BANNER" EDGES  (desktop only)
   Applied to the full-bleed colour bands of the lower flow. The slash lives on
   the section's outer .color-scheme-* wrapper so it cuts the FULL-BLEED band,
   not the page-width content. Compensating padding-block is added to the inner
   .section-*-padding so the slash only ever eats EMPTY space.

   We give the EU-label and the reviews bands a top slash, and the fitment
   service band a bottom slash, so the stacked rhythm reads as layered race
   panels rather than flat stripes. Restraint: not every band gets a cut.
   ---------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  /* Top diagonal: band's top-left rises into the band above (race-banner). */
  #MainContent[data-template="product"] :is([id*="tyre_eu_label"], [id*="product_reviews"])
    > .color-scheme-1,
  #MainContent[data-template="product"] :is([id*="tyre_eu_label"], [id*="product_reviews"])
    > .color-scheme-2,
  #MainContent[data-template="product"] :is([id*="tyre_eu_label"], [id*="product_reviews"])
    > .color-scheme-3,
  #MainContent[data-template="product"] :is([id*="tyre_eu_label"], [id*="product_reviews"])
    > [class*="color-scheme-"] {
    clip-path: polygon(
      0 var(--apx-slash),
      100% 0,
      100% 100%,
      0 100%
    );
  }
  #MainContent[data-template="product"] :is([id*="tyre_eu_label"], [id*="product_reviews"])
    [class*="section-"][class*="-padding"] {
    /* eat the slash with extra top padding so nothing is clipped */
    padding-top: calc(48px + var(--apx-slash)) !important;
  }

  /* Bottom diagonal on the fitment/service band — its lower edge slashes down
     to the right, letting the next band (video-testimonials) tuck under it. */
  #MainContent[data-template="product"] [id*="fitment_service"] > [class*="color-scheme-"] {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--apx-slash)),
      0 100%
    );
  }
  #MainContent[data-template="product"] [id*="fitment_service"]
    [class*="section-"][class*="-padding"] {
    padding-bottom: calc(40px + var(--apx-slash)) !important;
  }

  /* Hard cap the slash depth on very wide viewports. */
  #MainContent[data-template="product"] {
    --apx-slash: min(3.5vw, var(--apx-slash-max));
  }
}

/* ----------------------------------------------------------------------------
   3a) OVERLAP — the GUARANTEE panel lifts into the band above it (like the
   hero -> finder overlap). Desktop only; sharp 2px corners + lifted shadow.
   The panel itself is .ap-guarantee inside the page-width.
   ---------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  #MainContent[data-template="product"] [id*="guarantee"] {
    position: relative;
    z-index: 3;
  }
  #MainContent[data-template="product"] [id*="guarantee"] .ap-guarantee {
    margin-top: clamp(-72px, -4vw, -40px);
    padding: var(--ap-space-lg, 24px) var(--ap-space-xl, 40px);
    background: var(--ap-surface, rgb(var(--color-background)));
    border: 2px solid rgba(14, 15, 18, 0.08);
    border-left: 3px solid var(--apx-accent);
    border-radius: 2px;
    box-shadow: var(--ap-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  }
  /* Keep the lifted panel clear of the band below it. */
  #MainContent[data-template="product"] [id*="guarantee"]
    [class*="section-"][class*="-padding"] {
    padding-bottom: calc(36px + 24px) !important;
  }
}

/* ----------------------------------------------------------------------------
   3b) ASYMMETRY — the HOW-TO steps break the flat stacked rhythm: alternating
   items step inward, and the numbered marker reads as an oversized condensed
   index. Desktop only; mobile keeps the clean vertical list.
   ---------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  #MainContent[data-template="product"] [id*="how_to_steps"] .ap-steps__list {
    position: relative;
  }
  /* Oversized condensed step index — coherent with the XXL editorial type. */
  #MainContent[data-template="product"] [id*="how_to_steps"] .ap-steps__number {
    font-family: var(--ap-font-display, "Saira Condensed", "Saira", sans-serif);
    font-weight: 800;
    line-height: 0.9;
    font-size: clamp(2rem, 3vw, 3rem);
    color: var(--apx-accent);
  }
  /* Offset every 2nd step to the right for an asymmetric, dynamic rhythm.
     Uses translate only (no layout reflow, no overflow on the page width). */
  #MainContent[data-template="product"] [id*="how_to_steps"] .ap-steps__item:nth-child(even) {
    transform: translateX(clamp(16px, 3vw, 48px));
  }
}

/* ----------------------------------------------------------------------------
   POLISH — sharp 2px editorial framing on the spec datasheet + tabs so the
   lower flow visually rhymes with the control-panel rail above. No layout move,
   just optics. Safe at every width.
   ---------------------------------------------------------------------------- */
#MainContent[data-template="product"] [id*="tyre_spec_table"] .ap-spec-table-block {
  border-top: 3px solid var(--apx-ink);
  padding-top: var(--ap-space-md, 16px);
}
#MainContent[data-template="product"] [id*="product_tabs"] .ap-tabs {
  border-top: 2px solid rgba(14, 15, 18, 0.12);
}

/* ----------------------------------------------------------------------------
   GUARDRAILS
   ---------------------------------------------------------------------------- */
/* Never clip on mobile / small tablet — the @media (min-width:990px) blocks
   above already gate the diagonals & overlaps, this is a belt-and-braces reset
   in case a band's clip leaks via inheritance. */
@media screen and (max-width: 989px) {
  #MainContent[data-template="product"] [class*="color-scheme-"] {
    clip-path: none;
  }
  #MainContent[data-template="product"] [id*="guarantee"] .ap-guarantee {
    margin-top: 0;
  }
  #MainContent[data-template="product"] [id*="how_to_steps"] .ap-steps__item {
    transform: none;
  }
}

/* Reduced-motion: nothing here animates, but neutralise the static transforms
   for users who prefer minimal motion-implied layout shifts. */
@media (prefers-reduced-motion: reduce) {
  #MainContent[data-template="product"] [id*="how_to_steps"] .ap-steps__item {
    transform: none;
  }
}

/* ============================================================================
 * APEX RADICAL LANGUAGE — GROUP: cart  (CART page only)
 * ----------------------------------------------------------------------------
 * Scope root: #MainContent[data-template="cart"]  (JSON-template sections targeted by
 * [id*="<key>"] attribute-contains, NOT #shopify-section-<key>).
 * Augments — never fights — the already-shipped "cart console":
 *   - main-cart-items: framed datasheet panel (.cart__items--panel)
 *   - main-cart-footer: control-slab summary (.cart__summary) + grand total
 *   - bespoke header (.ap-cart-header / .ap-cart-header__eyebrow / .cart__title)
 * NEW radical moves added here (CSS only, DOM/liquid untouched, upgrade-safe):
 *   1) red eyebrow TICK before "X ARTIKEL" + tighten the XXL "DEIN WARENKORB"
 *      headline so it reads as a motorsport poster title.
 *   2) FLOAT the summary control-panel: lift it UP into the items band as a
 *      distinct overlapping slab on desktop (negative margin + elevation),
 *      breaking the stacked rhythm — coherent with the hero->finder overlap.
 *   3) DIAGONAL "race-banner" edge on the cart trust band ([id*="trust_row"])
 *      with compensating padding so the slash eats EMPTY space, plus a mirror
 *      slash that lets the FAQ band ([id*="faq"]) overlap up into it.
 * HARD RULES respected: no display:none on content; clip-path only on
 * full-bleed bands WITH compensating padding; mobile (<750px) stays clean;
 * diagonals/overlap gated >=750px / >=990px; touch targets >=44px;
 * reduced-motion safe.
 * ========================================================================== */

/* ---- 1. HEADER — red eyebrow tick + reinforce the XXL poster title -------- *
 * The eyebrow ("3 ARTIKEL") already reads mono+red; add the signature 28x2px
 * racing dash before it so it matches the finder/page eyebrow language. The
 * .cart__title XXL sizing is already shipped — we only tighten tracking and
 * give the header a hairline + tech-stripe baseline so it reads as a band. */
#MainContent[data-template="cart"] .ap-cart-header__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ap-space-xs, 8px);
}

#MainContent[data-template="cart"] .ap-cart-header__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: var(--ap-accent, #e1001a);
}

#MainContent[data-template="cart"] .ap-cart-header .cart__title {
  letter-spacing: 0.008em;
}

/* Tech-stripe baseline under the whole header band — closes the editorial
   header like a datasheet rule. Decorative only, full content width. */
#MainContent[data-template="cart"] .cart__header {
  position: relative;
  padding-bottom: var(--ap-space-md, 1.6rem);
}

#MainContent[data-template="cart"] .cart__header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(120px, 22vw, 280px);
  height: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ap-accent, #e1001a) 0 8px,
    transparent 8px 16px
  );
  opacity: 0.85;
  pointer-events: none;
}

/* On wide viewports push the title bigger so it dominates the band like the
   hero headline (still well within the framed page-width — no clip near it). */
@media screen and (min-width: 990px) {
  #MainContent[data-template="cart"] .ap-cart-header .cart__title {
    font-size: clamp(4rem, 5.5vw, 6rem);
  }
}

/* ---- 2. SUMMARY CONTROL-PANEL — float / offset as a distinct slab --------- *
 * The summary is already a sticky control-slab. Now make it FLOAT: lift it up
 * out of the footer band's top padding into the items band, with a stronger
 * elevation + an accent top-cut corner, so it visibly overlaps the previous
 * band instead of sitting in the stacked rhythm. Desktop only; the base
 * sticky/top offset is preserved, we only nudge the start position + z-index.
 * Mobile keeps the plain stacked card (no negative margins). */
@media screen and (min-width: 750px) {
  #MainContent[data-template="cart"] .cart__footer--premium {
    position: relative;
    z-index: 3;
  }

  #MainContent[data-template="cart"] .cart__summary {
    /* Pull the floating panel up into the items band for the layered look. */
    margin-top: calc(-1 * var(--ap-space-2xl, 6rem));
    /* Deepen the elevation so it clearly lifts off the page. */
    box-shadow: var(--ap-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)),
      0 28px 60px -28px rgba(14, 15, 18, 0.55);
    /* Angled top-right corner — the motorsport "cut" on the control slab. */
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  }

  /* The sticky top offset must clear the lifted start so it never collides
     with the header when scrolling. */
  #MainContent[data-template="cart"] .cart__summary {
    top: var(--ap-space-lg, 2.4rem);
  }
}

/* ---- 3. TRUST BAND — diagonal "race-banner" edges (full-bleed) ------------ *
 * The cart-page trust_row sits on a full-width scheme band. Give it the
 * signature angled top + bottom cut so it reads as a race banner. The cut is
 * applied to the section's own full-bleed wrapper (the .gradient child of the
 * shopify-section), while .page-width keeps the content inset. COMPENSATING
 * padding is added so the slash only eats empty space, never the trust items.
 * Desktop only; mobile stays a clean rectangular stack. */
@media screen and (min-width: 750px) {
  #MainContent[data-template="cart"] [id*="trust_row"] > .gradient {
    position: relative;
    z-index: 2;
    /* Angled top + bottom — parallelogram race-banner. */
    clip-path: polygon(
      0 3vw,
      100% 0,
      100% calc(100% - 3vw),
      0 100%
    );
  }

  /* Compensating padding so the 3vw slashes bite into empty space only. */
  #MainContent[data-template="cart"] [id*="trust_row"] .section-padding,
  #MainContent[data-template="cart"] [id*="trust_row"] [class*="section-"][class*="-padding"] {
    padding-top: calc(36px + 3.5vw);
    padding-bottom: calc(36px + 3.5vw);
  }

  /* Faint racing tech-stripe pinned just inside the top slash so the band
     reads as an accent banner without recolouring (keeps scheme contrast). */
  #MainContent[data-template="cart"] [id*="trust_row"] > .gradient::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3vw;
    height: 5px;
    background: repeating-linear-gradient(
      -45deg,
      var(--ap-accent, #e1001a) 0 10px,
      transparent 10px 20px
    );
    opacity: 0.5;
    pointer-events: none;
  }
}

/* ---- 4. FAQ band — overlaps UP into the trust slash (layered close) ------ *
 * The FAQ band that follows the trust band slides up into the trust band's
 * bottom cut, mirroring the hero->finder overlap so the page closes with the
 * race-banner language instead of a flat stack. Desktop only. */
@media screen and (min-width: 990px) {
  #MainContent[data-template="cart"] [id*="faq"] {
    position: relative;
    z-index: 1;
    margin-top: -2vw;
  }

  /* Give the FAQ heading the condensed left-eyebrow tick so the section
     header matches the editorial language of the cart header above. */
  #MainContent[data-template="cart"] [id*="faq"] .accordion-heading,
  #MainContent[data-template="cart"] [id*="faq"] h2 {
    letter-spacing: 0.006em;
  }
}

/* ---- 5. Reduced-motion / safety ------------------------------------------ *
 * No animations are introduced here; clip-paths + offsets are static, so they
 * are reduced-motion safe by construction. This guard is defensive: if a
 * future hover lift is added to these floated panels, neutralise it. */
@media (prefers-reduced-motion: reduce) {
  #MainContent[data-template="cart"] .cart__summary {
    transition: none;
  }
}


/* ============================================================================
 * APEX MOTORSPORT — BUNDLE §20: PDP console + home newsletter + collection
 *   harden/empty + price filter. CSS only, additive, upgrade-safe. Every
 *   custom value is token-first with a Dawn fallback. Radical/dark/diagonal
 *   moves are DESKTOP-GATED (>=750/990px); mobile stays clean & stacked.
 *   Reduced-motion safe; touch targets >=44px; no display:none on content.
 * ============================================================================ */

/* ============================================================================
   20.1  HOME NEWSLETTER — dark "console-intake" form
   ----------------------------------------------------------------------------
   Port the footer console-intake treatment onto the HOME newsletter only:
   a sharp 2px field with a 3px red left rail, and a solid racing-red submit
   button replacing Dawn's circular arrow. Scoped to the index newsletter so
   nothing leaks to footer / other templates. The eyebrow is the
   .ap-stripe--eyebrow added in newsletter.liquid.
   The dark ground is the section's own scheme-3 wrapper (merchant-set); these
   rules paint the FIELD chrome only and read on both light and dark grounds.
   ========================================================================== */
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form {
  --apn-accent: var(--ap-accent, #e1001a);
  --apn-accent-contrast: var(--ap-accent-contrast, #ffffff);
}

/* Eyebrow above the form sits centered with the rest of the centered section. */
main#MainContent[data-template="index"] [id*="newsletter"] .ap-stripe--eyebrow {
  justify-content: center;
  margin-bottom: var(--ap-space-sm, 12px);
}

/* Sharp 2px field with a 3px racing-red left rail. */
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__field-wrapper .field {
  border-radius: 2px;
}
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__field-wrapper .field::before {
  border-radius: 2px;
  border-width: 2px;
  border-left-width: 3px;
  border-left-color: var(--apn-accent);
}
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__field-wrapper .field:focus-within::before {
  box-shadow: 0 0 0 2px var(--apn-accent);
}
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__field-wrapper .field__input {
  border-radius: 2px;
}

/* Solid racing-red submit button replacing the circular arrow chip. */
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__button.field__button {
  width: 4.4rem;
  height: calc(100% - 4px);
  top: 2px;
  right: 2px;
  border-radius: 1px;
  background: var(--apn-accent);
  color: var(--apn-accent-contrast);
  transition: filter var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
}
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__button.field__button:hover,
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__button.field__button:focus-visible {
  filter: brightness(1.08);
}
main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__button.field__button .icon {
  color: var(--apn-accent-contrast);
}

@media (prefers-reduced-motion: reduce) {
  main#MainContent[data-template="index"] [id*="newsletter"] .newsletter-form__button.field__button {
    transition: none;
  }
}

/* ============================================================================
   20.2  PDP CONSOLE — variant picker, swatch, complementary, badges
   ----------------------------------------------------------------------------
   Reuse the established >=990px console gate. Scoped under
   #MainContent[data-template="product"] so nothing leaks to other templates.
   ========================================================================== */
@media screen and (min-width: 990px) {
  #MainContent[data-template="product"] {
    --apc-accent: var(--ap-accent, #e1001a);
    --apc-hair: rgba(var(--color-foreground), 0.14);
  }

  /* (a) DROPDOWN VARIANT PICKER (tyre SIZE) -------------------------------- */
  /* 2px red ::before tick on the dropdown wrapper's leading edge. */
  #MainContent[data-template="product"] .product-form__input--dropdown .select {
    position: relative;
  }
  #MainContent[data-template="product"] .product-form__input--dropdown .select::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 1.8rem;
    transform: translateY(-50%);
    background: var(--apc-accent);
    z-index: 1;
    pointer-events: none;
  }
  /* Mono uppercase tabular value (the tyre size reads as a spec readout). */
  #MainContent[data-template="product"] .product-form__input--dropdown .select__select {
    font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    padding-left: 1.6rem;
    border-radius: 2px;
  }
  /* Recolour the caret to accent. */
  #MainContent[data-template="product"] .product-form__input--dropdown .select .icon-caret {
    color: var(--apc-accent);
  }

  /* (b) SWATCH PICKER ----------------------------------------------------- */
  /* Sharp 2px ring; red ring on the checked state. */
  #MainContent[data-template="product"] .swatch-input__label {
    border-radius: 2px;
    box-shadow: 0 0 0 2px var(--apc-hair);
  }
  #MainContent[data-template="product"] .swatch-input__input:checked + .swatch-input__label {
    box-shadow: 0 0 0 2px var(--apc-accent);
  }
  #MainContent[data-template="product"] .swatch-input__input:focus-visible + .swatch-input__label {
    outline: 2px solid var(--apc-accent);
    outline-offset: 2px;
  }

  /* (c) COMPLEMENTARY SLIDER — dark-stage tiles --------------------------- */
  /* Mono red-tick eyebrow on the slider heading. */
  #MainContent[data-template="product"] .complementary-products > .summary__title,
  #MainContent[data-template="product"] .complementary-products .complementary-products__heading {
    position: relative;
    font-family: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
  }
  #MainContent[data-template="product"] .complementary-products > .summary__title::before {
    content: "";
    display: block;
    width: 2.4rem;
    height: 3px;
    margin-bottom: var(--ap-space-2xs, 4px);
    background: var(--apc-accent);
  }

  /* Dark-stage tiles for the recommended cards + lift on hover. */
  #MainContent[data-template="product"] .complementary-products__container .card,
  #MainContent[data-template="product"] .complementary-products__container .card__inner {
    border-radius: 2px;
  }
  #MainContent[data-template="product"] .complementary-products__container .card-wrapper {
    transition: transform var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1)),
      box-shadow var(--ap-motion, 200ms) var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
  }
  #MainContent[data-template="product"] .complementary-products__container .card-wrapper:hover,
  #MainContent[data-template="product"] .complementary-products__container .card-wrapper:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--ap-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  }
  /* Tabular-num price in the recommended tiles. */
  #MainContent[data-template="product"] .complementary-products__container .price {
    font-variant-numeric: tabular-nums;
  }

  @media (prefers-reduced-motion: reduce) {
    #MainContent[data-template="product"] .complementary-products__container .card-wrapper {
      transition: none;
    }
    #MainContent[data-template="product"] .complementary-products__container .card-wrapper:hover,
    #MainContent[data-template="product"] .complementary-products__container .card-wrapper:focus-within {
      transform: none;
    }
  }
}

/* (e) SALE / SOLD-OUT BADGES — sharp 2px racing data-chips, PDP ONLY -------- */
/* Restyle inside the PDP only; the global .badge stays untouched. */
#MainContent[data-template="product"] .price__badge-sale,
#MainContent[data-template="product"] .price__badge-sold-out {
  border-radius: 2px;
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
#MainContent[data-template="product"] .price__badge-sale {
  background: var(--ap-accent, #e1001a);
  color: var(--ap-accent-contrast, #ffffff);
  box-shadow: 0 0 0 2px var(--ap-accent, #e1001a);
}
#MainContent[data-template="product"] .price__badge-sold-out {
  background: transparent;
  color: rgb(var(--color-foreground));
  box-shadow: 0 0 0 2px rgba(var(--color-foreground), 0.55);
}

/* (d) RECENTLY-VIEWED — broaden the index float-rail to the PDP too -------- */
/* Mirrors the index rules at ~L2831/2851/2869/2965: local tokens, XXL heading,
   red eyebrow tick, and the floating epilogue lift — now also on the PDP. */
main#MainContent[data-template="product"] [id*="recently_viewed"] {
  --he-accent: var(--ap-accent, #e1001a);
  --he-ink: var(--ap-on-surface, rgb(var(--color-foreground, 14 15 18)));
  --he-display: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
}
main#MainContent[data-template="product"] [id*="recently_viewed"] .ap-recent__heading {
  font-family: var(--he-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.005em;
  font-size: clamp(2.8rem, 5vw, 6rem);
}
main#MainContent[data-template="product"] [id*="recently_viewed"] .ap-recent__heading::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 4px;
  margin-bottom: var(--ap-space-sm, 12px);
  background: var(--he-accent);
}
@media screen and (min-width: 990px) {
  main#MainContent[data-template="product"] [id*="recently_viewed"] .ap-recent-section {
    position: relative;
    z-index: 1;
    margin-top: -1vw;
  }
}

/* ============================================================================
   20.3  COLLECTION EMPTY — showroom moment
   ----------------------------------------------------------------------------
   Upgrade the empty plate into a showroom stage: tread ground + on-brand tyre
   placeholder behind an XXL red-tick heading. Desktop-gated layout; mobile
   stays the clean stacked Dawn baseline. The reset-filters link is preserved
   (no display:none on content).
   ========================================================================== */
#MainContent[data-template="collection"] .ap-collection-empty {
  --ape-accent: var(--ap-accent, #e1001a);
  position: relative;
  text-align: center;
  padding: var(--ap-space-xl, 40px) var(--ap-space-lg, 24px);
  border: 1px solid rgba(var(--color-foreground), 0.14);
  border-top: 4px solid var(--ape-accent);
  border-radius: 2px;
  background-color: var(--ap-surface-2, #f4f6f9);
  overflow: hidden;
}

/* On-brand placeholder graphic floats above the heading, low-key. */
#MainContent[data-template="collection"] .ap-collection-empty__graphic {
  display: block;
  margin: 0 auto var(--ap-space-md, 16px);
  width: 9.6rem;
  max-width: 40%;
  opacity: 0.85;
}
#MainContent[data-template="collection"] .ap-collection-empty__graphic .ap-card-placeholder {
  display: block;
}

#MainContent[data-template="collection"] .ap-collection-empty__body {
  position: relative;
  z-index: 1;
}

#MainContent[data-template="collection"] .ap-collection-empty__title {
  position: relative;
  font-family: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  margin-bottom: var(--ap-space-sm, 12px);
}
/* XXL red-tick before the heading (centered). */
#MainContent[data-template="collection"] .ap-collection-empty__title::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 4px;
  margin: 0 auto var(--ap-space-sm, 12px);
  background: var(--ape-accent);
}
#MainContent[data-template="collection"] .ap-collection-empty__text {
  max-width: 48rem;
  margin: 0 auto var(--ap-space-md, 16px);
  color: rgba(var(--color-foreground), 0.75);
}
#MainContent[data-template="collection"] .ap-collection-empty__cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Desktop: deepen the stage into a showroom plate (tread reads stronger). */
@media screen and (min-width: 750px) {
  #MainContent[data-template="collection"] .ap-collection-empty {
    padding: calc(var(--ap-space-xl, 40px) * 1.6) var(--ap-space-xl, 40px);
  }
  #MainContent[data-template="collection"] .ap-collection-empty__graphic {
    width: 13rem;
  }
}

/* ============================================================================
   20.4  COLLECTION PRICE FILTER — tabular VON/BIS readout
   ----------------------------------------------------------------------------
   Finish the vertical price filter as a spec-readout: tabular numerals in the
   inputs + uppercase tracked VON/BIS micro-labels. The VON/BIS labels come
   from Dawn's .field__label (already mono/uppercase via §13); here we tighten
   the numeric inputs and the currency micro-label.
   ========================================================================== */
.facets-vertical .facets__price .field__input {
  font-variant-numeric: tabular-nums;
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
  letter-spacing: 0.02em;
}
.facets-vertical .facets__price .field__label,
.facets-vertical .facets__price .field-currency {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--ap-font-mono, ui-monospace, "Consolas", monospace);
}


/* ====================================================================== *
 * APEX RADICAL BESPOKE FOOTER (§21) — RESTORED
 * Originally shipped inside §20 (v0.20.3); §20 was reverted wholesale to
 * kill the black collection-filter + dark PDP gallery the owner disliked —
 * which also took out this footer the owner LIKED. Re-added standalone:
 * pure .footer scope, no collection/product/filter rules. CSS only.
 * ====================================================================== */
/* =====================================================================
   ap-footer-radical.css  —  APEX RADICAL BESPOKE FOOTER (CSS only)
   ---------------------------------------------------------------------
   Rebuilds the Dawn scheme-3 footer (sections/footer.liquid via
   footer-group.json) into a motorsport "ink-stage" pit-wall in the shipped
   Apex language: a DIAGONAL race-banner top edge (clip-path on the full-bleed
   band + compensating top padding so nothing clips), a seamless pure-CSS tyre
   TREAD texture, a GIANT condensed "APEX" watermark, an ASYMMETRIC broken
   column grid, MONO tracked headings with red ticks, a BOLD red newsletter
   "signal" zone off a full-height red rail, and a racing-stripe legal divider.
   DOM/liquid/schema unchanged. Scoped under .footer. Real selectors verified
   against footer.liquid + social-icons/country-localization snippets.

   LOAD AFTER ap-premium.css + ap-motorsport.css (orchestrator links it in
   theme.liquid right after ap-motorsport.css) so the bolder rules win on
   source order; conflicting rules also use !important / higher specificity.
   scheme-3 is dark, so every control is FORCED legible light-on-dark with
   visible focus + >=44px targets. Bold geometry is min-width gated; <750px
   stays clean + stacked. Reduced-motion safe. Tokens carry fallbacks.
   ===================================================================== */

.footer {
  --apf-accent: var(--ap-accent, #e1001a);
  --apf-ink: #14161a;
  --apf-ink-2: #0e0f12;
  --apf-on-ink: #ffffff;
  --apf-on-ink-muted: rgba(255, 255, 255, 0.62);
  --apf-hair: rgba(255, 255, 255, 0.12);
  --apf-hair-soft: rgba(255, 255, 255, 0.07);
  --apf-ease: var(--ap-ease, cubic-bezier(0.2, 0.6, 0.2, 1));
  --apf-dur: var(--ap-motion, 200ms);
  --apf-font-display: var(--ap-font-display, "Saira Condensed", "Arial Narrow", sans-serif);
  --apf-font-mono: var(--ap-font-mono, ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas, monospace);
  --apf-edge: 28px;
}

/* 1. INK STAGE + DIAGONAL RACE-BANNER TOP EDGE */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(225, 0, 26, 0.16), transparent 52%),
    linear-gradient(180deg, var(--apf-ink) 0%, var(--apf-ink-2) 100%) !important;
  color: var(--apf-on-ink);
  border-top: 0 !important;
}
@media screen and (min-width: 750px) {
  .footer { padding-top: calc(var(--apf-edge) + var(--ap-space-xl, 40px)); }
}
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  @media screen and (min-width: 750px) {
    .footer { clip-path: polygon(0 var(--apf-edge), 100% 0, 100% 100%, 0 100%); }
  }
}
.footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px; background: var(--apf-accent);
  transform-origin: top left; z-index: 3; pointer-events: none;
}
@media screen and (min-width: 750px) {
  .footer::before {
    top: -1px; height: 6px; transform: rotate(-1.05deg);
    background: linear-gradient(90deg, var(--apf-accent) 0%, var(--apf-accent) 78%,
      color-mix(in srgb, var(--apf-accent) 30%, transparent) 100%);
  }
}
.footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 14px);
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.35) 100%);
}
.footer__content-top,
.footer__content-bottom { position: relative; z-index: 1; }

/* 2. GIANT "APEX" WATERMARK (desktop only, decorative pseudo, z-1 behind) */
.footer__content-top { position: relative; }
@media screen and (min-width: 990px) {
  .footer__content-top::before {
    content: "APEX"; position: absolute; left: -0.06em; bottom: -0.34em; z-index: -1;
    font-family: var(--apf-font-display); font-weight: 800; text-transform: uppercase;
    letter-spacing: -0.02em; line-height: 0.8; font-size: clamp(14rem, 26vw, 34rem);
    color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0));
    -webkit-background-clip: text; background-clip: text;
    pointer-events: none; user-select: none; white-space: nowrap;
  }
}

/* 3. ASYMMETRIC / BROKEN COLUMN GRID (desktop) */
@media screen and (min-width: 990px) {
  .footer .footer__blocks-wrapper.grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr;
    column-gap: clamp(2.4rem, 4vw, 6rem); row-gap: 0; align-items: start;
  }
  .footer .footer__blocks-wrapper.grid > .footer-block.grid__item {
    width: auto; max-width: none; margin: 0; padding: 0;
  }
  .footer .footer__blocks-wrapper.grid > .footer-block:first-child {
    padding-right: clamp(2rem, 3vw, 4rem); border-right: 1px solid var(--apf-hair-soft);
  }
}

/* 4. BLOCK HEADINGS — mono, tracked, red tick */
.footer .footer-block__heading {
  position: relative; margin-bottom: var(--ap-space-md, 16px);
  padding-top: var(--ap-space-sm, 12px); font-family: var(--apf-font-mono);
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--apf-on-ink) !important;
}
.footer .footer-block__heading::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 2.8rem; height: 3px; background: var(--apf-accent);
}
.footer .footer-block__details-content.rte,
.footer .footer-block__details-content.rte p {
  color: var(--apf-on-ink-muted); line-height: 1.65;
}
@media screen and (min-width: 990px) {
  .footer .footer__blocks-wrapper.grid > .footer-block:first-child .footer-block__details-content.rte p {
    font-size: 1.55rem;
  }
}

/* 5. MENU LINKS — pit-wall rows */
.footer .footer-block__details-content .list-menu__item--link {
  color: var(--apf-on-ink-muted); font-weight: 500; letter-spacing: 0.01em;
  transition: color var(--apf-dur) var(--apf-ease), transform var(--apf-dur) var(--apf-ease);
}
@media screen and (min-width: 750px) {
  .footer .footer-block--menu .footer-block__details-content > li { position: relative; }
  .footer .footer-block--menu .list-menu__item--link {
    display: inline-block; padding: 0.35rem 0; font-family: var(--apf-font-mono);
    font-size: 1.35rem; letter-spacing: 0.04em;
  }
}
@media (hover: hover) {
  .footer .footer-block__details-content .list-menu__item--link:hover,
  .footer .footer-block__details-content .list-menu__item--link:focus-visible {
    color: var(--apf-on-ink) !important; text-decoration: none;
  }
  @media screen and (min-width: 750px) {
    .footer .footer-block--menu .list-menu__item--link:hover,
    .footer .footer-block--menu .list-menu__item--link:focus-visible { transform: translateX(4px); }
  }
}
.footer .footer-block__details-content .list-menu__item--active { color: var(--apf-on-ink) !important; }
.footer a:focus-visible,
.footer .list-menu__item--link:focus-visible {
  outline: 2px solid var(--apf-accent); outline-offset: 3px; border-radius: 2px;
}

/* 6. BOLD RED NEWSLETTER SIGNAL ZONE */
.footer .footer-block--newsletter {
  position: relative; margin-top: var(--ap-space-xl, 40px);
  padding: clamp(20px, 3.2vw, 32px) clamp(18px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--apf-hair); border-left: 4px solid var(--apf-accent); border-radius: 2px;
}
.footer .footer-block--newsletter::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 18px; height: 18px;
  border-right: 3px solid var(--apf-accent); border-bottom: 3px solid var(--apf-accent); pointer-events: none;
}
.footer .footer-block__newsletter .footer-block__heading {
  font-family: var(--apf-font-display); font-size: clamp(2rem, 2.6vw, 2.8rem);
  font-weight: 800; letter-spacing: 0.01em; line-height: 1.02; text-transform: uppercase;
}
.footer .footer-block__newsletter .footer-block__heading::before { width: 4rem; }
.footer .newsletter-form__field-wrapper { max-width: 42rem; }
.footer .newsletter-form .field {
  border-radius: 2px; background: rgba(255,255,255,0.06); border: 1px solid var(--apf-hair);
}
.footer .newsletter-form .field__input {
  border-radius: 2px; background: transparent !important; color: var(--apf-on-ink) !important;
  border-color: transparent; font-family: var(--apf-font-mono);
}
.footer .newsletter-form .field__input::placeholder { color: rgba(255,255,255,0.45); }
.footer .newsletter-form .field__label { color: rgba(255,255,255,0.55) !important; }
.footer .newsletter-form .field:focus-within {
  border-color: var(--apf-accent); box-shadow: 0 0 0 3px rgba(225,0,26,0.25);
}
.footer .newsletter-form__button.field__button {
  background: var(--apf-accent); border-radius: 2px; width: 4.4rem; color: #fff;
}
.footer .newsletter-form__button.field__button .icon,
.footer .newsletter-form__button.field__button svg { color: #fff; }
@media (hover: hover) {
  .footer .newsletter-form__button.field__button:hover {
    background: color-mix(in srgb, var(--apf-accent) 84%, #fff);
  }
}
.footer .newsletter-form__button.field__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.footer .newsletter-form__message { color: var(--apf-on-ink); }
.footer .footer__list-social .list-social__link { color: var(--apf-on-ink-muted); }
@media (hover: hover) {
  .footer .footer__list-social .list-social__link:hover { color: var(--apf-on-ink); }
}

/* 7. RACING-STRIPE DIVIDER + LEGAL ROW */
.footer .footer__content-bottom {
  margin-top: var(--ap-space-xl, 40px); border-top: 0 !important; padding-top: var(--ap-space-lg, 24px);
}
.footer .footer__content-bottom::before {
  content: ""; display: block; height: 4px; margin-bottom: var(--ap-space-lg, 24px);
  background:
    linear-gradient(to right, var(--apf-accent) 0, var(--apf-accent) 4rem, transparent 4rem),
    repeating-linear-gradient(-45deg, var(--apf-hair) 0 7px, transparent 7px 14px);
  background-repeat: no-repeat, repeat;
}
.footer .footer__localization h2 {
  font-family: var(--apf-font-mono); text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--apf-on-ink-muted) !important;
}
.footer .footer__localization .localization-form__select,
.footer .footer__localization button.localization-form__select,
.footer .footer__localization .disclosure__button {
  color: var(--apf-on-ink) !important; background: rgba(255,255,255,0.05);
  border: 1px solid var(--apf-hair); border-radius: 2px;
}
.footer .footer__localization .localization-form__select:focus-visible,
.footer .footer__localization .disclosure__button:focus-visible {
  outline: 2px solid var(--apf-accent); outline-offset: 2px;
}
.footer .footer__localization .disclosure__list-wrapper,
.footer .footer__localization .disclosure__list {
  background: var(--apf-ink-2); border: 1px solid var(--apf-hair); border-radius: 2px;
}
.footer .footer__localization .disclosure__link { color: var(--apf-on-ink-muted) !important; }
.footer .footer__localization .disclosure__link:hover,
.footer .footer__localization .disclosure__link:focus {
  color: var(--apf-on-ink) !important; background: rgba(255,255,255,0.06);
}
.footer .footer__copyright .copyright__content,
.footer .footer__copyright .copyright__content a,
.footer .policies li a {
  font-family: var(--apf-font-mono); letter-spacing: 0.04em; color: var(--apf-on-ink-muted) !important;
}
@media (hover: hover) {
  .footer .footer__copyright .copyright__content a:hover,
  .footer .policies li a:hover {
    color: var(--apf-on-ink) !important; text-decoration: underline; text-underline-offset: 0.3rem;
  }
}
.footer .policies li::before { color: var(--apf-accent); }
@media screen and (min-width: 750px) {
  .footer .footer__payment { margin-top: var(--ap-space-sm, 12px); }
}

/* 8. MOBILE — clean + stacked (no cut / wordmark / broken grid) */
@media screen and (max-width: 749px) {
  .footer { padding-top: var(--ap-space-lg, 24px); }
  .footer::before { transform: none; height: 5px; top: 0; }
  .footer .footer-block.grid__item { text-align: left; }
  .footer .footer-block--newsletter { margin-top: var(--ap-space-lg, 24px); }
}

/* 9. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .footer .footer-block__details-content .list-menu__item--link { transition: none; }
  .footer .footer-block--menu .list-menu__item--link:hover,
  .footer .footer-block--menu .list-menu__item--link:focus-visible { transform: none; }
}



/* ====================================================================== *
 * APEX PDP GALLERY STAGE (§22) — light studio mat, not dark
 * Owner: "landingpage produkte ... bild ... viel zu standard". The earlier
 * §20 attempt went DARK (showroom) and was rejected. This is the tasteful
 * LIGHT version: the gallery sits on a soft studio mat with red corner
 * brackets (brand bracket language) + gentle elevation. Desktop-only
 * (>=990px); mobile stays clean + stacked. Pure .product scope. CSS only.
 * ====================================================================== */
@media screen and (min-width: 990px) {
  #MainContent[data-template="product"] .product__media-wrapper {
    position: relative;
    background: radial-gradient(78% 60% at 50% 40%, #ffffff 0%, #eef0f3 100%);
    padding: clamp(22px, 2.6vw, 40px);
    border: 1px solid rgba(14, 15, 18, 0.1);
    border-radius: 2px;
    box-shadow: 0 20px 46px -26px rgba(0, 0, 0, 0.24);
  }
  /* L corner brackets — brand bracket language (top-left + bottom-right) */
  #MainContent[data-template="product"] .product__media-wrapper::before,
  #MainContent[data-template="product"] .product__media-wrapper::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid var(--ap-accent, #e1001a);
    z-index: 3;
    pointer-events: none;
  }
  #MainContent[data-template="product"] .product__media-wrapper::before {
    top: 11px;
    left: 11px;
    border-right: 0;
    border-bottom: 0;
  }
  #MainContent[data-template="product"] .product__media-wrapper::after {
    bottom: 11px;
    right: 11px;
    border-left: 0;
    border-top: 0;
  }
  /* inner image keeps the crisp hairline + a whisper of lift off the mat */
  #MainContent[data-template="product"] .product-media-container,
  #MainContent[data-template="product"] .product__media-item > .media {
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  }
}

/* §22 MOBILE — same studio-mat language, lighter (mobile is the dominant
   viewport; the owner's 'bild zu standard' applies here too). Single top-left
   corner bracket + soft mat, tuned padding/shadow. Verified overflow-free at
   390px. */
@media screen and (max-width: 989px) {
  #MainContent[data-template="product"] .product__media-wrapper {
    position: relative;
    background: radial-gradient(82% 62% at 50% 42%, #ffffff 0%, #f1f2f4 100%);
    padding: 14px;
    border: 1px solid rgba(14, 15, 18, 0.1);
    border-radius: 2px;
    box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.2);
  }
  #MainContent[data-template="product"] .product__media-wrapper::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ap-accent, #e1001a);
    border-right: 0;
    border-bottom: 0;
    z-index: 3;
    pointer-events: none;
  }
}