/*
  De productpagina: product.html uit v52.

  De .pp-regels uit het style-blok van dat bestand, ongewijzigd overgenomen.
  Wat niet met pp- begint zat al in tokens.css, base.css, header.css of
  footer.css en staat hier dus niet nog een keer.

  Mobiele regels blijven binnen de media queries die v52 gebruikte. Dat zijn
  er meer dan de 600px uit CLAUDE.md, want de productpagina heeft een
  tweekolomsopmaak die eerder omvalt dan de rest van de site.
*/

/* ═══ PRODUCT PAGE SPECIFIC ═══ */
.pp-container { max-width: 1400px; margin: 0 auto; padding: 0 5%; }

/* Breadcrumb */
.pp-breadcrumb { padding: 5rem 8% 1rem 12%; font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mauve); max-width: 1280px; margin: 0 auto; }

.pp-breadcrumb a { color: var(--mauve); text-decoration: none; transition: color 0.2s; }

.pp-breadcrumb a:hover { color: var(--wine); }

.pp-breadcrumb .sep { margin: 0 0.6rem; opacity: 0.5; }

/* Hero — 2 column */


/* Hero — clean white background, match for product image */
.pp-hero-wrap { position: relative; background: var(--wit); overflow: hidden; }

.pp-hero-wrap > * { position: relative; z-index: 1; }

.pp-hero { padding: 0.5rem 8% 4rem 12%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; align-items: start; }

@media (max-width: 900px) {
  .pp-hero { grid-template-columns: 1fr; gap: 2rem; padding: 1rem 5% 3rem; }
}

/* LEFT: Gallery */
.pp-gallery { display: flex; justify-self: end; width: 100%; flex-direction: column; gap: 0.8rem; position: sticky; top: 90px; align-self: start; }

.pp-gallery-main { aspect-ratio: 1/1; max-width: 480px; border-radius: 14px; overflow: hidden; background: var(--cream); position: relative; box-shadow: 0 16px 48px rgba(26,15,18,0.08); }

.pp-gallery-main video, .pp-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-gallery-main .pp-mute-btn { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(26,15,18,0.55); border: none; color: rgba(253,246,240,0.95); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background 0.2s, transform 0.2s; }

.pp-mute-btn:hover { background: rgba(26,15,18,0.85); transform: scale(1.08); }

.pp-mute-btn[data-muted="false"] { background: rgba(200,169,126,0.9); color: var(--noir); }

/* Thumbnailrij: horizontale scroller met pijlen, vier stuks in beeld.
   Swipen werkt vanzelf via overflow-x, de pijlen zijn er voor de muis. */
.pp-thumb-rij { position: relative; max-width: 480px; }

.pp-gallery-thumbs {
  display: flex; gap: 0.5rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pp-gallery-thumbs::-webkit-scrollbar { display: none; }

.pp-thumb-btn { flex: 0 0 calc((100% - 1.5rem) / 4); scroll-snap-align: start; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1.5px solid transparent; cursor: pointer; background: none; padding: 0; transition: border-color 0.2s, transform 0.2s; }

.pp-thumb-pijl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(253,246,240,0.94); border: 1px solid rgba(158,90,110,0.22);
  color: var(--mauve); cursor: pointer; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(26,15,18,0.1);
  transition: opacity 0.25s, visibility 0.25s, background 0.2s, color 0.2s;
}

.pp-thumb-pijl:hover { background: var(--mauve); color: var(--cream); }

.pp-thumb-pijl.vorige { left: -6px; }

.pp-thumb-pijl.volgende { right: -6px; }

.pp-thumb-pijl[hidden] { display: none; }

.pp-thumb-btn { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1.5px solid transparent; cursor: pointer; background: none; padding: 0; transition: border-color 0.2s, transform 0.2s; }

.pp-thumb-btn.active { border-color: var(--gold); }

.pp-thumb-btn:hover { transform: translateY(-2px); }

.pp-thumb-btn img, .pp-thumb-btn video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RIGHT: Product info */
.pp-info { padding: 0; }

.pp-info-eyebrow { font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.8rem; }

.pp-info-eyebrow::before, .pp-info-eyebrow::after { content: ''; flex: 0 0 24px; height: 1px; background: var(--gold); opacity: 0.4; }

.pp-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--noir); line-height: 1.1; margin-bottom: 0.25rem; letter-spacing: -0.005em; }

/* Regel 1: inspiratie plus het retail-badge ernaast. Wrap staat aan, dus
   bij een lange inspiratienaam zakt het badge naar de volgende regel in
   plaats van de tekst plat te drukken. */
.pp-inspired-rij { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.05rem; }

.pp-inspired { font-family: 'Jost', sans-serif; font-style: normal; font-weight: 300; font-size: 0.92rem; color: var(--mauve); letter-spacing: 0.04em; }

/* Badge in de stijl van .badge op de productkaarten, maar in blush */
.pp-retail-badge { flex-shrink: 0; display: inline-block; background: var(--blush-licht); color: var(--mauve); padding: 0.26rem 0.7rem; border-radius: 20px; font-family: 'Jost', sans-serif; font-size: 0.7rem; font-weight: 400; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* Regel 2: het geurprofiel, label in dezelfde stijl als "Inspired by" */
.pp-scent { font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 300; color: var(--mauve); letter-spacing: 0.04em; margin-bottom: 0.05rem; }

/* word-spacing knijpt alleen de spaties rond het middenpunt samen */
.pp-scent-woorden { font-size: 0.79rem; font-weight: 500; letter-spacing: 0.04em; word-spacing: -0.04em; color: var(--noir); opacity: 0.7; }

/* Rating strip */
.pp-rating { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.35rem; margin-top: 0; padding-top: 0; cursor: pointer; }

.pp-stars { display: flex; gap: 2px; color: var(--gold); }

.pp-rating-text { font-size: 0.82rem; color: var(--mauve); letter-spacing: 0.02em; }

.pp-rating-text a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; transition: opacity 0.2s; }

.pp-rating-text a:hover { opacity: 0.7; }

/* Price */
.pp-price-row { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.3rem;; margin-top: -0.05rem; }

.pp-price { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 2rem; color: var(--noir); letter-spacing: -0.01em; }

.pp-price-size { font-size: 0.8rem; color: var(--mauve); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 300; }

.pp-price-note { font-size: 0.78rem; color: var(--mauve); margin-bottom: 1.5rem; font-weight: 300; letter-spacing: 0.02em; }

.pp-price-note strong { color: var(--wine); font-weight: 500; }

/* Size selector */
.pp-size-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mauve); margin-bottom: 0.75rem; font-weight: 400; display: flex; align-items: center; justify-content: space-between; }

.pp-size-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.3rem; }

.pp-size-btn { padding: 0.5rem 0.5rem; background: white; border: 1px solid rgba(158,90,110,0.2); border-radius: 6px; cursor: pointer; transition: all 0.25s cubic-bezier(0.22,1,0.36,1); text-align: center; position: relative; font-family: 'Jost', sans-serif; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }

.pp-size-btn:hover { border-color: var(--mauve); }

.pp-size-btn.active { border: 1.5px solid var(--wine); background: rgba(242,196,206,0.15); }

.pp-size-amount { display: block; font-family: 'Jost', sans-serif; font-size: 0.7rem; font-weight: 400; color: var(--noir); line-height: 1; margin: 0; letter-spacing: 0.04em; }

.pp-size-price { display: block; font-size: 0.64rem; color: var(--mauve); font-weight: 300; }

.pp-size-badge { position: absolute; top: -6px; right: 6px; background: var(--wine); color: var(--cream); font-size: 0.46rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.14rem 0.44rem; border-radius: 100px; font-weight: 400; }

/* ── VOORRAADREGEL, nagebouwd naar de stock-badge op thegreatperfumes.nl ──
   Twee pseudo-elementen op hetzelfde bolletje: ::before is de uitdijende
   ring, ::after het vaste puntje erbovenop. Kleuren uit het eigen palet. */
.pp-stock { margin: 0 0 1.3rem; }

.pp-stock-regel { display: flex; align-items: center; gap: 0.55rem; font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 300; color: var(--noir); letter-spacing: 0.01em; }

.pp-stock-dot { position: relative; width: 8px; height: 8px; flex-shrink: 0; }

.pp-stock-dot::before, .pp-stock-dot::after { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }

.pp-stock-dot::before { animation: pp-stock-puls 3s ease-out infinite; opacity: 0.5; }

.pp-stock-dot::after { transform: scale(1.1); opacity: 0.9; background: var(--mauve); }

@keyframes pp-stock-puls {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Uitverkocht: zelfde bolletje, wijnrood, en geen puls */
.pp-stock.uit .pp-stock-dot::before { background: var(--wine); animation: none; opacity: 0.28; transform: scale(1.9); }

.pp-stock.uit .pp-stock-dot::after { background: var(--wine); }

.pp-stock.uit .pp-stock-regel { color: var(--wine); }

/* ═══ MOODBOARD ═══
   De sectie loopt van rand tot rand, het beeld niet. 86 van de 89
   moodboards zijn staand (meestal 675x1200), dus uitrekken over de volle
   breedte sneed er driekwart af. Het beeld houdt nu zijn eigen verhouding
   en wordt gecentreerd, zonder object-fit, dus er gaat niets verloren. */
/* Eigen blushtint zodat de sectie loskomt van de cream sectie eronder.
   Met een eigen kleur heeft de band ook boven ruimte nodig. */
.pp-moodboard { background: var(--blush-licht); padding: 3rem 5% 3.5rem; }

.pp-moodboard[hidden] { display: none; }

/* Twee kolommen: beeld links, tekstvlak rechts, verticaal gecentreerd.
   De linkerkolom is breder dan het beeld nodig heeft en het beeld staat
   daarin rechts uitgelijnd, dus een bredere kolom schuift het naar het
   midden toe. Het beeld houdt zijn eigen verhouding, geen object-fit. */
.pp-mood-figuur {
  display: grid;
  grid-template-columns: 52% 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.pp-mood-figuur img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 480px;
  margin: 0 0 0 auto;
  border-radius: 16px;
}

.pp-mood-zin {
  background: var(--cream);
  color: var(--mauve);
  border-radius: 16px;
  padding: 1.35rem 1.3rem;
  margin: 0;
  max-width: 380px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.5;
  text-align: left;
}

.pp-mood-zin[hidden] { display: none; }

/* De emotiewoorden in de sfeerzin, gemarkeerd door ppEmotieOpmaak().
   Onderscheid op kleur, niet op gewicht: van Cormorant Garamond cursief
   zijn alleen 300 en 400 geladen, dus een zwaarder gewicht valt terug op
   400 en is nauwelijks te zien. Zelfde aanpak als .pp-feeling-quote strong.
   Het gewicht gaat expliciet terug naar 300, anders maakt de browser van
   <b> alsnog 400. */
.pp-mood-zin .pp-mood-emotie { color: var(--wine); font-weight: 300; font-style: inherit; }

/* Zonder tekst neemt het beeld de volle breedte van de sectie. Klasse wordt
   door het script gezet, niet via :has(), want dat kent Safari pas vanaf
   15.4 en daaronder viel de hele regel weg. */
.pp-mood-figuur.pp-mood-zonder-zin { grid-template-columns: 1fr; }

@media (max-width: 600px) {
  .pp-moodboard { padding: 2rem 6% 2.2rem; }
  /* onder elkaar: beeld boven, tekstvlak eronder */
  .pp-mood-figuur { grid-template-columns: 1fr; gap: 1.1rem; }
  .pp-mood-figuur img { max-width: 100%; max-height: 50vh; margin: 0 auto; border-radius: 12px; }
  .pp-mood-zin { font-size: 1.02rem; padding: 1.05rem 1rem; border-radius: 12px; max-width: 440px; margin: 0 auto; }
}

/* Bronvermelding onder de reviews */
.pp-rev-bron { font-family: 'Jost', sans-serif; font-size: 0.74rem; font-weight: 300; color: var(--mauve); opacity: 0.7; text-align: center; margin: 1.2rem 0 0; }

@media (max-width: 600px) {
  .pp-rev-bron { font-size: 0.7rem; }
}

/* Melding als producten.json niet geladen kon worden */
.pp-prijsfout { font-family: 'Jost', sans-serif; font-size: 0.76rem; font-weight: 300; color: var(--wine); text-align: center; margin: 0.6rem 0 0; }

.pp-prijsfout[hidden] { display: none; }

@media (max-width: 600px) {
  .pp-prijsfout { font-size: 0.72rem; }
}

/* Klarna-regel, zelfde maat en demping als de retourregel die hier stond.
   Opbouw naar het patroon van icon-amsterdam: tekst plus het officiele
   Klarna-badge als klein inline pilletje, uitgelijnd op de tekstbasislijn. */
.pp-stock-klarna { display: flex; align-items: center; gap: 0.4rem; font-family: 'Jost', sans-serif; font-size: 0.74rem; font-weight: 300; color: var(--mauve); opacity: 0.75; letter-spacing: 0.01em; margin: 0.3rem 0 0; }

.pp-klarna-logo { width: 45px; height: auto; display: block; border-radius: 4px; flex-shrink: 0; }

/* Uitverkochte maat: knoppen uit */
.pp-cta[disabled], .pp-sticky-btn[disabled] { background: rgba(158,90,110,0.18); color: var(--mauve); cursor: not-allowed; box-shadow: none; opacity: 0.75; }

.pp-cta[disabled]:hover, .pp-sticky-btn[disabled]:hover { background: rgba(158,90,110,0.18); color: var(--mauve); transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .pp-stock-dot::before { animation: none; opacity: 0.28; transform: scale(1.9); }
  /* De marquee met klantfoto's loopt eindeloos door. Wie beweging heeft
     uitgezet krijgt hem stil. Erbij ten opzichte van v52. */
  .pp-stats-slides { animation: none; }
}

@media (max-width: 600px) {
  .pp-stock { margin: 0 0 1.1rem; }
  .pp-stock-regel { font-size: 0.78rem; gap: 0.5rem; }
  .pp-stock-klarna { font-size: 0.7rem; gap: 0.35rem; }
  .pp-klarna-logo { width: 40px; }
  /* Op mobiel swipe je de rij, pijlen zijn daar overbodig en zouden
     over de buitenste thumbnails vallen. */
  .pp-thumb-pijl { display: none !important; }
  .pp-thumb-btn { flex-basis: calc((100% - 1.05rem) / 3.4); }
  .pp-gallery-thumbs { gap: 0.35rem; scroll-padding-left: 0; }
}

/* ═══ Emotional hook + benefits bullets above CTA ═══ */
.pp-emotional { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 1.1rem; line-height: 1.5; color: var(--noir); margin: 0 0 1.1rem; letter-spacing: 0.005em; }

.pp-emotional strong { color: var(--wine); font-weight: 400; font-style: italic; }

.pp-benefits-inline { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; }

.pp-benefits-inline li { display: flex; align-items: center; gap: 0.55rem; font-family: 'Jost', sans-serif; font-size: 0.92rem; font-weight: 300; color: var(--noir); letter-spacing: 0.01em; line-height: 1.4; }

.pp-benefits-inline li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.pp-benefits-inline li strong { font-weight: 500; color: var(--noir); }

/* CTA */
.pp-cta { display: block; width: 100%; background: var(--gold); color: var(--noir); border: none; padding: 1.3rem 2rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; cursor: pointer; transition: all 0.3s cubic-bezier(0.22,1,0.36,1); margin-bottom: 1rem; }

.pp-cta:hover { background: var(--rose); color: var(--cream); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(212,116,138,0.35); }

.pp-cta:active { transform: translateY(0); }

.pp-cta-secondary { display: block; width: 100%; background: transparent; color: var(--noir); border: 1px solid rgba(26,15,18,0.2); padding: 1rem 2rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; margin-bottom: 1.5rem; }

.pp-cta-secondary:hover { background: var(--noir); color: var(--cream); }

/* Trust badges below CTA */
.pp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 1rem 0; border-top: 1px solid rgba(158,90,110,0.12); border-bottom: 1px solid rgba(158,90,110,0.12); margin-bottom: 1.5rem; }

.pp-trust-item { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center; }

.pp-trust-item svg { width: 22px; height: 22px; stroke: var(--mauve); }

.pp-trust-label { font-size: 0.62rem; color: var(--noir); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; line-height: 1.35; }

/* Payment icons */
.pp-payments { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; opacity: 0.75; }

.pp-payments span { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mauve); margin-right: 0.3rem; }

/* Officiele logo's uit de Shopify betaaliconenset, alle 38x24 met eigen
   achtergrond. Vaste hoogte, breedte volgt, gelijke tussenruimte via de
   gap van .pp-payments. De demping komt van de opacity op de rij. */
.pp-pay-logo { height: 22px; width: auto; display: block; border-radius: 4px; flex-shrink: 0; }

@media (max-width: 600px) {
  .pp-payments { gap: 0.35rem; }
  .pp-pay-logo { height: 20px; }
}

@media (max-width: 600px) {
  .pp-inspired-rij { gap: 0.4rem; }
  .pp-inspired { font-size: 0.86rem; }
  .pp-retail-badge { font-size: 0.64rem; padding: 0.24rem 0.6rem; letter-spacing: 0.08em; }
  .pp-scent { font-size: 0.8rem; }
  .pp-scent-woorden { font-size: 0.72rem; letter-spacing: 0.03em; }
}

/* ═══ COLLAPSIBLE PRODUCT INFO (Dossier-style) ═══ */
.pp-collapsible { margin-top: 1.5rem; border-top: 1px solid rgba(158,90,110,0.2); }

.pp-coll-item { border-bottom: 1px solid rgba(158,90,110,0.2); }

.pp-coll-q { width: 100%; background: none; border: none; padding: 1.15rem 0; display: flex; justify-content: space-between; align-items: center; font-family: 'Jost', sans-serif; font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--noir); font-weight: 400; text-align: left; cursor: pointer; transition: color 0.2s; }

.pp-coll-q:hover { color: var(--wine); }

.pp-coll-icon { width: 14px; height: 14px; position: relative; flex-shrink: 0; margin-left: 1rem; }

.pp-coll-icon::before, .pp-coll-icon::after { content: ''; position: absolute; background: var(--noir); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s; }

.pp-coll-icon::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }

.pp-coll-icon::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }

.pp-coll-item.open .pp-coll-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.pp-coll-item.open .pp-coll-q { color: var(--wine); }

.pp-coll-a { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22,1,0.36,1); }

.pp-coll-item.open .pp-coll-a { max-height: 700px; }

.pp-coll-a-inner { padding: 0 0 1.4rem; font-family: 'Jost', sans-serif; font-size: 0.85rem; line-height: 1.75; color: var(--mauve); font-weight: 300; letter-spacing: 0.01em; }

.pp-coll-a-inner p { margin: 0 0 0.9rem; }

.pp-coll-a-inner p:last-child { margin-bottom: 0; }

.pp-coll-a-inner strong { color: var(--noir); font-weight: 500; }

.pp-coll-a-inner ul { list-style: none; padding: 0; margin: 0.5rem 0; }

.pp-coll-a-inner ul li { padding: 0.3rem 0; padding-left: 1.3rem; position: relative; }

.pp-coll-a-inner ul li::before { content: '·'; position: absolute; left: 0.4rem; color: var(--gold); font-size: 1.3rem; line-height: 1; top: 0.2rem; }

.pp-coll-a-inner .pp-coll-label { display: block; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-top: 0.5rem; margin-bottom: 0.3rem; font-weight: 400; }

.pp-coll-a-inner .pp-coll-label:first-child { margin-top: 0; }

.pp-benefit-icon svg { width: 100%; height: 100%; }

.pp-benefit h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--noir); margin-bottom: 0.35rem; }

.pp-benefit p { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.78rem; color: var(--mauve); line-height: 1.5; letter-spacing: 0.02em; }

/* ═══ Section 3 — "This scent feels..." moodboard ═══ */
.pp-feeling { background: var(--noir); color: var(--cream); padding: 3rem 5%; text-align: center; position: relative; overflow: hidden; }

.pp-feeling::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(122,50,72,0.4) 0%, transparent 70%); opacity: 0.8; }

.pp-feeling-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }

.pp-feeling-eyebrow { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; opacity: 0.85; }

.pp-feeling-quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.4; letter-spacing: -0.005em; }

.pp-feeling-quote strong { color: var(--gold); font-weight: 300; }

/* ═══ PRODUCT MAIN NOTES — ingredient icons (reused in collapsible) ═══ */
.pp-note-icons { display: flex; gap: 1rem; margin-top: 0.7rem; flex-wrap: wrap; }

.pp-ingredient { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }

.pp-ingredient-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.pp-ingredient-name { font-family: 'Jost', sans-serif; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--noir); font-weight: 400; }

@media (max-width: 640px) {
  .pp-note-icons { gap: 0.7rem; }
  .pp-ingredient-icon { width: 38px; height: 38px; }
  .pp-ingredient-name { font-size: 0.62rem; }
}

/* ═══ MAIN NOTES (above collapsible, Dossier-style) ═══ */

/* ═══ NOTES in collapsible (Top / Middle / Base layers with bottle icons) ═══ */

.pp-coll-note-label { font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--noir); line-height: 1.5; font-weight: 300; }

.pp-coll-note-label strong { font-weight: 500; color: var(--noir); }

/* ═══ NOTES COLLAPSIBLE — main notes + pyramid structure ═══ */
.pp-notes-block { padding-top: 0.4rem; }

.pp-notes-main { margin-bottom: 1.1rem; }

.pp-notes-main-label { display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mauve); margin-bottom: 0.7rem; font-weight: 400; }

.pp-main-grid { display: flex; gap: 1.3rem; flex-wrap: wrap; }

.pp-notes-divider { height: 1px; background: rgba(158,90,110,0.15); margin: 1rem 0 1rem; }

/* Updated pyramid icons — compact hearts instead of bottle icons */

.pp-pyr-title strong { font-weight: 500; }

/* Heart visual hierarchy: Top = outline, Middle = 18% filled, Base = 45% filled */

/* Ingredients binnen de Notes collapsible */
.pp-notes-ingredients { padding-top: 0.2rem; }

.pp-ingr-text { font-family: 'Jost', sans-serif; font-size: 0.78rem; color: var(--noir); font-weight: 300; line-height: 1.5; margin: 0 0 0.75rem; letter-spacing: 0.01em; }

/* ═══ MAIN NOTES (compact) ═══ */
.pp-main-note { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 54px; }

.pp-main-note-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(26,15,18,0.04); }

.pp-main-note-icon svg { width: 28px; height: 28px; }

.pp-main-note-name { font-family: 'Jost', sans-serif; font-size: 0.68rem; color: var(--noir); font-weight: 400; letter-spacing: 0.05em; text-align: center; }

/* Compact pyramid rows — heart next to single-line text */

.pp-pyr-title strong { font-weight: 500; }

/* Compact pyramid rows — heart next to single-line text */
.pp-notes-pyramid-list { display: flex; flex-direction: column; gap: 0.7rem; }

.pp-pyr-row { display: grid; grid-template-columns: 20px 1fr; gap: 0.65rem; align-items: start; }

.pp-pyr-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; }

.pp-pyr-icon svg { width: 100%; height: 100%; display: block; }

.pp-pyr-content { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; line-height: 1.4; min-height: 14px; }

.pp-pyr-title { font-family: 'Jost', sans-serif; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--noir); margin: 0; font-weight: 500; white-space: nowrap; }

.pp-pyr-title strong { font-weight: 500; }

.pp-pyr-notes { font-family: 'Jost', sans-serif; font-size: 0.78rem; color: var(--mauve); margin: 0; font-weight: 300; letter-spacing: 0.01em; line-height: 1.4; }

.pp-pyr-row:nth-child(1) .pp-pyr-icon { color: var(--mauve); opacity: 0.65; }

.pp-pyr-row:nth-child(2) .pp-pyr-icon { color: var(--wine); opacity: 0.85; }

.pp-pyr-row:nth-child(3) .pp-pyr-icon { color: var(--wine); }

/* Badges under ingredients */
.pp-badges { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }

.pp-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; background: rgba(200,169,126,0.12); border: 1px solid rgba(200,169,126,0.3); border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--noir); font-weight: 400; }

.pp-badge svg { width: 12px; height: 12px; color: var(--gold); }

/* ═══ UGC Video Grid (5 cards, autoplay loops) ═══ */
.pp-ugc-videos { padding: 1.5rem 5% 4rem; background: var(--cream); }

.pp-ugc-videos-header { text-align: center; max-width: 700px; margin: 0 auto 2rem; }

.pp-ugc-videos-eyebrow { font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; font-weight: 500; }

.pp-ugc-videos-header h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--noir); line-height: 1.15; margin-bottom: 0.5rem; }

.pp-ugc-videos-header p { font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--mauve); font-weight: 300; letter-spacing: 0.04em; line-height: 1.5; }

.pp-ugc-videos-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }

@media (max-width: 1000px) {
  .pp-ugc-videos-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .pp-ugc-videos-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
}

.pp-uv-card { aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; position: relative; background: linear-gradient(160deg, rgba(253,246,240,1), rgba(242,196,206,0.3)); cursor: pointer; box-shadow: 0 8px 24px rgba(26,15,18,0.08); transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1); }

.pp-uv-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,15,18,0.16); }

.pp-uv-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-uv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-uv-placeholder {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--blush) 0%, var(--mauve) 100%);
  color: rgba(253,246,240,0.7);
}

.pp-uv-placeholder svg { width: 36px; height: 36px; }

.pp-uv-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1rem 1.1rem; background: linear-gradient(to top, rgba(26,15,18,0.85) 0%, rgba(26,15,18,0.4) 60%, transparent 100%); z-index: 2; }

.pp-uv-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--cream); margin: 0; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

.pp-uv-sublabel { font-family: 'Jost', sans-serif; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(253,246,240,0.7); margin-top: 0.3rem; font-weight: 400; }

/* Subtle play indicator badge top-right */
.pp-uv-badge { position: absolute; top: 0.85rem; right: 0.85rem; width: 26px; height: 26px; border-radius: 50%; background: rgba(253,246,240,0.92); display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: 0 2px 8px rgba(26,15,18,0.15); }

.pp-uv-badge { border: none; padding: 0; cursor: pointer; transition: background 0.2s, transform 0.2s; }

.pp-uv-badge:hover { background: var(--cream); transform: scale(1.08); }

.pp-uv-badge svg { width: 10px; height: 10px; fill: var(--noir); }

.pp-uv-icoon-play { margin-left: 1px; }

/* driehoek optisch centreren */
.pp-uv-icoon-pauze { display: none; }

.pp-uv-badge.speelt .pp-uv-icoon-play { display: none; }

.pp-uv-badge.speelt .pp-uv-icoon-pauze { display: block; }

/* ═══ Section 5 — Full width mood video ═══ */
.pp-mood-video { position: relative; aspect-ratio: 28/7; max-height: 360px; min-height: 240px; overflow: hidden; background: var(--noir); }

@media (max-width: 780px) {
  .pp-mood-video { aspect-ratio: 9/12; }
}

.pp-mood-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-mood-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 30% 50%, rgba(122,50,72,0.6) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(158,90,110,0.4) 0%, transparent 70%),
    linear-gradient(135deg, var(--noir) 0%, var(--noir-diep) 50%, var(--wine) 100%);
}

.pp-mood-video-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem 5%; }

.pp-mood-video-text { color: var(--cream); max-width: 720px; }

.pp-mood-video-text .eyebrow { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; opacity: 0.9; }

.pp-mood-video-text h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin-bottom: 0.7rem; }

.pp-mood-video-text p { font-size: 0.88rem; line-height: 1.7; letter-spacing: 0.02em; opacity: 0.85; font-weight: 300; ; margin-bottom: 1rem; }

.pp-ugc-header h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(2rem, 4vw, 2.6rem); color: var(--noir); margin-bottom: 0.5rem; }

.pp-ugc-header p { font-size: 0.85rem; color: var(--mauve); letter-spacing: 0.04em; font-weight: 300; }

.pp-ugc-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,15,18,0.72) 0%, rgba(26,15,18,0.2) 45%, transparent 65%); }

.pp-ugc-card-caption p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: var(--cream); margin: 0; line-height: 1.3; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }

@media (max-width: 700px) {
  .pp-ctable-wrap { background: white; border-radius: 14px; padding: 1.1rem 0.9rem 0.8rem; box-shadow: 0 6px 20px rgba(26,15,18,0.04); border: 1px solid rgba(158,90,110,0.08); }
  .pp-crow { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; padding: 0.45rem 0.25rem; border-bottom: 1px solid rgba(158,90,110,0.08); gap: 0.3rem; }
  .pp-clabel { font-family: 'Jost', sans-serif; font-size: 0.72rem; color: var(--noir); font-weight: 300; letter-spacing: 0.01em; padding-left: 0.2rem; }
  .pp-ccol { font-size: 0.8rem; }
  .pp-chead .pp-ccol { font-size: 0.58rem; letter-spacing: 0.15em; }
}

/* ═══ Section 9 — FAQ accordion ═══ */
.pp-faq { padding: 5rem 5%; background: var(--cream); }

.pp-faq-header { text-align: center; max-width: 700px; margin: 0 auto 3rem; }

.pp-faq-header h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(2rem, 4vw, 2.6rem); color: var(--noir); margin-bottom: 0.4rem; }

.pp-faq-header p { font-size: 0.85rem; color: var(--mauve); font-weight: 300; letter-spacing: 0.04em; }

.pp-faq-list { max-width: 820px; margin: 0 auto; }

.pp-faq-item { border-bottom: 1px solid rgba(158,90,110,0.15); }

.pp-faq-item:first-child { border-top: 1px solid rgba(158,90,110,0.15); }

.pp-faq-q { width: 100%; background: none; border: none; padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; font-family: 'Jost', sans-serif; font-size: 0.95rem; color: var(--noir); font-weight: 400; text-align: left; cursor: pointer; letter-spacing: 0.01em; transition: color 0.2s; }

.pp-faq-q:hover { color: var(--wine); }

.pp-faq-q-icon { width: 22px; height: 22px; flex-shrink: 0; margin-left: 1rem; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); color: var(--mauve); }

.pp-faq-item.open .pp-faq-q-icon { transform: rotate(180deg); color: var(--wine); }

.pp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22,1,0.36,1); }

.pp-faq-item.open .pp-faq-a { max-height: 500px; }

.pp-faq-a-inner { padding: 0 0 1.5rem; font-size: 0.88rem; line-height: 1.7; color: var(--mauve); font-weight: 300; letter-spacing: 0.01em; }

.pp-faq-a-inner strong { color: var(--noir); font-weight: 500; }

/* ═══ Section 10 — You might also like ═══ */
.pp-related { padding: 2.5rem 5% 5rem; background: linear-gradient(180deg, var(--cream), var(--cream-zand)); }

.pp-related-header { text-align: center; max-width: 700px; margin: 0 auto 3rem; }

.pp-related-header h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(2rem, 4vw, 2.6rem); color: var(--noir); margin-bottom: 0.4rem; }

.pp-related-header p { font-size: 0.85rem; color: var(--mauve); font-weight: 300; letter-spacing: 0.04em; }

.pp-related-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

@media (max-width: 900px) {
  .pp-related-grid { grid-template-columns: repeat(2, 1fr); }
}

.pp-related-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(26,15,18,0.06); transition: box-shadow 0.4s, transform 0.4s; cursor: pointer; display: block; text-decoration: none; color: inherit; }

.pp-related-card:hover { box-shadow: 0 16px 40px rgba(26,15,18,0.14); transform: translateY(-4px); }

.pp-related-img { aspect-ratio: 4/5; overflow: hidden; background: linear-gradient(160deg, rgba(253,246,240,1), rgba(242,196,206,0.3)); }

.pp-related-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-related-body { padding: 1rem 1.2rem 1.3rem; }

.pp-related-name { font-family: 'Jost', sans-serif; font-size: 0.88rem; color: var(--noir); font-weight: 400; margin-bottom: 0.25rem; letter-spacing: 0.01em; }

.pp-related-inspired { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.82rem; color: var(--mauve); margin-bottom: 0.55rem; }

.pp-related-price { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.88rem; color: var(--noir); }

/* ═══ Sticky CTA (mobile) ═══ */
.pp-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.9rem 1rem; background: rgba(253,246,240,0.96); backdrop-filter: blur(14px); border-top: 1px solid rgba(158,90,110,0.15); z-index: 800; display: none; box-shadow: 0 -6px 24px rgba(26,15,18,0.08); }

.pp-sticky-inner { display: flex; align-items: center; gap: 0.8rem; max-width: 600px; margin: 0 auto; }

.pp-sticky-info { flex: 1; min-width: 0; }

.pp-sticky-name { font-size: 0.78rem; font-weight: 500; color: var(--noir); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pp-sticky-price { font-size: 0.75rem; color: var(--mauve); }

.pp-sticky-btn { background: var(--gold); color: var(--noir); border: none; padding: 0.9rem 1.5rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; }

.pp-sticky-btn:hover { background: var(--rose); color: var(--cream); }

@media (max-width: 780px) {
  .pp-sticky-cta { display: block; }
}

/* Mood banner — alleen icons, geen text */
.pp-mood-benefits-only { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; max-width: 1100px; width: 100%; }

@media (max-width: 850px) {
  .pp-mood-benefits-only { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}

@media (max-width: 480px) {
  .pp-mood-benefits-only { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
}

/* ═══ Mood banner benefits (iconen onder tekst) ═══ */
.pp-mood-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(253,246,240,0.18); }

.pp-mood-benefit { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; padding: 0.5rem; }

.pp-mood-benefit-icon { width: 88px; height: 88px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); border-radius: 50%; background: rgba(200,169,126,0.14); border: 1px solid rgba(200,169,126,0.35); }

.pp-mood-benefit-icon svg { width: 48px; height: 48px; }

.pp-mood-benefit-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.pp-mood-benefit-text strong { font-family: 'Jost', sans-serif; font-size: 0.92rem; font-weight: 500; color: var(--cream); letter-spacing: 0.02em; line-height: 1.2; margin-bottom: 0.2rem; display: block; }

.pp-mood-benefit-text span { font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 300; color: rgba(253,246,240,0.75); letter-spacing: 0.01em; line-height: 1.4; }

@media (max-width: 850px) {
  .pp-mood-benefits { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
}

@media (max-width: 480px) {
  .pp-mood-benefits { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .pp-mood-benefit-icon { width: 28px; height: 28px; }
  .pp-mood-benefit-icon svg { width: 20px; height: 20px; }
  .pp-mood-benefit-text strong { font-size: 0.7rem; }
  .pp-mood-benefit-text span { font-size: 0.62rem; }
}

/* ═══ Reviews Section (Dossier-inspired) ═══ */
.pp-reviews { padding: 5rem 5%; background: var(--cream); scroll-margin-top: 80px; }

.pp-reviews-inner { max-width: 1100px; margin: 0 auto; }

.pp-reviews-header { text-align: center; margin-bottom: 3rem; }

.pp-reviews-eyebrow { font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; font-weight: 500; }

.pp-reviews-header h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(2rem, 4vw, 2.7rem); color: var(--noir); }

/* Overview card */
.pp-rev-overview { background: white; border-radius: 22px; padding: 2.5rem 2.2rem; box-shadow: 0 10px 40px rgba(26,15,18,0.05); border: 1px solid rgba(158,90,110,0.08); display: grid; grid-template-columns: auto 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; align-items: center; }

@media (max-width: 850px) {
  .pp-rev-overview { grid-template-columns: 1fr; gap: 2rem; padding: 1.8rem 1.4rem; }
}

.pp-rev-score { text-align: center; min-width: 140px; }

.pp-rev-big { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: 4.2rem; color: var(--noir); line-height: 1; margin-bottom: 0.4rem; }

.pp-rev-stars-big { color: var(--gold); font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: 0.4rem; }

.pp-rev-count { font-family: 'Jost', sans-serif; font-size: 0.78rem; color: var(--mauve); font-weight: 300; letter-spacing: 0.04em; }

/* Bars */
.pp-rev-bars { display: flex; flex-direction: column; gap: 0.5rem; }

.pp-rev-bar { display: grid; grid-template-columns: 18px 1fr 30px; gap: 0.7rem; align-items: center; }

.pp-rev-num { font-family: 'Jost', sans-serif; font-size: 0.78rem; color: var(--noir); font-weight: 400; }

.pp-rev-track { background: rgba(158,90,110,0.1); height: 6px; border-radius: 100px; overflow: hidden; position: relative; }

.pp-rev-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-licht)); border-radius: 100px; }

.pp-rev-pct { font-family: 'Jost', sans-serif; font-size: 0.74rem; color: var(--mauve); text-align: right; }

/* Attribute meters */
.pp-rev-attrs { display: flex; flex-direction: column; gap: 0.9rem; }

.pp-rev-attr { display: flex; flex-direction: column; gap: 0.4rem; }

.pp-rev-attr-label { font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mauve); font-weight: 500; }

.pp-rev-attr-meter { background: rgba(158,90,110,0.1); height: 4px; border-radius: 100px; overflow: hidden; position: relative; }

.pp-rev-attr-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--wine), var(--mauve)); border-radius: 100px; }

.pp-rev-attr-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.pp-rev-attr-tags span { background: rgba(200,169,126,0.12); color: var(--noir); padding: 0.2rem 0.6rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.66rem; font-weight: 400; letter-spacing: 0.04em; }

/* Filter tabs */
.pp-rev-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }

.pp-rev-filter { background: white; border: 1px solid rgba(158,90,110,0.18); padding: 0.55rem 1.2rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.74rem; color: var(--noir); cursor: pointer; transition: all 0.25s; font-weight: 400; letter-spacing: 0.02em; }

.pp-rev-filter:hover { border-color: var(--wine); }

.pp-rev-filter.active { background: var(--noir); color: var(--cream); border-color: var(--noir); }

/* Reviews list */
.pp-rev-list { display: flex; flex-direction: column; gap: 1.2rem; }

.pp-rev-card { background: white; border-radius: 18px; padding: 1.6rem 1.8rem; box-shadow: 0 6px 24px rgba(26,15,18,0.04); border: 1px solid rgba(158,90,110,0.06); transition: box-shadow 0.3s; }

.pp-rev-card:hover { box-shadow: 0 12px 40px rgba(26,15,18,0.08); }

@media (max-width: 600px) {
  .pp-rev-card { padding: 1.2rem 1.2rem; }
}

.pp-rev-card-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.9rem; align-items: center; margin-bottom: 0.9rem; }

.pp-rev-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--blush), var(--mauve)); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.05em; }

.pp-rev-meta { min-width: 0; }

.pp-rev-name { font-family: 'Jost', sans-serif; font-size: 0.92rem; color: var(--noir); font-weight: 500; line-height: 1.2; margin-bottom: 0.2rem; }

.pp-rev-verified { font-size: 0.66rem; color: var(--groen); font-weight: 400; letter-spacing: 0.04em; margin-left: 0.3rem; }

.pp-rev-date { font-family: 'Jost', sans-serif; font-size: 0.72rem; color: var(--mauve); font-weight: 300; }

.pp-rev-card-stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 0.08em; }

.pp-rev-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 1.2rem; color: var(--noir); margin: 0 0 0.6rem; line-height: 1.3; }

.pp-rev-body { font-family: 'Jost', sans-serif; font-size: 0.88rem; line-height: 1.6; color: var(--noir); margin: 0 0 1rem; font-weight: 300; letter-spacing: 0.005em; }

.pp-rev-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pp-rev-tag { background: rgba(200,169,126,0.1); color: var(--noir); padding: 0.3rem 0.75rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.66rem; font-weight: 400; letter-spacing: 0.05em; border: 1px solid rgba(200,169,126,0.18); }

.pp-rev-load-more { display: block; margin: 2.5rem auto 0; background: white; border: 1px solid rgba(158,90,110,0.25); padding: 0.85rem 2.5rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--noir); cursor: pointer; transition: all 0.3s; font-weight: 500; }

.pp-rev-load-more:hover { background: var(--noir); color: var(--cream); border-color: var(--noir); transform: translateY(-2px); }

/* ═══ Comparison table (NEW STYLE) ═══ */
.pp-compare-table { padding: 1.5rem 5%; background: linear-gradient(180deg, var(--cream), var(--cream-roze)); }

.pp-compare-table .pp-compare-inner { max-width: 600px; margin: 0 auto; }

.pp-compare-table .pp-compare-header { text-align: center; margin-bottom: 1.1rem; }

.pp-compare-table .pp-compare-header h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: clamp(1rem, 2vw, 1.3rem); color: var(--noir); line-height: 1.3; letter-spacing: 0.005em; }

.pp-compare-table .pp-compare-header h2 em { font-style: italic; }

.pp-ctable-wrap { background: white; border-radius: 22px; padding: 2.5rem 2.2rem 1.8rem; box-shadow: 0 12px 50px rgba(26,15,18,0.06); border: 1px solid rgba(158,90,110,0.08); }

.pp-ctable { display: flex; flex-direction: column; }

.pp-crow { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; padding: 0.9rem 0.4rem; border-bottom: 1px solid rgba(158,90,110,0.08); gap: 0.5rem; }

.pp-crow:last-child { border-bottom: none; }

/* Header row — bigger, with product images */
/* stretch, niet end: bij end lijnen de kolommen op hun onderkant uit, en dan
   schuift een kolom met een label van twee regels (Dupe Spray) zijn hele
   inhoud een regelhoogte omhoog, fles incluis. Met stretch worden alle
   kolommen even hoog en zet justify-content hieronder de inhoud bovenaan,
   zodat de beeldboxen op dezelfde lijn liggen ongeacht het aantal regels.
   Stretch houdt bovendien de getinte .pp-ctgp kolom op volle rijhoogte. */
.pp-chead { padding-bottom: 0.7rem; padding-top: 0.2rem; border-bottom: 1px solid rgba(200,169,126,0.4); margin-bottom: 0.15rem; align-items: stretch; }

.pp-chead .pp-ccol { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.6rem; }

/* Box staat op 4:5, gelijk aan het canvas van de drie compare-afbeeldingen
   (400x500). Daardoor vult contain de box volledig en stuurt height wel
   degelijk de fleshoogte aan, in plaats van alleen lucht toe te voegen. */
.pp-chead .pp-cimg { width: 24px; height: 30px; object-fit: contain; display: block; }

.pp-chead .pp-cname { font-family: 'Jost', sans-serif; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mauve); font-weight: 500; }

.pp-chead .pp-ctgp .pp-cname { color: var(--gold); }

.pp-clabel { font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--noir); font-weight: 300; letter-spacing: 0.01em; padding-left: 0.4rem; }

.pp-ccol { text-align: center; font-family: 'Jost', sans-serif; }

.pp-ccol .pp-check { color: var(--groen); font-size: 1.1rem; font-weight: 400; }

.pp-ccol .pp-cross { color: rgba(158,90,110,0.45); font-size: 0.95rem; font-weight: 300; }

.pp-ccol .pp-partial { color: rgba(200,169,126,0.85); font-size: 1.1rem; font-weight: 300; }

.pp-ccol .pp-dollar { color: rgba(158,90,110,0.85); font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; }

/* TGP column tinted */
.pp-ctgp { background: rgba(200,169,126,0.06); }

.pp-chead.pp-crow .pp-ctgp,
.pp-ctable .pp-ctgp.pp-ccol { 
  border-left: 1px solid rgba(200,169,126,0.18); 
  border-right: 1px solid rgba(200,169,126,0.18); 
}

.pp-ctable .pp-crow:first-child .pp-ctgp { border-radius: 12px 12px 0 0; }

.pp-ctable .pp-crow:last-child .pp-ctgp { border-radius: 0 0 12px 12px; border-bottom: 1px solid rgba(200,169,126,0.18); }

@media (max-width: 720px) {
  .pp-ctable-wrap { padding: 1.4rem 0.9rem 1rem; border-radius: 14px; }
  .pp-crow { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 0.3rem; padding: 0.7rem 0.3rem; }
  .pp-clabel { font-size: 0.74rem; padding-left: 0.2rem; }
  .pp-ccol { font-size: 0.78rem; }
  .pp-chead .pp-cimg { width: 40px; height: 50px; }
  /* 4:5, zie desktopregel */
  .pp-chead .pp-cname { font-size: 0.85rem; letter-spacing: 0.08em; }
}

/* === Stats Section: slideshow + percentages === */
.pp-stats-section { background: white; padding: 3.5rem 5%; }

.pp-stats-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }

@media (max-width: 900px) {
  .pp-stats-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.pp-stats-slideshow { position: relative; height: 380px; border-radius: 14px; overflow: hidden; background: var(--cream); -webkit-mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%); }

.pp-stats-slides { display: flex; height: 100%; width: max-content; animation: pp-stats-marquee 28s linear infinite; will-change: transform; }

.pp-stats-slide { flex: 0 0 220px; height: 100%; width: 220px; padding-right: 10px; box-sizing: border-box; }

.pp-stats-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-stats-slide img { border-radius: 10px; }

@keyframes pp-stats-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.pp-stats-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-stats-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.85); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--noir); transition: all 0.2s; backdrop-filter: blur(8px); z-index: 5; }

.pp-stats-arrow:hover { background: white; transform: translateY(-50%) scale(1.05); }

.pp-stats-prev { left: 12px; }

.pp-stats-next { right: 12px; }

.pp-stats-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 0.4rem; z-index: 5; }

.pp-stats-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.2s; padding: 0; }

.pp-stats-dot.active { background: white; width: 22px; border-radius: 100px; }

.pp-stats-content h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--noir); margin-bottom: 1.6rem; line-height: 1.15; }

.pp-stats-list { display: flex; flex-direction: column; gap: 1.3rem; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(158,90,110,0.12); }

.pp-stats-item { display: grid; grid-template-columns: 76px 1fr; gap: 1.3rem; align-items: center; }

.pp-stats-circle { width: 72px; height: 72px; position: relative; }

.pp-stats-circle svg { width: 100%; height: 100%; }

.pp-stats-circle span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Jost', sans-serif; font-size: 1rem; color: var(--noir); font-weight: 500; }

.pp-stats-item p { font-family: 'Jost', sans-serif; font-size: 0.98rem; color: var(--noir); line-height: 1.5; font-weight: 300; }

.pp-stats-footnote { font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--mauve); margin-top: 1rem; font-style: italic; }

.pp-stats-arrow, .pp-stats-dots { display: none; }

@media (max-width: 900px) {
  .pp-stats-slideshow { height: 320px; }
  .pp-stats-slide { flex: 0 0 180px; width: 180px; }
}