/* ============================================================
   ronde3-cards.css — RideParts ronde 3 (agent HOME/PRIJS, 2026-07-05)
   Doel: prijs-focus + directe koopknop op elke card, hero-slogan,
   en een afgewerkte "Vaak samen gekocht"-sectie op de PDP.

   BEWUSTE KEUZE: los bestand (NIET uit _shell/src/redesign.css gebouwd).
   css/redesign.css is een geminifyde build van _shell/src/redesign.css;
   een los override-bestand dat NA redesign.css laadt merget veiliger,
   vergt geen re-minify-stap en overleeft een rebuild van de shell.
   Laadt als laatste laag -> wint in de cascade. Gebruikt bestaande
   design-tokens (--accent, --price #C74E00, --ok, --font-head, enz.).
   ============================================================ */

/* ---------- 1 · HERO-SLOGAN "Parts for your ride!" ---------- */
.hero-slogan{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 7px;
  font-family:var(--font-head,"Saira Condensed",system-ui,sans-serif);
  font-weight:800;font-size:15px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-deep,#C0420C);
}
.hero-slogan::before{
  content:"";width:24px;height:3px;border-radius:2px;
  background:var(--accent,#FF5A1E);flex:none;
}
@media (max-width:640px){
  .hero-slogan{font-size:12.5px;letter-spacing:.12em;gap:7px;margin-bottom:5px}
  .hero-slogan::before{width:18px}
}

/* ---------- 2 · PRIJS PROMINENTER (koop-eerst / prijs-focus) ---------- */
/* Home-rails: bestaande #C74E00 versterkt (groter + zwaarder). */
.pcard .p-price{
  font-size:26px;font-weight:900;color:var(--price,#C74E00);
  letter-spacing:-.005em;line-height:1;
}
/* PLP- + PDP-grid cards (.card .now) naar prijs-oranje trekken. */
.card .now,
.card .price .now{
  color:var(--price,#C74E00);font-weight:800;
}
.card .price del,
.card .was{color:var(--muted,#5B6472);font-weight:600}

/* ---------- 3 · HOME-CARDS: hele kaart klikt naar PDP (.pcard) ----------
   De sweep zet <a class="pcard"> om naar een <div class="pcard"> met een
   uitgerekte .p-cover-link, zodat de HELE kaart klikbaar is naar de PDP.
   RONDE 4 (2026-07-06, op verzoek operator): de losse oranje "In mandje"-
   koopknop (.p-add) is VERWIJDERD van de home-cards. Reden: rommelig/niet
   mooi op een discovery-rail; kopen gebeurt op de PDP. Alleen de cover-link
   blijft; de prijs-focus (sectie 2, #C74E00) blijft onveranderd. */
.pcard{overflow:hidden}
.p-cover{
  position:absolute;inset:0;z-index:1;border-radius:inherit;
  text-indent:-9999px;overflow:hidden;
}
.p-cover:focus-visible{outline:2px solid var(--accent,#FF5A1E);outline-offset:-3px}

/* ---------- 4 · "VAAK SAMEN GEKOCHT" — de BESTAANDE .bundle-widget (buybox) ----------
   premium.js rendert hier al een "Vaak samen gekocht"-cross-sell + drempel-widget
   (met productplaatjes + checkboxes). De foot-regels waren KAAL: platte
   "Samen: EUR X" en "Nog EUR Y tot gratis verzending". We maken de samen-prijs een
   vette oranje prijsregel en de gratis-verzending een badge: amber = nog te gaan,
   groen v = gehaald (premium.js zet zelf `.b-free.is-ok`) — zelfde amber/groen-taal
   als de checkout-drempelbalk. Pure styling; premium.js/premium.css onaangeroerd.
   BEWUST GEEN losse sectie geinjecteerd: dat zou deze widget dubbelen. */
.bundle-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .8rem;
  margin-top:.6rem;padding-top:.7rem;border-top:1px solid var(--line,#E6E9ED);
}
.bundle-foot .b-total{
  font-family:var(--font-display,"Saira Condensed",system-ui,sans-serif);
  font-weight:900;font-size:1.24rem;line-height:1.05;letter-spacing:-.01em;
  color:var(--price,#C74E00);font-variant-numeric:tabular-nums;
}
.bundle-foot .b-free{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:700;padding:.3rem .72rem;border-radius:999px;
  background:var(--warn-bg,#FDF2DC);color:var(--warn,#985D00);
}
.bundle-foot .b-free.is-ok{background:var(--ok-bg,#E7F6EE);color:var(--ok,#0E7A45)}
/* add-on-prijzen in de rijen ook prijs-oranje (koop-/prijs-focus) */
.bundle-row{align-items:center}
.bundle-row .b-price{color:var(--price,#C74E00);font-weight:700}

/* ---------- 5 · STICKY PDP-KOOPBALK — contrast-fix (was wit-op-wit) ----------
   Probleem (componenten-agent, 05-07): de bestaande .sticky-atc kreeg via
   premium.css/app.css een witte, half-transparante achtergrond die tegen de
   witte PDP-content wegviel -> de koopbalk leek onzichtbaar. Fix: maak er een
   duidelijke DONKERE koopbalk van (zelfde taal als de USP-bar + footer), met
   licht-contrast tekst en de oranje "In mandje"-knop gegarandeerd zichtbaar.
   Verschijngedrag is ongewijzigd correct: premium.js toont de balk zodra de
   hoofd-koopknop (.pdp-cta) boven de viewport uit scrollt (IntersectionObserver).
   Alleen styling; geen shared core aangeraakt. */
.sticky-atc{
  background:var(--dark,#121417) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 -10px 30px rgba(18,20,23,.34) !important;
}
.sticky-atc__name{color:#fff !important}
.sticky-atc .price,
.sticky-atc .price .now{color:#fff !important}
.sticky-atc .price del{color:rgba(255,255,255,.55) !important; font-weight:500}
.sticky-atc__thumb{background:#fff !important; border-color:rgba(255,255,255,.16) !important}
/* koopknop: var(--accent-cta) is bros (cyclisch/scoped) -> pin op --accent met fallback */
.sticky-atc [data-add]{background:var(--accent,#FF5A1E) !important; color:#fff !important}
.sticky-atc [data-add]:hover{background:var(--accent-down,#E84C12) !important}