/* ------------------------------------------------------------------
 * Productpagina in de huisstijl van de homepage
 *
 * De homepage draait op .pnp-nieuw. Die klasse op de productpagina zetten zou
 * in één klap alle WooCommerce-onderdelen raken die toevallig een naam delen
 * (kaart, wrap, sectie) — te riskant op een winkel die draait. Daarom hier
 * dezelfde tokens en hetzelfde vormtaal, maar op eigen selectors.
 *
 * Mobiel is de maatstaf: alles hieronder is eerst op 375px beoordeeld.
 * De indeling boven de vouw blijft ongemoeid — alleen de vórm verandert.
 * ------------------------------------------------------------------ */

body.single-product{
 --paars-diep:#2c1454; --paars:#6134b0; --lila:#a078e4; --creme:#f8eed2;
 --inkt:#1b1330; --wolk:#f7f4fc; --mist:#6d6486; --lijn:#e6e0f2;
 --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
 --ui:"Sora","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ---------- 1. Kruimelpad als bovenschrift ---------- */
body.single-product .woocommerce-breadcrumb{
 font-family:var(--ui); font-size:10px; font-weight:600; line-height:1.35;
 letter-spacing:.09em; text-transform:uppercase; color:var(--mist);
}
body.single-product .woocommerce-breadcrumb a{color:var(--paars); text-decoration:none}

/* ---------- 2. Titel en prijs in het kopfont ---------- */
body.single-product .product_title,
body.single-product .entry-title{
 font-family:var(--display); font-weight:900; text-transform:uppercase;
 letter-spacing:-.03em; line-height:1.04; color:var(--inkt);
 font-size:clamp(28px,7.4vw,44px);
}
body.single-product .summary > .price,
body.single-product .summary .woocommerce-variation-price .price{
 font-family:var(--display); font-weight:800; letter-spacing:-.02em;
 font-variant-numeric:tabular-nums; color:var(--paars);
}
body.single-product .summary del{opacity:.45; font-weight:700}

/* ---------- 3. Knoppen: dezelfde pil als op de homepage ---------- */
body.single-product .single_add_to_cart_button,
body.single-product .pnp-buy-now,
body.single-product .pnp-sticky-cart__btn{
 font-family:var(--ui); font-weight:700; letter-spacing:0;
 border-radius:999px; transition:transform .16s ease,background .16s ease;
}
body.single-product .single_add_to_cart_button:hover,
body.single-product .pnp-buy-now:hover{transform:translateY(-1px)}
body.single-product .pnp-buy-now,
body.single-product .pnp-sticky-cart__btn--buy{
 background:var(--paars); color:#fff; border:0;
 box-shadow:0 10px 26px rgba(97,52,176,.28);
}
body.single-product .pnp-sticky-cart__btn--cart{
 background:#fff; color:var(--paars); box-shadow:inset 0 0 0 1.6px var(--lijn);
}

/* ---------- 4. Galerij op een zachte wolk, zoals de kaarten ---------- */
body.single-product .woocommerce-product-gallery{
 border:1px solid var(--lijn); border-radius:22px; overflow:hidden;
}

/* ---------- 5. Vertrouwensstrook wordt een paarse band ---------- */
body.single-product .pnp-pdp-trust{
 position:relative; color:#fff; border-radius:24px; overflow:hidden;
 padding:30px 22px 26px;
 background:linear-gradient(168deg,var(--paars-diep) 0%,var(--paars) 46%,var(--lila) 100%);
}
body.single-product .pnp-pdp-trust .pnp-hero-badge{
 background:transparent; color:#fff; border:0;
 box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.42);
}
body.single-product .pnp-pdp-trust .pnp-hero-badge svg{color:var(--creme)}
body.single-product .pnp-pdp-trust .pnp-pay-chip{
 background:rgba(255,255,255,.12); color:#fff;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
body.single-product .pnp-pdp-trust .pnp-secure{color:var(--creme)}
body.single-product .pnp-pdp-ruo{color:rgba(255,255,255,.72)}

/* ---------- 6. Tabbladen: koppen in het kopfont, rustiger chips ---------- */
body.single-product .woocommerce-tabs .wc-tab h2,
body.single-product .woocommerce-tabs .wc-tab h3,
body.single-product .related > h2,
body.single-product .up-sells > h2{
 font-family:var(--display); font-weight:900; text-transform:uppercase;
 letter-spacing:-.02em; line-height:1.12; color:var(--inkt);
}
body.single-product .woocommerce-tabs .wc-tab h2,
body.single-product .related > h2,
body.single-product .up-sells > h2{font-size:clamp(22px,5.4vw,30px)}
body.single-product .woocommerce-tabs .wc-tab h3{font-size:clamp(17px,4.2vw,21px); text-transform:none; letter-spacing:-.01em}

/* Alleen het lettertype aanpassen. De kleur van de actieve tab zit al op de
   <li> als pil; hier ook een achtergrond zetten maakt er een vierkant blok van. */
body.single-product .wc-tabs li a{font-family:var(--ui); font-weight:700}

/* De gekleurde chips in de beschrijving trekken alle kanten op.
   Eén familie ervan maken: crème vlak, inktkleurige tekst. */
body.single-product .wc-tab p > span[style*="background"],
body.single-product .wc-tab span[style*="border-radius"]{
 background:var(--creme) !important; color:var(--inkt) !important;
 font-family:var(--ui) !important; font-weight:600 !important;
}

/* De gele waarschuwing wordt een crème blok met een paarse rand */
body.single-product .wc-tab div[style*="fff8e"],
body.single-product .wc-tab div[style*="FFF8E"],
body.single-product .wc-tab div[style*="fffbe"]{
 background:var(--creme) !important; border-left-color:var(--paars) !important;
 border-radius:0 14px 14px 0 !important;
}

/* ---------- 7. Labrapport-balk in dezelfde taal ---------- */
body.single-product .pnp-coa-link{
 border-radius:16px; border:1px solid var(--lijn); background:var(--wolk);
}
body.single-product .pnp-coa-link__txt strong,
body.single-product .pnp-coa-link__txt b{font-family:var(--ui); font-weight:700; color:var(--inkt)}

/* ---------- 8. Mobiel: banden mogen tot de rand lopen ---------- */
@media (max-width:600px){
 body.single-product .pnp-pdp-trust{
  border-radius:0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:20px; padding-right:20px;
 }
 body.single-product .woocommerce-product-gallery{border-radius:18px}
 /* het kruimelpad mag geen tweede regel pakken — dat kost de 5e USP */
 body.single-product .woocommerce-breadcrumb{font-size:9.5px; letter-spacing:.07em}
 /* 11px terugwinnen zodat het 5e verkooppunt boven de koopbalk blijft */
 body.single-product .woocommerce-product-gallery{margin-bottom:6px}
 /* de ruimte tussen de betaalbadges en de verkooppunten was ruim; 10px eraf
    geeft de vijfde punt weer lucht onder de koopbalk */
 body.single-product .summary .pnp-checklist{margin-top:6px}
}

/* ------------------------------------------------------------------
 * 9. Ritme
 *
 * De pagina oogde druk omdat er geen schaal in zat: boven de vouw stond alles
 * 0 tot 10px uit elkaar, eronder sprongen de gaten van 15 naar 122px.
 *
 * Twee dingen waren nodig.
 *
 * 1. De labrapport-balk had geen `order` en kwam daardoor als eerste in de
 *    kolom, pal onder de foto — terwijl hij juist een scroll verder hoort.
 *    Hij staat nu na het koopblok. Dat scheelt 64px boven de vouw en haalt
 *    de grootste bron van drukte weg.
 * 2. Sectie 22 van style.css zet de marges boven de vouw met !important.
 *    Wie daar overheen wil moet dezelfde specificiteit én !important
 *    gebruiken, anders gebeurt er niets. (Dat kostte hier een ronde.)
 *
 * Schaal: 4 / 8 / 16 / 24 / 48. Wat bij elkaar hoort staat dicht op elkaar;
 * tussen groepen zit één grote stap, overal dezelfde.
 * ------------------------------------------------------------------ */

/* --- tussen de secties: één stap, overal gelijk --- */
body.single-product .pnp-pdp-trust{margin:48px 0}
body.single-product .woocommerce-tabs{margin-top:48px}
body.single-product .related,
body.single-product .up-sells{margin-top:48px}

/* --- koppen krijgen lucht boven zich, niet eronder --- */
body.single-product .woocommerce-tabs .wc-tab h2,
body.single-product .related > h2,
body.single-product .up-sells > h2{margin:0 0 24px}
body.single-product .woocommerce-tabs .wc-tab h3{margin:32px 0 8px}
body.single-product .woocommerce-tabs .wc-tab p{margin:0 0 16px}

@media (max-width:600px){

 /* 1. Labrapport een scroll verder: na het koopblok (form.cart heeft order 8) */
 body.single-product .summary .pnp-coa-link{order:9; margin:24px 0 0}

 /* 2. Het ritme boven de vouw. Dezelfde specificiteit als sectie 22 plus
       !important, anders wint die. */
 body.single-product .summary .woocommerce-breadcrumb{margin-bottom:4px !important}
 body.single-product .summary .product_title{margin-bottom:8px !important}
 body.single-product .summary > .price{margin-bottom:18px !important}
 body.single-product .summary .pnp-pay-note{margin-bottom:16px !important}
 body.single-product .summary .pnp-checklist{margin-top:0 !important}
 body.single-product .summary .pnp-checklist li{margin-bottom:7px !important; line-height:1.4}

 /* de foto mag dichter op het kruimelpad nu de balk daar weg is */
 body.single-product .woocommerce-product-gallery{margin-bottom:16px}

 /* onder de vouw een tandje kleiner dan op desktop.
    LET OP: de zijmarges moeten negatief blijven, anders verliest de band zijn
    volledige breedte — `margin:40px 0` sloopt de full-bleed uit sectie 8. */
 body.single-product .pnp-pdp-trust{margin:40px calc(50% - 50vw)}
 body.single-product .woocommerce-tabs,
 body.single-product .related{margin-top:40px}
}