/* ════════════════════════════════════════════════════════════════
   .ppc-v2 — genamespaced, geen globale resets, geen eigen fonts.
   Alle kleuren komen 1-op-1 uit het thema-CSS dat is doorgestuurd.
   ════════════════════════════════════════════════════════════════ */
.ppc-v2{
  /* — kleuren: exact uit thema CSS — */
  --ppc-green:#afcb31;
  --ppc-green-dark:#8ea826;     /* afgeleid: ~15% donkerder voor hover/tekst-op-wit */
  --ppc-green-light:#f3f7e3;    /* afgeleid: lichte tint van het groen, voor subtiele actieve achtergrond */
  --ppc-dark:#474a4a;           /* dark grey */
  --ppc-grey:#cfd6da;           /* grey */
  --ppc-lightgrey:#d4d5d4;      /* lightgrey */
  --ppc-border:#dfe2e1;         /* afgeleid: iets lichter dan --ppc-grey, voor subtiele kaderlijnen */
  --ppc-bg-soft:#f7f8f6;        /* afgeleid: zachte achtergrond voor headers/secties */
  --ppc-radius:6px;             /* licht afgerond, niet 0 zoals knoppen, niet zo rond als het prototype */
  --ppc-radius-sm:4px;

  /* — typografie: GEEN eigen font-family hier instellen.
     Body-tekst in het echte thema is 'Oxygen' — die erft automatisch
     via inherit zodra dit blok binnen het thema leeft. Alleen de
     header-titel (.ppc-conf-header-title) krijgt bewust Interstate,
     dat is een geverifieerde uitzondering, zie devtools-screenshot. — */
  font-family:inherit;
  color:#222;
  font-size:14px;
  line-height:1.45;
}
.ppc-v2 *{box-sizing:border-box}
.ppc-v2 button{font-family:inherit;cursor:pointer}

/* ── Reset: het thema legt zelf border/padding/schaduw op .configure-area,
   wat samen met onze eigen .ppc-conf-kaart een 'dubbele doos'-effect gaf.
   Hier neutraliseren we dat specifiek alleen wanneer .ppc-v2 aanwezig is
   (dus alleen op onze nieuwe configurator, nergens anders op de site). ── */
.configure-area.ppc-v2{
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
}

/* ── Card frame (de 3 stappen-kaart als geheel) ── */
.ppc-v2 .ppc-conf{
  /* Melkglas-effect — zelfde recept als de megamenu-dropdown in de
     nieuwe navbar (rgba(255,255,255,0.85) + blur(20px)), zodat de
     configurator visueel "familie" is van de rest van de site.
     LET OP: het blur-effect is alleen zichtbaar als er daadwerkelijk
     iets achter/rond het paneel staat om te vervagen (foto, gekleurd
     vlak, content die eronderdoor scrollt) — op een vlakke witte
     paginakleur is dit visueel niet te onderscheiden van gewoon wit.
     Check dit even op de echte productpagina. */
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--ppc-border);
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.ppc-v2 .ppc-conf-header{
  /* Zelfde grijstint als de menu-items in de navbar (rgb(242,242,242)).
     Effen kleur i.p.v. het melkglas-recept — bij volledige dekking
     voegt backdrop-filter niets zichtbaars toe, dus die is hier weg. */
  background:rgb(242,242,242) !important;
  border-bottom:1px solid var(--ppc-border);
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ppc-v2 .ppc-conf-header-title{
  /* Exacte computed style van de live h2.configure-area, via devtools opgevraagd:
     font-family Interstate (valt terug op sans-serif als Interstate niet geladen is
     buiten het echte thema — dat is bewust, geen losse @font-face hier toevoegen),
     italic, bold, 24px, uppercase, 1px letter-spacing, kleur bijna-zwart #252422 */
  font-family:'Interstate', sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:24px;
  color:#252422;
  text-transform:uppercase;
  letter-spacing:1px;
}
.ppc-v2 .ppc-step-label{
  font-size:11px;
  color:#8a8d8d;
  font-weight:600;
}

/* ── Step tabs ── */
.ppc-v2 .ppc-step-nav{
  display:flex;
  border-bottom:1px solid var(--ppc-border);
}
.ppc-v2 .ppc-step-btn{
  flex:1;
  padding:11px 6px;
  font-size:12px;
  font-weight:700;
  color:#9a9d9d;
  border:none;
  background:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:.15s;
}
.ppc-v2 .ppc-step-btn.done{color:var(--ppc-green-dark)}
.ppc-v2 .ppc-step-btn.active{color:var(--ppc-dark);border-bottom:3px solid var(--ppc-green)}
.ppc-v2 .ppc-step-btn.active .ppc-step-num{background:var(--ppc-green);border-color:var(--ppc-green);color:#fff}
.ppc-v2 .ppc-step-num{
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid currentColor;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ppc-v2 .ppc-step-btn.done .ppc-step-num{
  background:var(--ppc-green-light);border-color:var(--ppc-green);font-size:0;
}
.ppc-v2 .ppc-step-btn.done .ppc-step-num::before{content:"\2713";font-size:11px;color:var(--ppc-green-dark)}

/* ── Panels ── */
.ppc-v2 .ppc-panel{display:none;flex-direction:column}
.ppc-v2 .ppc-panel.active{display:flex}
.ppc-v2 .ppc-body{padding:16px 18px;display:flex;flex-direction:column;gap:16px}

/* ── Field label ── */
.ppc-v2 .ppc-label{
  display:flex;align-items:center;gap:6px;
  margin-bottom:8px;
  font-size:11.5px;font-weight:700;
  color:var(--ppc-dark);
  text-transform:uppercase;letter-spacing:.04em;
}
.ppc-v2 .ppc-tip{
  display:inline-flex;align-items:center;
  padding:2px 10px;min-height:24px;
  border:1px solid var(--ppc-green);border-radius:12px;background:#fff;
  color:var(--ppc-green-dark);font-size:11px;font-weight:700;
  text-transform:none;letter-spacing:0;line-height:1;cursor:pointer;flex-shrink:0;
}
.ppc-v2 .ppc-tip:hover,.ppc-v2 .ppc-tip[aria-expanded="true"]{background:var(--ppc-green-light)}
.ppc-v2 .ppc-tip:focus-visible{outline:2px solid var(--ppc-green-dark);outline-offset:1px}
.ppc-v2 .ppc-tip-text{
  margin:0 0 10px;padding:10px 12px;
  background:var(--ppc-green-light);border-radius:var(--ppc-radius-sm);
  color:var(--ppc-dark);font-size:13px;font-weight:400;line-height:1.45;
}
.ppc-v2 .ppc-tip-text[hidden]{display:none}
.ppc-v2 .ppc-tip-text a{text-decoration:underline}
.ppc-v2 .ppc-tip-text p{margin:0 0 6px}
.ppc-v2 .ppc-tip-text p:last-child{margin:0}
/* De teksten komen als HTML uit de winkel; het thema geeft <p>, <span> en <strong> een grote
   letter met letterafstand. Hier alles op dezelfde, kleinere maat. */
.ppc-v2 .ppc-tip-text,.ppc-v2 .ppc-tip-text *{font-size:12px !important;line-height:1.5 !important;letter-spacing:0 !important}
.ppc-v2 .ppc-tip-text{padding:8px 11px}

/* ── Chips (Oriëntatie, Drukkleur, Uitvoering, opl-presets) ── */
.ppc-v2 .ppc-chips{display:flex;flex-wrap:wrap;gap:6px}
.ppc-v2 .ppc-chip{
  padding:7px 14px;
  border-radius:18px;
  border:1.5px solid var(--ppc-border);
  font-size:13px;font-weight:500;
  color:#4a4d4d;background:#fff;
  cursor:pointer;transition:.12s;white-space:nowrap;
}
.ppc-v2 .ppc-chip:hover{border-color:var(--ppc-green);color:var(--ppc-dark)}
.ppc-v2 .ppc-chip.on{
  background:var(--ppc-green-light);
  border-color:var(--ppc-green);
  border-width:2px;
  color:var(--ppc-green-dark);
  font-weight:700;
  padding:6px 13px; /* compenseert dikkere rand zodat chip niet 'springt' */
}

/* ── Chip-icoontjes (kleur-wieltje, staand/liggend, enkel/dubbelzijdig) ──
   Puur decoratief, losse SVG vóór de chip-tekst. Ondanks de naam wordt
   deze class breder gebruikt dan alleen drukkleur-chips — ook Oriëntatie
   en Uitvoering hergebruiken 'm. De keuze tussen iconvarianten gebeurt
   server-side in het .tpl op basis van de optienaam (geen hardcoded
   per-product-logica). */
.ppc-v2 .ppc-chip-color-icon{
  display:inline-block;
  width:13px;height:13px;
  margin-right:6px;
  vertical-align:-2px;
  flex-shrink:0;
}

/* ── Format cards (Formaat) ── */
.ppc-v2 .ppc-fmt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
/* Smalle schermen: 5 kolommen passen niet, de laatste kaart viel buiten beeld. */
@media (max-width:480px){.ppc-v2 .ppc-fmt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ppc-v2 .ppc-fmt-card{
  border:1.5px solid var(--ppc-border);
  border-radius:var(--ppc-radius);
  cursor:pointer;transition:all .15s;
  background:#fff;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 4px 8px;gap:6px;
  text-align:center;
}
.ppc-v2 .ppc-fmt-card:hover{border-color:var(--ppc-green)}
.ppc-v2 .ppc-fmt-card.on{
  border-color:var(--ppc-green);
  border-width:2px;
  background:var(--ppc-green-light);
  padding:9px 3px 7px;
}
.ppc-v2 .ppc-fmt-page-wrap{display:flex;align-items:flex-end;justify-content:center;height:36px;width:100%}
.ppc-v2 .ppc-fmt-page{
  background:#fff;border:1.5px solid var(--ppc-grey);
  position:relative;flex-shrink:0;transition:.15s;
}
.ppc-v2 .ppc-fmt-card.on .ppc-fmt-page{border-color:var(--ppc-green)}
.ppc-v2 .ppc-fmt-card-name{font-size:13px;font-weight:700;color:var(--ppc-dark);line-height:1}
.ppc-v2 .ppc-fmt-card.on .ppc-fmt-card-name{color:var(--ppc-green-dark)}
.ppc-v2 .ppc-fmt-card-mm{font-size:9px;font-weight:500;color:#9a9d9d;line-height:1;white-space:nowrap}
.ppc-v2 .ppc-fmt-card-use{
  font-size:8.5px;color:#9a9d9d;line-height:1.2;
  border-top:1px solid var(--ppc-border);padding-top:5px;width:100%;
}
.ppc-v2 .ppc-fmt-card.on .ppc-fmt-card-use{border-top-color:var(--ppc-green-light)}

/* ── Divider ── */
.ppc-v2 .ppc-divider{height:1px;background:var(--ppc-border)}

/* ── Veldgroepering (Omslag / Binnenwerk) ──
   Subtiele omkadering rondom 2+ opeenvolgende velden die bij elkaar
   horen (bv. Uitvoering omslag + Drukkleur omslag). Bewust géén
   gevulde achtergrond — de rest van de configurator is wit met dunne
   grijze randen, dus alleen een rand + kicker-label past daar het
   beste bij zonder een nieuw "blok" te introduceren. */
.ppc-v2 .ppc-field-group{
  display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--ppc-border);
  border-radius:var(--ppc-radius);
  padding:12px 14px;
}
.ppc-v2 .ppc-field-group .ppc-field{margin:0}
.ppc-v2 .ppc-field-group-label{
  font-size:9.5px;font-weight:700;
  color:#9a9d9d;
  text-transform:uppercase;letter-spacing:.08em;
}

/* ── Quantity stepper (Pagina's, Oplage) ── */
/* Eén afgeronde pil zoals de keuze-chips (zelfde hoogte en rand); knoppen en
   veld zelf zonder rand. !important tegen .form-control van het theme. */
.ppc-v2 .ppc-qty{
  display:inline-flex;align-items:stretch;height:44px;
  border:1.5px solid #8c9191;border-radius:22px;background:#fff;overflow:hidden;
  transition:border-color .12s,box-shadow .12s;
}
.ppc-v2 .ppc-qty:hover{border-color:var(--ppc-green-dark)}
.ppc-v2 .ppc-qty:focus-within{border-color:var(--ppc-green-dark);box-shadow:0 0 0 3px rgba(175,203,49,.35)}
.ppc-v2 .ppc-q-btn{
  width:44px;height:auto;padding:0;
  background:transparent;border:0 !important;border-radius:0 !important;
  font-size:20px;font-weight:500;line-height:1;color:#253237;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.12s;
}
.ppc-v2 .ppc-q-btn:hover{background:var(--ppc-green-light);color:var(--ppc-green-dark)}
.ppc-v2 .ppc-q-btn:focus-visible{outline:2px solid var(--ppc-green-dark);outline-offset:-3px}
.ppc-v2 .ppc-q-inp{
  width:56px;height:auto !important;padding:0 !important;margin:0 !important;
  border:0 !important;border-left:1px solid #e3e6e5 !important;border-right:1px solid #e3e6e5 !important;
  border-radius:0 !important;box-shadow:none !important;background:transparent !important;
  text-align:center;font-size:15px;font-weight:700;color:#253237;
  outline:none;
  -moz-appearance:textfield; /* Firefox: verbergt de native spinner-pijltjes */
}
.ppc-v2.ppc-contrast .ppc-qty{border-color:var(--ppc-ctrl-border)}
/* Webkit (Chrome/Safari/Edge): verbergt de native spinner-pijltjes.
   Zonder dit overlapt de browser-eigen op/neer-pijl met het getal zelf
   zodra de waarde 2+ cijfers heeft — we hebben toch al eigen +/- knoppen. */
.ppc-v2 .ppc-q-inp::-webkit-outer-spin-button,
.ppc-v2 .ppc-q-inp::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.ppc-v2 .ppc-qty-hint{font-size:11px;color:#9a9d9d;margin-top:5px;line-height:1.4}

/* ── Step nav buttons (Volgende / Terug) ──
   Volgt de site-conventie: uppercase, bold, geen radius op knoppen */
.ppc-v2 .ppc-step-nav-btns{
  display:flex;gap:10px;
  padding:14px 18px;
  border-top:1px solid var(--ppc-border);
}
.ppc-v2 .ppc-btn-next,
.ppc-v2 .ppc-btn-back{
  border-radius:0;
  padding:11px 18px;
  text-transform:uppercase;
  font-weight:700;
  font-size:12.5px;
  border:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:.12s;
}
.ppc-v2 .ppc-btn-next{
  flex:1;
  background:var(--ppc-green);
  color:#fff;
}
.ppc-v2 .ppc-btn-next:hover{color:#000}
.ppc-v2 .ppc-btn-back{
  background:#fff;
  border:1.5px solid var(--ppc-border);
  color:#6a6d6d;
}
.ppc-v2 .ppc-btn-back:hover{border-color:var(--ppc-dark);color:var(--ppc-dark)}

/* ── Price section (step 3) ── */
.ppc-v2 .ppc-price-section{
  padding:16px 18px;
  background:var(--ppc-bg-soft);
  border-top:1px solid var(--ppc-border);
  display:flex;flex-direction:column;gap:10px;
}
.ppc-v2 .ppc-price-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:#7a7d7d;
}
.ppc-v2 .ppc-price-row.total{
  font-size:14px;font-weight:700;color:var(--ppc-dark);
  padding-top:8px;border-top:1px solid var(--ppc-border);margin-top:4px;
}
.ppc-v2 .ppc-price-row.total span:last-child{font-size:19px;color:var(--ppc-green-dark)}
.ppc-v2 .ppc-cta-main{
  width:100%;padding:13px;border:none;border-radius:0;
  background:var(--ppc-green);color:#fff;
  font-size:14px;font-weight:700;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:.12s;
}
.ppc-v2 .ppc-cta-main:hover{color:#000}
.ppc-v2 .ppc-cta-personalise{
  width:100%;padding:13px;border:none;border-radius:0;
  background:var(--ppc-green);color:#fff;
  font-size:14px;font-weight:700;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:.12s;
}
.ppc-v2 .ppc-cta-personalise[hidden]{display:none}
.ppc-v2 .ppc-cta-personalise:hover{color:#000}
.ppc-v2.ppc-contrast .ppc-cta-personalise{color:var(--ppc-ink)}
/* Originele knop van het personalisatiemodule staat nu in stap 3 (zie initPersonalise) */
.customize-area.ppc-personalise-moved{display:none !important}

/* ── Doc control / upload method cards (step 3): volle breedte, onder elkaar ── */
.ppc-v2 .ppc-doc-list{display:flex;flex-direction:column;gap:7px}
.ppc-v2 .ppc-doc-card{
  border:1.5px solid var(--ppc-border);border-radius:var(--ppc-radius);
  padding:10px 12px;cursor:pointer;transition:.12s;
}
.ppc-v2 .ppc-doc-card:hover{border-color:var(--ppc-green)}
.ppc-v2 .ppc-doc-card.on{border-color:var(--ppc-green);border-width:2px;background:var(--ppc-green-light)}
.ppc-v2 .ppc-doc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.ppc-v2 .ppc-doc-name{font-size:14px;font-weight:700;color:var(--ppc-dark);letter-spacing:normal !important}
.ppc-v2 .ppc-doc-card.on .ppc-doc-name{color:var(--ppc-green-dark)}
.ppc-v2 .ppc-doc-price{font-size:11.5px;font-weight:600;color:#9a9d9d}
.ppc-v2 .ppc-doc-card.on .ppc-doc-price{color:var(--ppc-green-dark)}
.ppc-v2 .ppc-doc-desc{font-size:11px;color:#8a8d8d;line-height:1.4}
.ppc-v2 .ppc-doc-warning{
  margin-top:8px;padding:9px 11px;
  background:#fdf6e3;border:1px solid #e8d28a;border-radius:var(--ppc-radius-sm);
  font-size:11px;color:#7a6a2a;line-height:1.5;
}

/* ── Tekstinvoer (Kenmerk/bestandsnaam) ── */
.ppc-v2 .ppc-text-input{
  width:100%;height:36px;
  border:1.5px solid var(--ppc-border);border-radius:var(--ppc-radius-sm);
  padding:0 12px;font-size:13.5px;font-family:inherit;color:#222;
  outline:none;transition:.15s;
}
.ppc-v2 .ppc-text-input:focus{border-color:var(--ppc-green)}

/* ── PAPIER: type-kaarten (stap 2) ──
   Elke kaart heeft een vast beeld-vlak. Zolang er nog geen echte
   foto is aangeleverd voor een type (zie PAPER_TYPE_IMAGES), toont
   dit vlak een neutrale placeholder — icoon + lichte achtergrond.
   Zodra een foto-URL beschikbaar komt, vult de <img> dat vlak
   automatisch, zonder dat HTML/CSS hoeft te veranderen. */
.ppc-v2 .ppc-pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ppc-v2 .ppc-pt-card{
  border:1.5px solid var(--ppc-border);border-radius:var(--ppc-radius);
  cursor:pointer;transition:.15s;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
}
.ppc-v2 .ppc-pt-card:hover{border-color:var(--ppc-green)}
.ppc-v2 .ppc-pt-card.on{border-color:var(--ppc-green);border-width:2px}
.ppc-v2 .ppc-pt-card.on .ppc-pt-info{background:var(--ppc-green-light)}

.ppc-v2 .ppc-pt-visual{
  width:100%;height:64px;position:relative;
  background:var(--ppc-bg-soft);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
}
.ppc-v2 .ppc-pt-visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
  transform-origin:center center;
}
/* Hover op het visuele vlak: afbeelding inzoomen. Klikken kiest de papiersoort. */
.ppc-v2 .ppc-pt-visual:hover img{transform:scale(2.2)}

/* ── Badge (Meestgekozen / Populair) ── */
.ppc-v2 .ppc-pt-badge{
  position:absolute;bottom:5px;left:5px;
  background:var(--ppc-green);
  color:#fff;
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  padding:2px 6px;
  border-radius:3px;
  pointer-events:none;
  z-index:2;
  white-space:nowrap;
}
.ppc-v2 .ppc-pt-placeholder-icon{
  width:26px;height:26px;color:var(--ppc-grey);
}

/* ── "Geen omslag" — gestippelde rand, duidelijk anders dan een
   materiaalkaart, zodat direct zichtbaar is dat het een structurele
   keuze is en geen papiersoort. ── */
.ppc-v2 .ppc-pt-card--none{border-style:dashed}
.ppc-v2 .ppc-pt-card--none:hover{border-style:dashed}

/* ── "Achterzijde"-badge op de blanco-achterzijde kaarten — rechtsonder,
   zodat hij nooit botst met de Meestgekozen/Populair-badge (linksonder)
   of het vinkje (rechtsboven). ── */
.ppc-v2 .ppc-pt-back-badge{
  position:absolute;bottom:5px;right:5px;
  background:var(--ppc-dark);
  color:#fff;
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  padding:2px 6px;
  border-radius:3px;
  pointer-events:none;
  z-index:2;
  white-space:nowrap;
}
.ppc-v2 .ppc-pt-check{
  position:absolute;top:6px;right:6px;
  width:18px;height:18px;border-radius:50%;
  background:var(--ppc-green);color:#fff;
  display:none;align-items:center;justify-content:center;
  font-size:10px;
}
.ppc-v2 .ppc-pt-card.on .ppc-pt-check{display:flex}

.ppc-v2 .ppc-pt-info{padding:9px 11px 10px;transition:background .15s}
.ppc-v2 .ppc-pt-name{font-size:13px;font-weight:700;color:var(--ppc-dark)}
.ppc-v2 .ppc-pt-card.on .ppc-pt-name{color:var(--ppc-green-dark)}
.ppc-v2 .ppc-pt-range{font-size:10.5px;color:#9a9d9d;margin-top:1px}
.ppc-v2 .ppc-pt-card.on .ppc-pt-range{color:var(--ppc-green-dark)}
.ppc-v2 .ppc-pt-typedesc{
  font-size:9.5px;color:#9a9d9d;line-height:1.4;
  margin-top:3px;
}
.ppc-v2 .ppc-pt-desc{font-size:9.5px;color:#9a9d9d;line-height:1.3;margin-top:3px}

/* ── PAPIER: grammage-lijst (verschijnt na type-keuze) ── */
.ppc-v2 .ppc-gram-section{border-top:1px solid var(--ppc-border);margin-top:10px;padding-top:10px}
.ppc-v2 .ppc-gram-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ppc-v2 .ppc-gram-title{font-size:11.5px;font-weight:700;color:var(--ppc-dark);text-transform:uppercase;letter-spacing:.04em}
.ppc-v2 .ppc-gram-change{margin-left:auto;font-size:11.5px;color:var(--ppc-green-dark);font-weight:600;cursor:pointer;text-decoration:underline}
.ppc-v2 .ppc-gram-list{display:flex;flex-direction:column;gap:6px}
.ppc-v2 .ppc-gram-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px solid var(--ppc-border);border-radius:var(--ppc-radius);
  padding:9px 12px;cursor:pointer;transition:.12s;background:#fff;
}
.ppc-v2 .ppc-gram-row:hover{border-color:var(--ppc-green)}
.ppc-v2 .ppc-gram-row.on{border-color:var(--ppc-green);border-width:2px;background:var(--ppc-green-light)}
.ppc-v2 .ppc-gram-wt{font-size:13px;font-weight:700;color:var(--ppc-dark)}
.ppc-v2 .ppc-gram-row.on .ppc-gram-wt{color:var(--ppc-green-dark)}
.ppc-v2 .ppc-gram-sub{font-size:10.5px;color:#9a9d9d;margin-top:1px}
.ppc-v2 .ppc-gram-tick{
  width:18px;height:18px;border-radius:50%;background:var(--ppc-green);
  display:none;align-items:center;justify-content:center;flex-shrink:0;
}
.ppc-v2 .ppc-gram-row.on .ppc-gram-tick{display:flex}

/* ── PAPIER: samenvatting (na grammage-keuze) ── */
.ppc-v2 .ppc-paper-sum{
  display:flex;align-items:center;gap:10px;
  background:var(--ppc-green-light);border:1px solid var(--ppc-green);
  border-radius:var(--ppc-radius);padding:10px 12px;
  cursor:pointer;transition:background .15s,box-shadow .15s;
}
.ppc-v2 .ppc-paper-sum:hover{background:#eaf2cf;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.ppc-v2 .ppc-paper-sum:focus-visible{outline:2px solid var(--ppc-green-dark);outline-offset:2px}
.ppc-v2 .ppc-paper-sum-text strong{display:block;font-size:12.5px;font-weight:700;color:var(--ppc-green-dark)}
.ppc-v2 .ppc-paper-sum-text span{font-size:10.5px;color:var(--ppc-green-dark)}
/* "Wijzigen" als zichtbare knop (rand + pijltje) i.p.v. onderstreepte tekst */
.ppc-v2 .ppc-paper-sum-change{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;color:var(--ppc-green-dark);
  background:#fff;border:1.5px solid var(--ppc-green);border-radius:18px;
  padding:5px 11px;white-space:nowrap;transition:.15s;
}
.ppc-v2 .ppc-paper-sum-change svg{width:12px;height:12px}
.ppc-v2 .ppc-paper-sum:hover .ppc-paper-sum-change{background:var(--ppc-green);color:#fff}
.ppc-v2 .ppc-paper-sum-change svg{transition:transform .15s}
.ppc-v2 .ppc-paper-expanded .ppc-paper-sum-change svg{transform:rotate(180deg)}
.ppc-v2 .ppc-paper-expanded .ppc-pt-type-section{margin-top:10px}

/* ── ACCORDEON: "Afwerking toevoegen" (Boorgaten, Nieten, Vouwen, Scheidingsblad) ── */
.ppc-v2 .ppc-accord-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;
  border-top:1px solid var(--ppc-border);
  font-size:12.5px;font-weight:700;color:var(--ppc-dark);
  cursor:pointer;background:var(--ppc-bg-soft);
  transition:.12s;
}
.ppc-v2 .ppc-accord-toggle:hover{background:var(--ppc-green-light)}
.ppc-v2 .ppc-accord-toggle .ppc-accord-plus{color:var(--ppc-green-dark);margin-right:6px;font-weight:700}
.ppc-v2 .ppc-accord-arrow{transition:transform .2s;color:#9a9d9d;font-size:11px}
.ppc-v2 .ppc-accord-toggle.open .ppc-accord-arrow{transform:rotate(180deg)}
.ppc-v2 .ppc-accord-body{
  display:none;
  flex-direction:column;gap:14px;
  padding:16px 18px;
  border-top:1px solid var(--ppc-border);
}
.ppc-v2 .ppc-accord-body.open{display:flex}
/* ── Live prijsbalk in stap 1 & 2 (spiegel van de prijs in stap 3) ── */
.ppc-v2 .ppc-mini-price{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 18px;
  background:var(--ppc-bg-soft);
  border-top:1px solid var(--ppc-border);
}
.ppc-v2 .ppc-mini-price-label{
  display:flex;flex-direction:column;gap:1px;
  font-size:13px;font-weight:700;color:var(--ppc-dark);
  text-transform:uppercase;letter-spacing:.06em;line-height:1.2;
}
.ppc-v2 .ppc-mini-price-label small{
  font-size:10.5px;font-weight:500;color:#9a9d9d;text-transform:none;letter-spacing:.02em;
}
.ppc-v2 .ppc-mini-price-val{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ppc-v2 .ppc-price-excl{font-size:11.5px;font-weight:400;color:#8a8d8d;white-space:nowrap}
.ppc-v2 .ppc-mini-incl{font-size:30px;font-weight:800;line-height:1;color:var(--ppc-green-dark);white-space:nowrap}
.ppc-v2 .ppc-price-more{margin:0 0 14px}
.ppc-v2 .ppc-price-more summary{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:#6f7272;cursor:pointer;
  list-style:none;padding:2px 0;
}
.ppc-v2 .ppc-price-more summary::-webkit-details-marker{display:none}
.ppc-v2 .ppc-price-more summary::after{content:"+";font-size:15px;line-height:1;color:var(--ppc-green-dark)}
.ppc-v2 .ppc-price-more[open] summary::after{content:"\2212"}
.ppc-v2 .ppc-price-more[open] summary{margin-bottom:8px}
.ppc-v2 .ppc-price-more .ppc-price-details{margin-bottom:0}
/* Compact: in stap 1 en 2 alleen de brutoprijs */
.ppc-v2.ppc-design-compact .ppc-mini-price .ppc-price-excl{display:none !important}
/* front.js schrijft hier ": <aantal>" naast; zonder uitleg verwarrend, dus weg */
.ppc-v2 .ppc-price-details .single_unit_price_span{display:none !important}
.ppc-v2 .ppc-mini-incl.ppc-mini-flash{animation:ppcMiniFlash .5s ease}
@keyframes ppcMiniFlash{0%{opacity:.3}100%{opacity:1}}

/* ── Overige opties direct zichtbaar (o.a. softcover boeken): geen eigen
   bovenrand en geen extra inspringing — de velden lopen gelijk met de rest. ── */
.ppc-v2 .ppc-accord-body.ppc-accord-body--flat{
  border-top:none;padding:0;gap:16px;
}

/* ── Velden in "Overige opties" die nog de oude .frm-section-markup gebruiken
   (stepper, tekst, readonly zoals Rug dikte): zelfde label/invoerstijl als de
   rest van de configurator, zonder de markup aan te raken (front.js leunt erop). ── */
.ppc-v2 .ppc-accord-body .frm-section{display:block;margin:0;padding:0}
.ppc-v2 .ppc-accord-body .left-frm-section-label{
  display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:0;width:auto;
  font-size:11.5px;font-weight:700;color:var(--ppc-dark);
  text-transform:uppercase;letter-spacing:.04em;
}
.ppc-v2 .ppc-accord-body .right-frm-section{width:100%;padding:0;margin:0}
.ppc-v2 .ppc-accord-body .text-label{width:100%}

/* Rug dikte: berekende waarde, dus als rustig info-vak (zacht grijs, geen
   cursor/focus) in dezelfde vorm als de andere invoervelden. */
.ppc-v2 #thickness_input{
  /* Compact: alleen ruimte voor waarden als "4.1mm" / "20.4mm" (ook "120.4mm") */
  box-sizing:border-box;width:100px;max-width:100%;height:36px;
  border:1.5px solid var(--ppc-border);border-radius:var(--ppc-radius-sm);
  padding:0 12px;font-size:13.5px;font-weight:600;font-family:inherit;
  color:var(--ppc-dark);background:var(--ppc-bg-soft);
  box-shadow:none;outline:none;cursor:default;
}
.ppc-v2 .ppc-field-hint{margin-top:5px;font-size:10.5px;color:#9a9d9d}

/* ── Envelop-kaarten (Direct mailing / Enveloppen bedrukken) ──
   Zelfde kaartstijl als de papierformaat-kaarten (.ppc-fmt-card), maar met
   een envelop-icoon, venster-aanduiding en mm-maat. Kolommen worden door
   ppc-bridge.js gezet (renderEnvelopeCards). */
.ppc-v2 .ppc-env-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ppc-v2 .ppc-env-card{
  border:1.5px solid var(--ppc-border);
  border-radius:var(--ppc-radius);
  cursor:pointer;transition:all .15s;
  background:#fff;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 3px 8px;gap:4px;
  text-align:center;
}
.ppc-v2 .ppc-env-card:hover{border-color:var(--ppc-green)}
.ppc-v2 .ppc-env-card.on{
  border-color:var(--ppc-green);border-width:2px;
  background:var(--ppc-green-light);padding:9px 3px 7px;
}
.ppc-v2 .ppc-env-icon{
  height:34px;width:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ppc-grey);
}
.ppc-v2 .ppc-env-card.on .ppc-env-icon{color:var(--ppc-green)}
.ppc-v2 .ppc-env-svg{max-width:100%;height:auto;flex-shrink:0}
.ppc-v2 .ppc-env-card-name{font-size:12px;font-weight:700;color:var(--ppc-dark);line-height:1.15;overflow-wrap:anywhere}
.ppc-v2 .ppc-env-card.on .ppc-env-card-name{color:var(--ppc-green-dark)}
.ppc-v2 .ppc-env-card-win{font-size:9.5px;font-weight:500;color:#7a7d7d;line-height:1.15}
.ppc-v2 .ppc-env-card-mm{font-size:8.5px;font-weight:500;color:#9a9d9d;line-height:1;white-space:nowrap}

/* ── Banned combinations (live, zie syncBannedChips): standaard verbergen; instelling "Grijs" (.ppc-banned-grey) toont ze grijs en niet klikbaar ── */
.ppc-v2:not(.ppc-banned-grey) .ppc-banned{display:none !important}
.ppc-v2.ppc-banned-grey .ppc-banned,.ppc-v2.ppc-banned-grey .ppc-banned:hover{cursor:not-allowed !important;box-shadow:none !important;transform:none !important;background:#fafafa !important;border-color:#e6e8e8 !important}
.ppc-v2.ppc-banned-grey .ppc-banned{position:relative;overflow:visible !important}
.ppc-v2.ppc-banned-grey .ppc-banned > :not(.ppc-banned-why),.ppc-v2.ppc-banned-grey .ppc-banned::before{opacity:.4;filter:grayscale(1)}
/* Grund der Sperre: kleines Hinweisfeld über der Kachel, bei Hover, Fokus oder Antippen (.ppc-why-open) */
.ppc-v2.ppc-banned-grey .ppc-banned-why{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(calc(-50% + var(--ppc-why-x,0px)),4px);
  width:max-content;max-width:220px;padding:6px 10px;border-radius:6px;
  background:#253237;color:#fff;font-size:12px;font-weight:500;line-height:1.35;letter-spacing:0;
  text-align:center;white-space:normal;text-transform:none;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,transform .12s;z-index:20;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.ppc-v2.ppc-banned-grey .ppc-banned-why::after{content:'';position:absolute;left:calc(50% - var(--ppc-why-x,0px));top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#253237}
.ppc-v2.ppc-banned-grey .ppc-banned:hover .ppc-banned-why,
.ppc-v2.ppc-banned-grey .ppc-banned.ppc-why-open .ppc-banned-why{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--ppc-why-x,0px)),0)}
.ppc-v2 .ppc-auto-note{
  flex:0 0 100%;width:100%;grid-column:1/-1;margin-top:2px;padding:8px 11px;
  background:#fdf6e3;border:1px solid #e8d28a;border-radius:var(--ppc-radius-sm);
  font-size:12px;color:#6b5c20;line-height:1.4;letter-spacing:0;white-space:normal;
}
/* Veld leeg door een regel en meerdere opties mogelijk: geen (te lage) prijs tonen */
.ppc-v2.ppc-needs-choice .total,.ppc-v2.ppc-needs-choice .ppc-mini-incl,.ppc-v2.ppc-needs-choice .ppc-price-excl,
.ppc-v2.ppc-needs-choice .unit_price_right,.ppc-v2.ppc-needs-choice .tax{visibility:hidden}
.ppc-v2 .ppc-paper-notice{
  margin:0 0 8px;padding:8px 11px;
  background:#fdf6e3;border:1px solid #e8d28a;border-radius:var(--ppc-radius-sm);
  font-size:11.5px;color:#7a6a2a;line-height:1.4;
}

/* ── Icoon-chips: bindzijde (wire-o / gelijmd) en lamineren ──
   Blijven gewone pill-chips (zelfde vorm als Drukkleur/Uitvoering), met het
   icoontje inline vóór de tekst. */
.ppc-v2 .ppc-chips--ico .ppc-chip{display:inline-flex;align-items:center;gap:8px}
.ppc-v2 .ppc-chip-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#6b6e6e;transition:.12s;margin:-8px 0} /* negatieve marge: icoon mag in de padding uitsteken, zodat de pill even hoog blijft als tekst-chips */
.ppc-v2 .ppc-chips--ico .ppc-chip:hover .ppc-chip-ico,
.ppc-v2 .ppc-chips--ico .ppc-chip.on .ppc-chip-ico{color:var(--ppc-green)}
.ppc-v2 .ppc-ico-svg{display:block;overflow:visible;height:20px;width:auto}

.ppc-v2 .ppc-ico-svg--fold{height:20px;width:auto}
.ppc-v2 .ppc-ico-svg--spine{height:17px;width:auto}

/* Kleine, ingetogen schakelaar naar de oude configurator */
.ppc-v2 .ppc-hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ppc-v2 .ppc-switch-old{font-size:10px;font-weight:500;color:#a9acac;text-decoration:none;letter-spacing:.2px;line-height:1.2}
.ppc-v2 .ppc-switch-old:hover{color:#6b6e6e;text-decoration:underline}

/* Duidelijke variant voor de introductie (module-instelling "prominent"):
   één smalle regel, duidelijk leesbaar maar geen knop die de aandacht trekt */
.ppc-v2 .ppc-switch-banner{
  display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 12px;
  padding:6px 18px;border-bottom:1px solid var(--ppc-border);
  font-size:12px;line-height:1.4;
}
.ppc-v2 .ppc-switch-banner-txt{color:#6b6e6e}
.ppc-v2 .ppc-switch-banner-btn{
  font-weight:600;color:var(--ppc-green-dark);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;
}
.ppc-v2 .ppc-switch-banner-btn:hover{color:var(--ppc-dark)}

/* Duidelijke variant in het kompakte design (pdp-v3 verbergt .ppc-switch-banner):
   eigen strook onder de kop met "Nieuw"-label en een rustige knop */
.ppc-v2 .ppc-oldswitch{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;
  margin:12px 18px 4px;padding:9px 10px 9px 14px;
  background:var(--ppc-bg-soft);border:1px solid var(--ppc-border);border-radius:10px;
  font-size:13px;line-height:1.4;color:var(--ppc-dark);letter-spacing:0;
}
.ppc-v2 .ppc-oldswitch *{letter-spacing:0}
.ppc-v2 .ppc-oldswitch-tag{
  display:inline-block;margin-right:6px;padding:1px 8px;border-radius:20px;
  background:var(--ppc-green);color:#253237;font-size:11px;font-weight:700;text-transform:uppercase;vertical-align:1px;
}
.ppc-v2 .ppc-oldswitch-q{color:#5f6363}
.ppc-v2 .ppc-oldswitch-btn{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:7px 14px;border:1.5px solid #253237;border-radius:20px;background:#fff;
  font:inherit;font-size:12.5px;font-weight:700;color:#253237;cursor:pointer;white-space:nowrap;transition:background .12s;
}
.ppc-v2 .ppc-oldswitch-btn:hover,.ppc-v2 .ppc-oldswitch-btn:focus-visible{background:var(--ppc-green-light);outline:none}
@media (max-width:480px){ .ppc-v2 .ppc-oldswitch{margin:10px 12px 4px} .ppc-v2 .ppc-oldswitch-btn{width:100%;justify-content:center} }

/* ══ Prijsopgave stap 3: totaalprijs groot en groen, rest op de achtergrond ══ */
.ppc-v2 .ppc-price-section{gap:0;padding:18px 18px 18px}
.ppc-v2 .ppc-price-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 0 14px;margin:0 0 12px;border-bottom:1px solid var(--ppc-border);
}
.ppc-v2 .ppc-price-total-label{
  display:flex;flex-direction:column;gap:1px;
  font-size:13px !important;font-weight:700 !important;color:var(--ppc-dark) !important;
  text-transform:uppercase;letter-spacing:.06em !important;line-height:1.2;
}
.ppc-v2 .ppc-price-total-label small{
  font-size:10.5px;font-weight:500;color:#9a9d9d;text-transform:none;letter-spacing:.02em;
}
.ppc-v2 .ppc-price-total .total{
  font-size:30px !important;font-weight:800 !important;line-height:1 !important;
  color:var(--ppc-green-dark) !important;letter-spacing:0 !important;white-space:nowrap;
}
.ppc-v2 .ppc-price-details{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.ppc-v2 .ppc-price-details .single_unit_prices,
.ppc-v2 .ppc-price-details .single_unit_price{margin:0;padding:0;border:0;background:none}
.ppc-v2 .ppc-price-details .single_unit_price{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;
}
.ppc-v2 .ppc-price-details .unit_price_label,
.ppc-v2 .ppc-price-details .unit_price_right,
.ppc-v2 .ppc-price-details .ppc-price-row,
.ppc-v2 .ppc-price-details .ppc-price-row span{
  font-size:12px !important;font-weight:400 !important;color:#8a8d8d !important;
  letter-spacing:0 !important;line-height:1.4 !important;
  width:auto !important;float:none !important;padding:0 !important;margin:0 !important;text-align:left;
}
.ppc-v2 .ppc-price-details .unit_price_right,
.ppc-v2 .ppc-price-details .ppc-price-row span:last-child{text-align:right}
.ppc-v2 .ppc-price-details .ppc-price-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}

/* ══ "Hulp nodig?"-balk: onder het formulier, in de stijl van de configurator ══ */
.ppc-v2 #opa-product-box{
  margin:0 !important;padding:11px 18px !important;gap:12px !important;
  border:0 !important;border-top:1px solid var(--ppc-border) !important;border-bottom:1px solid var(--ppc-border) !important;border-radius:0 !important;
  background:var(--ppc-green-light) !important;box-shadow:none !important;
}
.ppc-v2 #opa-product-box .opa-pb-txt{line-height:1.25 !important}
.ppc-v2 #opa-product-box .opa-pb-txt > span:first-child{
  font-size:13px !important;font-weight:700 !important;color:var(--ppc-dark) !important;
}
.ppc-v2 #opa-product-box .opa-pb-txt > span:last-child{
  font-size:11.5px !important;color:#7a7d7d !important;margin-top:1px !important;
}
.ppc-v2 #opa-product-box .opa-pb-btn{
  padding:7px 14px !important;font-size:12px !important;font-weight:700 !important;
  border-radius:18px !important;background:var(--ppc-green) !important;color:#1a1a1a !important;
}
.ppc-v2 #opa-product-box .opa-pb-btn:hover{background:var(--ppc-green-dark) !important;color:#fff !important}
@media (max-width:480px){
  .ppc-v2 #opa-product-box{flex-wrap:wrap}
  .ppc-v2 #opa-product-box .opa-pb-btn{width:100%}
}

/* Hulp-balk: compacter, minder dominant */
.ppc-v2 #opa-product-box{padding:7px 18px !important;gap:10px !important;background:#f8faee !important}
.ppc-v2 #opa-product-box .opa-pb-txt > span:first-child{font-size:12px !important}
.ppc-v2 #opa-product-box .opa-pb-txt > span:last-child{font-size:10.5px !important;margin-top:0 !important}
.ppc-v2 #opa-product-box .opa-pb-btn{
  padding:4px 11px !important;font-size:11px !important;font-weight:600 !important;
  background:transparent !important;color:var(--ppc-green-dark) !important;
  border:1.5px solid var(--ppc-green) !important;
}
.ppc-v2 #opa-product-box .opa-pb-btn:hover{background:var(--ppc-green) !important;color:#1a1a1a !important}
@media (max-width:480px){.ppc-v2 #opa-product-box .opa-pb-btn{width:auto}}

/* Etiketten per A4-vel (1UP … 16UP): iets groter icoon zodat het rooster leesbaar blijft */
.ppc-v2 .ppc-ico-svg--labels{height:34px;width:auto}

/* Sticker-afwerkingen als kaarten (grafisch, met gestippelde snijlijn) */
.ppc-v2 .ppc-chips--ico.ppc-chips--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.ppc-v2 .ppc-chips--ico.ppc-chips--cards .ppc-chip{
  flex-direction:column;justify-content:flex-start;text-align:center;gap:8px;
  height:auto;border-radius:10px;padding:12px 8px 10px;line-height:1.25;
}
.ppc-v2 .ppc-chips--cards .ppc-chip-ico{margin:0}
.ppc-v2 .ppc-chips--cards .ppc-ico-svg--cut{height:52px;width:auto}
.ppc-v2 .ppc-chips--cards .ppc-chip-txt{font-size:13px}
/* Lange namen (bv. "Rechthoekige sticker uitgesneden per stuk") binnen de kaart laten afbreken i.p.v. over de buurkaart te lopen. */
.ppc-v2 .ppc-chips--ico.ppc-chips--cards .ppc-chip{white-space:normal !important;height:auto !important}
.ppc-v2 .ppc-chips--cards .ppc-chip-txt{white-space:normal !important;text-align:center;line-height:1.3 !important;letter-spacing:.2px !important;overflow-wrap:anywhere;max-width:100%}
.ppc-v2 .ppc-chips--cards .ppc-chip-ico{height:52px;align-items:center;justify-content:center}

.ppc-v2 .ppc-chip-dot{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.28);flex:0 0 18px;margin-right:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.ppc-v2 .ppc-fmt-page-wrap .ppc-env-svg{color:#555}
.ppc-v2 .ppc-fmt-card.on .ppc-fmt-page-wrap .ppc-env-svg{color:var(--ppc-green)}
.ppc-v2 .ppc-chip:has(.ppc-chip-dot){display:inline-flex;align-items:center;gap:8px}

.ppc-v2 .ppc-pt-swatch{position:absolute;inset:0;width:100%;height:100%}

/* ══ Feedback: sterrenregel onder het formulier en vraag bij wisselen ══ */
.ppc-v2 .ppc-fb{padding:10px 18px;border-bottom:1px solid var(--ppc-border);background:#fff}
.ppc-v2 .ppc-fb[hidden],.ppc-v2 .ppc-fb [hidden],.ppc-v2 .ppc-fb-switch[hidden]{display:none !important}
.ppc-v2 .ppc-fb-row{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.ppc-v2 .ppc-fb-q{font-size:12px;font-weight:700;color:var(--ppc-dark);line-height:1.3;margin:0}
.ppc-v2 .ppc-fb-stars{display:inline-flex;gap:0;margin-right:-5px}
.ppc-v2 .ppc-fb-star{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;background:none;border-radius:50%;
}
.ppc-v2 .ppc-fb-star svg{width:20px;height:20px;fill:none;stroke:#b9bdbc;stroke-width:1.6;stroke-linejoin:round;transition:fill .1s,stroke .1s,transform .1s}
.ppc-v2 .ppc-fb-star.on svg{fill:var(--ppc-green);stroke:var(--ppc-green)}
@media (hover:hover){
  .ppc-v2 .ppc-fb-stars:hover .ppc-fb-star svg{fill:var(--ppc-green);stroke:var(--ppc-green)}
  .ppc-v2 .ppc-fb-stars .ppc-fb-star:hover ~ .ppc-fb-star svg{fill:none;stroke:#b9bdbc}
  .ppc-v2 .ppc-fb-star:hover svg{transform:scale(1.12)}
}
.ppc-v2 .ppc-fb-star:focus-visible{outline:2px solid var(--ppc-green-dark);outline-offset:-2px}
.ppc-v2 .ppc-fb-more{margin-top:8px}
.ppc-v2 .ppc-fb-text{
  display:block;width:100%;min-height:64px;resize:vertical;margin:0;
  padding:8px 10px;border:1.5px solid var(--ppc-border);border-radius:var(--ppc-radius-sm);
  font:inherit;font-size:13px;line-height:1.4;color:var(--ppc-dark);background:#fff;
}
.ppc-v2 .ppc-fb-text:focus{outline:none;border-color:var(--ppc-green)}
.ppc-v2 .ppc-fb-text::placeholder{color:#9a9d9d}
.ppc-v2 .ppc-fb-foot{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-top:6px}
.ppc-v2 .ppc-fb-note{font-size:10.5px;color:#8a8d8d}
.ppc-v2 .ppc-fb-btns{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.ppc-v2 .ppc-fb-send{
  margin-left:auto;padding:4px 12px;border:1.5px solid var(--ppc-green);border-radius:18px;
  background:transparent;color:var(--ppc-green-dark);font-size:11px;font-weight:600;line-height:1.4;transition:.12s;
}
.ppc-v2 .ppc-fb-send:hover{background:var(--ppc-green);color:#1a1a1a}
.ppc-v2 .ppc-fb-send:disabled{opacity:.5;cursor:default}
.ppc-v2 .ppc-fb-link{padding:0;border:0;background:none;font-size:11px;color:#8a8d8d;text-decoration:underline;text-underline-offset:2px}
.ppc-v2 .ppc-fb-link:hover{color:var(--ppc-dark)}
.ppc-v2 .ppc-fb-add{display:block;margin:4px 0 0 auto}
.ppc-v2 .ppc-fb-add[hidden]{display:none}
.ppc-v2 .ppc-fb-done{font-size:12px;font-weight:600;color:var(--ppc-green-dark)}
.ppc-v2 .ppc-fb-error{margin-top:6px;font-size:11.5px;color:#c0392b}
.ppc-v2 .ppc-fb-switch{padding:10px 18px 12px;border-bottom:1px solid var(--ppc-border);background:var(--ppc-bg-soft)}
/* Het thema lijnt <label> rechts uit */
.ppc-v2 .ppc-fb-switch .ppc-fb-q{display:block;margin:0 0 6px;padding:0;text-align:left;float:none;width:auto}

/* ══ Design "compact" (nieuwe productpagina): .ppc-v2.ppc-design-compact op .configure-area ══ */
.ppc-v2 .ppc-info-lines{display:none}

/* Info: rond i-icoon in plaats van de knop "Mehr Infos" */
.ppc-v2.ppc-design-compact .ppc-tip{
  width:18px;height:18px;min-height:0;padding:0;justify-content:center;
  border:1.5px solid #b9bdbc;border-radius:50%;background:transparent;
  color:transparent;font-size:0;line-height:0;vertical-align:middle;
}
.ppc-v2.ppc-design-compact .ppc-tip::before{content:"i";font-size:11px;font-weight:700;line-height:1;color:#8a8d8d;font-family:Georgia,serif}
.ppc-v2.ppc-design-compact .ppc-tip:hover,.ppc-v2.ppc-design-compact .ppc-tip[aria-expanded="true"]{border-color:var(--ppc-green);background:var(--ppc-green-light)}
.ppc-v2.ppc-design-compact .ppc-tip:hover::before,.ppc-v2.ppc-design-compact .ppc-tip[aria-expanded="true"]::before{color:var(--ppc-green-dark)}

/* Stappen onder elkaar: tabbladen weg, elke stap met eigen kop en samenvatting */
.ppc-v2.ppc-design-compact .ppc-step-nav{display:none !important}
.ppc-v2.ppc-design-compact .ppc-panel{display:flex;border-top:1px solid var(--ppc-border)}
.ppc-v2.ppc-design-compact .ppc-panel.ppc-acc-hidden{display:none}
.ppc-v2.ppc-design-compact .ppc-panel:not(.active) > :not(.ppc-acc-head){display:none !important}
.ppc-v2.ppc-design-compact .ppc-panel.ppc-measure{position:absolute;visibility:hidden;left:-9999px;width:400px}
.ppc-v2.ppc-design-compact .ppc-panel.ppc-measure > :not(.ppc-acc-head){display:block !important}
.ppc-v2.ppc-design-compact .ppc-acc-head{
  display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:12px 18px;
  border:0;background:#fff;text-align:left;font:inherit;color:var(--ppc-dark);cursor:pointer;
}
.ppc-v2.ppc-design-compact .ppc-acc-head:hover{background:var(--ppc-bg-soft)}
.ppc-v2.ppc-design-compact .ppc-acc-head:focus-visible{outline:2px solid var(--ppc-green-dark);outline-offset:-2px}
.ppc-v2.ppc-design-compact .ppc-acc-num{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:1.5px solid #b9bdbc;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#8a8d8d;
}
.ppc-v2.ppc-design-compact .ppc-acc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ppc-v2.ppc-design-compact .ppc-acc-title{font-size:13.5px;font-weight:700;line-height:1.3}
/* Zusammenfassung bricht um statt abzuschneiden: alles bleibt lesbar */
.ppc-v2.ppc-design-compact .ppc-acc-sum{font-size:12px;color:#7a7d7d;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.ppc-v2.ppc-design-compact .ppc-acc-sum:empty{display:none}
.ppc-v2.ppc-design-compact .ppc-acc-head{align-items:flex-start}
.ppc-v2.ppc-design-compact .ppc-acc-num{margin-top:1px}
.ppc-v2.ppc-design-compact .ppc-acc-edit{margin-top:2px;font-size:11.5px;font-weight:600;color:var(--ppc-green-dark);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ppc-v2.ppc-design-compact .ppc-panel.active > .ppc-acc-head{background:var(--ppc-green-light);cursor:default}
.ppc-v2.ppc-design-compact .ppc-panel.active > .ppc-acc-head .ppc-acc-num{background:var(--ppc-green);border-color:var(--ppc-green);color:#fff}
.ppc-v2.ppc-design-compact .ppc-panel.active > .ppc-acc-head .ppc-acc-edit{display:none}
.ppc-v2.ppc-design-compact .ppc-acc-foot{border-top:1px solid var(--ppc-border)}
.ppc-v2.ppc-design-compact .ppc-acc-foot > .ppc-foot-off{display:none !important}
/* Terug-knoppen zijn overbodig: elke kop opent zijn stap */
.ppc-v2.ppc-design-compact .ppc-btn-back{display:none !important}
.ppc-v2.ppc-design-compact .ppc-btn-next{width:100% !important}

/* Hulpbalk, Trusted Shops en verzendtekst van de winkel: op de nieuwe productpagina elders */
.ppc-v2.ppc-design-compact #opa-product-box,.ppc-v2.ppc-design-compact .ppc-extra{display:none !important}

/* Drie korte regels onder de knop */
.ppc-v2.ppc-design-compact .ppc-info-lines{display:block;list-style:none;margin:0;padding:4px 18px 14px}
.ppc-v2.ppc-design-compact .ppc-info-lines li{display:flex;align-items:center;gap:10px;margin:0;padding:4px 0;font-size:12.5px;line-height:1.35;color:var(--ppc-dark)}
.ppc-v2.ppc-design-compact .ppc-info-lines li[hidden]{display:none}
.ppc-v2.ppc-design-compact .ppc-info-ico{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--ppc-dark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ppc-v2.ppc-design-compact .ppc-info-lines a{color:var(--ppc-green-dark);text-decoration:underline;text-underline-offset:2px}
.ppc-v2.ppc-design-compact .ppc-info-lines a:hover{color:var(--ppc-dark)}

/* Feedback in elke stap, rustig onder de infozeilen */
.ppc-v2.ppc-design-compact .ppc-fb{border-top:1px solid var(--ppc-border);border-bottom:0;padding:9px 18px}
.ppc-v2.ppc-design-compact .ppc-fb-q{font-weight:600;font-size:11.5px;color:#6b6e6e}

/* ══ Levertijd-popup (ppc-delivery-*): in <body>, eigen laag boven thema en kaart ══ */
.ppc-v2.ppc-delivery-root[hidden]{display:none}
.ppc-v2.ppc-delivery-root{position:fixed;inset:0;z-index:100000;pointer-events:none;font-size:13px;line-height:1.45;color:var(--ppc-dark)}
.ppc-v2 .ppc-delivery-backdrop{display:none}
.ppc-v2 .ppc-delivery-pop{
  position:fixed;width:320px;max-width:calc(100vw - 24px);pointer-events:auto;
  background:#fff;border:1px solid var(--ppc-border);border-radius:var(--ppc-radius);
  box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);padding:14px 16px 14px;outline:none;
}
.ppc-v2 .ppc-delivery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.ppc-v2 .ppc-delivery-title{font-size:13px;font-weight:700;color:var(--ppc-dark);text-transform:uppercase;letter-spacing:.04em}
.ppc-v2 .ppc-delivery-close{width:28px;height:28px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:50%;background:none;font-size:20px;line-height:1;color:#8a8d8d}
.ppc-v2 .ppc-delivery-close:hover{background:var(--ppc-bg-soft);color:var(--ppc-dark)}
.ppc-v2 .ppc-delivery-close:focus-visible{outline:2px solid var(--ppc-green-dark);outline-offset:1px}
.ppc-v2 .ppc-delivery-rows{margin:0;padding:0}
.ppc-v2 .ppc-delivery-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-top:1px solid var(--ppc-border)}
.ppc-v2 .ppc-delivery-row dt{margin:0;font-weight:400;color:#6b6e6e;font-size:12.5px}
.ppc-v2 .ppc-delivery-row dd{margin:0;text-align:right;font-size:12.5px;color:var(--ppc-dark)}
.ppc-v2 .ppc-delivery-row.is-eta{border-bottom:1px solid var(--ppc-border)}
.ppc-v2 .ppc-delivery-row.is-eta dt{color:var(--ppc-dark);font-weight:700}
.ppc-v2 .ppc-delivery-row.is-eta dd{font-weight:700;color:var(--ppc-green-dark)}
.ppc-v2 .ppc-delivery-cutoff{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--ppc-dark)}
.ppc-v2 .ppc-delivery-cutoff[hidden]{display:none}
.ppc-v2 .ppc-delivery-note{margin:10px 0 8px;font-size:11.5px;line-height:1.45;color:#7a7d7d}
.ppc-v2 .ppc-delivery-all{font-size:12px;color:var(--ppc-green-dark);text-decoration:underline;text-underline-offset:2px}
.ppc-v2 .ppc-delivery-all:hover{color:var(--ppc-dark)}
/* Mobiel: bottom-sheet */
.ppc-v2.ppc-delivery-root.is-sheet{pointer-events:auto}
.ppc-v2.ppc-delivery-root.is-sheet .ppc-delivery-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35)}
.ppc-v2.ppc-delivery-root.is-sheet .ppc-delivery-pop{
  left:0 !important;right:0;bottom:0;top:auto !important;width:auto;max-width:none;
  border-radius:12px 12px 0 0;border-bottom:0;padding:16px 18px calc(18px + env(safe-area-inset-bottom));
}
.ppc-v2.ppc-delivery-root.is-sheet .ppc-delivery-row dt,.ppc-v2.ppc-delivery-root.is-sheet .ppc-delivery-row dd{font-size:13.5px}

/* ══ Kontrast „Hoch“ (Einstellung, .ppc-contrast) ══════════════════════
   WCAG 2.1 AA mit den Farben der Website (pdp-v3: Ink #253237, Grün #afcb31,
   Hellgrün #f3f7e3) plus Dunkelgrün #2f4a0b für Zustände:
   - Schrift: Ink (13:1), Nebentexte #5f6363 (6,1:1), Links Dunkelgrün (10:1).
   - Gewählter Chip: Markengrün gefüllt, Dunkelgrün-Rahmen (5,4:1 zum Grün,
     10:1 zu Weiß) und Häkchen; nicht gewählte Chips zeigen einen leeren Kreis.
   - Gewählte Kachel: Hellgrün, 2px Dunkelgrün-Rahmen, Häkchen oben rechts.
   - Rahmen nicht gewählter Bedienelemente #8c9191 (3,2:1).
   - Feldlabels in normaler Schreibweise, fett; Schrittnummer der offenen
     Stufe Dunkelgrün; Zusammenfassung als Liste Label – Wert (ppc-bridge.js).
   Die Grautext-Regeln am Ende sind aus den Regeln mit #9a9d9d, #8a8d8d,
   #7a7d7d, #a9acac und var(--ppc-grey) abgeleitet: Kommt dort eine neue
   Regel dazu, hier ebenfalls ergänzen. Gesperrte Kacheln (.ppc-banned)
   sind als deaktivierte Elemente ausgenommen. */
.ppc-v2.ppc-contrast{
  --ppc-green-dark:#2f4a0b;
  --ppc-ink:#253237;
  --ppc-deep:#2f4a0b;
  --ppc-ctrl-border:#8c9191;
  --ppc-text-2:#5f6363;
  --ppc-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Schrift auf Markengrün */
.ppc-v2.ppc-contrast .ppc-btn-next,.ppc-v2.ppc-contrast .ppc-btn-next:hover,.ppc-v2.ppc-contrast .ppc-cta-main,.ppc-v2.ppc-contrast .ppc-cta-main:hover,
.ppc-v2.ppc-contrast .ppc-pt-badge,.ppc-v2.ppc-contrast .ppc-pt-check,.ppc-v2.ppc-contrast .ppc-paper-sum:hover .ppc-paper-sum-change,.ppc-v2.ppc-contrast .ppc-fb-send:hover{color:var(--ppc-ink) !important}
/* Schrittnummern */
.ppc-v2.ppc-contrast .ppc-step-btn.active .ppc-step-num,
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-panel.active > .ppc-acc-head .ppc-acc-num{background:var(--ppc-deep) !important;border-color:var(--ppc-deep) !important;color:#fff !important}
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-acc-num{border-color:var(--ppc-ink);color:var(--ppc-ink) !important}
/* Feldlabels */
.ppc-v2.ppc-contrast .ppc-label{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ppc-ink)}
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-tip{background:var(--ppc-ink);border-color:var(--ppc-ink) !important}
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-tip::before{color:#fff !important}
/* Rahmen nicht gewählter Bedienelemente */
.ppc-v2.ppc-contrast .ppc-chip,.ppc-v2.ppc-contrast .ppc-fmt-card,.ppc-v2.ppc-contrast .ppc-env-card,.ppc-v2.ppc-contrast .ppc-doc-card,.ppc-v2.ppc-contrast .ppc-pt-card,.ppc-v2.ppc-contrast .ppc-gram-row,.ppc-v2.ppc-contrast .ppc-q-btn,.ppc-v2.ppc-contrast .ppc-q-inp,.ppc-v2.ppc-contrast .ppc-text-input,.ppc-v2.ppc-contrast #thickness_input,.ppc-v2.ppc-contrast .ppc-btn-back{border-color:var(--ppc-ctrl-border)}
.ppc-v2.ppc-contrast .ppc-chip:hover,.ppc-v2.ppc-contrast .ppc-fmt-card:hover,.ppc-v2.ppc-contrast .ppc-env-card:hover,.ppc-v2.ppc-contrast .ppc-doc-card:hover,.ppc-v2.ppc-contrast .ppc-pt-card:hover,.ppc-v2.ppc-contrast .ppc-gram-row:hover{border-color:var(--ppc-deep)}
.ppc-v2.ppc-contrast .ppc-fmt-card .ppc-fmt-page{border-color:var(--ppc-ink)}
.ppc-v2.ppc-contrast .ppc-fmt-card-name{color:var(--ppc-ink)}
/* Chips (Pillen): leerer Kreis / gefüllt mit Häkchen */
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip{display:inline-flex;align-items:center;gap:8px}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip::before{content:'';flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ppc-text-2);box-sizing:border-box;background:#fff}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip.on{background:var(--ppc-green) !important;border-color:var(--ppc-deep) !important;color:var(--ppc-ink) !important}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip.on *{color:var(--ppc-ink) !important}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip.on::before{border:0;background:var(--ppc-deep) var(--ppc-check) center/11px no-repeat}
/* Kacheln: Hellgrün, Dunkelgrün-Rahmen, Häkchen */
.ppc-v2.ppc-contrast .ppc-fmt-card.on,.ppc-v2.ppc-contrast .ppc-env-card.on,.ppc-v2.ppc-contrast .ppc-doc-card.on,.ppc-v2.ppc-contrast .ppc-pt-card.on,.ppc-v2.ppc-contrast .ppc-chips--cards .ppc-chip.on,.ppc-v2.ppc-contrast .ppc-gram-row.on,.ppc-v2.ppc-contrast .ppc-paper-sum{border-color:var(--ppc-deep) !important;border-width:2px;background:var(--ppc-green-light) !important;color:var(--ppc-ink);position:relative;overflow:visible}
.ppc-v2.ppc-contrast .ppc-fmt-card.on::after,.ppc-v2.ppc-contrast .ppc-env-card.on::after,.ppc-v2.ppc-contrast .ppc-doc-card.on::after,.ppc-v2.ppc-contrast .ppc-pt-card.on::after,.ppc-v2.ppc-contrast .ppc-chips--cards .ppc-chip.on::after,.ppc-v2.ppc-contrast .ppc-gram-row.on::after{content:'';position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--ppc-deep) var(--ppc-check) center/12px no-repeat;z-index:1}
.ppc-v2.ppc-contrast .ppc-fmt-card.on .ppc-fmt-page{border-color:var(--ppc-ink)}
.ppc-v2.ppc-contrast .ppc-fmt-card.on .ppc-fmt-card-name,.ppc-v2.ppc-contrast .ppc-fmt-card.on .ppc-fmt-card-mm{color:var(--ppc-deep)}
.ppc-v2.ppc-contrast .ppc-paper-sum-change{border-color:var(--ppc-deep) !important;color:var(--ppc-deep)}
/* Ruhiger wie im Entwurf: keine Sperrschrift, gleich hohe Pillen */
.ppc-v2.ppc-contrast .ppc-chip,.ppc-v2.ppc-contrast .ppc-chip *,.ppc-v2.ppc-contrast .ppc-label,
.ppc-v2.ppc-contrast .ppc-fmt-card-name,.ppc-v2.ppc-contrast .ppc-fmt-card-mm,.ppc-v2.ppc-contrast .ppc-paper-sum,
.ppc-v2.ppc-contrast .ppc-paper-sum *,.ppc-v2.ppc-contrast .ppc-acc-head,.ppc-v2.ppc-contrast .ppc-acc-head *,
.ppc-v2.ppc-contrast .ppc-info-lines,.ppc-v2.ppc-contrast .ppc-info-lines *,.ppc-v2.ppc-contrast .ppc-accord-toggle,.ppc-v2.ppc-contrast .ppc-accord-toggle *{letter-spacing:0 !important}
.ppc-v2.ppc-contrast .ppc-label{font-size:15px}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards){align-items:center;gap:10px}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip{position:relative;overflow:visible;min-height:44px;padding:8px 18px 8px 12px;font-size:14px;box-sizing:border-box;transition:border-color .12s,box-shadow .12s,background .12s}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip.on{padding:8px 18px 8px 12px}
/* Pillen mit Symbol (Scheidingsblad, Boorgaten, Drukkleur …): Symbol statt Kreis, Auswahl mit Häkchen-Badge */
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip:has(.ppc-chip-ico,.ppc-chip-color-icon){padding-left:14px}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip:has(.ppc-chip-ico,.ppc-chip-color-icon)::before{display:none}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip-ico{color:var(--ppc-ink);margin:-8px 0}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip.on .ppc-chip-ico{color:var(--ppc-deep) !important}
.ppc-v2.ppc-contrast .ppc-chips:not(.ppc-chips--cards) .ppc-chip.on:has(.ppc-chip-ico,.ppc-chip-color-icon)::after{content:'';position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--ppc-deep) var(--ppc-check) center/12px no-repeat;box-shadow:0 0 0 2px #fff;z-index:1}
/* Etwas Tiefe: Hover und Auswahl */
.ppc-v2.ppc-contrast .ppc-chip:not(.ppc-banned):hover,.ppc-v2.ppc-contrast .ppc-fmt-card:not(.ppc-banned):hover,.ppc-v2.ppc-contrast .ppc-env-card:not(.ppc-banned):hover,
.ppc-v2.ppc-contrast .ppc-doc-card:not(.ppc-banned):hover,.ppc-v2.ppc-contrast .ppc-pt-card:hover,.ppc-v2.ppc-contrast .ppc-gram-row:hover{box-shadow:0 2px 10px rgba(37,50,55,.10)}
.ppc-v2.ppc-contrast .ppc-chip.on,.ppc-v2.ppc-contrast .ppc-fmt-card.on,.ppc-v2.ppc-contrast .ppc-env-card.on,.ppc-v2.ppc-contrast .ppc-doc-card.on,.ppc-v2.ppc-contrast .ppc-pt-card.on,.ppc-v2.ppc-contrast .ppc-gram-row.on{box-shadow:0 3px 12px rgba(47,74,11,.18) !important}
.ppc-v2.ppc-contrast .ppc-paper-sum{border-width:1.5px !important;box-shadow:0 3px 12px rgba(47,74,11,.12) !important;border-radius:12px}
/* „Afwerking toevoegen“ deutlich als Knopf */
.ppc-v2.ppc-contrast .ppc-accord-toggle{margin:6px 0 2px;padding:13px 16px;border:1.5px dashed var(--ppc-deep);border-radius:12px;background:#fff;font-size:14px;font-weight:700;color:var(--ppc-ink);gap:12px}
.ppc-v2.ppc-contrast .ppc-accord-toggle > span:first-child{display:flex;align-items:center;gap:12px}
.ppc-v2.ppc-contrast .ppc-accord-toggle .ppc-accord-plus{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;margin:0;border-radius:50%;background:var(--ppc-green);color:var(--ppc-ink);font-size:18px;line-height:1;font-weight:700;transition:transform .2s}
.ppc-v2.ppc-contrast .ppc-accord-arrow{color:var(--ppc-ink) !important;font-size:16px}
.ppc-v2.ppc-contrast .ppc-accord-toggle:hover,.ppc-v2.ppc-contrast .ppc-accord-toggle:focus-visible{background:var(--ppc-green-light);border-style:solid;outline:none}
.ppc-v2.ppc-contrast .ppc-accord-toggle.open{border-style:solid;background:var(--ppc-green-light);border-radius:12px 12px 0 0;margin-bottom:0;box-shadow:none}
.ppc-v2.ppc-contrast .ppc-accord-toggle.open .ppc-accord-plus{transform:rotate(45deg)}
.ppc-v2.ppc-contrast .ppc-accord-body.open{border:1.5px solid var(--ppc-deep);border-top:0;border-radius:0 0 12px 12px;padding:16px;margin-top:-16px}
/* Links */
.ppc-v2.ppc-contrast .ppc-acc-edit,.ppc-v2.ppc-contrast .ppc-info-lines a{color:var(--ppc-deep) !important;text-decoration:underline}
/* Schritt-Köpfe: Pfeil rechts, Zusammenfassung als Liste */
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-acc-head{position:relative;padding-right:44px}
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-acc-head::after{content:'';position:absolute;right:18px;top:20px;width:8px;height:8px;border-right:2px solid var(--ppc-ink);border-bottom:2px solid var(--ppc-ink);transform:rotate(45deg)}
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-acc-head[aria-expanded="true"]::after{transform:rotate(-135deg);top:24px}
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-acc-title{color:var(--ppc-ink);font-weight:700}
.ppc-v2.ppc-contrast .ppc-acc-list{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:4px 0 0;font-size:12.5px;line-height:1.45}
.ppc-v2.ppc-contrast .ppc-acc-list dt{font-weight:400;color:var(--ppc-text-2);margin:0}
.ppc-v2.ppc-contrast .ppc-acc-list dd{margin:0;color:var(--ppc-ink);font-weight:500}
.ppc-v2.ppc-contrast .ppc-step-label{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-step-btn{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-fmt-card-mm{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-fmt-card-use{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-field-group-label{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-qty-hint{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-price-row{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-doc-price{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-doc-desc{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-pt-placeholder-icon{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-pt-range{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-pt-typedesc{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-pt-desc{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-gram-sub{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-accord-arrow{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-mini-price-label small{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-price-excl{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-field-hint{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-env-icon{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-env-card-win{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-env-card-mm{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-switch-old{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-price-total-label small{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-price-details .unit_price_label,.ppc-v2.ppc-contrast .ppc-price-details .unit_price_right,.ppc-v2.ppc-contrast .ppc-price-details .ppc-price-row,.ppc-v2.ppc-contrast .ppc-price-details .ppc-price-row span{color:var(--ppc-text-2) !important}
.ppc-v2.ppc-contrast #opa-product-box .opa-pb-txt > span:last-child{color:var(--ppc-text-2) !important}
.ppc-v2.ppc-contrast .ppc-fb-text::placeholder{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-fb-note{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-fb-link{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast.ppc-design-compact .ppc-acc-sum{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-delivery-close{color:var(--ppc-text-2)}
.ppc-v2.ppc-contrast .ppc-delivery-note{color:var(--ppc-text-2)}