/* =============================================================================
   PADELKIT DESIGNSYSTEEM — de enige bron van waarheid voor kleur, vorm en type.
   =============================================================================
   WAAROM DIT BESTAAT. De handgebouwde homepage en de gegenereerde pagina's
   hadden elk hun eigen tokens. Gevolg: je klikte op een product en belandde op
   iets dat aanvoelde als een andere winkel — scherpe hoeken in plaats van ronde,
   een ander lettertype, en (het opvallendst) een pagina die automatisch naar
   donker sprong terwijl de homepage licht bleef.

   REGEL: kleuren, hoeken, typografie en schaduw komen ALTIJD hieruit. Zet nooit
   een losse hex-waarde of border-radius in een pagina of component; voeg hier een
   token toe of gebruik een bestaande. Zowel index.html als assets/style.css
   laden dit bestand als eerste, zodat er maar één set waarden bestaat.

   Documentatie en beslisregels: zie DESIGN.md in de root van deze shop.
   ========================================================================== */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("fonts/familjen-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("fonts/familjen-grotesk-var-latin-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

:root {
  /* ── Kleur ───────────────────────────────────────────────────────────────
     Eén licht palet. Bewust GEEN automatische donkere variant: de winkel is
     licht, en een halve site die omslaat is precies het probleem dat we hier
     oplossen. Groen draagt de actie, limoen is het accent, rood alleen sale. */
  --bg:#ffffff;
  --surface:#f4f6f4;        /* rustige vlakken, footerblokken   */
  --surface-2:#eef1ed;      /* hover op vlakken                  */
  --tile:#f1f4f0;           /* achtergrond productfoto           */
  --ink:#16211b;            /* koppen en lopende tekst           */
  --ink-soft:#53645b;       /* secundaire tekst                  */
  --ink-dim:#5c6b62;        /* labels, metadata (>=4,5:1 op wit) */
  --muted:var(--ink-dim);
  --green:#0a6e3e;          /* merkkleur, knoppen, links         */
  --green-d:#075730;        /* hover op groen                    */
  --green-bright:#0bbf62;   /* accenten, stip in het logo        */
  --lime:#c6f833;           /* promostrip, badges "nieuw"        */
  --lime-d:#173d0a;         /* tekst op limoen                   */
  --sale:#e0261a;           /* uitsluitend prijsverlaging        */
  --danger:var(--sale);
  --line:#e3e8e3;           /* randen                            */
  --line-2:#eef1ee;         /* subtiele scheiding                */
  --line-soft:var(--line-2);
  --rule:var(--line);

  /* aliassen die de gedeelde componenten (winkelmand-drawer, knoppen) gebruiken */
  --accent:var(--green);
  --accent-bright:var(--green-bright);
  --accent-hover:var(--green-d);
  --on-accent:#ffffff;
  --dark:#0e1b12; --on-dark:#eaf1ec; --on-dark-muted:#a7bfb0;
  --success:#0a8a4f;

  /* ── Typografie ──────────────────────────────────────────────────────── */
  --sans:"Familjen Grotesk",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:.76rem; --fs-sm:.86rem; --fs-base:.96rem; --fs-md:1.06rem;
  --fs-lg:clamp(1.15rem,1.05rem + .4vw,1.4rem);
  --fs-xl:clamp(1.5rem,1.25rem + 1vw,2.1rem);

  /* ── Vorm en ruimte ──────────────────────────────────────────────────── */
  --radius:14px;            /* kaarten, tegels, panelen          */
  --radius-sm:10px;         /* knoppen, kleine elementen         */
  --maxw:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
  --img-filter:none;        /* productfoto's blijven onbewerkt   */

  /* ── Lagen ───────────────────────────────────────────────────────────── */
  --z-head:100; --z-drawer:110; --z-drawer-panel:111; --z-toast:130;

  color-scheme: light;
}

/* De winkel is licht. Zet een expliciete achtergrond zodat een donkere
   systeeminstelling nooit door de pagina heen schijnt. */
html { background: var(--bg); }

/* =============================================================================
   GEDEELDE COMPONENT: zoeksuggesties (typeahead)
   Staat hier en niet in style.css, omdat de handgebouwde homepage style.css niet
   laadt maar dit bestand wél. Zo werkt de zoekbalk overal hetzelfde.
   ========================================================================== */
.search { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: var(--z-head);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 48px -28px rgba(22,33,27,.45); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest-row {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink);
}
.suggest-row:last-of-type { border-bottom: 0; }
.suggest-row:hover, .suggest-row.is-active { background: var(--surface); }
.sg-img { width: 46px; height: 46px; display: grid; place-items: center; background: var(--tile); border-radius: 8px; overflow: hidden; }
.sg-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sg-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-name { font-size: var(--fs-sm); font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-name mark { background: var(--lime); color: var(--lime-d); padding: 0 1px; border-radius: 3px; }
.sg-cat { font-size: var(--fs-xs); color: var(--ink-dim); }
.sg-price { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.suggest-all, .suggest-empty {
  display: block; padding: 12px 14px; font-size: var(--fs-sm); color: var(--ink-soft);
  background: var(--surface); text-align: center;
}
.suggest-all { font-weight: 650; color: var(--green); }
.suggest-all:hover, .suggest-all.is-active { background: var(--surface-2); }
@media (max-width: 560px) { .suggest { position: fixed; left: 8px; right: 8px; top: auto; } }
/* "Bedoelde je ...?" bij nul resultaten — de uitweg uit een doodlopende zoekopdracht. */
.suggest-did { color: var(--green); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }