/** Shopify CDN: Minification failed

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

**/
/* =====================================================================
   AP MOTORSPORT — PAGE-ZONE LAYER · GEMEINSAM (jedes Template)
   AUTOMATISCH AUFGETEILT aus ap-motorsport-zones.css. NICHT von Hand
   zusammenfuehren: layout/theme.liquid laedt IMMER ap-motorsport-zones.css
   (den gemeinsamen Teil) und danach genau die Datei des aktuellen Templates.
   Reihenfolge ist Teil des Vertrags — gemeinsam zuerst, Template danach.

   Aufteilungsregel: ein Block landet nur dann in einer Template-Datei, wenn
   JEDER seiner Selektoren (und bei @media jeder verschachtelte Selektor) sich
   per data-template="x" auf dasselbe Template festnagelt. Alles andere —
   auch per Komponente gescopte Regeln wie .footer, #main-cart-footer oder
   [id*="promo_tiles"] — bleibt im gemeinsamen Teil, weil solche Bausteine auf
   jedem Template auftauchen koennen.
   ===================================================================== */



/* =====================================================================
   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;
  /* SCHEME-LOCAL surface, not the root-fixed grey --ap-surface-2. The summary
     markup is hardcoded .color-scheme-3 (dark console) and the component-cart
     console rules force LIGHT text on it; a root-fixed grey here (ID specificity
     1,1,0) beat the dark-console fix and produced white-text-on-grey. Track the
     element's own scheme instead: dark on the desktop console, light on the
     mobile card (component-cart neutralises --color-* to the page scheme <750). */
  background: rgb(var(--color-background));
  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;
  /* SCHEME-LOCAL foreground, not the root-fixed --ap-on-surface (which stays the
     page-scheme dark and would be invisible on the dark console). White on the
     desktop console, dark on the mobile light card. */
  color: 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 - 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),.72)}
#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),.72)}
}
@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;
}

/* =========================================================================
   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 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);
}

/* ============================================================================
   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(var(--ap-accent-rgb, 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: var(--ap-brand-watermark, ""); position: absolute; left: -0.06em; bottom: -0.34em; z-index: -1;
    font-family: var(--apf-font-display); font-weight: 800; text-transform: uppercase;
    /* Der Wortlaut kommt als --ap-brand-watermark (shop.name) aus
       automotive-css-variables.liquid — CSS-content kann kein Liquid lesen.
       „ReifenFair" hat zehn Zeichen statt der vier von „APEX" — bei 26vw ragte
       das Wort weit aus der Fußzeile heraus (white-space: nowrap). Größe daher
       auf etwa ein Drittel gesetzt, die Wirkung als Geisterwort bleibt. */
    letter-spacing: -0.02em; line-height: 0.8; font-size: clamp(5rem, 11vw, 15rem);
    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 {
    /* Vier Spalten: Markenspalte (Logo) + drei Inhaltsspalten. Vorher stand
       hier ein Dreispalter — seit die Fußzeile einen eigenen Markenblock hat,
       rutschte die vierte Spalte unter die erste. Die Markenspalte bleibt
       breiter, damit die asymmetrische Anmutung erhalten bleibt. */
    display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr;
    column-gap: clamp(2rem, 3vw, 4.5rem); 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(var(--ap-accent-rgb, 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; }
}