/* ════════════════════════════════════════════════════════════════
   .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;gap:4px;
  padding:2px 8px 2px 3px;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::before{
  content:"?";
  width:17px;height:17px;border-radius:50%;
  background:var(--ppc-green);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.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}

/* ── 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) ── */
.ppc-v2 .ppc-qty{display:flex;align-items:center}
.ppc-v2 .ppc-q-btn{
  width:32px;height:32px;
  background:var(--ppc-bg-soft);border:1.5px solid var(--ppc-border);
  font-size:16px;font-weight:400;color:#6a6d6d;
  display:flex;align-items:center;justify-content:center;
  transition:.12s;
}
.ppc-v2 .ppc-q-btn:first-child{border-radius:var(--ppc-radius-sm) 0 0 var(--ppc-radius-sm)}
.ppc-v2 .ppc-q-btn:last-child{border-radius:0 var(--ppc-radius-sm) var(--ppc-radius-sm) 0}
.ppc-v2 .ppc-q-btn:hover{background:var(--ppc-green-light);border-color:var(--ppc-green);color:var(--ppc-green-dark)}
.ppc-v2 .ppc-q-inp{
  width:64px;height:32px;
  border:1.5px solid var(--ppc-border);border-left:none;border-right:none;
  text-align:center;font-size:14px;font-weight:700;color:#222;
  outline:none;
  -moz-appearance:textfield; /* Firefox: verbergt de native spinner-pijltjes */
}
/* 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}

/* ── 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:13px;font-weight:700;color:var(--ppc-dark)}
.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}

/* ── 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-unit-same{display:none !important}
.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}
.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: niet-toegestane opties verbergen (live, zie ppcRefreshBanned) ── */
.ppc-v2 .ppc-banned{display:none !important}
.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)}

/* ══ 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;
}
.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}
.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%}