/* =============================================================================
   PAWKIT DESIGNSYSTEEM — werkplaatscatalogus
   =============================================================================
   RICHTING (besluit Thomas 27-08-2026). Twee eerdere versies zijn afgekeurd: de
   schattige huisdierstijl (boterlicht, ronde letter, pootafdrukken) en daarna
   het strakke witte minimalisme dat we van padelkit overnamen. De eerste is de
   voor de hand liggende reflex bij dieren, de tweede de reflex daaronder. Beide
   ogen als door een generator bedacht.

   Wat er nu staat is de winkel als werkplaatscatalogus: inkt als ondergrond,
   wit waar de producten liggen, en een bakstenen accent voor alles wat je kunt
   doen. Vierkante hoeken, geen verlopen, geen glas. Het merk zit in de foto's
   en de typografie, niet in decoratie.

   MERKWOORDEN: stevig, nuchter, gebruikt. Denk aan een toonbank in een
   dierenspeciaalzaak, een werkkledinglabel, een hondenhandboek uit 1978.

   REGEL: kleuren, hoeken en typografie komen ALTIJD hieruit. Zet nooit een losse
   hexwaarde of border-radius in een pagina of component.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}

html,body{overflow-x:clip}

:root {
  /* ── Kleur ───────────────────────────────────────────────────────────────
     Committed: inkt draagt de kop, de hero en de voet; wit draagt de producten.
     Baksteen is uitsluitend voor handelingen en prijsverlagingen, nooit als
     versiering. Geen crème, geen zand: die hele warme bijna-witte band is de
     verzadigde standaard van 2026 en leest als sjabloon. */
  --bg:#ffffff;             /* pagina, en de plek waar foto's liggen  */
  --surface:#f3f4f5;        /* rustige vlakken                       */
  --surface-2:#e7e9eb;      /* hover op vlakken                      */
  --tile:#f3f4f5;           /* achtergrond productfoto               */
  --ink:#101418;            /* koppen, tekst, en de donkere vlakken  */
  --ink-soft:#39414a;       /* secundaire tekst                      */
  --ink-dim:#5a6169;        /* labels, metadata (5,3:1 op wit)       */
  --muted:var(--ink-dim);
  --brick:#c4452a;          /* de enige hete kleur                   */
  --brick-d:#a2371f;        /* hover                                 */
  --brick-l:#f7ebe7;        /* tint achter badges                    */
  --line:#dcdfe2;
  --line-2:#eceef0;
  --line-soft:var(--line-2);
  --rule:var(--line);
  --on-ink:#ffffff;
  --on-ink-dim:#a7aeb5;

  /* aliassen voor gedeelde componenten uit padelkit */
  --accent:var(--brick);
  --accent-bright:var(--brick);
  --accent-hover:var(--brick-d);
  --on-accent:#ffffff;
  --green:var(--brick); --green-d:var(--brick-d); --green-bright:var(--brick);
  --lime:var(--brick-l); --lime-d:var(--ink);
  --sun:var(--brick-l); --sun-deep:var(--ink); --clay:var(--brick);
  --sale:var(--brick); --danger:var(--brick); --success:#1d6b3f;
  --dark:var(--ink); --on-dark:var(--on-ink); --on-dark-muted:var(--on-ink-dim);

  /* ── Typografie ──────────────────────────────────────────────────────────
     Eén familie, Archivo, met een groot gat tussen 400 en 800. Een grotesk die
     voor krantendruk is getekend: hij houdt zich staande in een prijslijst en
     wordt zwaar zonder pompeus te worden. Geen tweede lettertype: het verschil
     komt uit gewicht en formaat, niet uit een display-partner. */
  --sans:"Archivo",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --display:var(--sans);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:.78rem; --fs-sm:.88rem; --fs-base:1rem; --fs-md:1.15rem;
  --fs-lg:clamp(1.35rem,1.15rem + .8vw,1.85rem);
  --fs-xl:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  --fs-display:clamp(2.6rem,1.4rem + 5.4vw,5.6rem);
  --tracking-display:-.03em;

  /* ── Vorm en ruimte ──────────────────────────────────────────────────────
     Vierkant. Ronde knoppen met een verloop zijn precies het beeld waar we
     vanaf willen; een catalogus heeft rechte hoeken. */
  --radius:2px;
  --radius-sm:2px;
  --maxw:1280px;
  --measure:68ch;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:var(--ease);
  --img-filter:none;
  --shadow:0 1px 0 var(--line);
  --shadow-lg:0 24px 48px -32px rgba(16,20,24,.5);

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

  color-scheme: light;
}

html { background: var(--bg); }
body { font-family: var(--sans); color: var(--ink); }

/* Koppen dragen het gewicht. Geen tweekleurige koppen, geen verlopen in tekst,
   geen golfjes eronder: dat waren de signalen die Thomas er meteen uit pikte. */
h1,h2,h3 { font-weight: 800; letter-spacing: var(--tracking-display); text-wrap: balance; }
p { text-wrap: pretty; }

/* =============================================================================
   GEDEELDE COMPONENT: zoeksuggesties (typeahead)
   Staat hier omdat een handgebouwde pagina style.css niet altijd laadt.
   ========================================================================== */
.search { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-head);
  background: var(--bg); border: 1px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); 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); 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: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-name mark { background: var(--brick-l); color: var(--ink); padding: 0 1px; }
.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: 700; color: var(--brick); }
.suggest-all:hover, .suggest-all.is-active { background: var(--surface-2); }
@media (max-width: 560px) { .suggest { position: fixed; left: 8px; right: 8px; top: auto; } }
.suggest-did { color: var(--brick); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }