/* ------------------------------------------------------------------
 * Staffelwidget op de productpagina
 *
 * Vormtaal van de rest van de productpagina: Sora voor de interface,
 * Montserrat voor de bedragen, paars als accent en crème voor het ene label
 * dat mag opvallen. Eerst op 375px beoordeeld.
 *
 * Eén badge op de hele widget (5 stuks), en de 10-trede bewust rustig:
 * gestippelde rand, geen kleur, geen badge.
 * ------------------------------------------------------------------ */

body.single-product .pnp-staffel{
 --groen:#0e9e70;
 margin:18px 0 16px; font-family:var(--ui);
}

/* de widget vervangt het kale aantalveld */
body.single-product .quantity.pnp-staffel-weg{display:none !important}

body.single-product .pnp-staffel__kop{
 font-size:11px; font-weight:700; letter-spacing:.09em;
 text-transform:uppercase; color:var(--mist); margin:0 0 9px;
}

body.single-product .pnp-staffel__lijst{display:grid; gap:9px}

/* ---------- één trede ---------- */
body.single-product .pnp-staffel__optie{
 position:relative; display:grid; grid-template-columns:19px 1fr auto;
 gap:11px; align-items:start;
 width:100%; margin:0; padding:12px 13px; text-align:left;
 background:#fff; border:1.6px solid var(--lijn); border-radius:14px;
 cursor:pointer; font-family:inherit; color:var(--inkt);
 transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
body.single-product .pnp-staffel__optie:hover{border-color:var(--lila)}
body.single-product .pnp-staffel__optie:focus-visible{outline:2px solid var(--paars); outline-offset:2px}
body.single-product .pnp-staffel__optie.is-anker{border-style:dashed}
body.single-product .pnp-staffel__optie.is-gekozen{
 border-style:solid; border-color:var(--paars);
 background:linear-gradient(180deg,#fbf9ff,#f4eeff);
 box-shadow:0 8px 22px rgba(97,52,176,.15);
}

/* het bolletje */
body.single-product .pnp-staffel__vink{
 width:19px; height:19px; margin-top:2px; border-radius:50%;
 border:1.8px solid var(--lijn); background:#fff; position:relative;
 transition:border-color .16s ease, background .16s ease;
}
body.single-product .pnp-staffel__optie.is-gekozen .pnp-staffel__vink{
 border-color:var(--paars); background:var(--paars);
}
body.single-product .pnp-staffel__optie.is-gekozen .pnp-staffel__vink::after{
 content:""; position:absolute; left:5px; top:4px; width:5px; height:9px;
 border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg);
}

/* linkerkolom */
body.single-product .pnp-staffel__links{display:block; min-width:0}
body.single-product .pnp-staffel__aantal{
 display:block; font-size:15px; font-weight:700; line-height:1.25; letter-spacing:-.005em;
}
body.single-product .pnp-staffel__meta{
 display:block; margin-top:2px; font-size:11.5px; line-height:1.45; color:var(--mist);
 font-variant-numeric:tabular-nums;
}
body.single-product .pnp-staffel__winst{
 display:block; margin-top:3px; font-size:12px; font-weight:600; color:var(--groen);
 font-variant-numeric:tabular-nums;
}
body.single-product .pnp-staffel__pct{font-weight:400; color:var(--mist)}

/* rechterkolom: het totaal */
body.single-product .pnp-staffel__totaal{
 font-family:var(--display); font-size:16.5px; font-weight:800; line-height:1.2;
 letter-spacing:-.02em; color:var(--inkt); font-variant-numeric:tabular-nums;
 white-space:nowrap; padding-top:1px;
}
body.single-product .pnp-staffel__optie.is-gekozen .pnp-staffel__totaal{color:var(--paars)}

/* de enige badge op de pagina */
body.single-product .pnp-staffel__vlag{
 position:absolute; top:-9px; right:12px;
 font-size:9.5px; font-weight:800; line-height:1; letter-spacing:.08em;
 text-transform:uppercase; padding:5px 8px; border-radius:999px;
 background:var(--creme); color:#6b4a05;
 box-shadow:0 2px 6px rgba(45,27,92,.10);
}

@media (min-width:600px){
 body.single-product .pnp-staffel__optie{padding:13px 15px}
 body.single-product .pnp-staffel__totaal{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
 body.single-product .pnp-staffel__optie,
 body.single-product .pnp-staffel__vink{transition:none}
}

/* ---------- winkelwagen: oude stukprijs doorgestreept ---------- */
.woocommerce-cart .product-price del,
.woocommerce-checkout .product-price del{opacity:.45; margin-right:4px}
.woocommerce-cart .product-price ins{text-decoration:none; font-weight:700}

/* alleen zichtbaar in de voorvertoning voor beheerders */
body.single-product .pnp-staffel__proef{
 margin:10px 0 0; padding:8px 11px; border-radius:10px;
 background:#fff6e0; border:1px solid #f0dfae; color:#6b4a05;
 font-size:11.5px; line-height:1.45;
}
body.single-product .pnp-staffel__proef b{font-weight:700}