/* Productpagina-template: komt over het podium heen, het paneel verdwijnt. Zoë blijft rechtsonder als pratend gezichtje.
   Zelfde taal als de rest: crème achtergrond, witte ronde kaarten, zachte schaduw, oranje accent, Lucide-iconen. */
.scherm.op-product .podium,.scherm.op-product .achtergrond,.scherm.op-product .paneel,
.scherm.op-product .rondje,.scherm.op-product .product{opacity:0;pointer-events:none}
.scherm.op-product .geluid{bottom:calc(var(--balk,190px) + 12px)}                 /* geluidsknop op zijn vaste plek: net boven de laag */
.scherm.op-product .geluid.herhaal{bottom:calc(var(--balk,190px) + 66px)}

.ppagina{visibility:hidden;position:absolute;left:0;right:0;top:58px;bottom:0;z-index:3;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 16px calc(var(--balk,190px) + 72px);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.scherm.op-product .ppagina.actief{visibility:visible;opacity:1;transform:none;pointer-events:auto}   /* alleen de pagina van het gekozen product */
.ppagina::-webkit-scrollbar{display:none}

/* licht op: wat Zoë op dit moment noemt (rustig: oranje rand + warme tint, heel licht omhoog) */
.licht-kan{transition:box-shadow .35s ease,background-color .35s ease}
.licht{box-shadow:0 0 0 1.5px var(--oranje),0 6px 18px rgba(255,122,0,.14)!important;background-color:#FFF1E4!important}

/* 1. bovenblok: USP's links, vierkante productfoto rechts (foto's zijn vierkant met witruimte: nooit bijsnijden) */
.p-boven{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:10px;align-items:center}
.p-usps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.p-usps li{display:flex;align-items:center;gap:9px}
.p-usps svg{flex:0 0 34px;width:34px;height:34px;padding:8px;border-radius:12px;background:#fff;color:var(--oranje);box-shadow:0 4px 12px rgba(124,72,24,.08)}
.p-usps span{display:flex;flex-direction:column;font-size:11.5px;font-weight:700;color:var(--grijs);line-height:1.2}
.p-usps b{font-size:12.5px;font-weight:900;color:var(--inkt)}
.p-foto{position:relative;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(124,72,24,.12);aspect-ratio:1;overflow:hidden;display:grid;place-items:center}
.p-foto img{width:100%;height:100%;object-fit:contain}
.p-badge{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:5px;background:var(--oranje);color:#fff;border-radius:999px;padding:6px 11px 6px 9px;font:900 12.5px Nunito,system-ui,sans-serif}
.p-badge svg{width:14px;height:14px}

/* 2. titel */
.p-kop{margin:12px -6px 0;padding:6px 8px;border-radius:16px}
.p-kop h1{margin:0;font-size:25px;font-weight:900;letter-spacing:-.3px;line-height:1.15}
.p-kop .sub{margin-top:3px;font-size:15px;font-weight:700;color:var(--grijs)}
.p-score{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:800;color:var(--inkt)}
.p-score .ster{color:#F5A400;display:flex}
.p-score .ster svg{width:15px;height:15px;fill:#F5A400}
.p-score span{color:var(--grijs);font-weight:700}

/* 3. prijs + levering */
.p-prijs{display:flex;align-items:baseline;gap:8px;margin:10px -6px 0;padding:4px 8px;border-radius:14px;width:max-content}
.p-prijs b{font-size:30px;font-weight:900;letter-spacing:-.5px}
.p-prijs span{font-size:13px;font-weight:700;color:var(--grijs)}
.p-lever{display:flex;align-items:center;gap:8px;margin:6px 2px 0;font-size:13.5px;font-weight:800;color:#15803D}
.p-lever svg{width:17px;height:17px}

/* 4. wat zit erin */
.p-sectie{margin-top:22px}
.p-sectie h2{margin:0 2px 10px;font-size:16px;font-weight:900}
.p-inhoud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.p-tegel{background:#fff;border-radius:16px;padding:11px 8px 10px;text-align:center;box-shadow:0 4px 14px rgba(124,72,24,.07)}
.p-tegel svg{width:20px;height:20px;color:var(--oranje)}
.p-tegel b{display:block;margin-top:4px;font-size:15px;font-weight:900;line-height:1.1}
.p-tegel span{display:block;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--grijs);line-height:1.2}

/* 5. staffel */
.p-staffel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 6px;scrollbar-width:none;padding:10px 6px 8px;margin:-10px -6px -8px}
.p-staffel::-webkit-scrollbar{display:none}
.p-staffel .p-aantal{flex:0 0 auto;min-width:calc((100% - 16px) / 3.25);padding:12px 12px 10px;scroll-snap-align:start}
.p-staffel .p-aantal b{white-space:nowrap}
.p-uitleg{margin:8px 2px 0;font-size:12.5px;font-weight:700;color:var(--grijs)}
.p-aantal{position:relative;border:0;background:#fff;border-radius:16px;padding:12px 4px 10px;text-align:center;font-family:inherit;cursor:pointer;color:var(--inkt);box-shadow:0 4px 14px rgba(124,72,24,.07)}
.p-aantal b{display:block;font-size:16px;font-weight:900}
.p-aantal span{display:block;margin-top:2px;font-size:12px;font-weight:800;color:var(--grijs)}
.p-aantal em{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#15803D;color:#fff;font:900 10.5px Nunito,system-ui,sans-serif;font-style:normal;border-radius:999px;padding:2px 7px;white-space:nowrap}
.p-aantal.gekozen{box-shadow:0 0 0 2px var(--inkt),0 4px 14px rgba(124,72,24,.07)}
.p-meer{margin:10px 2px 0;border:0;background:none;padding:0;font:800 13.5px Nunito,system-ui,sans-serif;color:#9A4A06;display:flex;align-items:center;gap:4px;cursor:pointer}
.p-meer svg{width:16px;height:16px}

/* alle aantallen */
.p-meer svg{transition:transform .25s}
.p-meer.open svg{transform:rotate(180deg)}
.p-alle{margin-top:10px;background:#fff;border-radius:18px;box-shadow:0 4px 14px rgba(124,72,24,.07);padding:4px 6px}
.p-rij{display:grid;grid-template-columns:1fr auto 52px;align-items:center;width:100%;border:0;background:none;border-bottom:1px solid #F3ECE5;padding:11px 8px;font:700 14px Nunito,system-ui,sans-serif;color:var(--inkt);cursor:pointer;text-align:left;border-radius:10px}
.p-rij:last-child{border-bottom:0}
.p-rij b{font-weight:900}
.p-rij em{font-style:normal;font-size:12px;font-weight:900;color:#15803D;text-align:right}
.p-rij.gekozen{background:#FFF1E4}
/* specificaties */
.p-specs{background:#fff;border-radius:18px;box-shadow:0 4px 14px rgba(124,72,24,.07);padding:4px 14px}
.p-spec{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #F3ECE5;font-size:14px;font-weight:700}
.p-spec:last-child{border-bottom:0}
.p-spec svg{width:18px;height:18px;color:var(--oranje);flex:0 0 18px}
.p-spec span{margin-left:auto;color:var(--grijs);font-weight:700}
/* 6. omschrijving */
.p-tekst{margin:0 2px;font-size:14.5px;font-weight:600;line-height:1.55;color:#374151}

/* 7. bestellaag: zelfde laag als het paneel op andere schermen (Zoë links, zin, Terug rechts) met daaronder aantal/totaal/winkelmand */

.p-balk{position:absolute;left:0;right:0;bottom:0;z-index:5;background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -10px 34px rgba(124,72,24,.10);
  padding:20px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;transform:translateY(110%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.p-balk::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:#EEE7E0}
.p-balk .afzender{min-height:48px}
.p-koopregel{display:flex;align-items:center;gap:12px}
.scherm.op-product .p-balk.actief{transform:none}
/* verborgen balken (één per product/pagina) liggen net onder de schermrand; hun schaduwen stapelden zich op tot strepen
   onderin (Ries 12-10). Dus: onzichtbaar en zonder schaduw zolang ze niet actief zijn, pas na het wegschuiven. */
.p-balk:not(.actief){visibility:hidden;box-shadow:none;transition:transform .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s,box-shadow 0s linear .45s}
.p-stepper{display:flex;align-items:center;background:#F6F2EE;border-radius:14px;height:52px}
.p-stepper button{width:40px;height:52px;border:0;background:none;display:grid;place-items:center;color:var(--inkt);cursor:pointer;padding:0}
.p-stepper button svg{width:18px;height:18px}
.p-stepper b{min-width:22px;text-align:center;font-size:17px;font-weight:900}
.p-totaal{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.p-totaal span{font-size:12px;font-weight:800;color:var(--grijs);white-space:nowrap}
.p-totaal b{font-size:21px;font-weight:900;margin-top:2px}
.p-koop{flex:1;min-width:0;height:52px;border:0;border-radius:16px;background:var(--oranje);color:#fff;font:900 16.5px Nunito,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 8px 20px rgba(255,122,0,.28)}
.p-koop svg{width:20px;height:20px}

.p-gezicht{position:relative;overflow:visible}
.p-gezicht canvas{width:100%;height:100%;display:block;border-radius:50%}
.p-gezicht.praat::after{content:"";position:absolute;inset:-4px;border-radius:50%;animation:praatRing 1.4s ease-out infinite;pointer-events:none}
@keyframes praatRing{0%{box-shadow:0 0 0 0 rgba(255,122,0,.4)}100%{box-shadow:0 0 0 9px rgba(255,122,0,0)}}
.p-zin{font-size:17px}
@media (prefers-reduced-motion:reduce){.p-gezicht.praat::after{animation:none}}

/* label in de bestellaag (onder Zoë): foto, titel en prijs — klapt open zodra de prijs uit beeld scrolt */
.p-label{display:grid;grid-template-rows:0fr;opacity:0;margin:-6px 0;transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1),opacity .25s,margin .3s}
.p-label>.pkaart{min-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:padding .3s}
.p-label.zichtbaar{grid-template-rows:1fr;opacity:1;margin:0}
.p-label.zichtbaar>.pkaart{padding-top:4px;padding-bottom:4px}