/* zaalzeven.nl v2 /reviews/. Gegenereerd uit de blokkenkiezer (zaalzeven-reviews-blokkenkiezer), keuze 1c-2a-3f-4c-5a-6b.
   Laadt NA /v2/home.css (kop, voet, knoppen, chips, variabelen, hero b1a, Google-sticker .b1a-review en fotowolk b9j komen daaruit).
   Deel 1 = gedeelde klassen uit paginastijl.css van de kiezer die home.css niet heeft; deel 2 = blok-CSS uit de kiezer;
   deel 3 (productie) = inklappen van de muur, lopende strook, formulierstatus.
   Mobiel: @media (max-width:700px) in plaats van @container pv uit de kiezer. */

/* ===== 1. aanvulling op home.css (uit paginastijl.css van de kiezer) ===== */
.pv{--zz-schaduw-rgb:23,0,36;--display:var(--zz-font-kop);--body:var(--zz-font-tekst);--radius:4px;--radius-chip:8px;--radius-zoekbalk:14px}
/* watermerk als doorlopende paginalaag: de 7 in lavendel (zoals feesten) */
.pv::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:var(--zz-wm-7),var(--zz-wm-7),var(--zz-wm-7);
  background-repeat:no-repeat;background-position:right -260px top 1000px,left -300px top 42%,right -280px top 76%;
  background-size:760px,900px,820px}
.pv>main{position:relative}
.pv .accent{color:var(--zz-rood)}
.pv .sub{font-size:17px;opacity:.85}
.pv .center{text-align:center}
.pv .wrap--smal{width:min(760px,100% - 48px)}
.pv .sec-kop{margin-bottom:56px}
.pv .sec-kop h2{margin-bottom:18px}
.pv .sec-kop.center p{max-width:640px;margin-inline:auto}
.pv .sec--ivoor{background:rgba(255,255,255,.72)}
.pv .icon{width:20px;height:20px;flex:none}
.pv .btn .icon{width:16px;height:16px}
.pv .btn--outline{background:transparent;border:1.5px solid var(--zz-rood);color:var(--zz-rood);padding:12.5px 24.5px}
.pv .btn--outline:hover{background:var(--zz-rood);border-color:var(--zz-rood);color:var(--zz-ivoor)}
.pv .tekstlink{color:var(--zz-rood);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:8px}
.pv .tekstlink:hover{text-decoration-thickness:2px}
.pv .tekstlink .icon{width:18px;height:18px}
.pv .panel{background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:var(--zz-schaduw);overflow:hidden;color:var(--zz-paars-2);padding:40px 44px}
.pv .hairline{border:0;border-top:1px solid rgba(23,0,36,.14);margin:16px 0}
/* chips zijn hier echte knoppen */
.pv button.chip{border:0;font-family:var(--zz-font-tekst);cursor:pointer;transition:background-color .2s,color .2s}
.pv button.chip:not(.chip--aan):hover{color:var(--zz-rood)}
.pv button.chip:focus-visible,.pv .b3f-meer .btn:focus-visible{outline:2px solid var(--zz-rood);outline-offset:2px}
@media (max-width:700px){
  .pv::before{background-size:900px,1100px,1000px;background-position:right -300px top 600px,left -380px top 42%,right -340px top 76%}
  .pv h2{font-size:34px}
  .pv .sec{padding:64px 0}
  .pv .wrap--smal{width:calc(100% - 32px)}
  .pv .sec-kop{margin-bottom:32px}
  .pv .sec-kop h2{margin-bottom:14px}
  .pv .panel{padding:26px 22px}
  .pv .btn{font-size:14.5px;padding:14px 22px}
  .pv .btn--outline{padding:12.5px 20.5px}
}

/* ===== 2. gekozen blokken (uit de kiezer) ===== */

/* ===== blok 1c: lage foto met Google-sticker (modifier op home-hero b1a) ===== */
/* hoogte = home-hero b1a (720 px desktop, min 680 mobiel), geen override meer (8 okt) */
.pv .b1c .b1a-foto{object-position:50% 45%}
.pv .b1c h1{font-size:72px;max-width:11em;text-wrap:balance}
.pv .b1c h1 .accent{color:#fff}
.pv .b1c-regel{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:18px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.92)}
.pv .b1c-regel b{font-weight:600;color:#fff}
.pv .b1c-link{margin-top:14px}
.pv .b1c-link .tekstlink{color:#fff}
.pv .b1c-sterren{position:relative;display:inline-flex;flex:none;line-height:0}
.pv .b1c-sterren__leeg,.pv .b1c-sterren__vol{display:flex;gap:3px}
.pv .b1c-sterren__leeg{color:rgba(255,255,255,.35)}
.pv .b1c-sterren__vol{position:absolute;left:0;top:0;overflow:hidden;color:var(--zz-oranje)}
.pv .b1c-sterren .icon{width:20px;height:20px}
@media (max-width:700px){
  .pv .b1c .b1a-foto{object-position:55% 45%}
  .pv .b1c h1{font-size:42px}
  .pv .b1c-regel{font-size:15px;margin-top:12px}
  .pv .b1c-link .tekstlink{font-size:14.5px}
}

/* ===== blok 2a: chips-rij ===== */
.pv .b2a{padding:56px 0 8px}
.pv .b2a-rij{display:flex;align-items:center;justify-content:space-between;gap:24px}
.pv .b2a-chips{display:flex;gap:10px;flex-wrap:nowrap}
@media (max-width:700px){
  .pv .b2a{padding:40px 0 0}
  .pv .b2a-rij{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .pv .b2a-strook{overflow-x:auto;margin-right:-16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pv .b2a-strook::-webkit-scrollbar{display:none}
  .pv .b2a-chips{gap:8px;padding:2px 16px 6px 0;width:max-content}
  .pv .b2a-chips .chip{font-size:14px;padding:9px 15px}
}

/* ===== blok 3f: reviewmuur zoals asteria.nl ===== */
.pv .b3f{padding:40px 0 72px}
.pv .b3f-kop{text-align:center;margin-bottom:12px}
.pv .b3f-kop h2{max-width:520px;margin:0 auto 18px}
.pv .b3f-score{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--zz-paars-2)}
.pv .b3f-score b{font-family:var(--display);font-size:24px;line-height:1;color:var(--zz-paars)}
.pv .b3f-bron{font-size:13px;color:var(--zz-grijs);margin-top:4px}
.pv .b3f-muur{--b3f-onder:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;padding:56px 0 64px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px,#000 calc(100% - var(--b3f-onder)),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 56px,#000 calc(100% - var(--b3f-onder)),transparent 100%)}
.pv .b3f-kol{display:grid;gap:24px;min-width:0}
.pv .b3f-kol:nth-child(2){margin-top:-40px}
.pv .b3f-kol:nth-child(3){margin-top:20px}
.pv .b3f-kaart{background:var(--zz-schelp);border-radius:var(--radius);box-shadow:var(--zz-schaduw);padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px}
.pv .b3f-kaart[hidden]{display:none}
.pv .b3f-sterren{display:flex;gap:3px;color:var(--zz-oranje)}
.pv .b3f-sterren .icon{width:15px;height:15px}
.pv .b3f-sterren .b3f-leeg{color:var(--zz-lavendel)}
.pv .b3f .b3f-titel{font-size:20px;line-height:1.2}
.pv .b3f-tekst{font-size:14.5px;line-height:1.7;color:var(--zz-paars)}
.pv .b3f-wie{display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.4}
.pv .b3f-ini{width:30px;height:30px;border-radius:50%;background:var(--zz-ivoor);display:inline-grid;place-items:center;font-family:var(--display);font-size:13px;color:var(--zz-paars);flex:none}
.pv .b3f-naam{font-weight:600;color:var(--zz-paars)}
.pv .b3f-naam small{display:block;font-size:12px;font-weight:400;color:var(--zz-grijs);margin-top:1px}
@media (max-width:700px){
  .pv .b3f{padding:32px 0 48px}
  .pv .b3f-muur{grid-template-columns:minmax(0,1fr);gap:16px;padding:32px 0 48px;--b3f-onder:48px}
  .pv .b3f-kol{gap:16px}
  .pv .b3f-kol:nth-child(2),.pv .b3f-kol:nth-child(3){margin-top:0}
  .pv .b3f-kaart{padding:22px 20px 20px}
  .pv .b3f-tekst{font-size:14px}
}

/* ===== blok 4c: doorlopende Google-strook op ivoor ===== */
.pv .b4c{padding:88px 0}
.pv .b4c-kop{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px}
.pv .b4c-kop h2{margin:0}
.pv .b4c-strook{overflow-x:auto;padding:8px 0 20px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 85%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 85%,transparent 100%)}
.pv .b4c-strook::-webkit-scrollbar{display:none}
.pv .b4c-baan{display:flex;gap:24px;width:max-content;padding-left:24px}
.pv .b4c-kaart{width:320px;flex:none;padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px}
.pv .b4c-k-sterren{display:flex;gap:3px;color:var(--zz-oranje)}
.pv .b4c-k-sterren .icon{width:15px;height:15px}
.pv .b4c-tekst{font-size:14px;line-height:1.75;color:var(--zz-paars-2);flex:1}
.pv .b4c-naam{font-size:13px;font-weight:600;color:var(--zz-paars);line-height:1.5}
.pv .b4c-naam span{display:block;font-weight:300;color:var(--zz-grijs)}
.pv .b4c-voet{display:flex;justify-content:center;margin-top:28px}
@media (max-width:700px){
  .pv .b4c{padding:60px 0}
  .pv .b4c-kop{margin-bottom:28px}
  .pv .b4c-kop h2{font-size:34px}
  .pv .b4c-strook{-webkit-mask-image:none;mask-image:none}
  .pv .b4c-baan{gap:14px;padding-left:14px}
  .pv .b4c-kaart{width:280px;padding:22px}
  .pv .b4c-voet{padding:0 16px}
  .pv .b4c-voet .btn{width:100%}
}

/* ===== blok 5a: formulier in één kaart, twee kolommen ===== */
.pv .b5a-form{margin:0}
.pv .b5a-veldgroep{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0}
.pv .b5a-label{display:block;font-size:13px;font-weight:500;color:var(--zz-paars);line-height:1.4;margin-bottom:6px;padding:0}
.pv .b5a-label small{font-size:12px;font-weight:400;color:var(--zz-grijs)}
.pv .b5a-veld{display:block;width:100%;height:48px;background:var(--zz-ivoor);border:1px solid var(--zz-lavendel);border-radius:var(--radius);
  font-family:var(--body);font-weight:400;font-size:15px;color:var(--zz-paars);padding:0 14px;margin:0;-webkit-appearance:none;appearance:none}
.pv .b5a-veld:focus{outline:none;border:1.5px solid var(--zz-rood)}
.pv textarea.b5a-veld{height:128px;padding:12px 14px;resize:vertical;line-height:1.6}
.pv .b5a-keuze{position:relative;display:block}
.pv .b5a-keuze .b5a-veld{padding-right:42px;cursor:pointer}
.pv .b5a-keuze .icon{position:absolute;right:14px;top:14px;width:20px;height:20px;color:var(--zz-rood);pointer-events:none}
/* vijf radio's als sterren: DOM-volgorde 5..1, row-reverse toont 1..5; gekozen ster en alles links ervan gevuld */
.pv .b5a-sterren{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:4px;height:48px}
.pv .b5a-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pv .b5a-ster{display:inline-flex;cursor:pointer;color:var(--zz-oranje);position:relative}
.pv .b5a-ster .icon{width:30px;height:30px;fill:none}
.pv .b5a-radio:checked+.b5a-ster .icon,.pv .b5a-radio:checked+.b5a-ster~.b5a-ster .icon{fill:currentColor}
.pv .b5a-radio:focus-visible+.b5a-ster{outline:2px solid var(--zz-rood);outline-offset:2px;border-radius:var(--radius)}
.pv .b5a-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pv .b5a-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pv .b5a .sec-kop{margin-bottom:32px}
.pv .b5a-panel{padding:40px 44px 36px;position:relative}
.pv .b5a-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px}
.pv .b5a-breed{grid-column:1 / -1}
.pv .b5a .hairline{margin:26px 0 22px}
.pv .b5a-verstuur{display:flex;flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
.pv .b5a-verstuur .btn:disabled{opacity:.6;cursor:default}
.pv .b5a-regel{font-size:13px;line-height:1.5;color:var(--zz-grijs)}
.pv .b5a-status{font-size:14px;line-height:1.6;color:var(--zz-paars);font-weight:500}
.pv .b5a-status:not(:empty){margin-top:14px}
@media (max-width:700px){
  .pv .b5a .sec-kop{margin-bottom:24px}
  .pv .b5a-panel{padding:26px 20px 24px}
  .pv .b5a-raster{grid-template-columns:minmax(0,1fr);gap:16px}
  .pv .b5a-verstuur{flex-direction:column;align-items:stretch;text-align:center}
  .pv .b5a-verstuur .btn{width:100%}
}

/* blok 6b = home-v2 blok 9j, CSS staat in home.css */

/* ===== 3. productie ===== */

/* blok 3f: ingeklapt (reviews.js) = 6 kaarten (telefoon 4), grote ondervervaging, knop er half overheen.
   Uitgeklapt = alle kaarten, ondervervaging 24 px. Zonder JS: alles zichtbaar, knop blijft hidden. */
.pv .b3f-muur.is-ingeklapt{--b3f-onder:260px;padding-bottom:120px}
.pv .b3f-muur.is-open{--b3f-onder:24px;padding-bottom:24px}
.pv .b3f-meer{position:relative;z-index:2;display:flex;justify-content:center;margin-top:-104px}
.pv .b3f-meer[hidden]{display:none}
.pv .b3f-meer .btn{background:var(--zz-ivoor);box-shadow:var(--zz-schaduw)}
.pv .b3f-meer .btn:hover{background:var(--zz-rood)}
@media (max-width:700px){
  .pv .b3f-muur.is-ingeklapt{--b3f-onder:200px;padding-bottom:96px}
  .pv .b3f-meer{margin-top:-84px}
  .pv .b3f-meer .btn{width:100%}
}

/* blok 4c: lopende strook (reviews.js verdubbelt de baan en zet --duur); hover of focus = stil */
.pv .b4c-strook.is-loopend{overflow:hidden}
.pv .b4c-baan.is-loop{animation:b4c-loop var(--duur,90s) linear infinite}
.pv .b4c-strook:hover .b4c-baan.is-loop,.pv .b4c-strook:focus-within .b4c-baan.is-loop{animation-play-state:paused}
@keyframes b4c-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .pv .b4c-baan.is-loop{animation:none}
  .pv .b4c-strook.is-loopend{overflow-x:auto}
}