/* P32d (1 oktober): de catalogus zonder de boom links, met het zoekveld in de kopregel, alle filtergroepen links
   uitgelijnd, en een veel groter venster (planner/p32d-layout.js zet html.wk-p32d). Na P32a en P32c. */

/* ---- de oude boom weg (de elementen blijven in de pagina, niet in beeld) ---- */
html.wk-p32d #panel #panelside{display:none}

/* ---- de kopregel: de balk van P32a en het zoekveld ---- */
html.wk-p32d .p32dkop{flex:0 0 auto;display:flex;align-items:center;gap:12px;position:relative;z-index:6;
  border-bottom:1px solid var(--line);background:#fff;padding:0 16px 0 4px}
html.wk-p32d .p32dkop>.p32balk{position:static;flex:1 1 auto;min-width:0;border-bottom:0;background:transparent;z-index:auto}
html.wk-p32d .p32dkop .p32menu{z-index:7}
html.wk-p32d .p32deigen[hidden]{display:none}
html.wk-p32d .p32dzoek{flex:0 0 260px;min-width:0}
html.wk-p32d .p32dzoek input#q{width:100%;margin:0;font:inherit;font-size:var(--tekst-m);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--rond-vol);padding:8px 14px 8px 36px;min-height:38px;background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7F79' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:13px 50%}
html.wk-p32d .p32dzoek input#q:focus{border-color:var(--wk);outline:none;box-shadow:0 0 0 3px var(--wk-zacht)}

/* ---- de filterkolom tegen de linkerkant, alles links uitgelijnd ---- */
html.wk-p32d #panel #panelbody{padding:14px 16px 22px}
html.wk-p32d #results.p32winkel{grid-template-columns:200px minmax(0,1fr);column-gap:16px}
html.wk-p32d #results.p32winkel.p32rechts{grid-template-columns:minmax(0,1fr) 200px}
html.wk-p32d #results.p32winkel>details.p32kolom{max-height:calc(100vh - 440px)}
/* de echte hoogte zet p32dKolomMaat (de hoogte van #panelbody); dit is alleen de eerste schatting */
/* een kolom, nooit een tweede ernaast: P13 zette flex-wrap aan, en in de lade (vaste hoogte) liep een lange open groep
   dan uit beeld naar rechts */
html.wk-p32d .p13filters.p32filters{align-items:stretch;text-align:left;flex-wrap:nowrap}
html.wk-p32d .p13filters.p32filters>*{flex-shrink:0}
html.wk-p32d .p13filters.p32filters .p13f.p32groep{width:100%;margin:0;padding:0;border-bottom:1px solid var(--line)}
html.wk-p32d .p32gkop{justify-content:flex-start;gap:0;min-height:42px}
html.wk-p32d .p32klap{flex:1 1 auto;justify-content:flex-start;text-align:left;gap:8px;padding:0 4px 0 0;min-height:42px;width:auto;margin:0}
html.wk-p32d .p32klap .p32pijl{width:10px;flex:0 0 10px}
html.wk-p32d .p32klap span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
html.wk-p32d .p32groep.on .p32klap span::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--acc);margin-left:7px;vertical-align:middle}
html.wk-p32d .p32gkop>.p32x{flex:0 0 28px}
html.wk-p32d .p32waarden{align-items:stretch;padding:0 0 8px 0}
html.wk-p32d .p32w{justify-content:flex-start;text-align:left;padding:4px 0}
html.wk-p32d .p32gekozen{text-align:left}

/* ---- het raster: vult de breedte, vijf tot zes naast elkaar op een breed scherm ---- */
html.wk-p32d #panel #results [data-p13raster].pgrid{
  grid-template-columns:repeat(auto-fill,minmax(max(164px,calc((100% - 70px) / 6 - 1px)),1fr));gap:14px;align-items:stretch}
/* gelijke kaarten: een lange naam loopt na twee regels af, zodat elke rij even hoog is */
html.wk-p32d #panel #results [data-p13raster].pgrid .pcard .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.wk-p32d #panel #results [data-p13raster].pgrid .pcard .pimg{height:auto;aspect-ratio:1/1;object-fit:contain}

/* ---- het venster: de ruimte tussen de rail links, de stappen boven en de knoppen onder ---- */
@media (min-width:601px){
  html.wk-p32d #panel.ovl{inset:112px 64px 60px 80px;padding:0;background:transparent;align-items:stretch;justify-content:stretch}
  html.wk-p32d #panel.ovl #panelbox{max-width:none;width:100%;height:100%;max-height:none}
}

/* ---- telefoon: een volledig scherm, het zoekveld boven de schuivende balk, de lade van P32a ---- */
@media (max-width:600px){
  html.wk-p32d .p32dkop{flex-wrap:wrap;gap:0;padding:8px 0 0}
  html.wk-p32d .p32dzoek{order:-1;flex:1 1 100%;padding:0 12px 6px}
  html.wk-p32d .p32dkop>.p32balk{flex:1 1 100%}
  html.wk-p32d .p32dzoek input#q{min-height:44px;font-size:var(--tekst-l)}
  html.wk-p32d #panel #panelbody{padding:12px}
  html.wk-p32d #results.p32winkel>details.p32kolom{max-height:none;min-height:0}
  html.wk-p32d #panel #results [data-p13raster].pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
}