/* ------------------------------------------------------------------
 * Peptide Europe — gedeelde stijl voor de nieuwe pagina's
 *
 * Eén bestand voor alle pagina's die in de nieuwe stijl staan. Alles hangt
 * onder .pnp-nieuw, zodat het niets van het oude thema raakt: een pagina die
 * nog niet om is, verandert niet.
 *
 * Palet en typografie komen uit de campagne-creatives; Sora is het kopfont van
 * het thema zelf, Montserrat dat van de creatives, Inter de lopende tekst.
 * ------------------------------------------------------------------ */

/* ---------- tokens: paars verloop, crème accent, groen voor kopen ---------- */
.pnp-nieuw{--paars-diep:#6d4915;--paars:#ba822f;--lila:#f1c178;--creme:#f8eed2;
 --groen:#0e9e70;--groen-diep:#0b6f50;--inkt:#3e2e16;--wolk:#f7f4fc;--mist:#ae9b7f;
 --lijn:#fff6ea;--wit:#fff;
 --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
 --ui:"Sora","Inter",-apple-system,BlinkMacSystemFont,sans-serif}
.pnp-nieuw *,.pnp-nieuw *::before,.pnp-nieuw *::after{box-sizing:border-box}
.pnp-nieuw img{max-width:100%;height:auto;display:block}
.pnp-nieuw .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}

.pnp-nieuw .kop{font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:1.04;
 text-transform:uppercase;margin:0;color:inherit}
.pnp-nieuw .kop--xl{font-size:clamp(36px,9.6vw,68px);line-height:1.06}
.pnp-nieuw .kop--l{font-size:clamp(27px,6vw,42px);line-height:1.05}
.pnp-nieuw .kop--m{font-size:clamp(22px,4.6vw,30px);letter-spacing:-.02em;line-height:1.15}
.pnp-nieuw .label{font-family:var(--ui);font-weight:600;font-size:11px;line-height:1.4;
 letter-spacing:.16em;text-transform:uppercase;margin:0}
.pnp-nieuw .lood{font-size:clamp(15px,3.9vw,18px);line-height:1.65;margin:0}
.pnp-nieuw .prijs{font-variant-numeric:tabular-nums}

.pnp-nieuw .knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 padding:16px 26px;border:0;border-radius:999px;font-family:var(--ui);font-size:15.5px;
 font-weight:700;line-height:1;text-decoration:none;cursor:pointer;
 transition:transform .16s ease,background .16s ease}
.pnp-nieuw .knop:hover{transform:translateY(-1px)}
.pnp-nieuw .knop--creme{background:var(--creme);color:#4b391f;box-shadow:0 10px 26px rgba(0,0,0,.16)}
.pnp-nieuw .knop--creme:hover{background:#fff6df;color:#4b391f}
.pnp-nieuw .knop--groen{background:var(--groen);color:#fff}
.pnp-nieuw .knop--groen:hover{background:var(--groen-diep);color:#fff}
.pnp-nieuw .knop--lijn{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.pnp-nieuw .knop--lijn:hover{background:rgba(255,255,255,.08);color:#fff}

/* ---------- paarse band ---------- */
.pnp-nieuw .band{position:relative;overflow:hidden;color:#fff;
 background:linear-gradient(168deg,var(--paars-diep) 0%,var(--paars) 46%,var(--lila) 100%)}
.pnp-nieuw .band__geest{position:absolute;left:50%;transform:translateX(-50%);
 font-family:var(--display);font-weight:900;white-space:nowrap;letter-spacing:-.02em;
 pointer-events:none;user-select:none;color:rgba(255,255,255,.06)}
@supports((-webkit-text-stroke:1px white)){
 .pnp-nieuw .band__geest{color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.17)}}
.pnp-nieuw .band__licht{position:absolute;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 68%)}

/* ---------- hero ---------- */
.pnp-nieuw .hero{padding:clamp(98px,21vw,138px) 0 clamp(30px,7vw,64px)}
.pnp-nieuw .hero__licht{width:clamp(240px,72vw,460px);height:clamp(240px,72vw,460px);
 top:clamp(150px,40vw,190px);left:50%;transform:translateX(-50%)}
.pnp-nieuw .hero__in{position:relative;display:grid;gap:clamp(22px,5vw,34px)}
.pnp-nieuw .hero__tekst{text-align:center;display:grid;gap:16px;justify-items:center}
.pnp-nieuw .hero__label{color:var(--creme)}
.pnp-nieuw .hero .lood{color:rgba(255,255,255,.9);max-width:38ch}
.pnp-nieuw .hero__knoppen{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.pnp-nieuw .hero__meta{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;
 font-size:12.5px;color:rgba(255,255,255,.86);font-weight:500}
.pnp-nieuw .hero__meta i{font-style:normal;color:var(--creme);margin-right:5px;font-weight:800}
/* Vier vertrouwde widgets, alle vier even hoog zodat het een nette rij is */
.pnp-nieuw .hero__betaal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.pnp-nieuw .hero__betaal > *{height:32px;display:inline-flex;align-items:center;justify-content:center;
 border-radius:8px;font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:-.01em;
 padding:0 11px;box-sizing:border-box}
.pnp-nieuw .hero__betaal img.ideal{height:32px;width:auto;padding:0;border-radius:8px;display:block}
/* PostNL heeft z'n eigen oranje vorm; een wit vakje eromheen is overbodig. */
.pnp-nieuw .hero__betaal img.postnl{height:32px;width:auto;padding:0;display:block;background:none}
.pnp-nieuw .hero__betaal .w-apple{background:#000;color:#fff;gap:3px}
.pnp-nieuw .hero__betaal .w-apple svg{width:15px;height:15px;margin-top:-2px}
.pnp-nieuw .hero__betaal .w-klarna{background:#FFB3C7;color:#17120F;font-weight:800}
@media(min-width:900px){ .pnp-nieuw .hero__betaal{justify-content:flex-start} }
/* Kader net zo hoog als het grootste flesje: eerder stak het middelste er 12%
   bovenuit en dekte het de betaalwidgets erboven af. */
.pnp-nieuw .hero__flesjes{position:relative;justify-self:center;width:min(100%,450px);
 height:clamp(302px,82vw,424px)}
.pnp-nieuw .hero__flesjes img{position:absolute;bottom:0;width:auto;z-index:1;
 filter:drop-shadow(0 20px 26px rgba(20,6,48,.46))}
.pnp-nieuw .fl--1{left:0;height:64%;transform:rotate(-9deg);animation:pnp-zweef-a 7.2s ease-in-out infinite}
.pnp-nieuw .fl--2{left:27%;height:100%;transform:rotate(2deg);z-index:2;animation:pnp-zweef-b 8.6s ease-in-out infinite}
.pnp-nieuw .fl--3{right:0;height:60%;transform:rotate(11deg);animation:pnp-zweef-c 7.8s ease-in-out infinite}
@keyframes pnp-zweef-a{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-10.5deg) translateY(-13px)}}
@keyframes pnp-zweef-b{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(3deg) translateY(-18px)}}
@keyframes pnp-zweef-c{0%,100%{transform:rotate(11deg) translateY(0)}50%{transform:rotate(9.5deg) translateY(-10px)}}
@media(min-width:900px){
 .pnp-nieuw .hero__in{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px}
 .pnp-nieuw .hero__tekst{text-align:left;justify-items:start}
 .pnp-nieuw .hero__knoppen,.pnp-nieuw .hero__meta{justify-content:flex-start}
}

/* ---------- vertrouwensstrook ---------- */
.pnp-nieuw .strook{background:var(--wit);border-bottom:1px solid var(--lijn);padding:clamp(22px,5vw,30px) 0}
.pnp-nieuw .strook__rij{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 14px}
.pnp-nieuw .feit{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.pnp-nieuw .feit svg{width:26px;height:26px;color:var(--groen)}
.pnp-nieuw .feit b{display:block;font-family:var(--ui);font-size:13.5px;font-weight:600;line-height:1.3;color:var(--inkt)}
.pnp-nieuw .feit span{font-size:12px;color:var(--mist);line-height:1.45}
@media(min-width:760px){ .pnp-nieuw .strook__rij{grid-template-columns:repeat(4,1fr);gap:22px} }

/* ---------- secties ---------- */
.pnp-nieuw .sectie{padding:clamp(38px,8vw,66px) 0;background:var(--wolk)}
.pnp-nieuw .sectie__kop{display:grid;gap:11px;margin-bottom:clamp(22px,5vw,30px);max-width:52ch}
.pnp-nieuw .sectie__kop .label{color:var(--paars)}
.pnp-nieuw .sectie__kop p{margin:0;color:var(--mist);font-size:15px}
.pnp-nieuw .sectie__kop .kop{color:var(--inkt)}

/* ---------- productkaarten ---------- */
.pnp-nieuw .rooster{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:620px){ .pnp-nieuw .rooster{gap:18px} }
@media(min-width:960px){ .pnp-nieuw .rooster{grid-template-columns:repeat(4,1fr)} }
.pnp-nieuw .kaart{position:relative;display:flex;flex-direction:column;background:var(--wit);
 border:1px solid var(--lijn);border-radius:20px;overflow:hidden;
 transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.pnp-nieuw .kaart:hover{border-color:var(--lila);box-shadow:0 14px 34px rgba(44,20,84,.1);transform:translateY(-2px)}
.pnp-nieuw .kaart__beeld{position:relative;background:linear-gradient(180deg,#fbfaff 0%,#fff9f0 100%);
 padding:14px 14px 0;display:flex;align-items:flex-end;justify-content:center;min-height:132px;
 border-bottom:1px solid var(--lijn)}
.pnp-nieuw .kaart__beeld img{width:min(100%,124px)}
.pnp-nieuw .kaart__badges{position:absolute;top:9px;left:9px;right:9px;display:flex;flex-wrap:wrap;gap:5px}
.pnp-nieuw .badge{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;padding:4px 8px;border-radius:999px;line-height:1.2}
.pnp-nieuw .badge--korting{background:#d92b1f;color:#fff}
.pnp-nieuw .badge--lab{background:#e6f7ef;color:var(--groen-diep);box-shadow:inset 0 0 0 1px #bfe8d6}
.pnp-nieuw .kaart__body{display:flex;flex-direction:column;gap:8px;padding:13px 14px 15px;flex:1}
.pnp-nieuw .kaart__naam{font-family:var(--ui);font-weight:600;font-size:14.5px;line-height:1.25;
 margin:0;color:var(--inkt);text-decoration:none}
.pnp-nieuw .kaart__zuiver{font-size:11.5px;color:var(--mist);margin:0}
.pnp-nieuw .kaart__zuiver b{color:var(--groen-diep);font-weight:600}
.pnp-nieuw .kaart__prijs{margin-top:auto;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pnp-nieuw .kaart__prijs strong{font-family:var(--display);font-weight:800;font-size:19px;color:var(--inkt)}
.pnp-nieuw .kaart__prijs del{color:var(--mist);font-size:13px}
.pnp-nieuw .kaart__prijs em{font-style:normal;font-size:11.5px;color:var(--mist)}
.pnp-nieuw .kaart .knop{align-self:flex-start;padding:9px 15px;font-size:12.5px;font-weight:600}

/* ---------- betaalwidgets ---------- */
.pnp-nieuw .betaalrij{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:22px 0 0}
.pnp-nieuw .betaalrij img{height:33px;width:auto;border-radius:8px}
.pnp-nieuw .paylogo{display:inline-flex;align-items:center;gap:3px;min-height:32px;padding:5px 12px;
 border-radius:8px;font-family:var(--ui);font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.pnp-nieuw .paylogo--apple{background:#000;color:#fff}
.pnp-nieuw .paylogo--apple svg{width:15px;height:15px;margin-top:-2px}
.pnp-nieuw .paylogo--klarna{background:#FFB3C7;color:#17120F;font-weight:800}
.pnp-nieuw .paylogo--neutraal{background:var(--wit);color:#7c6b52;font-size:12px;
 box-shadow:inset 0 0 0 1px var(--lijn)}

/* ---------- labrapport-band ---------- */
.pnp-nieuw .lab{background:linear-gradient(160deg,#0b6f50 0%,#0e9e70 100%);color:#fff;
 border-radius:26px;padding:clamp(24px,6vw,40px);display:grid;gap:20px;
 box-shadow:0 18px 44px rgba(11,111,80,.22)}
.pnp-nieuw .lab .label{color:#bff0dd}
.pnp-nieuw .lab .lood{color:rgba(255,255,255,.92);max-width:46ch}
.pnp-nieuw .lab__pillen{display:flex;flex-wrap:wrap;gap:8px}
/* De knop is inline-flex; zonder deze grid plakte hij op mobiel met 0px tegen
   de gewrapte pillen aan. Stond eerder alleen in de 820px-media-query. */
.pnp-nieuw .lab__zij{display:grid;gap:14px;justify-items:start}
.pnp-nieuw .pil{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
 background:rgba(255,255,255,.14);font-size:12.5px;font-weight:600;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pnp-nieuw .pil b{font-variant-numeric:tabular-nums;font-weight:800}
@media(min-width:820px){
 .pnp-nieuw .lab{grid-template-columns:1.15fr .85fr;align-items:center;gap:34px}
}

/* ---------- cadeau-band ---------- */
.pnp-nieuw .cadeau{padding:clamp(34px,7vw,58px) 0}
.pnp-nieuw .cadeau__licht{width:clamp(220px,62vw,380px);height:clamp(220px,62vw,380px);
 top:clamp(40px,14vw,70px);left:50%;transform:translateX(-50%)}
.pnp-nieuw .cadeau__in{position:relative;display:grid;gap:22px;justify-items:center;text-align:center}
.pnp-nieuw .cadeau__flesje{width:clamp(104px,30vw,152px);filter:drop-shadow(0 20px 26px rgba(20,6,48,.42))}
.pnp-nieuw .cadeau .lood{color:rgba(255,255,255,.9);max-width:40ch}
.pnp-nieuw .cadeau__prijs{display:flex;align-items:baseline;gap:12px;justify-content:center}
.pnp-nieuw .cadeau__prijs del{color:rgba(255,255,255,.6);font-size:19px}
.pnp-nieuw .cadeau__prijs strong{font-family:var(--display);font-weight:900;
 font-size:clamp(30px,8vw,44px);color:var(--creme);letter-spacing:-.02em}
@media(min-width:820px){
 .pnp-nieuw .cadeau__in{grid-template-columns:auto 1fr;text-align:left;justify-items:start;
  align-items:center;gap:38px}
 .pnp-nieuw .cadeau__prijs{justify-content:flex-start}
}

/* ---------- beweging uit bij voorkeur ---------- */
@media(prefers-reduced-motion:reduce){
 .pnp-nieuw .fl--1,.pnp-nieuw .fl--2,.pnp-nieuw .fl--3{animation:none!important}
 .pnp-nieuw .knop:hover,.pnp-nieuw .kaart:hover{transform:none}
}

/* ==================================================================
 * Assortimentspagina
 * ================================================================== */

/* ---------- paarse paginakop ---------- */
/* Op de winkel zit de kop binnen de contentcontainer, die al bovenruimte heeft
   voor de zwevende balk. Zonder deze regel staat die ruimte er twee keer.
   En hij moet over de volle breedte: daarom uit de container breken. */
.pnp-nieuw .pkop--shop{
 /* Het thema geeft .site-content bovenruimte voor de zwevende balk. Die viel
    binnen deze band en gaf een lege paarse kop. We trekken de band omhoog tot
    onder de balk en zetten de ruimte in de padding, net als de hero. */
 margin-top:calc(-1 * (var(--pnp-header-h, 74px) + 16px));
 padding-top:calc(var(--pnp-header-h, 74px) + clamp(26px,6vw,44px));
 margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw}
.pnp-nieuw .pkop--shop .wrap{max-width:1120px;margin-inline:auto}
.pnp-nieuw .pkop{padding:clamp(96px,20vw,124px) 0 clamp(26px,6vw,42px)}
.pnp-nieuw .pkop__licht{width:clamp(220px,60vw,420px);height:clamp(220px,60vw,420px);
 top:-16%;right:-12%;left:auto;transform:none}
.pnp-nieuw .pkop__in{position:relative;display:grid;gap:13px;max-width:46ch}
.pnp-nieuw .pkop .lood{color:rgba(255,255,255,.9)}
.pnp-nieuw .pkruimels{font-family:var(--ui);font-size:12px;color:rgba(255,255,255,.7);
 display:flex;gap:7px;flex-wrap:wrap}
.pnp-nieuw .pkruimels a{color:rgba(255,255,255,.86);text-decoration:none}
.pnp-nieuw .pkruimels a:hover{text-decoration:underline}
.pnp-nieuw .pkop__cijfers{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px;
 font-family:var(--ui);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.86)}
.pnp-nieuw .pkop__cijfers b{color:var(--creme);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- uitverkocht ---------- */
.pnp-nieuw .knop--uit{background:var(--wolk);color:var(--mist);
 box-shadow:inset 0 0 0 1px var(--lijn);cursor:default}
.pnp-nieuw .knop--uit:hover{transform:none;background:var(--wolk);color:var(--mist)}

/* ==================================================================
 * WooCommerce-winkel in de nieuwe stijl
 *
 * De kaart zelf komt uit woocommerce/content-product.php; hieronder alleen
 * het raster eromheen en de eigen onderdelen van WooCommerce (sorteren,
 * aantalmelding, paginering).
 * ================================================================== */

.pnp-shop + .woocommerce, body.woocommerce-shop .site-content{background:var(--wolk)}

/* Astra zet 58px marge boven de inhoud en WooCommerce rendert nog een lege
   paginakop (de titel zelf zetten we uit in pnp-stijl.php). Samen gaf dat 90px
   wit tussen de paarse kop en de eerste kaarten. De kop levert de ruimte al. */
/* Astra regelt dit met een id-selector (.ast-plain-container.ast-no-sidebar
   #primary{margin-top:3.6em}). Daar komt een klasseselector niet bovenop, en
   die id-combinatie namaken breekt zodra de zijbalk-instelling wijzigt.
   Vandaar !important: kort en houdt het bij een wijziging in het thema heel. */
body.woocommerce-shop #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary{margin-top:clamp(18px,5vw,30px)!important}
body.woocommerce-shop .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header,
body.tax-product_tag .woocommerce-products-header{display:none}

body.woocommerce-shop ul.products,
body.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(2,1fr);
 gap:12px;margin:0 0 26px;padding:0;list-style:none}
@media(min-width:620px){ body.woocommerce ul.products{gap:18px} }
@media(min-width:720px){ body.woocommerce ul.products{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ body.woocommerce ul.products{grid-template-columns:repeat(4,1fr)} }

/* Astra en WooCommerce zetten breedtes en floats op de li; die moeten weg,
   anders vecht dat met het raster. */
body.woocommerce ul.products li.product{width:auto!important;margin:0!important;
 float:none!important;clear:none!important;padding:0!important;display:flex}
body.woocommerce ul.products li.product::before,
body.woocommerce ul.products li.product::after{display:none!important}
body.woocommerce ul.products li.product > .kaart{width:100%}

/* sorteren en aantalmelding */
body.woocommerce .woocommerce-result-count{font-family:var(--ui);font-size:13px;
 color:#ae9b7f;margin:0 0 14px}
body.woocommerce .woocommerce-ordering select{font-family:var(--ui);font-size:13px;
 font-weight:600;color:#736856;padding:9px 13px;border:1px solid #fff6ea;border-radius:999px;
 background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
body.woocommerce .woocommerce-ordering{margin:0 0 18px}

/* paginering */
body.woocommerce .woocommerce-pagination ul{display:flex;gap:6px;flex-wrap:wrap;
 border:0!important;margin:8px 0 0;padding:0}
body.woocommerce .woocommerce-pagination ul li{border:0!important;margin:0}
body.woocommerce .woocommerce-pagination a.page-numbers,
body.woocommerce .woocommerce-pagination span.page-numbers{display:inline-flex;
 align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
 border-radius:999px;font-family:var(--ui);font-size:13.5px;font-weight:600;
 text-decoration:none;color:#736856;background:#fff;border:1px solid #fff6ea}
body.woocommerce .woocommerce-pagination span.current{background:#3e2e16;color:#fff;
 border-color:#3e2e16}

/* ---------- bundelrotatie in de hero ----------
 * Hergebruikt .hero__flesjes en fl--1/2/3, dus de opstelling en de
 * zweefanimaties zijn identiek aan de vaste versie die hier stond.
 * Alleen: er staan nu meerdere sets onder elkaar en er rouleert er één. */
.pnp-nieuw .hero__bundels{position:relative;justify-self:center;width:min(100%,450px)}
.pnp-nieuw .hero__bundel{display:none}
.pnp-nieuw .hero__bundel.is-aan{display:block;animation:pnp-bundel-in .45s ease both}
@keyframes pnp-bundel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* de knop staat op de middelste fles */
.pnp-nieuw .bundel__knop{position:absolute;left:50%;bottom:11%;z-index:3;
 transform:translateX(-50%);white-space:nowrap;padding:13px 22px;font-size:14.5px}
.pnp-nieuw .bundel__knop:hover{transform:translateX(-50%) translateY(-1px)}

.pnp-nieuw .bundel__naam{margin:16px 0 0;text-align:center;font-family:var(--ui);
 font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
 color:rgba(255,255,255,.78)}

/* twee flesjes: de eerste groot, de tweede kleiner ernaast */
.pnp-nieuw .hero__flesjes--duo .fl--2{left:9%}
.pnp-nieuw .hero__flesjes--duo .fl--3{right:3%;height:72%}

.pnp-nieuw .bundel__punten{display:flex;gap:8px;justify-content:center;margin-top:16px}
.pnp-nieuw .bundel__punt{width:8px;height:8px;padding:0;border:0;border-radius:999px;
 cursor:pointer;background:rgba(255,255,255,.32);
 transition:background .22s ease,width .22s ease}
.pnp-nieuw .bundel__punt:hover{background:rgba(255,255,255,.55)}
.pnp-nieuw .bundel__punt.is-aan{background:var(--creme);width:24px}

@media(prefers-reduced-motion:reduce){
 .pnp-nieuw .hero__bundel.is-aan{animation:none}
}

/* ---------- knoppenrij in de assortiments- en bundelkop ---------- */
.pnp-nieuw .pkop__knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pnp-nieuw .pkop__knoppen .knop{padding:14px 24px;font-size:15px}
@media(max-width:600px){
 .pnp-nieuw .pkop__knoppen .knop{width:100%;justify-content:center}
}

/* ------------------------------------------------------------------
 * Actiemelding in de hero
 *
 * Neemt tijdens de staffelactie de plek van de lood-tekst in. Zelfde kopfont
 * als de titel erboven, maar duidelijk kleiner zodat de rangorde klopt.
 * Amber in plaats van creme: creme is de knopkleur die er direct onder staat,
 * en twee keer dezelfde kleur laat de melding met de knop concurreren.
 * ------------------------------------------------------------------ */

.pnp-nieuw .hero__actie{--amber:#ffc94d; display:grid; gap:7px; max-width:42ch}
@media(min-width:900px){ .pnp-nieuw .hero__actie{justify-items:start} }

.pnp-nieuw .actie__nu{
 margin:0; display:inline-flex; align-items:center; gap:8px;
 font-family:var(--ui); font-size:11px; font-weight:800; line-height:1;
 letter-spacing:.12em; text-transform:uppercase; color:var(--amber);
}
.pnp-nieuw .actie__nu::before{
 content:""; width:8px; height:8px; border-radius:50%;
 background:var(--amber); box-shadow:0 0 0 0 rgba(255,201,77,.75);
 animation:pnp-puls 2s ease-out infinite;
}
@keyframes pnp-puls{
 70%{box-shadow:0 0 0 9px rgba(255,201,77,0)}
 100%{box-shadow:0 0 0 0 rgba(255,201,77,0)}
}

.pnp-nieuw .actie__kop{
 margin:0; font-family:var(--display); font-weight:800;
 font-size:clamp(19px,4.6vw,27px); line-height:1.14; letter-spacing:-.015em;
 color:var(--amber); text-wrap:balance;
}

.pnp-nieuw .actie__uitleg{
 margin:0; font-size:clamp(14px,3.6vw,16px); line-height:1.6;
 color:rgba(255,255,255,.88);
}

@media(prefers-reduced-motion:reduce){
 .pnp-nieuw .actie__nu::before{animation:none}
}

/* ---------- flesjes vrijzetten van het verloop ----------
   De doppen zijn amber en het verloop is amber; op de lichte kant van de
   band liepen ze in elkaar over. De hero-band loopt daarom minder ver op
   naar licht, en achter het flesjescluster ligt een zachte diepe gloed die
   het glas en de dop weer losmaakt van de achtergrond. */
.pnp-nieuw .hero{
 background:linear-gradient(168deg,#5e3d10 0%,#a86f22 46%,#cf9540 100%);
}
/* LET OP: .hero__flesjes img staat op position:absolute (regel ~83). Die niet
   overschrijven — doe je dat, dan schieten de flesjes uit hun opstelling. */
.pnp-nieuw .hero__flesjes::before{
 content:"";position:absolute;inset:-8% -6% -4%;z-index:0;pointer-events:none;
 background:radial-gradient(58% 52% at 50% 46%,rgba(62,38,8,.42) 0%,rgba(62,38,8,.16) 52%,rgba(62,38,8,0) 76%);
 filter:blur(2px);
}

/* Hetzelfde trucje bij het cadeauflesje onderaan de pagina. */
.pnp-nieuw .cadeau__in{position:relative}
.pnp-nieuw .cadeau__flesje{position:relative;z-index:1;
 filter:drop-shadow(0 18px 34px rgba(50,30,6,.34))}

/* ── Kaartknoppen buiten .pnp-nieuw — 25 sep 2026 ──────────────────────
   De sectie "Gerelateerde producten" onderaan een productpagina valt
   buiten de .pnp-nieuw-wrapper; die wordt alleen in front-page.php
   geopend. Daardoor misten die kaarten zowel de merkvariabelen als de
   knopstijl, en viel "Kies je dosering" terug op de standaard linkkleur
   van de browser — blauw. Dit zijn dezelfde regels, maar geankerd op
   .kaart, dat alleen in onze eigen kaartmarkup voorkomt: het lekt dus
   niet naar Astra of WooCommerce. De specificiteit blijft lager dan
   ".pnp-nieuw .kaart .knop", dus op de homepage en de shop verandert
   er niets. */
.kaart{--groen:#0e9e70;--groen-diep:#0b6f50;--wolk:#f7f4fc;--mist:#ae9b7f}
.kaart .knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 align-self:flex-start;padding:9px 15px;border:0;border-radius:999px;
 font-size:12.5px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
 transition:transform .16s ease,background .16s ease}
.kaart .knop:hover{transform:translateY(-1px)}
.kaart .knop--groen{background:var(--groen);color:#fff}
.kaart .knop--groen:hover{background:var(--groen-diep);color:#fff}
.kaart .knop--uit{background:var(--wolk);color:var(--mist);
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);cursor:default}
.kaart .knop--uit:hover{transform:none;background:var(--wolk);color:var(--mist)}

/* ══ Hero-compositie — 30 september 2026 (Peptide Europe) ═══════════════════════════════════
   De hero was 853 px op desktop en ruim 1000 px op mobiel, waarbij het eerste
   flesje pas rond y=820 begon. Deze regels staan bewust achteraan het bestand,
   zodat ze de oudere hero-regels overschrijven zonder dat daar iets weg hoeft.

   Drie vaste flesjes op een ondergrond in plaats van een roulerende carousel:
   BPC-157 links, Retatrutide groot in het midden, GHK-CU rechts.
   ════════════════════════════════════════════════════════════════════════ */

/* ── ruimte terugbrengen ─────────────────────────────────────────────── */
.pnp-nieuw .hero{padding:clamp(88px,12vw,108px) 0 clamp(18px,3.4vw,34px)}
.pnp-nieuw .hero__in{gap:clamp(14px,3vw,26px)}
.pnp-nieuw .hero__tekst{gap:clamp(9px,1.9vw,13px)}
/* De kop is altijd drie regels. Door die hoogte vast te zetten kan het
   inladen van het weblettertype de rest van de pagina niet meer verschuiven —
   dat was de bron van de layout shift rond 1024px. */
.pnp-nieuw .hero .kop--xl{font-size:clamp(31px,7.2vw,56px);line-height:1.03;
  min-height:3.09em}
.pnp-nieuw .hero__lood{max-width:34ch;font-size:clamp(14.5px,3.3vw,17px);line-height:1.55}
.pnp-nieuw .hero__betaal{margin-top:0}

/* De primaire knop mag duidelijk zwaarder wegen dan de secundaire. */
.pnp-nieuw .hero__knoppen .knop--creme{padding:15px 26px;font-size:16px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.pnp-nieuw .hero__knoppen .knop--lijn{padding:14px 20px;font-size:15px;opacity:.92}

/* ── de compositie ───────────────────────────────────────────────────── */
.pnp-nieuw .hero__beeld{position:relative;justify-self:center;width:min(100%,420px);
  aspect-ratio:420/318;isolation:isolate}

/* Vaste beeldverhouding op de <picture> zelf: dan staat de hoogte vast vóór
   het beeld is gedecodeerd en kan er niets meer verspringen. Alle flesjes
   delen dezelfde verhouding (243x520 en 374x800 zijn beide ~1:2,14). */
.pnp-nieuw .hero__beeld .fles{position:absolute;bottom:9%;display:block;line-height:0;
  aspect-ratio:243/520}
.pnp-nieuw .hero__beeld .fles img{display:block;width:100%;height:100%;object-fit:contain}

/* Zijflesjes iets kleiner en licht gedraaid; het middelste ruim een vijfde
   groter, zodat Retatrutide het beeld draagt. */
.pnp-nieuw .hero__beeld .fles--links {left:1%;width:27%;z-index:1;transform:rotate(-6deg)}
.pnp-nieuw .hero__beeld .fles--rechts{right:1%;width:27%;z-index:1;transform:rotate(6deg)}
.pnp-nieuw .hero__beeld .fles--midden{left:50%;width:33%;z-index:3;transform:translateX(-50%)}

/* Schaduw valt naar beneden en opzij, zodat de flesjes op iets staan in
   plaats van te zweven. */
.pnp-nieuw .hero__beeld .fles--midden img{filter:drop-shadow(0 16px 20px rgba(40,24,6,.50))}
.pnp-nieuw .hero__beeld .fles--links  img{filter:drop-shadow(-6px 14px 16px rgba(40,24,6,.42))}
.pnp-nieuw .hero__beeld .fles--rechts img{filter:drop-shadow(6px 14px 16px rgba(40,24,6,.42))}

/* Contactschaduw direct onder elk flesje. */
.pnp-nieuw .hero__beeld .fles::after{content:"";position:absolute;left:50%;bottom:-6%;
  transform:translateX(-50%);width:120%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(36,21,5,.55),rgba(36,21,5,0));pointer-events:none}
.pnp-nieuw .hero__beeld .fles--midden::after{width:135%;height:11%;bottom:-7%}

/* ── glazen laboratoriumondergrond ───────────────────────────────────── */
.pnp-nieuw .hero__vloer{position:absolute;left:50%;bottom:4.5%;transform:translateX(-50%);
  width:90%;height:15%;border-radius:50%;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 100% at 50% 32%,rgba(255,214,150,.30),rgba(255,206,132,.09) 58%,rgba(255,206,132,0) 80%),
    radial-gradient(70% 100% at 50% 100%,rgba(0,0,0,.34),rgba(0,0,0,0) 70%);
  box-shadow:0 1px 0 rgba(255,226,180,.20) inset}

/* ── decoratief chromatogram, zonder meetwaarden ─────────────────────── */
.pnp-nieuw .hero__coa{position:absolute;left:4%;right:4%;top:8%;bottom:22%;z-index:0;
  opacity:.16;pointer-events:none;
  background-repeat:no-repeat;background-position:center bottom;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' fill='none'%3E%3Cg stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 180 H396' opacity='.55'/%3E%3Cpath d='M4 176 C60 176 74 150 92 150 C110 150 118 176 150 176 C186 176 196 60 218 60 C240 60 250 176 286 176 C314 176 322 120 340 120 C358 120 366 176 396 176' opacity='.9'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='.8' opacity='.3'%3E%3Cpath d='M4 40 H396 M4 80 H396 M4 120 H396'/%3E%3C/g%3E%3C/svg%3E")}

/* ── desktop: tekst links, compositie rechts ─────────────────────────── */
@media(min-width:900px){
  .pnp-nieuw .hero{padding:clamp(84px,8vw,104px) 0 clamp(26px,3vw,44px)}
  .pnp-nieuw .hero__in{grid-template-columns:48% 52%;align-items:center;gap:clamp(24px,3vw,40px)}
  .pnp-nieuw .hero__beeld{width:min(100%,460px);justify-self:end}
  .pnp-nieuw .hero__lood{max-width:38ch}
}

/* Tussen 900 en 1100px zit de zwevende kop dichter op de tekst; daar iets
   meer lucht, anders staat de eyebrow er bijna tegenaan. */
@media(min-width:900px) and (max-width:1100px){
  .pnp-nieuw .hero{padding-top:126px}
}

/* ── mobiel: beeld meteen ná de knoppen ──────────────────────────────── */
@media(max-width:899px){
  /* Strakker bovenin, zodat het middelste flesje binnen het eerste scherm valt. */
  /* De aankondigingsbalk plus de zwevende kop zijn samen tot 151px hoog op
     375px (de balk breekt daar over twee regels). Daar moet de eyebrow met
     marge onder blijven, anders valt hij achter de balk. */
  .pnp-nieuw .hero{padding:clamp(78px,15vw,92px) 0 clamp(16px,3vw,28px)}
  .pnp-nieuw .hero__in{gap:clamp(11px,2.4vw,18px)}
  .pnp-nieuw .hero .kop--xl{font-size:clamp(28px,7vw,44px);line-height:1.0}
  .pnp-nieuw .hero__label{font-size:11px;letter-spacing:.12em}
  .pnp-nieuw .hero__in{grid-template-columns:1fr}
  /* De tekstkolom lost op in het raster, zodat het beeld tussen de knoppen
     en de vertrouwenspunten kan staan in plaats van helemaal onderaan. */
  .pnp-nieuw .hero__tekst{display:contents}
  .pnp-nieuw .hero__label   {order:1;text-align:center}
  .pnp-nieuw .hero .kop--xl {order:2;text-align:center;margin:0}
  .pnp-nieuw .hero__lood    {order:3;text-align:center;margin:0 auto}
  .pnp-nieuw .hero__knoppen {order:4}
  .pnp-nieuw .hero__beeld   {order:5;width:min(100%,330px);margin-top:2px}
  .pnp-nieuw .hero__betaal  {order:6}
  .pnp-nieuw .hero__meta    {order:7;gap:4px 12px;font-size:13px}
  .pnp-nieuw .hero__knoppen .knop{min-height:46px;display:inline-flex;align-items:center}
}

@media(max-width:420px){
  .pnp-nieuw .hero{padding:96px 0 16px}
  .pnp-nieuw .hero__beeld{width:min(100%,300px)}
  .pnp-nieuw .hero__meta{font-size:12.5px}
}

/* Geen zweefanimatie meer: die liet de flesjes los van de ondergrond staan
   en veroorzaakte onnodig werk bij elke frame. */
.pnp-nieuw .hero__beeld .fles{animation:none}
@media(prefers-reduced-motion:reduce){
  .pnp-nieuw .hero__beeld .fles{animation:none!important;transition:none!important}
}

/* ---------- pnp_fotobooth_kaart (14 okt 2026): productfoto vult de kaart van rand tot rand ----------
   De nieuwe lichtbak-fotos zijn echte fotos met eigen achtergrond; die horen niet als los
   vierkantje in een gekleurd vlak, maar als beeldvlak bovenin de kaart, met de ronding van de kaart. */
.pnp-nieuw .kaart__beeld{padding:0;min-height:0;background:#f3f1f6;border-bottom:1px solid var(--lijn);
 aspect-ratio:1/1;overflow:hidden;display:block}
.pnp-nieuw .kaart__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 56%;display:block}
.pnp-nieuw .kaart__badges{z-index:2}