/*
  PRODUCTPAGINA
  Leunt op de v5-stijl: .wrap, .band, .sc-kop2, .sc-punten, .kw-controle,
  .ab-faq__item, .ct-faqgrid, .rev en de shopkaarten. Hier alleen wat nieuw is.
*/

/* ---------- Kop ---------- */
.pp-kop{
  background:linear-gradient(178deg,var(--warm-2) 0%,#DDE0D2 70%,#E3E4DD 100%);
  border-radius:0 0 40px 40px;
  padding-block:clamp(104px,12vh,132px) clamp(40px,5vw,70px);
}
.pp-kop__in{display:grid;gap:clamp(28px,4vw,72px);align-items:start}
@media(min-width:960px){.pp-kop__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

/* Galerij: geen witte doos, de uitsnede staat op een zacht vlak. */
@media(min-width:960px){.pp-galerij{position:sticky;top:104px}}
.pp-beeld{
  margin:0;aspect-ratio:1/1;border-radius:28px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 42%,#F2F0EC 0%,#E8E7E4 62%,#E0DFDA 100%);
}
.pp-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.pp-beeld.is-uitsnede img{object-fit:contain;padding:9% 14% 8%}
.pp-duimen{list-style:none;margin:12px 0 0;padding:2px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px) / 5);gap:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.pp-duimen::-webkit-scrollbar{display:none}
.pp-duimen li{scroll-snap-align:start}
.v5 .pp-duim{
  display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:14px;overflow:hidden;cursor:pointer;
  background:#E8E7E4;box-shadow:inset 0 0 0 1px transparent;opacity:.72;
  transition:opacity .25s var(--ease),box-shadow .25s var(--ease);
}
.pp-duim img{width:100%;height:100%;object-fit:cover;display:block}
.pp-duim.is-uitsnede img{object-fit:contain;padding:10%}
.v5 .pp-duim:hover{opacity:1}
.v5 .pp-duim.is-nu{opacity:1;box-shadow:0 0 0 2px var(--bark-dp)}

/* Info */
.pp-kruimel{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--display);font-weight:500;font-size:15px;color:var(--stone-kaart)}
.v5 .pp-kruimel a{color:var(--stone-kaart);text-decoration:none}
.v5 .pp-kruimel a:hover{color:var(--ink)}
.v5 .pp-kruimel span{color:var(--stone-kaart);font-size:15px}
.pp-info h1{margin-top:14px;font-size:clamp(32px,3.3vw,48px);line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
.v5 .pp-tp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;text-decoration:none}
.v5 .pp-tp__logo{display:block;height:21px;width:auto}
.v5 .pp-tp__sterren{display:block;height:20px;width:auto}
.v5 .pp-tp span{font-size:15px;font-weight:500;color:var(--ink)}
.v5 .pp-tp:hover span{color:var(--ink)}
.pp-lede{margin-top:18px}
.v5 .pp-lede p{font-size:18px;line-height:1.6;color:var(--ink-soft);margin:0 0 10px !important}
.pp-punten{margin-top:14px}

/* Mobiel: één kaart met de feiten onder elkaar, label links en waarde rechts. */
.pp-feiten{display:flex;flex-direction:column;margin:24px 0 0;padding:4px 16px;border-radius:14px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.pp-feiten > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0}
.pp-feiten > div + div{border-top:1px solid var(--line)}
.pp-feiten dt{flex:none;font-size:14px;letter-spacing:.02em;color:var(--stone-kaart)}
.pp-feiten dd{margin:0;text-align:right;font-family:var(--display);font-weight:500;font-size:16px;line-height:1.3;color:var(--ink)}
/* Breder: losse blokjes naast elkaar, zoveel kolommen als er feiten zijn. */
@media(min-width:560px){
  .pp-feiten{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;padding:0;background:none;box-shadow:none;border-radius:0}
  .pp-feiten > div{display:block;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
  .pp-feiten > div + div{border-top:0}
  .pp-feiten dt{font-size:13px}
  .pp-feiten dd{margin:2px 0 0;text-align:left;font-size:17px;line-height:1.25}
}

.pp-koop{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.pp-prijs{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.v5 .pp-prijs__bedrag,.v5 .pp-prijs__bedrag *{font-family:var(--display);font-weight:500;font-size:34px;letter-spacing:-.02em;color:var(--ink)}
.v5 .pp-prijs__dag,.v5 .pp-prijs__dag *{font-size:15.5px;color:var(--stone-kaart)}
.pp-koop__rij{display:flex;gap:10px;margin-top:14px}
.pp-aantal{flex:none;display:flex;align-items:center;height:54px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.v5 .pp-aantal button{width:44px;height:54px;border:0;background:none;font-size:20px;color:var(--ink);cursor:pointer;padding:0}
.v5 .pp-aantal input{width:36px;height:54px;margin:0;padding:0;border:0;background:none;text-align:center;font-family:var(--display);font-weight:500;font-size:17px;color:var(--ink);-moz-appearance:textfield;box-shadow:none}
.pp-aantal input::-webkit-inner-spin-button,.pp-aantal input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.v5 .pp-knop{flex:1;justify-content:center;gap:10px;height:54px;background-image:linear-gradient(104deg,#646F4F 0%,#9FA582 100%);background-size:100% 100%;font-size:17px;white-space:nowrap;padding-inline:18px}
/* Verloop kan niet overvloeien: de hoverkleur ligt als laag erboven en fadet in. */
.v5 .pp-knop{position:relative;isolation:isolate;overflow:hidden}
.v5 .pp-knop::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:linear-gradient(104deg,var(--bark-dp) 0%,var(--clay) 200%);opacity:0;transition:opacity .45s var(--ease, ease)}
.v5 .pp-knop:hover::before,.v5 .pp-knop:focus-visible::before{opacity:1}
@media (prefers-reduced-motion:reduce){.v5 .pp-knop::before{transition:none}}
.v5 .pp-knop__sep{opacity:.6}
.v5 .pp-knop__prijs,.v5 .pp-knop__prijs *{color:inherit;font:inherit;font-variant-numeric:tabular-nums}
.pp-levering{margin-top:22px;gap:10px}
.v5 .pp-levering li{font-size:15.5px;gap:12px}
.pp-levering .shop-usps__ic{width:30px;height:30px;background:linear-gradient(104deg,var(--bark-dp) 0%,var(--clay) 200%)}

/* ---------- Ankernavigatie ---------- */
/* Rustige tabbalk, links uitgelijnd op de inhoud, met een haarlijn eronder:
   leest als inhoudsopgave van de pagina, niet als losse knoppen. */
.pp-anker{background:#F2F0EC;padding-top:clamp(28px,3vw,40px)}
.pp-anker__rij{display:flex;gap:clamp(18px,2.6vw,36px);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pp-anker__rij::-webkit-scrollbar{display:none}
/* Alleen op smalle schermen horizontaal scrollen; op desktop past alles en scrolt er niets. */
.pp-anker__rij{overflow-y:hidden}
@media(min-width:720px){.pp-anker__rij{overflow:visible}}
.v5 .pp-anker a{
  flex:none;position:relative;padding:0 0 14px;font-family:var(--display);font-weight:500;font-size:16px;
  color:var(--stone-kaart);text-decoration:none;transition:color .2s var(--ease);
}
.v5 .pp-anker a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--bark-dp);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.v5 .pp-anker a:hover{color:var(--ink)}
.v5 .pp-anker a:hover::after{transform:scaleX(1)}
.pp-anker + .band{padding-top:clamp(36px,4vw,56px)}
.band[id]{scroll-margin-top:90px}

/* ---------- Samenstelling ---------- */
.pp-kaart{padding:clamp(20px,2.2vw,30px);border-radius:var(--soft);background:#E8E7E4}
.v5 .pp-kaart__t{font-size:clamp(18px,1.5vw,20px);color:var(--ink);margin:0 0 8px}
.v5 .pp-kaart__klein{margin:12px 0 0 !important;font-size:13px;line-height:1.5;color:var(--stone-kaart)}

/* Werkzame stoffen: groepen in twee of drie kolommen. Een "waarvan"-regel
   staat kleiner onder zijn stof, zonder eigen lijn. */
.pp-stoffen{margin-bottom:14px;scroll-margin-top:90px}
.pp-stoffen__kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.v5 .pp-stoffen__kop .pp-kaart__t{margin:0}
.pp-stoffen__noot{font-size:12.5px;color:var(--stone-kaart)}
.pp-stoffen__lijst{margin:4px 0 0;display:grid;grid-template-columns:1fr;column-gap:40px}
/* Met een of twee stoffen lopen de lijnen toch over de volle breedte. */
.pp-stoffen__lijst--n1{grid-template-columns:1fr !important}
@media(min-width:720px){.pp-stoffen__lijst--n2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(min-width:720px){.pp-stoffen__lijst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.pp-stoffen__lijst{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pp-stof{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-content:start;padding:7px 0;border-bottom:1px solid var(--line)}
.pp-stof dt{font-size:15px;line-height:1.35;color:var(--ink)}
.pp-stof dd{margin:0;text-align:right;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.35;color:var(--ink);white-space:nowrap}
.pp-stof dd small{font-weight:400;font-size:12px;color:var(--stone-kaart)}
.pp-stof .pp-stof__sub{padding-left:12px;font-size:13px;line-height:1.4;color:var(--stone-kaart)}
.pp-stof dd.pp-stof__sub{padding-left:0;font-weight:400}

.pp-ingredienten{margin-top:14px;display:grid;gap:4px}
@media(min-width:960px){.pp-ingredienten{grid-template-columns:150px 1fr;gap:24px}}
.v5 .pp-ingredienten__t{margin:0;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.5;color:var(--ink)}
.v5 .pp-ingredienten p{margin:0 !important;font-size:14px;line-height:1.6;color:var(--ink-soft)}

/* Gebruik: de gegevens naast elkaar, label boven de waarde. */
.pp-gebruik{scroll-margin-top:90px}
.pp-gebruik__lijst{margin:6px 0 0;display:grid;grid-template-columns:1fr;gap:12px 32px}
@media(min-width:720px){.pp-gebruik__lijst{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.pp-gebruik__lijst > div{padding-top:10px;border-top:1px solid var(--line)}
.pp-gebruik__lijst dt{font-size:12.5px;letter-spacing:.02em;color:var(--stone-kaart)}
.pp-gebruik__lijst dd{margin:3px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
/* Verplichte vermeldingen: klein en rustig onder een lijn, icoon mooi op de regel. */
.v5 .pp-let{list-style:none;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 28px}
.v5 .pp-let li{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:13.5px;line-height:1.4;color:var(--stone-kaart)}
.v5 .pp-let li::before{content:none}
.v5 .pp-let svg{flex:none;width:16px;height:16px;color:var(--bark)}

/* ---------- Kwaliteit ---------- */
@media(min-width:1100px){.pp-merk{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pp-merk .kw-controle{background:#F2F0EC}
/* Alleen de link zelf is klikbaar, niet de volle breedte van de kaart. */
.v5 .pp-merk__link{align-self:flex-start;margin-top:auto;padding-top:10px}
.v5 .pp-merk .kw-controle__n{margin-bottom:0 !important}
.v5 .pp-merk__link--licht,.v5 .pp-merk__link--licht:hover{color:#fff}
.pp-merk__science{background:linear-gradient(104deg,var(--bark-dp) 0%,var(--clay) 200%) !important}
.v5 .pp-merk__science .kw-controle__t,.v5 .pp-merk__science .kw-controle__n{color:#fff}

/* ---------- Reviews ---------- */
.pp-reviews__rij{display:grid;gap:16px}
@media(min-width:960px){.pp-reviews__rij{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pp-tpkaart{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:26px;border-radius:var(--soft);background:#F2F0EC}
.pp-tpkaart .btns{margin-top:8px;display:grid;grid-template-columns:1fr;gap:8px;width:100%;max-width:280px}
/* Zonder reviews op desktop: één brede kaart op één rij, knoppen rechts. */
@media(min-width:960px){
  .pp-reviews__rij .pp-tpkaart:only-child{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:14px 24px}
  .pp-reviews__rij .pp-tpkaart:only-child .btns{margin:0 0 0 auto;display:flex;width:auto;max-width:none}
  .pp-reviews__rij .pp-tpkaart:only-child .btns .btn{width:auto;padding-inline:34px}
}
.v5 .pp-tpkaart__score{font-family:var(--display);font-weight:500;font-size:48px;line-height:1;color:var(--ink)}
.v5 .pp-tpkaart__n{font-size:16px;font-weight:500;color:var(--ink)}
.v5 .pp-tpkaart__logo{display:block;height:24px;width:auto}
/* Knoppen in de kaart: onder elkaar, even breed. Naast elkaar alleen in de brede variant zonder reviews. */
.pp-tpkaart .btns .btn{width:100%;padding-inline:20px}
/* Reviews */
.pp-rev{position:relative;padding:26px 26px 22px;gap:16px;background:#F2F0EC;box-shadow:0 24px 50px -40px rgba(39,43,32,.45)}
.pp-rev__kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-rev__sterren{display:inline-flex;gap:2px}
.pp-rev__sterren svg{fill:var(--line);display:block}
.pp-rev__sterren svg.is-vol{fill:var(--bark)}
.pp-rev__aanhaling{fill:var(--clay);opacity:.35;flex:none;margin-left:auto}
.v5 .pp-rev .rev__q{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--ink)}
.pp-rev__voet{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.v5 .pp-rev__initiaal{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(104deg,var(--bark-dp) 0%,var(--clay) 200%);color:#fff;font-family:var(--display);font-weight:500;font-size:16px}
.pp-rev__wie{display:flex;flex-direction:column;gap:2px;min-width:0}
.v5 .pp-rev .rev__naam{font-size:16px;color:var(--ink)}
.v5 .pp-rev__meta{font-size:13.5px;color:var(--stone-kaart)}
/* Naast reviews: de inhoud gecentreerd in de kaart. */
/* Zin naast de titel: tegen de rechterkant, over de volle breedte van de kolom. */
main.pp .sc-kop2 .big-lede{justify-self:end;text-align:left;max-width:none;text-wrap:pretty}
@media(max-width:959px){main.pp .sc-kop2 .big-lede{justify-self:start;text-align:left}}
@media(max-width:719px){.v5 .pp-anker a::after{bottom:0}}
.v5 .pp-knop [hidden]{display:none !important}
/* Trustpilot-regel: op mobiel op één lijn, kleiner en met de korte tekst. */
.v5 .pp-tp__kort{display:none}
@media(max-width:559px){
  .v5 .pp-tp{flex-wrap:nowrap;gap:8px}
  .v5 .pp-tp__logo{height:17px}
  .v5 .pp-tp__sterren{height:16px}
  .v5 .pp-tp span.pp-tp__lang{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .v5 .pp-tp span.pp-tp__kort{display:inline;font-size:14px;white-space:nowrap}
}
/* Geen groene focusranden bij klikken op de productpagina. */
main.pp :is(a,button,input,summary,select,textarea,[tabindex]):focus,
main.pp :is(a,button,input,summary,select,textarea,[tabindex]):focus-visible{outline:none;-webkit-tap-highlight-color:transparent}
/* De zin rechts eindigt op dezelfde basislijn als de titel links. */
main.pp .sc-kop2 .big-lede{margin-bottom:0 !important}
@media(min-width:960px){main.pp .sc-kop2{align-items:last baseline}}