/* P32 (30 september): de catalogus als de winkel van de leverancier (planner/p32-winkel.js).
   De balk met hoofdcategorieen en het uitklapmenu boven de resultaten, de filterkolom naast het raster, de regel
   Resultaat en het merk op de tegel. Op een telefoon: de balk schuift, het menu is een lijst en de filters zijn een
   lade achter de knop Filters. */

/* ---- de balk en het menu ---- */
#panelright{position:relative}
.p32balk{flex:0 0 auto;position:relative;z-index:6;border-bottom:1px solid var(--line);background:#fff}
.p32rij{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:2px;padding:6px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.p32rij::-webkit-scrollbar{display:none}
.p32hoofd{flex:0 0 auto;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--tekst-m);font-weight:600;
  padding:8px 11px;border-radius:var(--rond-s);cursor:pointer;white-space:nowrap;min-height:34px}
.p32hoofd:hover,.p32hoofd.open{background:var(--bg)}
.p32hoofd.on{box-shadow:inset 0 -2px 0 var(--acc)}
.p32hoofd:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.p32menu{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-top:0;
  box-shadow:0 14px 28px rgba(20,20,20,.14);max-height:min(70vh,560px);overflow:auto;padding:0 0 12px}
.p32menu[hidden]{display:none}
.p32menukop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#fff}
.p32alles{border:0;background:transparent;font:inherit;font-size:var(--tekst-l, 14px);font-weight:700;color:var(--ink);cursor:pointer;padding:4px 0}
.p32alles:hover{text-decoration:underline}
.p32menudicht,.p32x{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--mid);
  cursor:pointer;min-width:28px;min-height:28px;border-radius:var(--rond-s);padding:0}
.p32menudicht:hover,.p32x:hover{color:var(--ink);background:var(--bg)}
.p32kolommen{columns:3 220px;column-gap:24px;padding:8px 16px 0}
.p32groepmenu{break-inside:avoid;display:flex;flex-direction:column;padding:4px 0 10px}
.p32sub,.p32regel{border:0;background:transparent;font:inherit;text-align:left;color:var(--ink);cursor:pointer;border-radius:var(--rond-s)}
.p32sub{font-size:var(--tekst-m);font-weight:700;padding:6px 8px}
.p32regel{font-size:var(--tekst-m);padding:5px 8px 5px 20px;color:var(--ink)}
.p32sub:hover,.p32regel:hover{background:var(--bg)}
.p32sub:focus-visible,.p32regel:focus-visible,.p32alles:focus-visible,.p32x:focus-visible,.p32klap:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}

/* ---- de filterkolom naast het raster ---- */
#results.p32winkel{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:20px;align-items:start}
#results.p32winkel>*{grid-column:2}
#results.p32winkel>details.p32kolom{grid-column:1;grid-row:1/span 40;margin:0;position:sticky;top:0;max-height:calc(min(900px, 90vh) - 280px);overflow:auto}
#results.p32winkel.p32rechts{grid-template-columns:minmax(0,1fr) 240px}
#results.p32winkel.p32rechts>*{grid-column:1}
#results.p32winkel.p32rechts>details.p32kolom{grid-column:2}
.p32kolom>summary{display:none}
.p13filters.p32filters{display:flex;flex-direction:column;gap:0}
.p32ladekop,.p32toon{display:none}
.p32gekozen{border-bottom:1px solid var(--line);padding:0 0 10px;margin:0 0 6px}
.p32kop{font-size:var(--tekst-m);font-weight:700;color:var(--ink);margin:0 0 6px}
.p32gekozen ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:2px}
.p32gekozen li{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:var(--tekst-m);color:var(--ink);
  background:var(--bg);border-radius:var(--rond-s);padding:2px 2px 2px 8px}
.p32gekozen li span{min-width:0;overflow-wrap:anywhere}
.p32wisalles{width:100%;border:1px solid var(--line);background:#fff;border-radius:var(--rond-s);font:inherit;font-size:var(--tekst-m);
  padding:7px 10px;cursor:pointer;text-decoration:underline;color:var(--ink)}
.p32wisalles:hover{border-color:var(--acc)}
.p13filters.p32filters .p13f.p32groep{display:block;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  padding:4px 0;box-shadow:none;cursor:default;max-width:none;outline:0}
.p32gkop{display:flex;align-items:center;justify-content:space-between;gap:4px}
.p32klap{flex:1 1 auto;display:flex;align-items:center;gap:8px;border:0;background:transparent;font:inherit;font-size:var(--tekst-m);
  font-weight:700;color:var(--ink);text-align:left;cursor:pointer;padding:8px 2px;min-height:34px}
.p13filters.p32filters .p13f.p32groep.on .p32klap{color:var(--ink)}
.p32klap .p32pijl{flex:0 0 auto;color:var(--mid);transition:transform .15s}
.p32groep.dicht .p32pijl{transform:rotate(180deg)}
.p32waarden{display:flex;flex-direction:column;padding:0 0 6px}
.p32waarden[hidden]{display:none}
.p32w{display:flex;align-items:center;gap:8px;font-size:var(--tekst-m);color:var(--ink);padding:4px 2px;cursor:pointer;min-height:28px}
.p32w input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--acc);cursor:pointer}
.p32w .p32wn{min-width:0;overflow-wrap:anywhere}
.p32w .n{color:var(--mid);font-variant-numeric:tabular-nums;white-space:nowrap}
.p32w:hover .p32wn{text-decoration:underline}
.p32res{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--tekst-m);color:var(--mid);margin:0 0 10px}
.p32res b{color:var(--ink);font-variant-numeric:tabular-nums}
.p32artnr{display:block;font-size:var(--tekst-s);color:var(--mid);font-variant-numeric:tabular-nums;margin:2px 0 0}
.p32merk{display:block;font-size:var(--tekst-s);color:var(--mid);text-transform:lowercase;letter-spacing:.02em;margin:0 0 2px}

/* ---- telefoon: de balk schuift, het menu is een lijst, de filters een lade ---- */
@media (max-width:600px){
  .p32rij{padding:4px 8px}
  .p32hoofd{padding:8px 10px}
  .p32menu{position:static;box-shadow:none;border:0;border-top:1px solid var(--line);max-height:none}
  .p32kolommen{columns:1;padding:4px 8px 0}
  .p32sub,.p32regel{min-height:40px}
  #results.p32winkel,#results.p32winkel.p32rechts{display:block}
  #results.p32winkel>details.p32kolom{position:static;max-height:none;overflow:visible;margin:0 0 10px}
  .p32kolom>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;border:1px solid var(--line);
    border-radius:var(--rond-vol);padding:8px 16px;font-size:var(--tekst-m);font-weight:600;background:#fff;min-height:36px}
  .p32kolom>summary::-webkit-details-marker{display:none}
  .p32kolom>summary .n{opacity:.7;font-variant-numeric:tabular-nums}
  .p32kolom[open]>.p32filters{position:fixed;z-index:1000;top:0;bottom:0;left:0;width:min(88vw,360px);background:#fff;
    box-shadow:0 0 0 100vmax rgba(20,20,20,.35);overflow:auto;padding:0 14px 16px;overscroll-behavior:contain}
  .p32kolom.p32rechts[open]>.p32filters{left:auto;right:0}
  .p32ladekop{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;
    padding:12px 0 10px;margin:0 0 6px;border-bottom:1px solid var(--line);z-index:1}
  .p32toon{display:block;position:sticky;bottom:0;margin:12px 0 0;width:100%;border:0;border-radius:var(--rond-s);background:var(--acc);
    color:#fff;font:inherit;font-size:var(--tekst-m);font-weight:600;padding:12px;cursor:pointer}
  .p32w{min-height:36px}
  /* de derde regels en de knop Filters op een regel, zodat de eerste tegels in beeld blijven */
  #results.p32winkel .q1derde .rij{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #results.p32winkel .q1derde .rij::-webkit-scrollbar{display:none}
  #results.p32winkel .q1derde .rij .wispil{flex:0 0 auto;white-space:nowrap}
  #results.p32winkel>details.p32kolom:not([open]){display:inline-block;vertical-align:middle;margin:0 10px 10px 0}
  #results.p32winkel>.p32res{display:inline-flex;vertical-align:middle;margin:0 0 10px}
}