/* =====================================================================
   site/assets/css/pagina/productgroepen.css — de 3D-productgroepen (productgroepen/) binnen de site-shell.
   Laadt NA de eigen css van de showcase (gesynchroniseerd uit website/productgroepen/ door scripts/sync_productgroepen.py).
   Prefix .pg- ; body.pg staat op alle 7 pagina's. Alleen aansluiting op kop/voet/subnav en de mobiele site-eisen
   (tekst >= 14 px, tikvlakken >= 44 px); de showcase zelf blijft zoals de bron.
   ===================================================================== */

/* kop + subnav van de site i.p.v. de eigen .kop: sticky podia en ankers schuiven eronder */
:root{--kop-hoogte:calc(var(--s-kop-h) + var(--s-subnav-h))}
@media (max-width:1023px){html.s-omlaag{--kop-hoogte:var(--s-kop-h)}}
html{scroll-behavior:auto;scroll-padding-top:calc(var(--s-kop-h) + var(--s-subnav-h) + 16px)}
body.pg{overflow-x:clip}

/* site-chroom houdt zijn eigen typografie (de showcase zet a{color} en body{font} globaal) */
body.pg :is(.s-kop,.s-subnav,.s-voet) a{color:inherit}
body.pg .s-voet{font-family:var(--f-tekst)}

/* held als .b-scene (papier ademt): ornamenten mogen niet uit het vel steken */
body.pg main > section.b-scene{position:relative}

/* montagevoorbehoud in het slot */
.pg-montage{position:relative;margin:18px 0 0;font:500 .875rem/1.5 var(--f-mono,"IBM Plex Mono",monospace);letter-spacing:.04em;color:var(--grijs-tekst,#6B655C)}
.pg-montage::before{content:"◆";margin-right:.6em;color:var(--dgoud);font-size:.7em;vertical-align:.15em}

/* ---------------------------------------------------------------- leesbaarheid volgens de site-eisen
   desktop >= 12 px, telefoon >= 14 px (ONTWERP 0.1.8 / test_site.py); de showcase ging tot 11 px */
@media (min-width:768px){body.pg main :is(.podium-hint,.podium-hint span,.keuze small,.b-poster-tip,.ov-3d,.ov-producten span,.kaart b,small .maat,.sg-kort,.sg-lang){font-size:12px}}
@media (max-width:767px){
  body.pg main :is(.label,.held-feiten li,.ov-teller,.ov-teller b,.ov-teller i,.ov-tegel-onder b,.ov-naam,.ov-3d,.ov-producten span,
    .knop,.podium-knop,.b-kaart b,.b-kaart b small,.b-maat,.bs-beweeg-tekst,legend,legend .zh,.keuze small,.b-galerij figcaption,
    .b-poster-tip,.b-sub,.b-varianten figcaption,.sg-tab span,.sg-kort,.bijschrift .g,.podium-hint,.podium-hint span){font-size:.875rem}
  body.pg main :is(.knop,.podium-knop){letter-spacing:.1em}
}

/* geen weeskind in lange groeps-/productnamen (A5): iets compacter zetten waar de kolom smal is */
body.pg .b-titel h2{font-size:1.3125rem;letter-spacing:.06em}
@media (max-width:400px){body.pg .b-titel h2{font-size:1.0625rem;letter-spacing:.04em}}
@media (max-width:400px){body.pg .ov-tekst h2{font-size:1.5rem;letter-spacing:.1em}}
@media (max-width:767px){body.pg[data-pg="hekwerk"] .held h1 > span{font-size:.875rem}}

/* ---------------------------------------------------------------- één kadervariant (eenheid.css / C01): het podium krijgt dezelfde dubbele goudrand
   en dezelfde 回-hoeken als elk hoofdstukvel van de site (buitenlijn 60 %, binnenlijn 45 % op 5 px, hoek 36 px met papiervulling) */
body.pg .podium{border-color:rgba(var(--dgoud-rgb),.60)}
body.pg .podium::after{border-color:rgba(var(--dgoud-rgb),.45)}
body.pg .podium-hoek{width:36px;height:36px;transform:none;background-size:100% 100%}
body.pg .podium-hoek.lb{background-image:url('../../beeld/orn/hoek-lb.svg?v=6851610d')}
body.pg .podium-hoek.rb{background-image:url('../../beeld/orn/hoek-rb.svg?v=3a38563a')}
body.pg .podium-hoek.lo{background-image:url('../../beeld/orn/hoek-lo.svg?v=5db15fb6')}
body.pg .podium-hoek.ro{background-image:url('../../beeld/orn/hoek-ro.svg?v=e022f10a')}
@media (max-width:479px){body.pg .podium-hoek{width:28px;height:28px}}

/* =====================================================================
   ÉÉN DOCUMENT (jury ronde 3): de productgroepen in hetzelfde systeem als kozijnen en voorstel.
   sync_productgroepen.py zet elke sectie tussen held en slot in <div class="s-container s-container--vel"><div class="s-vel s-hfd-vel pg-vel">,
   vervangt de rode rubriekchips door zegel-nr + "01 / 04" + gouden kicker, voegt een folio toe, haalt de tak weg en geeft
   de knoppen de site-klassen (.s-knop / .s-knop--goud).
   ===================================================================== */
/* hoofdstuk = vel: geen volle scheidslijn over de hele breedte, de showcase-container binnen het vel zonder eigen goot */
body.pg main > section.pg-hfd{border-top:0;padding-block:clamp(14px,2vw,28px);background:none}
body.pg main > section.pg-hfd .pg-vel > .container,
body.pg main > section.pg-hfd .pg-vel > div > .container{max-width:none;width:auto;padding-inline:0;margin-inline:0}
body.pg .pg-vel{overflow:visible}   /* sticky podia en schaduwen blijven werken */
@media (max-width:767px){body.pg main > section.pg-hfd > .pg-vel-houder{padding-inline:10px}}
/* sectiescheiders die toch een lijn tekenen: uitlopend goud (L02) */
body.pg main hr,body.pg .ov-werkwijze,body.pg .b-producten{border-top:0}
body.pg main hr{height:1px;background:linear-gradient(90deg,transparent,var(--lijn-goud,rgba(176,141,62,.6)) 18%,var(--lijn-goud,rgba(176,141,62,.6)) 82%,transparent)}

/* rubriek: zegel → mono-nummer → kicker, één regel */
body.pg .pg-rubriek{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin:0 0 10px;min-width:0;white-space:nowrap}
body.pg .pg-rubriek .s-kicker{margin:0;white-space:nowrap}
body.pg .pg-rubriek .s-zegel-nr img{width:28px;height:28px}
body.pg .pg-kicker{margin:0 0 10px}
@media (max-width:400px){body.pg .pg-rubriek .s-kicker{letter-spacing:.14em}body.pg .pg-rubriek .s-zegel-nr__tot{display:none}}
/* held: de rubriek staat in de tekstkolom vóór de kop (vervangt het label) */
body.pg .pg-rubriek--held{grid-column:1}

/* folio onderaan elk vel */
body.pg .pg-folio{margin-top:clamp(28px,3.4vw,44px)}

/* tegels op het overzicht: geen rode chips meer (max. 3 rode elementen per viewport) — mono-nummer in goud */
body.pg .pg-tegel-nr{flex:none;font:500 .8125rem/1 var(--f-mono,"IBM Plex Mono",monospace);letter-spacing:.04em;color:var(--goud-tekst,#7E6224);margin-right:8px}
@media (max-width:767px){body.pg .pg-tegel-nr{font-size:.875rem}}

/* knoppen: goud = de site-goudknop, de rest = randknop; geen massieve inktvlakken */
body.pg main .knop.s-knop{min-height:48px;padding:0 calc(22px - .16em) 0 22px;border:1px solid rgba(var(--inkt-rgb),.8);border-radius:var(--straal-s,2px);
  background:transparent;color:var(--inkt);font:500 .875rem/1.15 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
body.pg main .knop.s-knop:hover{background:rgba(var(--inkt-rgb),.06);border-color:var(--inkt)}
body.pg main .knop.s-knop.s-knop--goud{border-color:transparent;color:var(--inkt);background:var(--s-goudverloop) 0 0/100% 160%;
  box-shadow:inset 0 1px 0 rgba(255,250,232,.65),inset 0 -1px 0 var(--dgoud),0 6px 18px rgba(var(--dgoud-rgb),.22)}
body.pg main .knop.s-knop.s-knop--goud:hover{background-position:0 100%}
@media (max-width:767px){body.pg main .knop.s-knop{letter-spacing:.1em}}

/* tak: alleen op de omslag van de site (de sync haalt de <img> weg; dit vangt resten in de showcase-css) */
body.pg :is(.tak,.podium-tak,.sg-tak){display:none!important}

/* held = lichte scène: één mistlaag onderin, maan rechtsboven die opkomt (data-b="maan"); achter de tekst en het beeld */
body.pg main > section.b-scene > .pg-lagen{z-index:0}
body.pg .pg-mist{bottom:0;--h:200px;opacity:.55}
body.pg .pg-maan{width:clamp(140px,18vw,260px);right:6%;top:clamp(40px,7vw,96px);z-index:0;pointer-events:none;opacity:.7}
@media (max-width:767px){body.pg .pg-maan{width:120px;right:4%;top:24px;opacity:.55}body.pg .pg-mist{--h:140px}}
body.pg .pg-rubriek [data-b=stempel]{width:28px;flex:none}

/* =====================================================================
   Elk product op een eigen pagina (scripts/productpaginas.py): strook vóór het slot van elke groepspagina,
   met per product een link naar productgroepen/<groep>/<product>/ en "Op mijn aanvraaglijst".
   ===================================================================== */
body.pg .pg-pp__lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (min-width:768px){body.pg .pg-pp__lijst{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:768px){body.pg .pg-pp__lijst:has(> li:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}}
body.pg .pg-pp__kaart{display:grid;gap:10px;align-content:start;min-width:0}
body.pg .pg-pp__link{display:grid;gap:6px;color:var(--inkt);text-decoration:none}
body.pg .pg-pp__beeld{display:block;aspect-ratio:1;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(var(--dgoud-rgb),.5)}
body.pg .pg-pp__beeld img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
body.pg .pg-pp__link:hover img{transform:scale(1.04)}
body.pg .pg-pp__nr{font:500 .875rem/1 var(--f-mono);color:var(--dgoud)}
body.pg .pg-pp__naam{font:500 .9375rem/1.3 var(--f-kop);letter-spacing:.06em;text-transform:uppercase}
body.pg .pg-pp__meer{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--dgoud)}
body.pg .pg-pp__lijst .s-knop{justify-self:start;max-width:100%;white-space:normal;text-align:left}
body.pg .pg-lijstknop .s-ico{width:16px;height:16px}
body.pg .pg-lijstknop.is-op-lijst,body.pg .pg-pp__lijst .is-op-lijst{box-shadow:inset 0 0 0 1px var(--dgoud),0 0 0 3px var(--rijst),0 0 0 4px var(--goud)}
@media (prefers-reduced-motion:reduce){body.pg .pg-pp__beeld img{transition:none}}
body.pg .pg-pp h2#t-per-product{margin:6px 0 clamp(18px,2.4vw,28px);font:400 clamp(1.5rem,2.6vw,2.25rem)/1.12 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
body.pg .pg-pp__lijst .s-knop{justify-self:stretch;justify-content:center;text-align:center;padding-inline:10px;letter-spacing:.08em;line-height:1.2;min-height:48px}
@media (max-width:767px){body.pg .pg-pp__lijst .s-knop{font-size:.875rem}}
body.pg .pg-pp__lijst .s-knop .s-ico{display:none}
body.pg .pg-pp__lijst .s-knop > span{flex:1 1 auto;min-width:0;text-align:center}
@media (min-width:768px){body.pg .pg-pp__lijst .s-knop{font-size:.8125rem;letter-spacing:.06em;padding-inline:8px}}
body.pg .pg-pp__lijst .s-knop{display:block;width:100%;padding-block:12px}
body.pg .pg-pp__lijst .s-knop > span{display:inline}
body.pg .pg-pp__kaart{grid-template-rows:1fr auto}