/* =====================================================================
   site/assets/css/pagina/productpagina.css — één pagina per product (productgroepen/<groep>/<product>/,
   gemaakt door scripts/productpaginas.py). Prefix .pp- ; body.pp.
   Opbouw als een kozijnelement in assortiment/offerte (ONTWERP C11/C13): stilleven op rijstpapier met maan en nevel,
   ronde detail-inzet met dubbele goudring, titelblok met zegel + mono "02 / 04", ruitlijst, aantal + gouden knop
   "Op mijn aanvraaglijst" (één goud per viewport), daaronder het 3D-podium met de keuzes, de "bijvoorbeeld"-maten,
   de uitvoeringen en vorige/volgende + gerelateerde producten. Tekst ≥ 14 px op de telefoon, tikvlakken ≥ 44 px.
   ===================================================================== */

body.pp{overflow-x:clip}
.pp-main{padding-bottom:clamp(24px,4vw,56px)}
.pp-held{padding-top:clamp(12px,2vw,28px)}
.pp-vel{position:relative;overflow:hidden}
.pp-held__kruimel{position:relative;z-index:2;margin:0 0 clamp(14px,2vw,24px)}

/* ---------------------------------------------------------------- held: element */
.pp-held__raster{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,48px);align-items:start}
@media (min-width:1024px){.pp-held__raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

.pp-stil{position:relative;margin:0}
.pp-stil__vlak{position:relative}
.pp-stil__papier,.pp-podium__papier{position:relative;overflow:hidden;isolation:isolate;
  background:var(--rijst) url('../../../productgroepen/assets/orn/rijstpapier-tegel.jpg?v=766948a5') repeat;background-size:42% auto;
  box-shadow:inset 0 0 0 1px rgba(var(--dgoud-rgb),.6),inset 0 0 0 5px var(--rijst),inset 0 0 0 6px rgba(var(--dgoud-rgb),.4)}
.pp-stil__maan{position:absolute;left:62%;top:40%;width:58%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(241,220,160,.62) 0,rgba(241,220,160,.42) 52%,rgba(241,220,160,0) 71%)}
.pp-stil__bergen{position:absolute;left:-4%;right:-4%;bottom:12%;width:108%;height:auto;opacity:.32;pointer-events:none;z-index:0}
.pp-stil__render{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
.pp-stil--beslag .pp-stil__maan,.pp-stil--beslag .pp-stil__bergen{display:none}   /* beslag: de render draagt zijn eigen papier en zon */
.pp-stil__mist{position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;z-index:2;
  background:linear-gradient(to top,rgba(var(--rijst-rgb),.85),rgba(var(--rijst-rgb),0))}
.pp-stil__inzet.s-inzet{--d:104px;position:absolute;right:12px;bottom:-26px;z-index:3;box-shadow:0 0 0 1px rgba(var(--dgoud-rgb),.8),0 0 0 5px var(--rijst),0 0 0 6px rgba(var(--dgoud-rgb),.45),0 6px 18px rgba(var(--inkt-rgb),.12)}
@media (min-width:1024px){.pp-stil__inzet.s-inzet{--d:150px;right:-18px;bottom:-30px}}
.pp-stil__bijschrift{margin:38px 0 0;max-width:62ch;padding-right:120px;font:italic 400 1rem/1.45 var(--f-serif);color:var(--grijs1);text-wrap:pretty}
@media (min-width:1024px){.pp-stil__bijschrift{padding-right:150px;font-size:1.0625rem}}
@media (max-width:767px){.pp-stil__bijschrift{padding-right:112px;margin-top:14px;font-size:.9375rem}}

.pp-held__tekst{display:grid;gap:14px;min-width:0;align-content:start}
.pp-rubriek{display:flex;align-items:center;gap:12px;margin:0;flex-wrap:nowrap}
.pp-rubriek .s-kicker{margin:0}
.pp-titel{margin:2px 0 0;text-wrap:balance}
@media (min-width:1024px){.pp-titel.s-h1{font-size:clamp(2.25rem,3.2vw,3rem)}}
.pp-lead{margin:0;padding-top:14px;position:relative;max-width:38ch}
.pp-lead::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:var(--goud)}
.pp-tekst{margin:0;color:var(--inkt2,var(--inkt));max-width:60ch}
.pp-punten{margin:4px 0 0;font-size:1rem;line-height:1.5;color:var(--grijs1)}
.pp-keuze-regel{display:grid;gap:4px;margin:6px 0 0;padding:12px 0 0;border-top:1px solid rgba(var(--dgoud-rgb),.3);font:500 .875rem/1.5 var(--f-mono);color:var(--inkt)}
.pp-keuze-regel__label{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--dgoud)}

.pp-actie{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px}
.pp-aantal{display:inline-flex;align-items:center;height:52px;border:1px solid rgba(var(--inkt-rgb),.35);background:rgba(var(--rijst-rgb),.7)}
.pp-aantal__knop{display:grid;place-items:center;width:44px;height:50px;border:0;background:none;color:var(--inkt);cursor:pointer}
.pp-aantal__knop:hover{background:rgba(var(--inkt-rgb),.06)}
.pp-aantal__knop .s-ico{width:16px;height:16px}
.pp-aantal__getal{width:48px;height:50px;border:0;border-inline:1px solid rgba(var(--inkt-rgb),.18);background:transparent;text-align:center;
  font:500 1rem/1 var(--f-mono);color:var(--inkt);-moz-appearance:textfield;appearance:textfield}
.pp-aantal__getal::-webkit-inner-spin-button,.pp-aantal__getal::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pp-lijstknop.is-op-lijst{box-shadow:inset 0 0 0 1px var(--dgoud),0 0 0 3px var(--rijst),0 0 0 4px var(--goud)}
.pp-noot{margin:4px 0 0;font-size:.9375rem;line-height:1.5;color:var(--grijs1);max-width:60ch}
.pp-montage{margin:0;font:500 .875rem/1.5 var(--f-mono);letter-spacing:.04em;color:var(--grijs1)}
.pp-montage::before{content:"◆";margin-right:.6em;color:var(--dgoud);font-size:.7em;vertical-align:.15em}
.pp-naar3d{justify-self:start}

/* ---------------------------------------------------------------- hoofdstukken */
.pp-hfd{padding-top:clamp(18px,2.6vw,36px)}
.pp-hfd-vel{position:relative}
.pp-kop{display:grid;gap:8px;margin:0 0 clamp(20px,2.6vw,36px)}
.pp-kop .s-kicker{margin:0}
.pp-kop__titel{margin:0;text-wrap:balance}

/* 3D: podium + paneel */
.pp-studio{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (min-width:1024px){.pp-studio{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.pp-podium{position:relative;margin:0}
.pp-podium__papier{aspect-ratio:4 / 3}
@media (max-width:640px){.pp-podium__papier{aspect-ratio:1}}
.pp-podium__beeld{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;transition:opacity .4s var(--ease)}
.pp-stil--beslag ~ * .pp-podium__beeld{object-fit:cover}
body[data-pg="beslag"] .pp-podium__beeld{object-fit:cover}
.pp-podium__doek{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.pp-podium__doek canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}
.pp-podium.is-3d .pp-podium__doek{opacity:1;pointer-events:auto}
.pp-podium.is-3d .pp-podium__beeld{opacity:0}
.pp-podium.is-3d .pp-stil__mist{opacity:.5}
.pp-podium__start{position:absolute;left:50%;bottom:20px;z-index:4;translate:-50% 0;white-space:nowrap;background:rgba(var(--rijst-rgb),.92)}
.pp-podium.is-3d .pp-podium__start{display:none}
.pp-podium.is-laden .pp-podium__start{opacity:.6;pointer-events:none}
.pp-podium__sluit{position:absolute;right:14px;top:14px;z-index:4;background:rgba(var(--rijst-rgb),.92)}
.pp-podium__hint{position:absolute;left:16px;top:14px;z-index:4;margin:0;max-width:calc(100% - 150px);font:500 .875rem/1.3 var(--f-kop);letter-spacing:.12em;color:var(--grijs1);pointer-events:none}
.pp-podium__hint:empty{display:none}
.pp-podium__bijschrift{margin:14px 0 0;font:italic 400 1rem/1.45 var(--f-serif);color:var(--grijs1);text-wrap:pretty}

.pp-paneel{display:grid;gap:18px;min-width:0}
.pp-keuzes{display:grid;gap:18px;margin:0}
.pp-veld{min-width:0;margin:0;padding:0;border:0}
.pp-veld legend{display:block;margin:0 0 8px;padding:0;font:500 .875rem/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--dgoud)}
.pp-veld__eenheid{letter-spacing:.08em;text-transform:none;color:var(--grijs2)}
.pp-veld--weergave legend::after{content:" · weergave";letter-spacing:.08em;text-transform:none;color:var(--grijs2)}
.pp-keuze span{min-height:44px;padding:6px 14px;font-size:.9375rem}
.pp-keuze small{display:block;font:500 .875rem/1.1 var(--f-mono);color:var(--grijs2)}
.pp-keuze span{flex-wrap:wrap;column-gap:8px;row-gap:0}
.pp-staal{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--staal);box-shadow:0 0 0 1px rgba(var(--inkt-rgb),.35)}
.pp-paneel__noot{margin:0;font:500 .875rem/1.5 var(--f-mono);color:var(--grijs1)}
.pp-lijstknop--3d{justify-self:start}

/* maten en uitvoeringen */
.pp-maten{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,44px)}
@media (min-width:1024px){.pp-maten{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.pp-maatlijst{display:grid;gap:0;margin:0}
.pp-maatlijst > div{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid rgba(var(--dgoud-rgb),.25)}
.pp-maatlijst > div:first-child{border-top:1px solid rgba(var(--dgoud-rgb),.25)}
.pp-maatlijst dt{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--dgoud)}
.pp-maatlijst dd{margin:0;font:500 .9375rem/1.5 var(--f-mono);color:var(--inkt);font-variant-numeric:tabular-nums}
.pp-maten__lijst .pp-noot{margin-top:14px}
.pp-uitvoeringen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pp-uitv{margin:0;display:grid;gap:8px;align-content:start}
.pp-uitv__beeld{display:block;aspect-ratio:1;overflow:hidden;background:var(--rijst);box-shadow:inset 0 0 0 1px rgba(var(--dgoud-rgb),.5)}
.pp-uitv__beeld img{display:block;width:100%;height:100%;object-fit:cover}
.pp-uitv figcaption{font:italic 400 .9375rem/1.4 var(--f-serif);color:var(--grijs1);text-wrap:pretty}

/* verder: vorige / volgende + gerelateerd */
.pp-buren{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 clamp(20px,3vw,36px)}
@media (min-width:768px){.pp-buren{grid-template-columns:1fr 1fr}}
.pp-buur{display:flex;align-items:center;gap:14px;min-height:88px;padding:10px 14px;border:1px solid rgba(var(--dgoud-rgb),.45);
  background:rgba(var(--rijst-rgb),.6);color:var(--inkt);text-decoration:none;transition:background-color .2s var(--ease)}
.pp-buur:hover{background:rgba(var(--goud-rgb,201,162,74),.10)}
.pp-buur--volgende{justify-content:flex-end;text-align:right}
.pp-buur img{flex:none;width:68px;height:68px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--rijst),0 0 0 3px rgba(var(--dgoud-rgb),.8)}
.pp-buur > span{display:grid;gap:4px;min-width:0}
.pp-buur b{font:500 1rem/1.25 var(--f-kop);letter-spacing:.06em;text-transform:uppercase}
.pp-buur__richting{display:inline-flex;align-items:center;gap:8px;font:500 .875rem/1 var(--f-mono);color:var(--dgoud)}
.pp-buur--volgende .pp-buur__richting{justify-content:flex-end}
.pp-buur__richting .s-ico{width:14px;height:14px}
.pp-verwant{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:768px){.pp-verwant{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pp-verwant__kaart{display:grid;gap:6px;color:var(--inkt);text-decoration:none}
.pp-verwant__beeld{display:block;aspect-ratio:1;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(var(--dgoud-rgb),.5)}
.pp-verwant__beeld img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pp-verwant__kaart:hover img{transform:scale(1.04)}
.pp-verwant__nr{font:500 .875rem/1 var(--f-mono);color:var(--dgoud)}
.pp-verwant__kaart b{font:500 .9375rem/1.3 var(--f-kop);letter-spacing:.06em;text-transform:uppercase}
.pp-verder__voet{display:flex;flex-wrap:wrap;gap:8px 28px;margin:clamp(20px,3vw,32px) 0 0}

@media (prefers-reduced-motion:reduce){.pp-podium__beeld,.pp-podium__doek,.pp-verwant__beeld img{transition:none}}

/* lange slotparen in de titel ("verstelbare scharnier"): kleiner, zodat ze samen op één regel passen (geen weeskind) */
.pp-titel--lang.s-h1{font-size:1.5rem;letter-spacing:.1em;overflow-wrap:break-word}
@media (min-width:1024px){.pp-titel--lang.s-h1{font-size:clamp(1.75rem,2.3vw,2.125rem)}}
.pp-verder__voet .s-pijllink{line-height:1.35;text-align:left}