/* Integratie-laag (Janus) — overbrugt mismatches tussen de parallelle agent-deliverables.
   Geladen NA theme.css + components.css. Houd dit dun; echte styling hoort in die twee. */

/* 1. Scroll-reveal: js/app.js togglet .is-visible, maar theme.css onthult op .is-in.
      Onthul dus ook op .is-visible. En toon alles direct als JS uit staat (progressive
      enhancement: content nooit puur via JS verbergen). */
html:not(.js) [data-reveal]{ opacity:1 !important; transform:none !important; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* 2. Off-canvas panelen (mobiel menu + zoek-overlay) staan in gesloten staat naast de
      viewport en gaven horizontale overflow op mobiel. Clip de x-overflow (clip i.p.v.
      hidden zodat de sticky header blijft werken) en forceer het hidden-attribuut. */
html{ overflow-x:clip; }
.vw-search[hidden]{ display:none !important; }

/* 3. Productraster/merkraster: mijn templates gebruiken --cards/--brands; de design-agent
      leverde --2/3/4/auto. Map op een responsive auto-fill grid (premium meerkoloms). */
.vw-grid--cards{ display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); }
.vw-grid--brands{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
@media (max-width:600px){ .vw-grid--cards{ grid-template-columns:1fr 1fr; gap:13px; } }