/*
Theme Name: Peptide Europe
Theme URI: https://peptide-europe.net
Description: Astra-childthema voor Peptide Europe — vloeiende scroll-animaties, glassmorphism header, afgeronde UI en mobile-first design. Uitsluitend presentatie/UX; WooCommerce cart & checkout blijven onaangetast.
Author: Peptide Europe
Template: astra
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: peptidenederland-premium
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand */
  --pnp-purple:        #A97E3C;
  --pnp-purple-dark:   #77531E;
  --pnp-purple-deep:   #533913;
  --pnp-lilac:         #F6D9AD;
  --pnp-lilac-soft:    #FFF4E4;
  --pnp-purple-tint:   #FFFAF4;

  /* Neutrals */
  --pnp-bg:            #FAF9FC;
  --pnp-surface:       #FFFFFF;
  --pnp-ink:           #3B3020;
  --pnp-ink-600:       #736856;
  --pnp-ink-400:       #AC9F8B;
  --pnp-line:          #FEF9F0;

  /* Semantic */
  --pnp-success:       #1E9E6A;
  --pnp-error:         #D23A3A;

  /* Radius */
  --pnp-r-card:        20px;
  --pnp-r-btn:         12px;
  --pnp-r-pill:        999px;
  --pnp-r-input:       12px;

  /* Shadows — zacht en diffuus */
  --pnp-shadow-sm:     0 1px 2px rgba(45, 27, 92, .05), 0 4px 12px rgba(45, 27, 92, .05);
  --pnp-shadow-md:     0 2px 6px rgba(45, 27, 92, .06), 0 12px 32px rgba(45, 27, 92, .09);
  --pnp-shadow-lg:     0 4px 12px rgba(45, 27, 92, .07), 0 24px 64px rgba(45, 27, 92, .13);
  --pnp-shadow-glow:   0 8px 32px rgba(107, 63, 160, .28);

  /* Spacing — 8px schaal */
  --pnp-s-1: 4px;  --pnp-s-2: 8px;   --pnp-s-3: 16px; --pnp-s-4: 24px;
  --pnp-s-5: 32px; --pnp-s-6: 48px;  --pnp-s-7: 64px; --pnp-s-8: 96px;
  --pnp-section: clamp(64px, 10vw, 128px);

  /* Typografie — fluid met clamp() */
  --pnp-font-head: "Sora", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --pnp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pnp-fs-xs:   0.8125rem;
  --pnp-fs-sm:   0.9375rem;
  --pnp-fs-base: 1rem;
  --pnp-fs-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --pnp-fs-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --pnp-fs-xl:   clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem);
  --pnp-fs-hero: clamp(2.125rem, 1.5rem + 3.4vw, 4rem);

  /* Motion */
  --pnp-ease:      cubic-bezier(.22, 1, .36, 1);
  --pnp-dur-fast:  180ms;
  --pnp-dur:       280ms;

  /* Layout */
  --pnp-container: 1200px;
  --pnp-gutter:    clamp(16px, 4vw, 32px);
  --pnp-header-h:  74px; /* 10px top-padding + 64px pill */

  /* Z-index schaal */
  --pnp-z-header:  100;
  --pnp-z-menu:    110;
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
  background: var(--pnp-bg);
  color: var(--pnp-ink);
  font-family: var(--pnp-font-body);
  font-size: var(--pnp-fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, .pnp-head {
  font-family: var(--pnp-font-head);
  color: var(--pnp-ink);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.pnp-container {
  max-width: var(--pnp-container);
  margin-inline: auto;
  padding-inline: var(--pnp-gutter);
}

/* Astra containers vrijgeven op de custom homepage.
   Astra maakt .ast-container een flexbox; daardoor kromp <main> naar de
   inhoud (1200px) en bleef links plakken met een witte strook rechts.
   display:block laat main de volle breedte vullen zodat de eigen
   .pnp-container-secties netjes centreren (zoals de header). */
.home.pnp-front .site-content .ast-container {
  display: block;
  max-width: none;
  padding: 0;
}
.home.pnp-front #content { background: var(--pnp-bg); }

/* Focus zichtbaar voor toetsenbord */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--pnp-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--pnp-lilac); color: var(--pnp-purple-dark); }

/* ============================================================
   3. KNOPPEN
   ============================================================ */
.pnp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--pnp-r-btn);
  font-family: var(--pnp-font-body);
  font-size: var(--pnp-fs-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--pnp-dur-fast) var(--pnp-ease),
              box-shadow var(--pnp-dur) var(--pnp-ease),
              background-color var(--pnp-dur-fast) var(--pnp-ease),
              color var(--pnp-dur-fast) var(--pnp-ease);
}
.pnp-btn:active { transform: scale(.97); }

.pnp-btn--primary {
  background: linear-gradient(135deg, var(--pnp-purple) 0%, #986E30 100%);
  color: #fff;
  box-shadow: var(--pnp-shadow-glow);
}
.pnp-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(107, 63, 160, .4);
}

.pnp-btn--secondary {
  background: var(--pnp-surface);
  color: var(--pnp-purple-dark);
  border-color: var(--pnp-line);
  box-shadow: var(--pnp-shadow-sm);
}
.pnp-btn--secondary:hover {
  color: var(--pnp-purple);
  border-color: var(--pnp-lilac);
  transform: translateY(-2px);
  box-shadow: var(--pnp-shadow-md);
}

.pnp-btn--light {
  background: #fff;
  color: var(--pnp-purple-dark);
}
.pnp-btn--light:hover { color: var(--pnp-purple); transform: translateY(-2px); box-shadow: var(--pnp-shadow-md); }

.pnp-btn--whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
}
.pnp-btn--whatsapp:hover {
  background: #20BD5A;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .45);
}
.pnp-btn--whatsapp svg { width: 20px; height: 20px; }

/* ============================================================
   4. ANNOUNCEMENT + FLOATING GLASS HEADER
   ============================================================ */
.pnp-announce {
  background: var(--pnp-purple-dark);
  color: var(--pnp-lilac-soft);
  text-align: center;
  font-size: var(--pnp-fs-xs);
  font-weight: 500;
  letter-spacing: .02em;
  padding: 9px var(--pnp-gutter);
}
.pnp-announce strong { color: #fff; }

.pnp-header-wrap {
  position: sticky;
  top: 0;
  z-index: var(--pnp-z-header);
  padding: 10px var(--pnp-gutter) 0;
  pointer-events: none;
  /* Balk zweeft óver de content: geen eigen witte strook in de flow */
  height: var(--pnp-header-h);
  margin-bottom: calc(-1 * var(--pnp-header-h));
}

/* WP admin-balk niet overlappen */
.admin-bar .pnp-header-wrap { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .pnp-header-wrap { top: 46px; }
}

/* Content op overige pagina's onder de zwevende balk uit laten komen */
body.pnp:not(.pnp-front) .site-content { padding-top: calc(var(--pnp-header-h) + 16px); }

.pnp-header {
  pointer-events: auto;
  max-width: var(--pnp-container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pnp-s-3);
  min-height: 64px;
  padding: 8px 12px 8px 20px;
  border-radius: var(--pnp-r-pill);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--pnp-shadow-md);
  transition: min-height var(--pnp-dur) var(--pnp-ease),
              box-shadow var(--pnp-dur) var(--pnp-ease),
              background-color var(--pnp-dur) var(--pnp-ease);
}
.pnp-header.is-scrolled {
  min-height: 54px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--pnp-shadow-lg);
}

.pnp-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.pnp-logo img,
.pnp-logo .custom-logo {
  max-height: 44px !important;
  width: auto !important;
  height: auto;
  display: block;
  transition: max-height var(--pnp-dur) var(--pnp-ease);
}
.pnp-header.is-scrolled .pnp-logo img { max-height: 36px !important; }
.pnp-logo .custom-logo-link { display: block; line-height: 0; }
.pnp-logo-text {
  font-family: var(--pnp-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pnp-purple-dark);
  white-space: nowrap;
}
.pnp-logo-text span { color: var(--pnp-purple); }

.pnp-nav { display: none; }
.pnp-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pnp-nav a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--pnp-r-pill);
  font-size: var(--pnp-fs-sm);
  font-weight: 500;
  color: var(--pnp-ink-600);
  text-decoration: none;
  transition: color var(--pnp-dur-fast), background-color var(--pnp-dur-fast);
}
.pnp-nav a:hover,
.pnp-nav .current-menu-item > a {
  color: var(--pnp-purple);
  background: var(--pnp-purple-tint);
}

.pnp-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pnp-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pnp-r-pill);
  border: none;
  background: transparent;
  color: var(--pnp-ink);
  cursor: pointer;
  transition: background-color var(--pnp-dur-fast), color var(--pnp-dur-fast), transform var(--pnp-dur-fast);
}
.pnp-icon-btn:hover { background: var(--pnp-purple-tint); color: var(--pnp-purple); }
.pnp-icon-btn:active { transform: scale(.94); }
.pnp-icon-btn svg { width: 21px; height: 21px; }

.pnp-cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--pnp-r-pill);
  background: var(--pnp-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Mobiel menu */
.pnp-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--pnp-z-menu);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--pnp-gutter) 32px;
  background: rgba(250, 249, 252, .92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pnp-dur) var(--pnp-ease), visibility 0s var(--pnp-dur);
}
.pnp-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--pnp-dur) var(--pnp-ease);
}
.pnp-mobile-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
}
.pnp-mobile-menu nav { margin-top: var(--pnp-s-5); overflow-y: auto; }
.pnp-mobile-menu nav ul { list-style: none; margin: 0; padding: 0; }
.pnp-mobile-menu nav a {
  display: block;
  padding: 16px 8px;
  font-family: var(--pnp-font-head);
  font-size: var(--pnp-fs-lg);
  color: var(--pnp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pnp-line);
  transition: color var(--pnp-dur-fast), padding-left var(--pnp-dur-fast) var(--pnp-ease);
}
.pnp-mobile-menu nav a:hover { color: var(--pnp-purple); padding-left: 16px; }
.pnp-mobile-menu .pnp-btn { margin-top: var(--pnp-s-5); }

@media (min-width: 900px) {
  .pnp-nav { display: block; }
  .pnp-hamburger { display: none; }
}

/* Body niet scrollen als menu open is */
body.pnp-menu-open { overflow: hidden; }

/* ============================================================
   5. HERO — gradient mesh in paarstinten
   ============================================================ */
.pnp-hero {
  position: relative;
  padding: calc(var(--pnp-header-h) + clamp(32px, 6vw, 80px)) 0 var(--pnp-section);
  overflow: clip;
}
.pnp-hero-mesh {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 26% at 50% 2%, rgba(200, 168, 233, .45) 0%, transparent 75%),
    radial-gradient(42% 45% at 18% 12%, rgba(200, 168, 233, .55) 0%, transparent 70%),
    radial-gradient(38% 42% at 85% 8%, rgba(107, 63, 160, .25) 0%, transparent 70%),
    radial-gradient(50% 55% at 78% 78%, rgba(200, 168, 233, .35) 0%, transparent 72%),
    radial-gradient(30% 34% at 40% 90%, rgba(107, 63, 160, .12) 0%, transparent 70%);
  filter: blur(2px);
}
.pnp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--pnp-s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .pnp-hero-inner { grid-template-columns: 1.15fr .85fr; gap: var(--pnp-s-7); }
}

.pnp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--pnp-r-pill);
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  box-shadow: var(--pnp-shadow-sm);
  color: var(--pnp-purple);
  font-size: var(--pnp-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pnp-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pnp-success);
}

.pnp-hero h1 {
  margin: var(--pnp-s-4) 0 var(--pnp-s-3);
  font-size: var(--pnp-fs-hero);
  font-weight: 600;
}
.pnp-hero h1 em {
  font-style: normal; /* Sora heeft geen italic; accent via kleur */
  color: var(--pnp-purple);
}

/* Klein Nederlands vlaggetje onder de hero-titel */
.pnp-hero-flag {
  display: inline-block;
  margin: 2px 0 var(--pnp-s-2);
  line-height: 0;
}
.pnp-hero-flag svg {
  width: 42px;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--pnp-shadow-sm);
  outline: 1px solid var(--pnp-line);
}
.pnp-hero .pnp-lead {
  max-width: 34em;
  font-size: var(--pnp-fs-md);
  color: var(--pnp-ink-600);
}
.pnp-hero-checklist { margin-top: var(--pnp-s-3); max-width: 34em; }
.pnp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pnp-s-3);
  margin-top: var(--pnp-s-5);
}

.pnp-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pnp-s-2);
  margin-top: var(--pnp-s-5);
}
.pnp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--pnp-r-pill);
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pnp-line);
  font-size: var(--pnp-fs-xs);
  font-weight: 600;
  color: var(--pnp-ink-600);
}
.pnp-hero-badge svg { width: 16px; height: 16px; color: var(--pnp-purple); flex-shrink: 0; }

/* Hero visual */
.pnp-hero-visual { position: relative; }
.pnp-vial-card {
  aspect-ratio: 4 / 4.4;
  border-radius: calc(var(--pnp-r-card) * 1.6);
  background: linear-gradient(160deg, #fff 0%, var(--pnp-purple-tint) 100%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--pnp-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pnp-s-5);
  overflow: hidden;
}
.pnp-vial-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--pnp-r-card);
}
.pnp-float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--pnp-r-pill);
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--pnp-shadow-md);
  font-size: var(--pnp-fs-xs);
  font-weight: 600;
  color: var(--pnp-purple-dark);
  white-space: nowrap;
}
.pnp-float-chip svg { width: 15px; height: 15px; color: var(--pnp-purple); }
.pnp-chip-1 { top: 8%; left: -4%; }
.pnp-chip-2 { bottom: 10%; right: -3%; }
@media (max-width: 899px) {
  .pnp-chip-1 { left: 0; }
  .pnp-chip-2 { right: 0; }
}

/* ============================================================
   6. SECTIES — gedeelde opmaak
   ============================================================ */
.pnp-section { padding-block: calc(var(--pnp-section) / 2); }
.pnp-section-head { max-width: 640px; margin: 0 auto var(--pnp-s-6); text-align: center; }
.pnp-section-eyebrow {
  font-size: var(--pnp-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pnp-purple);
  margin-bottom: var(--pnp-s-2);
}
.pnp-section-head h2 { font-size: var(--pnp-fs-xl); margin: 0 0 var(--pnp-s-2); font-weight: 600; }
.pnp-section-head p { color: var(--pnp-ink-400); margin: 0; }
.pnp-section-cta { text-align: center; margin-top: var(--pnp-s-6); }

/* Trust bar */
.pnp-trustbar {
  border-block: 1px solid var(--pnp-line);
  background: var(--pnp-surface);
}
.pnp-trustbar-inner {
  display: grid;
  gap: var(--pnp-s-3);
  padding-block: var(--pnp-s-4);
}
@media (min-width: 700px) { .pnp-trustbar-inner { grid-template-columns: repeat(3, 1fr); } }
.pnp-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  font-size: var(--pnp-fs-sm);
  font-weight: 600;
  color: var(--pnp-ink-600);
}
@media (min-width: 700px) { .pnp-trust-item { justify-content: center; } }
.pnp-trust-item svg { width: 22px; height: 22px; color: var(--pnp-purple); flex-shrink: 0; }
.pnp-trust-item small { display: block; font-weight: 400; color: var(--pnp-ink-400); }

/* ============================================================
   7. PRODUCT CARDS
   ============================================================ */
.pnp-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pnp-s-3);
}
@media (min-width: 700px)  { .pnp-product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--pnp-s-4); } }
@media (min-width: 1024px) { .pnp-product-grid { grid-template-columns: repeat(4, 1fr); } }

.pnp-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--pnp-shadow-sm);
  transition: transform var(--pnp-dur) var(--pnp-ease), box-shadow var(--pnp-dur) var(--pnp-ease), border-color var(--pnp-dur);
}
.pnp-product-card:hover {
  transform: translateY(-6px);
  border-color: var(--pnp-lilac);
  box-shadow: var(--pnp-shadow-lg);
}
.pnp-product-media {
  aspect-ratio: 1;
  background: linear-gradient(160deg, #fff 0%, var(--pnp-purple-tint) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pnp-s-3);
}
.pnp-product-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--pnp-dur) var(--pnp-ease);
}
.pnp-product-card:hover .pnp-product-media img { transform: scale(1.05); }
.pnp-product-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--pnp-s-3);
  flex-grow: 1;
}
.pnp-product-body h3 {
  font-family: var(--pnp-font-body);
  font-size: var(--pnp-fs-sm);
  font-weight: 600;
  margin: 0;
  color: var(--pnp-ink);
}
.pnp-product-price {
  font-size: var(--pnp-fs-base);
  font-weight: 700;
  color: var(--pnp-purple-dark);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.pnp-product-price del { color: var(--pnp-ink-400); font-weight: 400; margin-right: 6px; }
.pnp-product-price ins { text-decoration: none; }
.pnp-product-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: var(--pnp-s-2);
  border-radius: var(--pnp-r-btn);
  background: var(--pnp-purple-tint);
  color: var(--pnp-purple);
  font-size: var(--pnp-fs-sm);
  font-weight: 600;
  transition: background-color var(--pnp-dur-fast), color var(--pnp-dur-fast);
}
.pnp-product-card:hover .pnp-product-btn { background: var(--pnp-purple); color: #fff; }

.pnp-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: var(--pnp-r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.pnp-badge--stock { background: rgba(30, 158, 106, .12); color: var(--pnp-success); }
.pnp-badge--sale  { background: var(--pnp-purple); color: #fff; }

/* ============================================================
   8. WAAROM — scroll-driven storytelling (sticky)
   ============================================================ */
.pnp-why { background: var(--pnp-surface); border-block: 1px solid var(--pnp-line); }
.pnp-why-grid { display: grid; gap: var(--pnp-s-6); }
@media (min-width: 900px) {
  .pnp-why-grid { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .pnp-why-sticky { position: sticky; top: 120px; }
}
.pnp-why-sticky h2 { font-size: var(--pnp-fs-xl); font-weight: 600; margin: var(--pnp-s-2) 0 var(--pnp-s-3); }
.pnp-why-sticky p { color: var(--pnp-ink-400); max-width: 30em; }

.pnp-usp-list { display: grid; gap: var(--pnp-s-3); }
.pnp-usp-card {
  display: flex;
  gap: var(--pnp-s-3);
  align-items: flex-start;
  padding: var(--pnp-s-4);
  background: var(--pnp-bg);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  transition: border-color var(--pnp-dur), box-shadow var(--pnp-dur), transform var(--pnp-dur) var(--pnp-ease);
}
.pnp-usp-card:hover { border-color: var(--pnp-lilac); box-shadow: var(--pnp-shadow-md); transform: translateY(-3px); }
.pnp-usp-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pnp-purple-tint), var(--pnp-lilac-soft));
  color: var(--pnp-purple);
}
.pnp-usp-icon svg { width: 24px; height: 24px; }
.pnp-usp-card h3 { font-family: var(--pnp-font-body); font-size: var(--pnp-fs-md); font-weight: 700; margin: 0 0 4px; }
.pnp-usp-card p { margin: 0; font-size: var(--pnp-fs-sm); color: var(--pnp-ink-400); }

/* ============================================================
   9. REVIEWS
   ============================================================ */
.pnp-review-track {
  display: grid;
  gap: var(--pnp-s-3);
}
@media (min-width: 700px)  { .pnp-review-track { grid-template-columns: repeat(2, 1fr); gap: var(--pnp-s-4); } }
@media (min-width: 1024px) { .pnp-review-track { grid-template-columns: repeat(3, 1fr); } }
.pnp-review-card {
  display: flex;
  flex-direction: column;
  gap: var(--pnp-s-2);
  padding: var(--pnp-s-4);
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  box-shadow: var(--pnp-shadow-sm);
}
.pnp-stars { display: inline-flex; gap: 2px; color: #E9A23B; }
.pnp-stars svg { width: 15px; height: 15px; }
.pnp-review-card blockquote {
  margin: 0;
  font-size: var(--pnp-fs-sm);
  color: var(--pnp-ink-600);
  flex-grow: 1;
}
.pnp-review-meta { display: flex; justify-content: space-between; gap: 8px; font-size: var(--pnp-fs-xs); }
.pnp-review-meta .pnp-name { font-weight: 700; }
.pnp-review-meta .pnp-when { color: var(--pnp-ink-400); }
.pnp-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pnp-success);
}
.pnp-verified svg { width: 13px; height: 13px; }

/* ============================================================
   10. BETALEN + COMMUNITY
   ============================================================ */
.pnp-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pnp-s-2) var(--pnp-s-3);
  margin-top: var(--pnp-s-5);
}
.pnp-pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--pnp-r-btn);
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  font-size: var(--pnp-fs-xs);
  font-weight: 700;
  color: var(--pnp-ink-600);
  letter-spacing: .02em;
}
.pnp-pay-chip svg { width: 18px; height: 18px; }
.pnp-secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pnp-success);
  font-size: var(--pnp-fs-xs);
  font-weight: 600;
}
.pnp-secure svg { width: 15px; height: 15px; }

.pnp-community {
  position: relative;
  overflow: clip;
  text-align: center;
  padding: var(--pnp-s-7) var(--pnp-s-4);
  border-radius: calc(var(--pnp-r-card) * 1.4);
  background:
    radial-gradient(60% 90% at 15% 10%, rgba(200, 168, 233, .35) 0%, transparent 60%),
    radial-gradient(50% 80% at 90% 90%, rgba(200, 168, 233, .25) 0%, transparent 60%),
    linear-gradient(140deg, var(--pnp-purple-dark) 0%, var(--pnp-purple) 100%);
  color: #fff;
  box-shadow: var(--pnp-shadow-lg);
}
.pnp-community h2 { color: #fff; font-size: var(--pnp-fs-xl); font-weight: 600; margin: 0 0 var(--pnp-s-2); }
.pnp-community p { color: var(--pnp-lilac-soft); max-width: 38em; margin: 0 auto var(--pnp-s-5); }

/* ============================================================
   11. FOOTER — afgerond bovenaan
   ============================================================ */
.pnp-footer {
  margin-top: var(--pnp-section);
  background: var(--pnp-purple-deep);
  color: var(--pnp-lilac-soft);
  border-radius: 32px 32px 0 0;
  padding: var(--pnp-s-7) 0 calc(var(--pnp-s-4) + env(safe-area-inset-bottom, 0px));
}
.pnp-footer-grid {
  display: grid;
  gap: var(--pnp-s-5);
  margin-bottom: var(--pnp-s-6);
}
@media (min-width: 700px) { .pnp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pnp-footer .pnp-logo-text { color: #fff; }
.pnp-footer .pnp-logo-text span { color: var(--pnp-lilac); }
.pnp-footer-about { font-size: var(--pnp-fs-sm); color: rgba(235, 223, 247, .75); max-width: 30em; margin-top: var(--pnp-s-3); }
.pnp-footer h4 {
  font-family: var(--pnp-font-body);
  font-size: var(--pnp-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pnp-lilac);
  margin: 0 0 var(--pnp-s-3);
}
.pnp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pnp-footer ul a {
  color: rgba(235, 223, 247, .82);
  text-decoration: none;
  font-size: var(--pnp-fs-sm);
  transition: color var(--pnp-dur-fast);
}
.pnp-footer ul a:hover { color: #fff; }
.pnp-footer-bottom {
  border-top: 1px solid rgba(200, 168, 233, .18);
  padding-top: var(--pnp-s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pnp-s-3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--pnp-fs-xs);
  color: rgba(235, 223, 247, .6);
}
.pnp-footer-compliance {
  margin-top: var(--pnp-s-3);
  font-size: var(--pnp-fs-xs);
  color: rgba(235, 223, 247, .55);
  max-width: 70em;
}
.pnp-footer-meta {
  list-style: none;
  margin: var(--pnp-s-3) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--pnp-fs-sm);
  color: rgba(235, 223, 247, .82);
}
.pnp-footer-meta a { color: rgba(235, 223, 247, .82); text-decoration: none; }
.pnp-footer-meta a:hover { color: #fff; }
.pnp-footer .pnp-payments { justify-content: flex-start; margin-top: var(--pnp-s-4); }
.pnp-footer .pnp-pay-chip { background: rgba(255, 255, 255, .06); border-color: rgba(200, 168, 233, .2); color: rgba(235, 223, 247, .85); }

/* ============================================================
   12. WOOCOMMERCE — SHOP ARCHIVE (zelfde kaartstijl als homepage)
   ============================================================ */
.woocommerce-products-header {
  text-align: center;
  padding-bottom: var(--pnp-s-5);
}
.woocommerce-products-header__title {
  font-size: var(--pnp-fs-xl);
  font-weight: 600;
  margin: 0;
}
.woocommerce .woocommerce-result-count {
  color: var(--pnp-ink-400);
  font-size: var(--pnp-fs-sm);
}
.woocommerce .woocommerce-ordering select {
  min-height: 44px;
  padding: 8px 36px 8px 16px;
  border-radius: var(--pnp-r-btn);
  border: 1px solid var(--pnp-line);
  background-color: var(--pnp-surface);
  font-size: var(--pnp-fs-sm);
  color: var(--pnp-ink-600);
  cursor: pointer;
}

/* Kaart */
.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  overflow: hidden;
  box-shadow: var(--pnp-shadow-sm);
  transition: transform var(--pnp-dur) var(--pnp-ease), box-shadow var(--pnp-dur) var(--pnp-ease), border-color var(--pnp-dur);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: var(--pnp-lilac);
  box-shadow: var(--pnp-shadow-lg);
}

/* Afbeelding */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  aspect-ratio: 1;
  background: linear-gradient(160deg, #fff 0%, var(--pnp-purple-tint) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pnp-s-3);
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  margin: 0;
  transition: transform var(--pnp-dur) var(--pnp-ease);
}
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img { transform: scale(1.05); }

/* Astra's zwevende on-card knop uit — één duidelijke CTA per kaart */
.woocommerce ul.products li.product .ast-on-card-button { display: none !important; }

/* Tekstgedeelte */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--pnp-s-3);
  flex-grow: 1;
  text-align: left;
}
.woocommerce ul.products li.product .ast-woo-product-category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pnp-ink-400);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--pnp-font-body);
  font-size: var(--pnp-fs-sm);
  font-weight: 600;
  color: var(--pnp-ink);
  padding: 0;
  margin: 0;
}
.woocommerce ul.products li.product .price {
  font-size: var(--pnp-fs-base);
  font-weight: 700;
  color: var(--pnp-purple-dark);
  font-variant-numeric: tabular-nums;
  margin: 0;
  margin-top: auto;
}
.woocommerce ul.products li.product .price del { color: var(--pnp-ink-400); font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Add-to-cart knop in de kaartstijl van de homepage */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_variable,
.woocommerce ul.products li.product a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: var(--pnp-s-2);
  padding: 8px 16px;
  border-radius: var(--pnp-r-btn);
  background: var(--pnp-purple-tint);
  color: var(--pnp-purple);
  font-size: var(--pnp-fs-sm);
  font-weight: 600;
  transition: background-color var(--pnp-dur-fast), color var(--pnp-dur-fast), transform var(--pnp-dur-fast);
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: var(--pnp-purple);
  color: #fff;
}
.woocommerce ul.products li.product .button.add_to_cart_button:active { transform: scale(.97); }
.woocommerce ul.products li.product .added_to_cart {
  display: inline-flex;
  justify-content: center;
  margin-top: 8px;
  font-size: var(--pnp-fs-xs);
  font-weight: 600;
  color: var(--pnp-success);
}

/* Badges */
.woocommerce ul.products li.product .pnp-badge { top: 12px; left: 12px; }
.woocommerce span.onsale {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  padding: 5px 12px;
  border-radius: var(--pnp-r-pill);
  background: var(--pnp-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  margin: 0;
}

/* Paginatie als afgeronde pills */
.woocommerce nav.woocommerce-pagination { margin-top: var(--pnp-s-6); }
.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; justify-content: center; gap: 8px; }
.woocommerce nav.woocommerce-pagination ul li { border: none; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--pnp-r-btn);
  border: 1px solid var(--pnp-line);
  background: var(--pnp-surface);
  color: var(--pnp-ink-600);
  font-weight: 600;
  transition: border-color var(--pnp-dur-fast), color var(--pnp-dur-fast);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--pnp-lilac); color: var(--pnp-purple); background: var(--pnp-surface); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--pnp-purple); border-color: var(--pnp-purple); color: #fff; }

/* Meldingen (o.a. "toegevoegd aan winkelwagen") */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--pnp-r-card);
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-top-width: 1px;
  box-shadow: var(--pnp-shadow-sm);
  color: var(--pnp-ink);
  padding: 16px 20px 16px 56px;
}
.woocommerce-message { border-left: 4px solid var(--pnp-success); }
.woocommerce-message::before { color: var(--pnp-success); }
.woocommerce-info { border-left: 4px solid var(--pnp-purple); }
.woocommerce-info::before { color: var(--pnp-purple); }
.woocommerce-error { border-left: 4px solid var(--pnp-error); }
.woocommerce-message .button, .woocommerce-info .button {
  border-radius: var(--pnp-r-btn);
  background: var(--pnp-purple-tint);
  color: var(--pnp-purple);
  font-weight: 600;
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover { background: var(--pnp-purple); color: #fff; }

/* ============================================================
   13. WOOCOMMERCE — SINGLE PRODUCT (verkoop & vertrouwen)
   ============================================================ */
.woocommerce .woocommerce-breadcrumb {
  font-size: var(--pnp-fs-xs);
  color: var(--pnp-ink-400);
  margin-bottom: var(--pnp-s-4);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--pnp-ink-400); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--pnp-purple); }

/* Galerij als premium kaart */
.woocommerce div.product div.images.woocommerce-product-gallery {
  border-radius: calc(var(--pnp-r-card) * 1.2);
  overflow: hidden;
  border: 1px solid var(--pnp-line);
  background: linear-gradient(160deg, #fff 0%, var(--pnp-purple-tint) 100%);
  box-shadow: var(--pnp-shadow-md);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image { background: transparent; }
.woocommerce div.product div.images .flex-control-thumbs { padding: 10px; display: flex; gap: 8px; }
.woocommerce div.product div.images .flex-control-thumbs li { float: none; width: 72px; }
.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: 10px;
  border: 2px solid transparent;
  opacity: .6;
  transition: opacity var(--pnp-dur-fast), border-color var(--pnp-dur-fast);
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; border-color: var(--pnp-purple); }

/* Samenvatting */
.woocommerce div.product .product_title {
  font-size: var(--pnp-fs-xl);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--pnp-s-2);
}
.woocommerce div.product .entry-summary p.price {
  font-size: var(--pnp-fs-lg);
  font-weight: 700;
  color: var(--pnp-purple-dark);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--pnp-s-3);
}
.woocommerce div.product .entry-summary p.price del { color: var(--pnp-ink-400); opacity: 1; }
.woocommerce div.product .entry-summary p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--pnp-ink-600);
  font-size: var(--pnp-fs-md);
}
.woocommerce div.product .stock.in-stock { color: var(--pnp-success); font-weight: 600; }

/* USP-checklist in de korte beschrijving: punten met groen vinkje erachter */
.pnp-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pnp-checklist li {
  font-size: var(--pnp-fs-md);
  color: var(--pnp-ink-600);
  font-weight: 500;
  padding-left: 27px; /* hangende inspringing: doorlopende regels lijnen uit met de tekst */
}
.pnp-checklist li::before {
  content: "";
  display: inline-block;
  vertical-align: -3px;
  margin-left: -27px;
  margin-right: 8px;
  width: 19px;
  height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' stroke='%231E9E6A' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.woocommerce div.product .stock.out-of-stock { color: var(--pnp-error); font-weight: 600; }

/* Add-to-cart rij: grote CTA met glow */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: var(--pnp-s-4) 0 !important;
}
.woocommerce div.product form.cart div.quantity { float: none; margin: 0; }
.woocommerce div.product form.cart .qty {
  width: 84px;
  height: 52px;
  border-radius: var(--pnp-r-btn);
  border: 1px solid var(--pnp-line);
  background: var(--pnp-surface);
  font-size: var(--pnp-fs-base);
  font-weight: 600;
  color: var(--pnp-ink);
  text-align: center;
}
.woocommerce div.product form.cart .qty:focus { border-color: var(--pnp-purple); }
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 220px;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: var(--pnp-r-btn);
  background: linear-gradient(135deg, var(--pnp-purple) 0%, #986E30 100%);
  color: #fff;
  font-size: var(--pnp-fs-base);
  font-weight: 600;
  box-shadow: var(--pnp-shadow-glow);
  transition: transform var(--pnp-dur-fast) var(--pnp-ease), box-shadow var(--pnp-dur) var(--pnp-ease);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: linear-gradient(135deg, var(--pnp-purple) 0%, #986E30 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(107, 63, 160, .4);
}
.woocommerce div.product form.cart .single_add_to_cart_button:active { transform: scale(.98); }

/* Variaties-tabel netjes */
.woocommerce div.product form.cart .variations { margin-bottom: var(--pnp-s-2); }
.woocommerce div.product form.cart .variations select {
  min-height: 48px;
  padding: 8px 36px 8px 16px;
  border-radius: var(--pnp-r-btn);
  border: 1px solid var(--pnp-line);
  background-color: var(--pnp-surface);
}

/* Trust-blok (ingevoegd via hook) */
.pnp-pdp-trust {
  margin-top: var(--pnp-s-4);
  padding-top: var(--pnp-s-4);
  border-top: 1px solid var(--pnp-line);
}
.pnp-pdp-trust-items { display: flex; flex-wrap: wrap; gap: var(--pnp-s-2); }
.pnp-pdp-trust .pnp-payments { justify-content: flex-start; margin-top: var(--pnp-s-3); }
.pnp-pdp-ruo {
  margin: var(--pnp-s-3) 0 0;
  font-size: var(--pnp-fs-xs);
  color: var(--pnp-ink-400);
}

/* Meta subtiel */
.woocommerce div.product .product_meta {
  margin-top: var(--pnp-s-3);
  padding-top: var(--pnp-s-3);
  border-top: 1px solid var(--pnp-line);
  font-size: var(--pnp-fs-xs);
  color: var(--pnp-ink-400);
}
.woocommerce div.product .product_meta a { color: var(--pnp-purple); }

/* Tabs als afgeronde pills */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--pnp-s-6); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 var(--pnp-s-3);
  border: none;
  background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none;
  background: var(--pnp-purple-tint);
  border-radius: var(--pnp-r-pill);
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 22px;
  color: var(--pnp-purple);
  font-weight: 600;
  font-size: var(--pnp-fs-sm);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--pnp-purple); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  box-shadow: var(--pnp-shadow-sm);
  padding: clamp(20px, 4vw, 40px);
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-of-type { font-size: var(--pnp-fs-lg); }

/* Gerelateerde producten / upsells */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
  text-align: center;
  font-size: var(--pnp-fs-xl);
  font-weight: 600;
  margin: var(--pnp-s-7) 0 var(--pnp-s-5);
}

/* Reviews-tab */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border-radius: var(--pnp-r-card);
  border-color: var(--pnp-line);
  background: var(--pnp-surface);
}
.woocommerce #reviews .star-rating { color: #E9A23B; }

/* Mobiel: CTA-rij comfortabel op 375px */
@media (max-width: 600px) {
  .woocommerce div.product form.cart .single_add_to_cart_button { flex-basis: 100%; }
  .woocommerce div.product form.cart div.quantity { width: 100%; }
  .woocommerce div.product form.cart .qty { width: 100%; }
}

/* ============================================================
   14. GLOED OP KOOPKNOPPEN
   ============================================================ */
.pnp-btn--primary,
.woocommerce div.product form.cart .single_add_to_cart_button,
.pnp-buy-now,
.woocommerce .checkout-button,
.woocommerce #place_order {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, #CF9B4D 0%, var(--pnp-purple) 45%, #AE7E36 100%);
  box-shadow:
    0 8px 32px rgba(107, 63, 160, .38),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}
.pnp-btn--primary::before,
.woocommerce div.product form.cart .single_add_to_cart_button::before,
.pnp-buy-now::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .6s var(--pnp-ease);
  pointer-events: none;
}
.pnp-btn--primary:hover::before,
.woocommerce div.product form.cart .single_add_to_cart_button:hover::before,
.pnp-buy-now:hover::before { left: 130%; }
.pnp-btn--primary:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.pnp-buy-now:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
  box-shadow:
    0 12px 44px rgba(107, 63, 160, .5),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* Shop-kaarten: gloed zodra de knop paars wordt (hover) */
.woocommerce ul.products li.product:hover .button.add_to_cart_button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, #CF9B4D 0%, var(--pnp-purple) 55%, #AE7E36 100%);
  box-shadow: 0 6px 20px rgba(107, 63, 160, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
}

/* ============================================================
   15. GELIJK KOPEN + BETAALLOGO'S (productpagina)
   ============================================================ */
.woocommerce div.product form.cart .pnp-buy-now {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--pnp-r-btn);
  color: #fff;
  font-size: var(--pnp-fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--pnp-dur-fast) var(--pnp-ease), box-shadow var(--pnp-dur) var(--pnp-ease);
}
.woocommerce div.product form.cart .pnp-buy-now:hover { transform: translateY(-2px); }
.woocommerce div.product form.cart .pnp-buy-now:active { transform: scale(.98); }
.woocommerce div.product form.cart .pnp-buy-now svg { width: 18px; height: 18px; }

.woocommerce div.product form.cart .pnp-pay-note {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.pnp-pay-logo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.pnp-pay-logo--apple { background: #000; color: #fff; }
.pnp-pay-logo--apple svg { width: 15px; height: 15px; margin-top: -2px; }
.pnp-pay-logo--klarna { background: #FFB3C7; color: #17120F; font-weight: 800; }
.pnp-pay-note-text { font-size: var(--pnp-fs-xs); color: var(--pnp-ink-400); }

/* ============================================================
   15b. CART & CHECKOUT — zelfde premium taal (alleen styling,
        functionaliteit onaangetast)
   ============================================================ */
/* Formuliervelden (checkout + account + coupon) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon .input-text {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-input);
  background: var(--pnp-surface);
  font-size: var(--pnp-fs-base);
  color: var(--pnp-ink);
  transition: border-color var(--pnp-dur-fast), box-shadow var(--pnp-dur-fast);
}
.woocommerce form .form-row textarea { min-height: 96px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--pnp-purple);
  box-shadow: 0 0 0 3px rgba(107, 63, 160, .15);
}
.woocommerce form .form-row label { font-weight: 600; font-size: var(--pnp-fs-sm); }
.woocommerce form .form-row .required { color: var(--pnp-purple); text-decoration: none; }

/* Select2 (land/regio dropdowns) */
.select2-container--default .select2-selection--single {
  min-height: 48px;
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-input);
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5; padding-left: 16px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }
.select2-dropdown { border-color: var(--pnp-line); border-radius: var(--pnp-r-input); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pnp-purple); }

/* Checkout-koppen */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-size: var(--pnp-fs-lg);
  font-weight: 600;
  margin-bottom: var(--pnp-s-3);
}

/* Besteloverzicht als premium kaart */
.woocommerce-checkout #order_review,
.woocommerce .cart_totals {
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  box-shadow: var(--pnp-shadow-md);
  padding: clamp(16px, 3vw, 28px);
}
.woocommerce-checkout #order_review table.shop_table {
  border: none;
  border-radius: 0;
  margin: 0 0 var(--pnp-s-3);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--pnp-line); }
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table .order-total .woocommerce-Price-amount {
  color: var(--pnp-purple-dark);
}

/* Betaalmethoden */
.woocommerce-checkout #payment {
  background: var(--pnp-bg);
  border-radius: var(--pnp-r-card);
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--pnp-line);
  padding: var(--pnp-s-3);
  display: grid;
  gap: 8px;
}
.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-btn);
  padding: 12px 16px;
  transition: border-color var(--pnp-dur-fast);
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--pnp-lilac); }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; cursor: pointer; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--pnp-purple-tint);
  border-radius: var(--pnp-r-btn);
  color: var(--pnp-ink-600);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--pnp-purple-tint); }

/* Place order / checkout-knoppen: maat + radius (gloed komt uit sectie 14) */
.woocommerce #place_order,
.woocommerce .checkout-button {
  min-height: 52px;
  padding: 14px 32px;
  border: none;
  border-radius: var(--pnp-r-btn);
  color: #fff;
  font-size: var(--pnp-fs-base);
  font-weight: 600;
  width: 100%;
  transition: transform var(--pnp-dur-fast) var(--pnp-ease), box-shadow var(--pnp-dur) var(--pnp-ease);
}
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover { color: #fff; transform: translateY(-2px); }

/* Cart-pagina */
.woocommerce table.cart {
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line) !important;
  border-radius: var(--pnp-r-card);
  overflow: hidden;
}
.woocommerce table.cart img { border-radius: 12px; width: 64px; }
.woocommerce table.cart .product-name a { color: var(--pnp-ink); font-weight: 600; text-decoration: none; }
.woocommerce table.cart .product-name a:hover { color: var(--pnp-purple); }
.woocommerce table.cart td.actions .coupon .button,
.woocommerce table.cart td.actions > .button {
  min-height: 48px;
  border-radius: var(--pnp-r-btn);
  background: var(--pnp-purple-tint);
  color: var(--pnp-purple);
  font-weight: 600;
}
.woocommerce table.cart td.actions .button:hover { background: var(--pnp-purple); color: #fff; }
.woocommerce a.remove {
  color: var(--pnp-ink-400) !important;
  transition: color var(--pnp-dur-fast), background-color var(--pnp-dur-fast);
}
.woocommerce a.remove:hover { background: var(--pnp-error); color: #fff !important; }
.woocommerce .quantity .qty {
  min-height: 44px;
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-btn);
  text-align: center;
  font-weight: 600;
}

/* Login/coupon toggles bovenaan checkout */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: var(--pnp-s-3); }
.woocommerce form.checkout_coupon,
.woocommerce form.login {
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  padding: var(--pnp-s-4);
  box-shadow: var(--pnp-shadow-sm);
}

/* ============================================================
   15c. CHECKOUT/CART VERFIJNING — wint van Astra/Woo defaults
   ============================================================ */
/* Alle 'alt'-knoppen (Proceed to checkout, Place order, coupon-submit
   op sommige thema's): altijd paars met gloed en ronde hoeken */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(135deg, #CF9B4D 0%, var(--pnp-purple) 45%, #AE7E36 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--pnp-r-btn) !important;
  min-height: 52px;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 32px rgba(107, 63, 160, .38), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  transition: transform var(--pnp-dur-fast) var(--pnp-ease), box-shadow var(--pnp-dur) var(--pnp-ease);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 44px rgba(107, 63, 160, .5), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}
.woocommerce a.checkout-button.button.alt {
  display: block;
  text-align: center;
  font-size: var(--pnp-fs-base) !important;
}

/* Overige Woo-knoppen (Update cart, Apply coupon, account-knoppen):
   rustige lila stijl, afgerond */
.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.pnp-btn),
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button):not(.pnp-buy-now) {
  background: var(--pnp-purple-tint) !important;
  color: var(--pnp-purple) !important;
  border: none !important;
  border-radius: var(--pnp-r-btn) !important;
  min-height: 48px;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  transition: background-color var(--pnp-dur-fast), color var(--pnp-dur-fast);
}
.woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.pnp-btn):hover,
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button):not(.pnp-buy-now):hover {
  background: var(--pnp-purple) !important;
  color: #fff !important;
}

/* Cart: tabel en totalen echt afgerond */
.woocommerce table.shop_table.cart {
  border: 1px solid var(--pnp-line) !important;
  border-radius: var(--pnp-r-card) !important;
  overflow: hidden;
  background: var(--pnp-surface);
  box-shadow: var(--pnp-shadow-sm);
}
.woocommerce .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line) !important;
  border-radius: var(--pnp-r-card) !important;
  box-shadow: var(--pnp-shadow-md);
  padding: clamp(16px, 3vw, 28px) !important;
}
@media (min-width: 900px) {
  .woocommerce .cart-collaterals .cart_totals { float: right; width: 44%; }
}
.woocommerce .cart-collaterals .cart_totals h2 { font-size: var(--pnp-fs-lg); margin-top: 0; }
.woocommerce .cart-collaterals .cart_totals table.shop_table { border: none !important; border-radius: 0 !important; box-shadow: none; }
.woocommerce .cart-collaterals .cart_totals .order-total td,
.woocommerce .cart-collaterals .cart_totals .order-total th {
  font-size: var(--pnp-fs-md);
  color: var(--pnp-purple-dark);
}

/* Checkout: klantgegevens in een premium kaart */
.woocommerce-checkout #customer_details {
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  box-shadow: var(--pnp-shadow-md);
  padding: clamp(16px, 3vw, 28px);
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}
.woocommerce-checkout #customer_details .col-2 { margin-top: var(--pnp-s-4); }

/* Checkout: twee kolommen op desktop, besteloverzicht rechts (sticky) */
@media (min-width: 1024px) {
  .woocommerce-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--pnp-s-4) var(--pnp-s-5);
    align-items: start;
  }
  .woocommerce-checkout form.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100% !important;
  }
  .woocommerce-checkout form.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    width: 100% !important;
  }
  .woocommerce-checkout form.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    position: sticky;
    top: calc(var(--pnp-header-h) + 24px);
  }
}

/* Bedankpagina (order received) */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--pnp-font-head);
  font-size: var(--pnp-fs-lg);
  font-weight: 600;
  color: var(--pnp-purple-dark);
  margin-bottom: var(--pnp-s-4);
}
.woocommerce ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pnp-s-2);
  margin: 0 0 var(--pnp-s-5);
  padding: 0;
}
.woocommerce ul.woocommerce-order-overview li {
  list-style: none;
  border: 1px solid var(--pnp-line) !important;
  border-radius: var(--pnp-r-btn);
  background: var(--pnp-surface);
  padding: 12px 18px !important;
  font-size: var(--pnp-fs-xs);
  color: var(--pnp-ink-400);
  margin: 0 !important;
  float: none !important;
}
.woocommerce ul.woocommerce-order-overview li strong { display: block; color: var(--pnp-ink); font-size: var(--pnp-fs-sm); }

/* ============================================================
   16. ZWEVENDE WHATSAPP-KNOP
   ============================================================ */
.pnp-whatsapp {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--pnp-r-pill);
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
  transition: transform var(--pnp-dur-fast) var(--pnp-ease), box-shadow var(--pnp-dur) var(--pnp-ease);
}
.pnp-whatsapp:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 32px rgba(37, 211, 102, .55);
}
.pnp-whatsapp svg { width: 30px; height: 30px; }

/* ============================================================
   17. COOKIEMELDING
   ============================================================ */
/* [hidden] moet winnen van onze display-regels */
.pnp-cookie[hidden], .pnp-agegate[hidden] { display: none !important; }

.pnp-cookie {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 105;
  max-width: 420px;
  width: calc(100% - 104px);
  padding: var(--pnp-s-4);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  box-shadow: var(--pnp-shadow-lg);
  transition: opacity var(--pnp-dur) var(--pnp-ease), transform var(--pnp-dur) var(--pnp-ease);
}
.pnp-cookie.is-leaving { opacity: 0; transform: translateY(12px); }
.pnp-cookie p { margin: 0 0 var(--pnp-s-3); font-size: var(--pnp-fs-sm); color: var(--pnp-ink-600); }
.pnp-cookie a { color: var(--pnp-purple); }
.pnp-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pnp-cookie-actions .pnp-btn { min-height: 44px; padding: 8px 20px; font-size: var(--pnp-fs-sm); }

/* ============================================================
   18. 18+ WAARSCHUWING
   ============================================================ */
.pnp-agegate {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pnp-gutter);
  background: rgba(30, 18, 64, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity var(--pnp-dur) var(--pnp-ease);
}
.pnp-agegate.is-leaving { opacity: 0; }
.pnp-agegate-card {
  max-width: 460px;
  width: 100%;
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  background: var(--pnp-surface);
  border-radius: calc(var(--pnp-r-card) * 1.2);
  box-shadow: var(--pnp-shadow-lg);
}
.pnp-agegate-card h2 { font-size: var(--pnp-fs-xl); margin: var(--pnp-s-3) 0 var(--pnp-s-2); }
.pnp-agegate-card p { color: var(--pnp-ink-400); font-size: var(--pnp-fs-sm); margin: 0 0 var(--pnp-s-4); }
.pnp-agegate-card .pnp-btn { width: 100%; }
body.pnp-agegate-open { overflow: hidden; }

/* ============================================================
   19. FORMULIEREN (contact) + CALCULATOR
   ============================================================ */
.pnp-form-wrap { max-width: 680px; }
.pnp-form-notice {
  padding: 14px 18px;
  border-radius: var(--pnp-r-btn);
  font-weight: 600;
  font-size: var(--pnp-fs-sm);
  margin-bottom: var(--pnp-s-3);
}
.pnp-form-notice--ok { background: rgba(30, 158, 106, .1); color: var(--pnp-success); }
.pnp-form-notice--error { background: rgba(210, 58, 58, .08); color: var(--pnp-error); }
.pnp-hp { position: absolute !important; left: -9999px !important; }
.pnp-form-row { display: grid; gap: 0 var(--pnp-s-3); }
@media (min-width: 640px) { .pnp-form-row { grid-template-columns: 1fr 1fr; } }
.pnp-form-field { margin-bottom: var(--pnp-s-3); }
.pnp-form-field label {
  display: block;
  font-size: var(--pnp-fs-sm);
  font-weight: 600;
  color: var(--pnp-ink);
  margin-bottom: 6px;
}
.pnp-form-field label span { color: var(--pnp-purple); }
.pnp-form-field input,
.pnp-form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-input);
  background: var(--pnp-surface);
  font-family: var(--pnp-font-body);
  font-size: var(--pnp-fs-base);
  color: var(--pnp-ink);
  transition: border-color var(--pnp-dur-fast), box-shadow var(--pnp-dur-fast);
}
.pnp-form-field textarea { resize: vertical; }
.pnp-form-field input:focus,
.pnp-form-field textarea:focus {
  outline: none;
  border-color: var(--pnp-purple);
  box-shadow: 0 0 0 3px rgba(107, 63, 160, .15);
}

/* Calculator */
.pnp-calc {
  max-width: 860px;
  padding: clamp(20px, 4vw, 40px);
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  box-shadow: var(--pnp-shadow-md);
}
.pnp-calc-grid { display: grid; gap: var(--pnp-s-5); }
@media (min-width: 800px) { .pnp-calc-grid { grid-template-columns: 1fr 1.1fr; } }
.pnp-calc-results { display: grid; gap: var(--pnp-s-2); align-content: start; }
.pnp-calc-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pnp-s-3);
  padding: 14px 18px;
  background: var(--pnp-bg);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-btn);
}
.pnp-calc-result--main {
  background: linear-gradient(135deg, var(--pnp-purple-tint), var(--pnp-lilac-soft));
  border-color: var(--pnp-lilac);
}
.pnp-calc-label { font-size: var(--pnp-fs-xs); font-weight: 600; color: var(--pnp-ink-400); }
.pnp-calc-value {
  font-family: var(--pnp-font-head);
  font-size: var(--pnp-fs-lg);
  font-weight: 700;
  color: var(--pnp-purple-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pnp-calc-disclaimer { margin: var(--pnp-s-4) 0 0; font-size: var(--pnp-fs-xs); color: var(--pnp-ink-400); }

/* ============================================================
   20. BLOG — overzicht + artikel
   ============================================================ */
.pnp-blog-head h1 { font-size: var(--pnp-fs-xl); margin: 0 0 var(--pnp-s-2); }
.pnp-blog-grid {
  display: grid;
  gap: var(--pnp-s-4);
}
@media (min-width: 640px)  { .pnp-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pnp-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.pnp-blog-card {
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line);
  border-radius: var(--pnp-r-card);
  overflow: hidden;
  box-shadow: var(--pnp-shadow-sm);
  transition: transform var(--pnp-dur) var(--pnp-ease), box-shadow var(--pnp-dur) var(--pnp-ease), border-color var(--pnp-dur);
}
.pnp-blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--pnp-lilac);
  box-shadow: var(--pnp-shadow-lg);
}
.pnp-blog-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.pnp-blog-media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, #fff 0%, var(--pnp-purple-tint) 100%);
  overflow: hidden;
}
.pnp-blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pnp-dur) var(--pnp-ease);
}
.pnp-blog-card:hover .pnp-blog-media img { transform: scale(1.04); }
.pnp-blog-body { display: flex; flex-direction: column; gap: 8px; padding: var(--pnp-s-4); flex-grow: 1; }
.pnp-blog-body time { font-size: var(--pnp-fs-xs); font-weight: 600; color: var(--pnp-ink-400); }
.pnp-blog-body h2, .pnp-blog-body h3 { font-size: var(--pnp-fs-md); margin: 0; line-height: 1.35; }
.pnp-blog-body p { margin: 0; font-size: var(--pnp-fs-sm); color: var(--pnp-ink-400); }
.pnp-blog-more { margin-top: auto; padding-top: 6px; font-size: var(--pnp-fs-sm); font-weight: 600; color: var(--pnp-purple); }

/* Paginatie (blog) */
.pnp-blog .navigation.pagination { margin-top: var(--pnp-s-6); }
.pnp-blog .nav-links { display: flex; justify-content: center; gap: 8px; }
.pnp-blog .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--pnp-r-btn);
  border: 1px solid var(--pnp-line);
  background: var(--pnp-surface);
  color: var(--pnp-ink-600);
  font-weight: 600;
  text-decoration: none;
}
.pnp-blog .nav-links .page-numbers.current { background: var(--pnp-purple); border-color: var(--pnp-purple); color: #fff; }

/* Artikel */
.pnp-post-container { max-width: 820px; }
.pnp-post-back {
  display: inline-block;
  margin-bottom: var(--pnp-s-4);
  font-size: var(--pnp-fs-sm);
  font-weight: 600;
  color: var(--pnp-purple);
  text-decoration: none;
}
.pnp-post-header h1 { font-size: var(--pnp-fs-xl); margin: 0 0 var(--pnp-s-2); }
.pnp-post-header time { font-size: var(--pnp-fs-sm); color: var(--pnp-ink-400); }
.pnp-post-hero {
  margin: var(--pnp-s-4) 0 var(--pnp-s-5);
  border-radius: var(--pnp-r-card);
  overflow: hidden;
  border: 1px solid var(--pnp-line);
  box-shadow: var(--pnp-shadow-md);
  aspect-ratio: 16 / 8;
  background: linear-gradient(160deg, #fff 0%, var(--pnp-purple-tint) 100%);
}
.pnp-post-hero img { width: 100%; height: 100%; object-fit: cover; }
.pnp-post-content { font-size: var(--pnp-fs-md); color: var(--pnp-ink-600); }
.pnp-post-content h2 { font-size: var(--pnp-fs-lg); margin: var(--pnp-s-5) 0 var(--pnp-s-2); }
.pnp-post-content h3 { font-size: var(--pnp-fs-md); margin: var(--pnp-s-4) 0 var(--pnp-s-2); }
.pnp-post-content p, .pnp-post-content ul, .pnp-post-content ol { margin-bottom: var(--pnp-s-3); }
.pnp-post-content a { color: var(--pnp-purple); }
.pnp-post-content blockquote {
  margin: var(--pnp-s-4) 0;
  padding: var(--pnp-s-3) var(--pnp-s-4);
  border-left: 4px solid var(--pnp-lilac);
  background: var(--pnp-purple-tint);
  border-radius: 0 var(--pnp-r-btn) var(--pnp-r-btn) 0;
}
.pnp-post-related { margin-top: var(--pnp-s-8); }
.pnp-post-related > h2 { text-align: center; font-size: var(--pnp-fs-xl); margin-bottom: var(--pnp-s-5); }

/* ============================================================
   21. REVEALS & REDUCED MOTION
   ============================================================ */
/* Elementen zijn standaard zichtbaar; JS voegt animaties toe (geen FOUC/CLS). */
html.pnp-lenis, html.pnp-lenis body { height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   22. FIX: hero volle breedte + scroll-top
   ============================================================ */
/* Hero-content over de volle paginabreedte i.p.v. de 1200px-kolom */
.pnp-hero .pnp-hero-inner { max-width: none; }

/* Astra's "terug naar boven"-knop verbergen (overlapte de WhatsApp-knop) */
#ast-scroll-top { display: none !important; }

/* Hamburger-knop (mobiel): reset native iOS-knopweergave — anders rendert de
   <button> als blauwe cirkel. En houd het icoon zichtbaar: als flex-item in
   de <button> klapte de SVG naar breedte 0 (links zijn <a>, die niet). */
.pnp-icon-btn {
  -webkit-appearance: none;
  appearance: none;
}
.pnp-icon-btn svg { flex-shrink: 0; }

/* ============================================================
   23. BUNDEL-/SALEKORTING — oude prijs rood, nieuwe prijs groen
   ============================================================ */
.pnp-product-price del,
.woocommerce ul.products li.product .price del,
.woocommerce div.product .entry-summary p.price del {
  color: var(--pnp-error);
  opacity: 1;
  font-weight: 400;
  margin-right: 6px;
}
.pnp-product-price ins,
.woocommerce ul.products li.product .price ins,
.woocommerce div.product .entry-summary p.price ins {
  color: var(--pnp-success);
  font-weight: 700;
  text-decoration: none;
}

/* Groene "Bespaar X%"-pill met kortingsicoon (homepage-kaarten) */
.pnp-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  width: fit-content;
  margin-top: 2px;
  padding: 4px 10px;
  border-radius: var(--pnp-r-pill);
  background: rgba(30, 158, 106, .12);
  color: var(--pnp-success);
  font-size: var(--pnp-fs-xs);
  font-weight: 700;
  line-height: 1.2;
}
.pnp-save svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Zelfde pill als sale-flash op shop + productpagina (behoudt plaatsing, groen) */
.woocommerce span.onsale.pnp-save {
  background: rgba(30, 158, 106, .14);
  color: var(--pnp-success);
  gap: 6px;
}

/* ============================================================
   24. HERO BUNDEL-SLIDER — bundels roteren in de hero-productkaart
   ============================================================ */
/* De bestaande productkaart wordt de slider; de rest van de hero blijft
   volledig statisch. Slides liggen gestapeld in de kaart en crossfaden. */
.pnp-vial-card.pnp-vial-slider {
  position: relative;
  display: block;
  padding: 0;
}
.pnp-vial-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(18px, 3.5vw, 28px);
  padding-bottom: 52px; /* ruimte voor de dots */
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--pnp-ease), visibility 0s .7s;
  pointer-events: none;
}
.pnp-vial-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s var(--pnp-ease);
  pointer-events: auto;
}

/* Drie flesjes: één vooraan, twee er vlak achter */
.pnp-vial-trio {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pnp-vial-trio img {
  position: absolute;
  max-height: 96%;
  max-width: 58%;
  object-fit: contain;
  mix-blend-mode: multiply; /* witte fotoranden vallen weg in de kaart */
}
.pnp-vial-trio .pnp-vial-back-l { transform: translateX(-38%) translateY(-3%) scale(.8); opacity: .88; }
.pnp-vial-trio .pnp-vial-back-r { transform: translateX(38%) translateY(-3%) scale(.8); opacity: .88; }
.pnp-vial-trio .pnp-vial-front  { position: relative; z-index: 2; filter: drop-shadow(0 14px 24px rgba(45, 27, 92, .16)); }

/* Naam, prijs en koopknop in de kaart */
.pnp-vial-info {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.pnp-vial-info h3 { font-size: var(--pnp-fs-md); font-weight: 600; margin: 0; }
.pnp-vial-price {
  margin: 0;
  font-size: var(--pnp-fs-base);
  font-variant-numeric: tabular-nums;
}
.pnp-vial-price del { color: var(--pnp-error); font-weight: 400; margin-right: 8px; opacity: 1; }
.pnp-vial-price ins { color: var(--pnp-success); font-weight: 700; text-decoration: none; }
.pnp-vial-slide .pnp-btn { min-height: 44px; padding: 10px 24px; }

/* Navigatiedots onderin de kaart (24px touch-target, kleinere stip) */
.pnp-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.pnp-hero-dot {
  width: 24px;
  height: 24px;
  padding: 7px;
  border: none;
  border-radius: var(--pnp-r-pill);
  background-color: rgba(107, 63, 160, .28);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color var(--pnp-dur-fast), width var(--pnp-dur) var(--pnp-ease);
}
.pnp-hero-dot:hover { background-color: var(--pnp-purple); }
.pnp-hero-dot.is-active {
  width: 40px;
  background-color: var(--pnp-purple);
}

/* Chip "Gratis verzending" tussen de afbeelding en de titel, rechts —
   kruislings tegenover de "Batch-geteste kwaliteit"-chip linksboven */
.pnp-vial-slider ~ .pnp-float-chip.pnp-chip-2 { bottom: 30%; right: -4%; }
@media (max-width: 899px) {
  /* Mobiel: het info-blok (titel/prijs/knop) + padding staan onderaan verankerd,
     dus de titel begint altijd ~157px vanaf de onderkant, ongeacht schermbreedte.
     Een vaste afstand vanaf onder houdt de chip dus op élk toestel net boven de
     titel (een percentage schoof mee met de kaarthoogte en viel eroverheen). */
  .pnp-vial-slider ~ .pnp-float-chip.pnp-chip-2 { bottom: 170px; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pnp-vial-slide { transition: none; }
}


/* -------------------------------------------------------------------------
   Variant-swatches (Woo Variation Swatches) — pill-stijl volgens design tokens
   Fix + restyling: ronde knoppen, paarse actieve staat (zie --pnp-purple)
   ------------------------------------------------------------------------- */
.variable-items-wrapper.button-variable-items-wrapper { gap: 10px; }

.variable-items-wrapper .variable-item.button-variable-item {
	border-radius: var(--pnp-r-pill, 999px) !important;
	background: var(--pnp-surface, #fff) !important;
	border: 1px solid var(--pnp-line, #FEF9F0) !important;
	box-shadow: var(--pnp-shadow-sm) !important;
	padding: 9px 18px !important;
	height: auto !important;
	min-width: 0 !important;
	transition: all .18s ease;
}

.variable-items-wrapper .variable-item.button-variable-item .variable-item-span {
	font-family: Inter, -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--pnp-ink-600, #736856);
}

.variable-items-wrapper .variable-item.button-variable-item:hover {
	border-color: var(--pnp-lilac, #F6D9AD) !important;
	background: var(--pnp-purple-tint, #FFFAF4) !important;
	transform: translateY(-1px);
}

.variable-items-wrapper .variable-item.button-variable-item.selected,
.variable-items-wrapper .variable-item.button-variable-item.selected:hover {
	background: var(--pnp-purple, #A97E3C) !important;
	border-color: var(--pnp-purple, #A97E3C) !important;
	box-shadow: 0 4px 14px rgba(107, 63, 160, .35) !important;
}

.variable-items-wrapper .variable-item.button-variable-item.selected .variable-item-span {
	color: #fff !important;
}


/* ============================================================
   21. EXPRESS CHECKOUT — WooPayments (Apple Pay / Google Pay)
   marker: pnp_express_checkout
   ============================================================ */
.wcpay-express-checkout-wrapper{
  width: 100%;
  margin: var(--pnp-s-3, 16px) 0 0;
}
.wcpay-express-checkout-wrapper #wcpay-express-checkout-element,
.wcpay-express-checkout-wrapper .__PrivateStripeElement{
  width: 100% !important;
  max-width: 100% !important;
}
/* zelfde hoekronding als de themaknoppen */
.wcpay-express-checkout-wrapper iframe{
  border-radius: var(--pnp-r-btn, 12px) !important;
}

/* productpagina — direct onder de koopknop, gelijke breedte */
.single-product div.summary .wcpay-express-checkout-wrapper{
  margin-top: var(--pnp-s-3, 16px);
}

/* winkelwagen */
.woocommerce-cart .wcpay-express-checkout-wrapper{
  margin: var(--pnp-s-2, 8px) 0 0;
}

/* afrekenen — boven het formulier, met lucht eronder */
.woocommerce-checkout .wcpay-express-checkout-wrapper{
  margin: 0 0 var(--pnp-s-4, 24px);
}

/* ---------- mobiel ---------- */
@media (max-width: 600px){
  .wcpay-express-checkout-wrapper,
  .single-product div.summary .wcpay-express-checkout-wrapper{
    margin-top: 12px;
  }
  .woocommerce-checkout .wcpay-express-checkout-wrapper{
    margin-bottom: 16px;
  }
  .wcpay-express-checkout-wrapper iframe{
    border-radius: 12px !important;
  }
}

/* ============================================================
   22. PRODUCTPAGINA — boven de fold (mobiel)
   marker: pnp_pdp_fold
   Doel: alle 5 verkooppunten zichtbaar bij het openen van de pagina.
   Op 375px eindigde het 5e punt op 829px terwijl de viewport 812px is.
   Hier winnen we ~55px terug in de tussenruimtes boven de titel,
   zonder iets weg te halen of te verkleinen.
   ============================================================ */
@media (max-width: 600px){

  /* kruimelpad: 24px -> 6px */
  .single-product .summary .woocommerce-breadcrumb{
    margin-bottom: 6px !important;
  }

  /* Klarna-boodschap van WooPayments: 58px container voor een 27px iframe */
  .single-product .summary #payment-method-message{
    margin: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
  }

  /* categorielabel */
  .single-product .summary .single-product-category{
    margin-bottom: 6px !important;
  }

  /* titel + prijs compacter */
  .single-product .summary .product_title{
    margin-bottom: 4px !important;
  }
  .single-product .summary > .price{
    margin-bottom: 10px !important;
  }

  /* verkooppunten: krappere regelafstand, blijft goed leesbaar */
  .single-product .summary .pnp-checklist{
    margin-top: 0 !important;
  }
  .single-product .summary .pnp-checklist li{
    margin-bottom: 6px !important;
  }
}

/* ============================================================
   23. PRODUCTPAGINA — volgorde boven de fold (mobiel)
   marker: pnp_pdp_order
   De koopbalk staat onderaan vast en neemt ~92px in. Om de titel,
   prijs EN alle 5 verkooppunten daarboven te laten passen, zetten
   we de Trustpilot-regel en de Klarna-boodschap onder de
   verkooppunten. Niets verdwijnt, alleen de volgorde wijzigt.
   ============================================================ */
@media (max-width: 600px){

  .single-product .summary.entry-summary{
    display: flex;
    flex-direction: column;
  }

  /* bovenaan: identiteit + waarde */
  .single-product .summary .woocommerce-breadcrumb{ order: 1; }
  .single-product .summary .single-product-category{ order: 2; }
  .single-product .summary .product_title{ order: 3; }
  .single-product .summary > .price{ order: 4; }
  .single-product .summary .woocommerce-product-details__short-description{ order: 5; }

  /* daarna: sociale bewijskracht + betaalopties */
  .single-product .summary .pnp-pdp-trustpilot,
  .single-product .summary .trustpilot-widget{ order: 6; margin-top: 14px; }
  .single-product .summary #payment-method-message{ order: 7; }

  /* dan het koopblok en de rest */
  .single-product .summary form.cart{ order: 8; }
  .single-product .summary .product_meta{ order: 9; }
  .single-product .summary .pnp-pdp-trust{ order: 10; }
}

/* ============================================================
   23. PRODUCTPAGINA — betaalbadges onder de prijs
   marker: pnp_pdp_badges
   ============================================================ */

/* Dubbel categorielabel weg: het kruimelpad direct erboven zegt al
   "Home / Research Compounds / Retatrutide". Dit was pure herhaling. */
.single-product .summary .single-product-category{
  display: none !important;
}

@media (max-width: 600px){

  /* betaalbadges vóór de verkooppunten, dus direct onder de prijs */
  .single-product .summary .woocommerce-product-details__short-description{
    display: flex;
    flex-direction: column;
  }
  .single-product .summary .woocommerce-product-details__short-description > .pnp-pay-note{
    order: 1;
    margin: 0 0 14px !important;
  }
  .single-product .summary .woocommerce-product-details__short-description > .pnp-checklist{
    order: 2;
  }

  /* onderschrift compacter zodat de verkooppunten boven de fold blijven */
  .single-product .pnp-pay-note .pnp-pay-note-text{
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
  }

  /* verkooppunten iets krapper, blijft goed leesbaar */
  .single-product .summary .pnp-checklist li{
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
  }
}

/* ============================================================
   24. PRODUCTPAGINA — Trustpilot direct onder de betaalbadges
   marker: pnp_pdp_trustpilot_order
   De badges en de verkooppunten zitten samen in de wrapper
   .woocommerce-product-details__short-description, terwijl de
   Trustpilot-widget daarbuiten in .summary staat. Met display:contents
   vervalt die wrapper als box, waardoor alle drie los te ordenen zijn
   binnen de flex-kolom van .summary. Overschrijft sectie 23 bewust.
   ============================================================ */
@media (max-width: 600px){

  .single-product .summary .woocommerce-product-details__short-description{
    display: contents;
  }

  /* Zelfde specificiteit als sectie 23 (child-combinator), zodat deze
     order-waarden daar wél van winnen. Met alleen ".summary .pnp-pay-note"
     verloor het en belandden de badges vóór de titel. */
  .single-product .summary .woocommerce-product-details__short-description > .pnp-pay-note{
    order: 5;
    margin: 0 0 8px !important;
  }
  .single-product .summary .trustpilot-widget.pnp-pdp-trustpilot{
    order: 6;
    margin: 0 0 10px !important;
  }
  .single-product .summary .woocommerce-product-details__short-description > .pnp-checklist{
    order: 7;
    margin: 0 !important;
  }
  /* Klarna-boodschap ná de verkooppunten houden */
  .single-product .summary #payment-method-message{
    order: 8;
  }

  /* ruimte terugwinnen voor de extra widget */
  .single-product .summary .pnp-checklist li{
    margin-bottom: 2px !important;
  }
}

/* ============================================================
   25. pnp_pdp_sticky_direct — koopbalk direct in beeld (mobiel)
   De balk staat nu al bij het openen van de productpagina in
   beeld i.p.v. na scrollen. Daarvoor is ~45px teruggewonnen,
   zodat alle 5 verkooppunten er nog steeds volledig boven
   uitkomen. Meting 375x812: laatste punt eindigt op 731, de
   balk begint op 749 -> 18px lucht. Waarden hier overschrijven
   bewust sectie 24 (gelijke specificiteit, staat later).
   ============================================================ */
@media (max-width: 600px){
  .single-product .woocommerce-product-gallery{ margin-bottom: 6px !important; }
  .single-product .summary .woocommerce-product-details__short-description > .pnp-pay-note{ margin: 0 0 4px !important; }
  .single-product .summary .trustpilot-widget.pnp-pdp-trustpilot{ margin: 0 0 6px !important; }
  .single-product .summary .pnp-checklist li{ margin-bottom: 0 !important; line-height: 1.3 !important; }
  .pnp-sticky-cart{ padding-top: 8px !important; padding-bottom: 8px !important; }
  .pnp-sticky-cart__btn{ min-height: 46px !important; }
  body.pnp-has-sticky{ padding-bottom: 80px !important; }
}

/* ============================================================
   26. pnp_variant_vinkje — geselecteerde dosering aanduiden
   Hoort bij pnp_preselect_cheapest in functions.php: de goed-
   koopste variant staat standaard aan, dus de geselecteerde
   staat moet er goed uitzien.

   ONTWERP: de geselecteerde knop wordt paars gevuld met witte
   vette tekst en een wit vinkje BINNEN de knop, rechts naast
   het label en verticaal gecentreerd. Bewust geen los rondje/
   badge in de hoek (zag uit als een sticker) en bewust geen
   inline vinkje vóór het label (dan verspringt de rij bij het
   wisselen van dosering). Zo blijft de knopgrootte gelijk.

   DRIE VALKUILEN VAN WOO VARIATION SWATCHES:
   1) De plugin gebruikt ::before/::after voor zijn tooltip en
      zet daar visibility:hidden op. Een eigen vinkje via
      ::after is dan ONZICHTBAAR terwijl de computed style er
      perfect uitziet -> altijd visibility:visible meegeven.
   2) .selected krijgt witte tekst terwijl de vulling licht
      bleef -> wit op bijna-wit. Viel nooit op omdat er niets
      voorgeselecteerd stond. Daarom vullen we .selected paars.
   3) Er staat elders al min-width/padding met !important op
      deze knoppen. Vandaar de selectors met ul/li erin: die
      hebben genoeg specificiteit om te winnen.
   ============================================================ */
/* Alle knoppen iets ruimer, symmetrisch: zo valt het vinkje in de
   rechter ruimte zonder tegen het label te plakken, EN blijven alle
   knoppen dezelfde breedte -> geen verspringende rij bij wisselen. */
.woo-variation-swatches ul.variable-items-wrapper li.variable-item.button-variable-item{
  padding-left: 30px !important;
  padding-right: 30px !important;
}
.woo-variation-swatches ul.variable-items-wrapper li.variable-item.button-variable-item.selected{
  background-color: var(--pnp-purple, #a97e3c) !important;
  background-image: linear-gradient(135deg, var(--pnp-purple, #a97e3c), var(--pnp-purple-dark, #956d30)) !important;
  border-color: var(--pnp-purple-dark, #956d30) !important;
  box-shadow: 0 3px 12px rgba(107,63,160,.30) !important;
}
.woo-variation-swatches ul.variable-items-wrapper li.variable-item.button-variable-item.selected .variable-item-span{
  color: #fff !important;
  font-weight: 700 !important;
}
.woo-variation-swatches ul.variable-items-wrapper li.variable-item.button-variable-item.selected::after{
  content: '' !important;
  visibility: visible !important;   /* valkuil 1 */
  opacity: 1 !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: 11px !important;
  left: auto !important;
  bottom: auto !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: no-repeat center/13px 13px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
}

/* ============================================================
   27. pnp_gift_ghk — cadeauregel in de winkelwagen
   Hoort bij het blok pnp_gift_ghk in functions.php.
   ============================================================ */
.pnp-gift-label{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--pnp-purple, #a97e3c);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ============================================================
   28. pnp_cart_drawer — winkelwagen als uitschuifbare la
   Hoort bij het blok pnp_cart_drawer in functions.php.
   LET OP: het thema zet img{height:auto !important}, dus de
   productminiaturen hebben hier !important nodig.
   ============================================================ */
.pnp-drawer{position:fixed; inset:0; z-index:9998;}
/* pnp-drawer knopcorrecties: het thema forceert padding 12px 24px op
   alle knoppen, waardoor mijn 28px-knoppen 50px breed werden. */
.pnp-drawer *{box-sizing:border-box;}
.pnp-drawer button{padding:0 !important; min-width:0 !important;}
.pnp-drawer__stap{
  width:30px !important; height:30px !important; flex:0 0 30px;
}
.pnp-drawer__weg{
  width:26px !important; height:26px !important;
  border:0 !important; background:none !important; box-shadow:none !important;
}
.pnp-drawer__sluit{width:34px !important; height:34px !important;}
/* één scheidingslijn, niet twee: de laatste regel grenst aan het totaal */
.pnp-drawer__regel:last-child{border-bottom:0;}
.pnp-drawer[hidden]{display:none;}
.pnp-drawer__overlay{
  position:absolute; inset:0;
  background:rgba(24,14,40,.52);
  opacity:0; transition:opacity .28s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.pnp-drawer.is-open .pnp-drawer__overlay{opacity:1;}
.pnp-drawer__paneel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 92vw);
  display:flex; flex-direction:column;
  background:#fff;
  box-shadow:-14px 0 44px rgba(30,14,60,.24);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.pnp-drawer.is-open .pnp-drawer__paneel{transform:none;}
.pnp-drawer.is-bezig .pnp-drawer__inner{opacity:.55; pointer-events:none;}
.pnp-drawer__inner{transition:opacity .15s ease;}
body.pnp-drawer-open{overflow:hidden;}

.pnp-drawer__kop{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:17px 18px;
  border-bottom:1px solid #fff9f1;
}
.pnp-drawer__titel{font-size:17px; font-weight:800; color:var(--pnp-ink, #3b3020); letter-spacing:-.01em;}
.pnp-drawer__sluit{
  width:34px; height:34px; flex:0 0 34px; border:0; border-radius:50%;
  background:#fffbf5; color:#918066; font-size:22px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.pnp-drawer__sluit:hover{background:#fff7eb;}
.pnp-drawer__body{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 18px 22px;}

.pnp-drawer__marketing:empty{display:none;}

.pnp-drawer__lijst{list-style:none; margin:0; padding:0;}
.pnp-drawer__regel{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 0; border-bottom:1px solid #fffaf4; position:relative;
}
.pnp-drawer__regel:first-child{padding-top:2px;}
.pnp-drawer__beeld{flex:0 0 62px; display:block; border-radius:10px; overflow:hidden; background:#f7f4fb;}
.pnp-drawer__beeld img{
  width:62px !important; height:62px !important; object-fit:contain !important;
  display:block !important; margin:0 !important;
}
.pnp-drawer__info{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px;}
.pnp-drawer__naam{
  font-size:14px; font-weight:700; line-height:1.3; color:var(--pnp-ink, #3b3020);
  text-decoration:none; padding-right:22px;
}
.pnp-drawer__naam:hover{color:var(--pnp-purple, #a97e3c);}
.pnp-drawer__regelprijs{font-size:14px; font-weight:700; color:var(--pnp-purple, #a97e3c);}
.pnp-drawer__badge{
  align-self:flex-start; padding:2px 8px; border-radius:999px;
  background:var(--pnp-purple, #a97e3c); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.pnp-drawer__aantal{display:inline-flex; align-items:center; gap:2px; margin-top:2px;}
.pnp-drawer__stap{
  width:28px; height:28px; border:1px solid #fdf4e7; background:#fff;
  border-radius:8px; color:#806b4c; font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.pnp-drawer__stap:hover{background:#fffaf4; border-color:#f5e7d1;}
.pnp-drawer__cijfer{min-width:30px; text-align:center; font-size:14px; font-weight:700;}
.pnp-drawer__weg{
  position:absolute; top:12px; right:0;
  width:24px; height:24px; border:0; background:none;
  color:#c6b8a3; font-size:19px; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pnp-drawer__weg:hover{color:#a97e3c;}

.pnp-drawer__totaal{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:18px 0 14px; padding-top:14px; border-top:2px solid #fffaf4;
  font-size:15px; color:#918066;
}
.pnp-drawer__totaal strong{font-size:21px; font-weight:800; color:var(--pnp-ink, #3b3020);}

.pnp-drawer__knop{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:52px; padding:0 18px;
  border-radius:var(--pnp-r-btn, 12px);
  background:linear-gradient(135deg, var(--pnp-purple, #a97e3c), var(--pnp-purple-dark, #956d30));
  color:#fff !important; font-size:16px; font-weight:800; text-decoration:none;
  box-shadow:0 6px 18px rgba(107,63,160,.26);
  -webkit-tap-highlight-color:transparent;
}
.pnp-drawer__knop:hover{filter:brightness(1.05);}
.pnp-drawer__link{
  display:block; margin-top:10px; text-align:center;
  font-size:13px; font-weight:600; color:#ae9b7f; text-decoration:underline;
}
.pnp-drawer__link:hover{color:var(--pnp-purple, #a97e3c);}

.pnp-drawer__leeg{padding:38px 6px; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center;}
.pnp-drawer__leeg-icoon{
  width:54px; height:54px; border-radius:50%; background:#fffbf5;
  display:block; position:relative;
}
.pnp-drawer__leeg-icoon::after{
  content:''; position:absolute; inset:15px;
  border:2px solid #e7d6bc; border-radius:4px 4px 8px 8px;
}
.pnp-drawer__leeg-tekst{font-size:15px; color:#ae9b7f;}

@media (max-width:480px){
  .pnp-drawer__paneel{width:100vw;}
  .pnp-drawer__kop{padding:15px 16px;}
  .pnp-drawer__body{padding:14px 16px 20px;}
  .pnp-drawer__beeld{flex:0 0 54px;}
  .pnp-drawer__beeld img{width:54px !important; height:54px !important;}
}
@media (prefers-reduced-motion: reduce){
  .pnp-drawer__paneel, .pnp-drawer__overlay{transition:none;}
}

/* ============================================================
   29. pnp_drawer_ladder — voortgangsbalk bovenin de la
   ============================================================ */
.pnp-ladder{
  margin:0 0 16px; padding:13px 14px;
  border-radius:12px;
  background:linear-gradient(135deg,#fffaf3,#fff7eb);
  border:1px solid #fff4e5;
}
.pnp-ladder__tekst{
  font-size:13px; line-height:1.35; color:#806b4c; font-weight:600;
  margin-bottom:9px;
}
.pnp-ladder__tekst strong{color:var(--pnp-purple, #a97e3c); font-weight:800;}
.pnp-ladder__tekst.is-gehaald{color:#1c7a4f;}
.pnp-ladder__balk{
  height:7px; border-radius:999px; background:#fef3e2; overflow:hidden;
}
.pnp-ladder__balk span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--pnp-purple, #a97e3c), #d2a96b);
  transition:width .35s ease;
}
.pnp-ladder__tredes{
  display:flex; justify-content:space-between; gap:8px; margin-top:8px;
}
.pnp-ladder__trede{
  font-size:11px; font-weight:700; color:#baac96;
  display:inline-flex; align-items:center; gap:4px;
}
.pnp-ladder__trede::before{
  content:''; width:12px; height:12px; flex:0 0 12px; border-radius:50%;
  border:2px solid #f1e2cb; background:#fff;
}
.pnp-ladder__trede.is-gehaald{color:#1c7a4f;}
.pnp-ladder__trede.is-gehaald::before{
  border-color:#1c7a4f;
  background:#1c7a4f no-repeat center/8px 8px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
@media (max-width:480px){
  .pnp-ladder{padding:11px 12px; margin-bottom:14px;}
  .pnp-ladder__tekst{font-size:12.5px;}
  .pnp-ladder__trede{font-size:10.5px;}
}

/* ============================================================
   30. pnp_drawer_crosssell + pnp_drawer_gift_hint
   "Vaak samen gekocht" onder de productlijst, en de tip dat
   ditzelfde flesje gratis kan bij aanmelding.
   ============================================================ */
/* Bewust GEEN eigen kader of achtergrond: het moet ogen als een gewone
   regel in de winkelwagen, alleen kleiner en met een rustige knop. */
.pnp-cross{
  margin:6px 0 0; padding:13px 0 2px;
  border-top:1px solid #fffaf4;
}
.pnp-cross__kop{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#c6b8a3; margin-bottom:9px;
}
.pnp-cross__regel{display:flex; align-items:center; gap:10px;}
.pnp-cross__beeld{flex:0 0 42px; border-radius:9px; overflow:hidden; background:#f7f4fb;}
.pnp-cross__beeld img{
  width:42px !important; height:42px !important; object-fit:contain !important;
  display:block !important; margin:0 !important;
}
.pnp-cross__info{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px;}
.pnp-cross__naam{font-size:13px; font-weight:700; color:var(--pnp-ink, #3b3020); line-height:1.25;}
.pnp-cross__prijs{font-size:12.5px; font-weight:700; color:var(--pnp-purple, #a97e3c);}
.pnp-cross__knop{
  flex:0 0 auto; height:31px !important; padding:0 13px !important;
  border:1.5px solid var(--pnp-purple, #a97e3c) !important; border-radius:999px;
  background:#fff !important; color:var(--pnp-purple, #a97e3c) !important;
  font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.pnp-cross__knop:hover{background:#fffaf4 !important;}
.pnp-cross__knop[disabled]{opacity:.5; cursor:default;}
.pnp-hint{
  margin:0 0 16px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(135deg,#fff6e2,#ffeecd);
  border:1px solid #f2dcae;
  display:flex; flex-direction:column; gap:9px;
}
.pnp-hint__tekst{font-size:12.5px; line-height:1.4; color:#6b4a12; font-weight:600;}
.pnp-hint__tekst strong{color:#4a3208;}
/* Het aanmelden gebeurt nu IN de la, niet meer via een popup. */
.pnp-hint__form{display:flex; gap:7px; align-items:stretch;}
.pnp-hint__email{
  flex:1 1 auto; min-width:0;
  height:34px !important; padding:0 12px !important;
  border:1px solid #e6d3a8 !important; border-radius:999px;
  background:#fff !important; color:#3d2f14;
  font-size:12.5px; font-family:inherit;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.pnp-hint__email::placeholder{color:#a99a76;}
.pnp-hint__email:focus{outline:2px solid rgba(107,63,160,.45); outline-offset:1px;}
.pnp-hint__melding{margin-top:7px; font-size:12px; line-height:1.4; font-weight:600; color:#4a3208;}
.pnp-hint__melding:empty{display:none;}
.pnp-hint__melding.is-fout{color:#a3331f;}
.pnp-hint__knop{
  flex:0 0 auto; height:34px !important; padding:0 14px !important;
  border:0 !important; border-radius:999px;
  background:var(--pnp-purple, #a97e3c) !important; color:#fff !important;
  font-size:12.5px; font-weight:800; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pnp-hint__knop:hover{filter:brightness(1.08);}

@media (max-width:480px){
  .pnp-cross__beeld{flex:0 0 38px;}
  .pnp-cross__beeld img{width:38px !important; height:38px !important;}
  .pnp-cross__naam{font-size:12.5px;}
  .pnp-cross__knop{padding:0 11px !important; font-size:11.5px; height:29px !important;}
}

/* ------------------------------------------------------------------ *
 * Inhoudspagina's (about, shipping, faq, terms ...)
 * Astra levert de basis; dit tilt de leesbaarheid naar de rest van de site.
 * ------------------------------------------------------------------ */
.entry-content > .pe-lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--pnp-ink, #211A12);
  font-weight: 500;
  max-width: 62ch;
  margin-bottom: 1.6em;
}
.entry-content h2 { margin-top: 2em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content p,
.entry-content li { max-width: 68ch; }
.entry-content ul { padding-left: 1.15em; }
.entry-content li { margin-bottom: .35em; }

.pe-tabel-wrap { overflow-x: auto; }
table.pe-tabel {
  width: 100%;
  max-width: 68ch;
  border-collapse: collapse;
  margin: 1.4em 0 1.8em;
  font-size: .95rem;
}
table.pe-tabel th,
table.pe-tabel td {
  text-align: left;
  padding: .7em .9em;
  border-bottom: 1px solid var(--pnp-line, #EFE6D6);
}
table.pe-tabel thead th {
  background: var(--pnp-cloud, #FBF7EF);
  font-weight: 700;
  border-bottom-width: 2px;
}
table.pe-tabel td:last-child,
table.pe-tabel th:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.pe-tabel tbody tr:last-child td { border-bottom: none; }

/* Taalkeuze in het mobiele menu — in de kop is er geen ruimte voor. */
.pnp-mobile-taal { margin-top: 14px; display: flex; justify-content: center; }
.pnp-mobile-taal .pe-schakel__knop { height: 44px; padding: 0 16px; font-size: 14px; }
.pnp-mobile-taal .pe-schakel__menu { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(100% + 8px); top: auto; }

/* Levertijd per land op de productpagina */
.pnp-pdp-levertijd {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pnp-ink, #211A12);
}
.pnp-pdp-levertijd b { color: var(--pnp-purple, #A97E3C); }

/* Levertijdregel bovenaan de verzendpagina */
.pe-jouwland { font-size: 1.02rem; }
.pe-levertijd--groot { font-weight: 600; }
.pe-levertijd--groot b { color: var(--pnp-purple, #A97E3C); }