/* ==========================================================================
   rp-extras.css  —  RideParts losse componenten (ronde 3, agent COMPONENTEN)
   1) Cookie-consent banner (donker, oranje accent)
   2) Sticky WhatsApp floating button
   Vanilla, geen dependencies. Alles namespaced .rpx-* zodat het niets raakt.
   ========================================================================== */

:root{
  --rpx-bar-h: 0px;                                   /* hoogte sticky koopbalk, door JS gezet */
  --rpx-accent: var(--accent, #FF5A1E);
  --rpx-accent-hi: var(--accent-700, #E84A12);
  --rpx-dark: var(--dark, #121417);
  --rpx-wa: #25D366;                                  /* officieel WhatsApp-groen */
  --rpx-wa-hi: #1EBE5B;
  --rpx-font: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* ==========================================================================
   1) WhatsApp floating button
   ========================================================================== */
.rpx-wa{
  position: fixed;
  right: 16px;
  /* boven de sticky koopbalk (mobiel) + iOS safe-area; op desktop is --rpx-bar-h 0 */
  bottom: calc(16px + var(--rpx-bar-h, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 90;                                        /* boven koopbalk (70), onder toast/banner */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--rpx-wa);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 22px -6px rgba(7,94,84,.5), 0 2px 6px rgba(0,0,0,.18);
  overflow: hidden;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease,
              opacity .25s ease, visibility .25s ease;
}
.rpx-wa svg{ width: 30px; height: 30px; fill: currentColor; flex: 0 0 auto; display: block; }
.rpx-wa__tip{
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--rpx-font);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  transition: max-width .25s ease, opacity .2s ease, margin .25s ease;
}

/* Desktop hover/focus: label uitschuiven */
@media (hover: hover) and (pointer: fine){
  .rpx-wa{ transition: background .2s ease, box-shadow .2s ease, transform .2s ease,
             width .25s ease, opacity .25s ease, visibility .25s ease; }
  .rpx-wa:hover, .rpx-wa:focus-visible{
    width: auto;
    padding: 0 18px 0 15px;
    background: var(--rpx-wa-hi);
    box-shadow: 0 12px 30px -6px rgba(7,94,84,.6);
    transform: translateY(-2px);
  }
  .rpx-wa:hover .rpx-wa__tip, .rpx-wa:focus-visible .rpx-wa__tip{
    max-width: 160px; opacity: 1; margin-left: 10px;
  }
}
.rpx-wa:focus-visible{ outline: 3px solid var(--rpx-accent); outline-offset: 3px; }

/* Verborgen zolang de cookie-banner nog een keuze vraagt (geen overlap) */
.rpx-consent-pending .rpx-wa{
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);
}

/* ==========================================================================
   2) Cookie-consent banner
   ========================================================================== */
.rpx-cc{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;                                      /* consent-gate: boven alles */
  background: var(--rpx-dark);
  color: #EEF1F4;
  border-top: 2px solid var(--rpx-accent);
  box-shadow: 0 -10px 34px rgba(0,0,0,.32);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);                        /* start buiten beeld -> geen CLS */
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
  font-family: var(--rpx-font);
}
.rpx-cc--in{ transform: translateY(0); }
/* mobiel-fixronde 23-07 (Aether): consent-banner boven de sticky koopbalk als die zichtbaar is.
   Bron-bestand; de live productpagina laadt de gebundelde rd-bundle.css (daar staat dezelfde regel).
   :has() valt in oude browsers gracieus terug op het huidige gedrag. */
body:has(.pdp) .rpx-cc{ bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
.rpx-cc__inner{
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 14px 22px;
  flex-wrap: wrap;
}
.rpx-cc__text{
  margin: 0;
  flex: 1 1 320px;
  min-width: 240px;
  font-size: .92rem;
  line-height: 1.5;
  color: #D7DCE1;
}
.rpx-cc__text strong{ color: #fff; font-weight: 700; }
.rpx-cc__privacy{ color: #fff; text-decoration: underline; white-space: nowrap; }
.rpx-cc__privacy:hover{ color: #EAEDF0; }

.rpx-cc__actions{
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}
.rpx-cc__btn{
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 10px;
  padding: 12px 20px;
  min-height: 44px;                                   /* tap target */
  border: 1.5px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .1s ease;
}
.rpx-cc__btn:active{ transform: translateY(1px); }
/* Accepteren en Weigeren even groot en even zichtbaar (geen dark pattern) */
/* R9 a11y-fix 2026-07-06: white-on-#FF5A1E was 3.11:1 (AA fail). #C74E00 (palette
   prijs-oranje, AA-goedgekeurd) geeft white 4.65:1; hover #B23C09 (--accent-600) 5.9:1. */
.rpx-cc__btn--accept{ background: #C74E00; color: #fff; border-color: #C74E00; }
.rpx-cc__btn--accept:hover{ background: #B23C09; border-color: #B23C09; }
.rpx-cc__btn--ghost{ background: transparent; color: #EAEDF0; border-color: rgba(255,255,255,.45); }
.rpx-cc__btn--ghost:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.75); }
.rpx-cc__btn:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 560px){
  /* CRO-fix 24-07: behoud 44px tapdoelen, maar haal de banner onder 15% van
     844px door alleen mobiele witruimte en regelafstand compacter te maken. */
  .rpx-cc{
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .rpx-cc__inner{ gap: 8px; }
  .rpx-cc__text{ font-size: .875rem; line-height: 1.25; }
  .rpx-cc__actions{ width: 100%; margin-left: 0; gap: 8px; }
  .rpx-cc__btn{ padding: 10px 14px; flex: 1 1 0; }   /* gelijk verdeeld, 44px tapdoel blijft */
}

@media (prefers-reduced-motion: reduce){
  .rpx-cc, .rpx-wa, .rpx-wa__tip{ transition: none !important; }
}

/* ---- WhatsApp-feature-vlag (2026-07-09) ----
   Standaard zijn ALLE statische wa.me-links (topbar/footer/drawer) verborgen.
   js/rp-extras.js zet <html class="rp-wa-on"> zodra er een geldig nummer in
   js/config.js -> CRM_CONFIG.contact.whatsappNumber staat (en herschrijft dan
   de hrefs). Zonder geldig nummer blijven de knoppen dus onzichtbaar. */
html:not(.rp-wa-on) a[href^="https://wa.me"],
html:not(.rp-wa-on) a[href^="http://wa.me"],
html:not(.rp-wa-on) a[href^="https://api.whatsapp.com"]{ display: none !important; }
/* footer: verberg ook het "WhatsApp"-label-item zelf, anders blijft een kale <b> staan */
html:not(.rp-wa-on) .foot-contact li:has(> a[href^="https://wa.me"]){ display: none !important; }

/* P0-fix 2026-07-10 (schouw Aether): lange koopknop-labels (IN DEN WARENKORB / AJOUTER AU PANIER / LAGG I KUNDVAGN / DO KOSHYKA) liepen uit de productkaart en werden afgekapt. De prijs+knop-rij mag nu wrappen; past de knop niet naast de prijs, dan valt hij full-width onder de prijsrij. Taal-onafhankelijk, alle grids en rails. */
.card .foot{flex-wrap:wrap}
.card .foot .add{flex:1 0 auto;max-width:100%;min-width:0;white-space:normal}

/* ============================================================================
   P1-GELDFIX 2026-07-14 (Sage, ORDER-SAGE-rideparts-pdp-mobiel)
   KOOPZONE IN HET EERSTE SCHERM OP MOBIEL.

   Gemeten op 390x844 (live, vóór deze fix):
     cookiebalk 176px -> bruikbaar eerste scherm = 668px
     prijs  bottom = 751px  -> BUITEN beeld
     koopknop bottom = 907px -> BUITEN beeld
   De bezoeker zag dus een product, maar geen prijs en geen manier om het te kopen zonder te
   scrollen — op de drukste shop, op het drukste pad. Dit is een template-fix: hij geldt voor
   alle PDP's in alle talen (de PDP-HTML is per product gegenereerd, de CSS is de template).

   Drie ingrepen, alleen onder 640px, desktop blijft onaangeraakt:
   1. compactere productfoto (aspect-ratio 4/3 -> 16/10). De aspect-ratio BLIJFT gedefinieerd,
      dus de hoogte is gereserveerd en er ontstaat geen layout-shift (CLS).
   2. de pasvorm-chips ("Past op OUXI V8") verhuizen naar ONDER de koopknop: ze zijn nuttig,
      maar ze horen niet tussen de klant en de koopknop in te staan.
   3. compactere titel- en blokmarges binnen de koopzone.
   De prijs blijft het visueel zwaarste element in de koopzone (30,4px/800 vs knoplabel 15,5px/700).
   ========================================================================== */
@media (max-width:640px){
  .pdp .pdp-main-img{aspect-ratio:2.2/1}
  .pdp .buy-box{display:flex;flex-direction:column}
  /* Volgorde binnen de koopzone op mobiel. Expliciete order voor ALLE blokken, want redesign.js
     INJECTEERT na het laden nog een betaalmethoden-rij (.rd-buychips) en een Trustpilot-uitnodiging
     in de buy-box. Zonder vaste order landen die tussen prijs en knop en duwen ze de koopknop
     omlaag NA de eerste render = layout-shift (gemeten: CLS 0,131 live). Alles wat later komt,
     hoort onder de knop. */
  .pdp .buy-box > *{order:5}
  .pdp .buy-box > .buy-price{order:1}
  .pdp .buy-box > .buy-ship{order:2}
  .pdp .buy-box > .buy-cta{order:3}
  .pdp .buy-box > .buy-usps{order:8;margin-top:var(--s3)}   /* pasvorm-chips onder de koopknop */
  .pdp .buy-box > .buy-trust{order:9}
  .pdp .buy-box > .rd-buychips{order:10}
  .pdp .buy-box > .pdp-tp-invite{order:11}
  .pdp h1{font-size:var(--fs-lg);line-height:1.12;margin:.3rem 0 .4rem}
  /* kicker (categorie-label) is op mobiel dubbel: dezelfde categorie staat al in de breadcrumb
     erboven. Weglaten wint ~24px — genoeg om ook een tweeregelige producttitel te dragen zonder
     de koopknop uit beeld te duwen (gemeten op de 4 langste titels van de catalogus). */
  .pdp .kicker{display:none}
  .pdp-gallery{margin-bottom:.4rem}
  .pdp .buy-price{margin:.15rem 0}
  .pdp .buy-ship{margin:.25rem 0}
  .pdp .buy-cta{margin:.4rem 0 0}
}

/* Vangnet bij lange producttitels (Sage, 14-07): de in-page koopzone hierboven past bij een
   titel van 1-2 regels, maar RideParts heeft producttitels die op 390px 3 regels vullen — dan
   zou de koopknop opnieuw uit beeld schuiven. De sticky koopbalk BESTAAT al (.sticky-atc) maar
   verscheen pas ná scrollen. Op mobiel tonen we hem direct: zo is er ALTIJD een koopknop in
   beeld, ongeacht hoe lang de titel is. (Zolang de cookiebalk nog openstaat ligt die eroverheen;
   daarom blijft de in-page koopzone leidend voor de eerste indruk.) */
/* ============================================================================
   MOBIEL-LEESBAARHEID 2026-07-17 (Echo, shopfixes-mobiel).
   De compatibiliteits-disclaimer op de PDP staat inline op --fs-xs (11,84px op
   390px) — echte leestekst onder de 14px-drempel. Inline font-size, dus !important.
   Selector raakt ALLEEN de p.muted met die inline --fs-xs (126 PDP-templates),
   niet de gewone productomschrijving-.muted (die erft de body-basis, ~15px). */
.pdp p.muted[style*="--fs-xs"]{font-size:14px!important}

/* ---- Partnersites-rij in de footer (site-ronde-1807, eis 8) --------------
   Rustige één-regel-rij tussen chips-band en juridische onderbalk: zelfde
   donkere footer-massa, klein en muted. Natuurlijke merk-verwijzingen naar
   eigen zustersites — bewust géén badge-explosie of kleurenblok. */
.foot-partners{background:#101215;border-top:1px solid rgba(255,255,255,.12);padding:14px 0}
.foot-partners .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;font-size:13px;color:#8F96A0}
.foot-partners b{font-weight:600;color:#B9BEC6}
.foot-partners a{color:#C4C9CF;white-space:nowrap}
.foot-partners a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.foot-partners .wrap{gap:5px 14px;font-size:12.5px}}

/* Mobiele productkaarten: de snelle koopactie moet ook zonder hover bereikbaar
   zijn en alle koopknoppen halen de 44px-tiknorm. */
.quick-add,.card .foot .add{min-height:44px}
@media (hover:none){
  .quick-add{
    display:flex;
    opacity:1;
    transform:none;
    min-height:44px;
  }
}


/* ============================================================================
   PDP RUSTIGER OP MOBIEL - PDP-RUST-0808 (2026-08-08)
   Gemeten op 390px (product van EUR 16,90): onder de koopknop stonden zeven
   losse blokken die samen 834px vulden. De informatie blijft, het formaat gaat
   omlaag. Alles staat in de 640px-media-query; desktop blijft ongewijzigd.

   1. .fit-banner (de FitCheck) was een groen vlak van 183px hoog. Het wordt een
      compacte regel vlak onder de koopknop: geen vlak, geen rand, kleinere
      tekst. De pasvorm-eis zelf blijft woordelijk staan - dat is precies de
      informatie die iemand nodig heeft om het juiste onderdeel te kiezen.
      De generieke slotzin is uit de HTML gehaald; die staat verderop nog eens
      woordelijk onder de "Meer lezen"-tekst.
   2. De laatste pasvorm-pil is op elke PDP "Specificaties per model" - een
      verwijzing naar de tabel die er direct onder staat. Op mobiel verborgen;
      de pil met het model en de productpil blijven staan.
   3. .buy-trust waren drie losse kaders onder elkaar (125px) met exact dezelfde
      drie punten als de zwarte USP-balk bovenaan elke pagina. Nu een compacte
      tekstregel. Bezorgtijd, verzendkostendrempel en retourtermijn blijven
      leesbaar op de pagina staan - kleiner mag, weg niet.
   4. .order-deadline wordt door premium.js onder de prijs geinjecteerd en zegt
      woordelijk hetzelfde als de voorraadregel die er vlak boven staat
      ("Op voorraad - 1-3 werkdagen") en als de eerste .buy-trust-regel. Op
      mobiel stonden die drie binnen een half scherm. De geinjecteerde kopie
      gaat weg; de levertijd blijft in de voorraadregel, in de trust-regel en
      in de USP-balk bovenaan staan.
   ========================================================================== */
@media (max-width:640px){
  .pdp .buy-box > .fit-banner{
    order:4;                       /* direct onder de koopknop, boven de bundel */
    margin:.5rem 0 .1rem;
    padding:0;
    background:none;
    border:0;
    border-radius:0;
    gap:.4rem;
    align-items:flex-start;
    font-size:13.5px;
    line-height:1.4;
    color:var(--ink-2);
  }
  .pdp .buy-box > .fit-banner b{color:var(--ink)}
  .pdp .buy-box > .fit-banner .ic,
  .pdp .buy-box > .fit-banner svg{width:16px;height:16px;margin-top:.1rem}

  .pdp .buy-box > .order-deadline{display:none}

  .pdp .buy-box > .buy-usps{margin-top:.55rem;margin-bottom:0}
  .pdp .buy-box > .buy-usps > .buy-usp:last-child{display:none}

  .pdp .buy-box > .buy-trust{gap:.15rem .8rem;margin-top:.5rem}
  .pdp .buy-box > .buy-trust > span{
    flex:0 0 auto;
    min-width:0;
    background:none;
    border:0;
    border-radius:0;
    padding:0;
    font-size:12.5px;
    color:var(--ink-3);
    justify-content:flex-start;
    text-align:left;
  }
  .pdp .buy-box > .buy-trust > span .ic,
  .pdp .buy-box > .buy-trust > span svg{width:14px;height:14px}
}