/* ------------------------------------------------------------------
 * Peptide Nederland — 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:#2c1454;--paars:#6134b0;--lila:#a078e4;--creme:#f8eed2;
 --groen:#0e9e70;--groen-diep:#0b6f50;--inkt:#1b1330;--wolk:#f7f4fc;--mist:#6d6486;
 --lijn:#e6e0f2;--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:#231a3a;box-shadow:0 10px 26px rgba(0,0,0,.16)}
.pnp-nieuw .knop--creme:hover{background:#fff6df;color:#231a3a}
.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%,#f2edfa 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:#4a4160;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:#6d6486;margin:0 0 14px}
body.woocommerce .woocommerce-ordering select{font-family:var(--ui);font-size:13px;
 font-weight:600;color:#4C4459;padding:9px 13px;border:1px solid #e6e0f2;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:#4C4459;background:#fff;border:1px solid #e6e0f2}
body.woocommerce .woocommerce-pagination span.current{background:#1b1330;color:#fff;
 border-color:#1b1330}

/* ---------- 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}
}