/* Kaia — www.houtjansok.nl, tot op de pixel, bovenop Nova.
 *
 * Nova tekent de grond: de drie balken, de kaarten, de voet. Kaia legt daar
 * zijn regels overheen, en alleen waar de echte winkel van Nova afwijkt.
 * Elke maat hieronder is gemeten aan www.houtjansok.nl, op 1440, 1024 en
 * 390 px breed, met _dev/kaia/vergelijk.mjs. Wijkt onze winkel af, dan is
 * dat een fout en geen smaak; het script zegt welke.
 *
 * Volgorde: dit blad komt ná nova.css. Een regel hier wint dus van dezelfde
 * regel daar, bij gelijke zwaarte. De winkel draagt de klasse "kaia" op de
 * body zodra één onderdeel Kaia is; elk onderdeel apart draagt "vorm-kaia".
 */

/* ── Letters ────────────────────────────────────────────────────────────
 * Gemeten, niet aangenomen: de echte winkel vraagt om "CustomFont" en
 * laadt die nergens, dus elke bezoeker ziet de gewone schreefloze letter
 * van zijn eigen apparaat (Helvetica op een Mac, Arial op Windows, Roboto
 * op Android). Alleen de koppen staan in Exo 2. Wie de winkel tot op de
 * pixel wil, zet dus precies dezelfde letterstapel: dan valt elke regel op
 * elk apparaat op dezelfde plek. Inter staat wel in de motor, maar Kaia
 * gebruikt hem niet. */
@import url("/assets/css/exo2.css");

.winkel.kaia {
  --kaia-kop: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kaia-tekst: CustomFont, sans-serif;
  --winkel-letter: var(--kaia-tekst);
  font-family: var(--kaia-tekst);
}
.winkel.kaia h1, .winkel.kaia h2, .winkel.kaia h3, .winkel.kaia h4,
.winkel.kaia .shop-kaart h3, .winkel.kaia .site-kop, .winkel.kaia .pdp-titel {
  font-family: var(--kaia-kop);
}

/* ── Kop ───────────────────────────────────────────────────────────────── */
/* Het menu in de echte winkel is Inter 13 px, gewicht 500; Nova zet 600. */
.winkel.kaia .shop-menu.vorm-kaia .shop-menu-kop { font-weight: 500; font-family: var(--kaia-tekst); }
/* De balk past altijd: de koppen schuiven naar elkaar toe zodra het scherm
   smaller wordt (ruimte tussen de koppen 10.8 op 1440, 3 op 1024; letter
   13.5 op 1440, 10.8 op 1024), onder 1280 gaan de pijltjes weg, en rechts
   blijft ruimte vrij voor "Zakelijk account" zodat niets over elkaar loopt.
   Nova schuift de balk opzij; Kaia hoort op één regel, zoals de oude site,
   maar dan zonder dat de laatste kop onder de vaste link verdwijnt. */
.winkel.kaia .shop-menu.vorm-kaia { --menu-p: clamp(3px, calc(10.8px - (1440px - 100vw) * 0.02), 10.8px); --menu2-b: 141px; }
.winkel.kaia .shop-menu.vorm-kaia .shop-menu-in { gap: 0; flex-wrap: nowrap; min-width: 0; padding-inline: calc(var(--nova-zij) - var(--menu-p)) calc(var(--nova-zij) + var(--menu2-b)); }
.winkel.kaia .shop-menu.vorm-kaia .shop-menu-item { padding-inline: var(--menu-p); align-self: stretch; display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.winkel.kaia .shop-menu.vorm-kaia .shop-menu-kop { white-space: nowrap; font-size: clamp(10.8px, calc(12.6px - (1280px - 100vw) * 0.007), 12.6px); }
@media (max-width: 1279px) { .winkel.kaia .shop-menu.vorm-kaia .shop-menu-item.heeft-onder > .shop-menu-kop::after, .winkel.kaia .shop-menu.vorm-kaia .shop-menu-kop > svg { display: none; } }
@media (max-width: 1099px) { .winkel.kaia .shop-menu.vorm-kaia { --menu2-b: 110px; } }

/* ── De balk: maten van www.houtjansok.nl op 1440 px ─────────────────────
 * Zijmarge 21.6 px (24 × 0.9) vanaf tablet, 14.4 px op een telefoon; Nova
 * glijdt met het venster mee en komt op 1440 op 26.3 uit. */
.winkel.kaia { --nova-zij: 14.4px; }
@media (min-width: 768px) { .winkel.kaia { --nova-zij: 21.6px; } }

/* Het logo in de kop is 38 px hoog; de breedte volgt het bestand (112 bij
   het echte logo van de kop). */
.shop-header.vorm-kaia .logo-beeld { height: 38px; max-height: 38px; width: auto; }

/* Assortiment: 149 breed = 21.6 marge, streepjes van 18, 9 ertussen, tekst. */
.shop-header.vorm-kaia .shop-paneel-knop svg { width: 18px; height: 14px; }

/* Offerte aanvraag: lichte knop op het grijze vlak, 12.6 px halfvet. */
.shop-header.vorm-kaia .shop-kopknop {
  background: var(--nova-vlak);
  border: 0;
  font-size: 12.6px;
  font-weight: 600;
  padding-inline: 14.4px;
  height: 39.6px;
}

/* Telefoon: nummer met de tijd eronder, zonder eigen marge, 12.6 px. */
.shop-header.vorm-kaia .shop-koptel { padding-inline: 0; gap: 7px; font-size: 12.6px; }

/* Rechts staat alles 7.2 px uit elkaar; de wagen krijgt geen extra ruimte.
   De rechterhelft groeit mee: de offerteknop staat vooraan, direct naast
   het zoekveld, en duwt de rest (telefoon, btw, account, wagen) naar rechts. */
.shop-header.vorm-kaia .shop-kop-rechts { gap: 7.2px; flex: 1 1 auto; margin-left: 0; min-width: max-content; justify-content: flex-end; }
/* Tussen 1024 en 1279 verbergt Nova de offerteknop en het telefoonnummer;
   Kaia houdt de offerteknop (het zoekveld krimpt) en laat alleen het
   nummer gaan. De rechterhelft lijnt altijd rechts uit, ook als de
   offerteknop met zijn automatische marge weg is. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .shop-header.vorm-kaia .shop-kopknop { display: inline-flex; }
}
/* Het zoekveld is de enige die krimpt: 515 op een breed scherm, smaller
   zodra de rechterhelft (die nooit onder haar inhoud zakt) ruimte vraagt. */
.shop-header.vorm-kaia .shop-zoek { flex: 1 1 515px; max-width: 515px; min-width: 170px; }
.shop-header.vorm-kaia .shop-kopknop { margin-right: auto; background: #f6f6f6; }
.shop-header.vorm-kaia .shop-kop-rechts > .shop-wagen { margin-left: 0; }

/* Winkelwagen: 143 breed op 12.6 px. */
.shop-header.vorm-kaia .shop-wagen { font-size: 12.6px; padding-inline: 14.4px; }

/* ── De voet ───────────────────────────────────────────────────────────── */
/* De echte winkel toont geen betaallogo's in de voet. */
.shop-footer.vorm-kaia .shop-betaallogos { display: none; }
.shop-header.vorm-kaia .shop-kopknop { padding-inline: 14.4px; }
.shop-header.vorm-kaia .shop-koptel svg { width: 15px; height: 15px; }
.shop-header.vorm-kaia .shop-koptel { gap: 5px; }
.shop-header.vorm-kaia .shop-wagen { padding-inline: 10.8px; gap: 6px; }
.shop-header.vorm-kaia .shop-wagen { padding-inline: 7.8px; }

/* ── Hero: de dia bovenaan de voorpagina ─────────────────────────────────
 * Op de echte winkel is de dia een foto van 396 hoog binnen de zijmarges,
 * met ronde hoeken van 10.4 px op de foto zelf, 22 px onder de menubalk.
 * Geen grijze band eromheen: de foto ís de band. De kaart staat 43.2 px
 * van de rand van de foto. */
.winkel.kaia .site-hero,
.winkel.kaia .site-hero.kaart {
  background: transparent;
  padding-inline: var(--nova-zij);
  padding-block: 0;
  /* In het midden, ook op een breed scherm: de hero draagt de sitebreedte
     (1536, zoals de oude site) en zonder auto-marges hing hij links terwijl
     de rest van de pagina in het midden stond. */
  margin: 0 auto;
  border-radius: 0;
  overflow: visible;
}
/* Elke eigen pagina begint 21.6 px onder de menubalk, ook de voorpagina;
   Nova neemt 30. */
.winkel.kaia .site-pagina { padding-top: 21.6px; }
.winkel.kaia .site-hero .site-hero-foto,
.winkel.kaia .site-hero .site-hero-waas { border-radius: var(--nova-r-kaart); }
/* De witte kaart: 43.2 van de rand van de foto (de dia begint al bij de
   foto, dus de zijmarge hoort hier niet nog een keer bij), binnenrand 21
   zodat de zin van het origineel net op één regel past, en de beloftes als
   gewone regels met 3.6 ertussen: samen 281 hoog, zoals gemeten. */
.winkel.kaia .site-hero.kaart .site-hero-in { padding: 43.2px; }
.winkel.kaia .site-hero-kaart { padding: 21.6px 21px; }
.winkel.kaia .site-hero-kaart .site-hero-usps { display: block; gap: 0; }
.winkel.kaia .site-hero-kaart .site-hero-usps li { margin: 0 0 3.6px; }
/* Telefoon: de oude site maakt de hero daar 508 hoog met 21.6 aan de
   zijkant, en de kaart vult de breedte op 43.2 van de rand. */
@media (max-width: 639px) {
  .winkel.kaia .site-hero, .winkel.kaia .site-hero.kaart { padding-inline: 21.6px; }
  .winkel.kaia .site-hero.kaart .site-hero-foto { height: 508px; }
  .winkel.kaia .site-hero-kaart { max-width: none; }
}
.winkel.kaia .site-blok.soort-hero > section { padding-top: 0; }
.winkel.kaia .shop-main.site-main { padding-top: 0; }
.winkel.kaia .site-blok:first-child > section.site-hero { padding-top: 0; }
/* De bediening van de schuifband: niets op de foto, eronder een rustige
   regel met de bolletjes (accentkleur voor de huidige) en dunne pijltjes. */
.winkel.kaia .site-hero-bediening { height: 32px; margin-top: 6px; gap: 14px; }
.winkel.kaia .site-hero-pijl { color: #8a8f8a; }
.winkel.kaia .site-hero-bolletje { background: #d6d8d6; }
.winkel.kaia .site-hero-bolletje.aan { background: var(--nova-accent); }
.winkel.kaia .site-hero-dia .site-hero-kop { font-size: 30.24px; line-height: 1.2; font-weight: 700; }
.winkel.kaia .site-hero-dia.kaart .site-hero-kop { color: var(--nova-inkt); text-shadow: none; }
.winkel.kaia .site-hero-dia.metfoto:not(.kaart) .site-hero-in { padding: 43.2px 43.2px; justify-content: center; max-width: 620px; gap: 10.8px; }
.winkel.kaia .site-hero-dia.metfoto:not(.kaart) .site-hero-kop { font-size: 30.24px; line-height: 1.2; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.winkel.kaia .site-hero-dia.metfoto:not(.kaart) .site-hero-tekst { font-size: 13.5px; }
.winkel.kaia .site-hero-dia.metfoto:not(.kaart) .site-hero-knop { margin-top: 10.8px; }

/* ── Op een groot scherm bestaan de telefoonknoppen niet ─────────────── */
.shop-header.vorm-kaia .shop-zoek-knop { display: none; }
.shop-header.vorm-kaia .shop-zoek-terug, .shop-header.vorm-kaia .shop-zoek-ga { display: none; }
.winkel.kaia .shop-zoek-waas { display: none; }
@media (max-width: 1023px) { .winkel.kaia .shop-zoek-waas { display: block; } }
.shop-header .logo-beeld.klein { display: none; }
.winkel.kaia .shop-lijst:not(.filters-knop) .shop-filterknop { display: none; }

/* ── Telefoon: de balk in één regel, gemeten op 390 px ────────────────────
 * Menuknop 40 in de huiskleur, zoekknop 40, het logo in het midden, rechts
 * de account en de wagen; 10.8 px ertussen, balk 58 hoog. Het zoekveld
 * staat niet in de balk maar klapt open onder de balk. */
/* De telefoonkop geldt ook op een tablet (tot 1024): de oude site toont
   daar dezelfde balk met de menuknop, de zoekknop, het logo in het midden,
   account en wagen, 18 px van de zijkant. */
@media (max-width: 1023px) {
  .winkel.kaia { --nova-balk-h: 57.6px; }
  .shop-header.vorm-kaia .shop-header-in { gap: 10.8px; padding-block: 0; height: 57.6px; flex-wrap: nowrap; }
  .shop-header.vorm-kaia .shop-lade-knop {
    width: 40px; height: 40px; border-radius: var(--nova-r-klein); border: 0;
    background: var(--nova-accent); color: var(--nova-accent-op);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
  }
  .shop-header.vorm-kaia .shop-zoek-knop {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: var(--nova-r-klein); border: 1px solid var(--nova-lijn);
    background: #fff; color: var(--nova-inkt); cursor: pointer;
  }
  /* Het logo in het midden: het kleine logo als dat er is, anders het
     gewone op 36 hoog. */
  .shop-header.vorm-kaia .shop-header-in > a:has(.logo-beeld) { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .shop-header.vorm-kaia .logo-beeld { height: 36px; max-height: 36px; }
  .shop-header.vorm-kaia .logo-beeld.klein { display: block; height: 36px; width: auto; }
  .shop-header.vorm-kaia .logo-beeld.klein ~ .logo-beeld.licht,
  .shop-header.vorm-kaia .logo-beeld.klein ~ .logo-beeld.donker { display: none; }
  /* Assortiment, offerte, telefoon en btw staan niet in de balk van een telefoon. */
  .shop-header.vorm-kaia .shop-paneel-knop,
  .shop-header.vorm-kaia .shop-kopknop,
  .shop-header.vorm-kaia .shop-koptel,
  .shop-header.vorm-kaia .shop-btw { display: none; }
  .shop-header.vorm-kaia .shop-kop-rechts { gap: 5.4px; margin-left: 0; flex: none; }
  .shop-header.vorm-kaia .kop-account { width: 40px; padding: 0; justify-content: center; }
  .shop-header.vorm-kaia .shop-wagen { padding-inline: 7px; gap: 5px; }
  .shop-header.vorm-kaia .shop-wagen .wagen-woord { display: none; }
  /* Zoeken: de balk wórdt het zoekveld, zoals de echte winkel. De vorm ligt
     over de hele balk (58 hoog, wit), met links het kruisje (43 breed), het
     veld ertussen en rechts de zoekknop op lichtgrijs (45 breed, lijntje
     links). Dicht: onzichtbaar en 12 px omhoog; open: in 0.28 s op zijn
     plek. De knoppen van de balk vervagen ondertussen. */
  .shop-header.vorm-kaia .shop-header-in > :not(.shop-zoek) { transition: opacity .22s ease; }
  .shop-header.vorm-kaia.zoek-open .shop-header-in > :not(.shop-zoek) { opacity: 0; pointer-events: none; }
  .shop-header.vorm-kaia .shop-zoek {
    display: flex; position: absolute; left: 0; right: 0; top: 0; height: 57.6px; gap: 0;
    order: 0; flex: none; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0;
    background: #fff; border: 0; border-radius: var(--nova-r-klein);
    opacity: 0; transform: translateY(-12px); pointer-events: none; visibility: hidden;
    transition: opacity .28s cubic-bezier(.4, 0, .2, 1), transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
  }
  .shop-header.vorm-kaia.zoek-open .shop-zoek { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .shop-header.vorm-kaia .shop-zoek > svg { display: none; }
  .shop-header.vorm-kaia .shop-zoek-terug {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 43px; height: 100%; border: 0; background: transparent; color: var(--nova-inkt); cursor: pointer;
  }
  .shop-header.vorm-kaia .shop-zoek input {
    flex: 1; min-width: 0; height: 48px; align-self: center; margin: 0;
    padding: 0 10.8px; font-size: 16px; color: var(--nova-inkt);
    background: #fff; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein);
  }
  .shop-header.vorm-kaia .shop-zoek input:focus { outline: 0; border-color: var(--nova-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-accent) 14%, transparent); }
  .shop-header.vorm-kaia .shop-zoek-ga {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 45px; height: 100%; margin-left: 0; border: 0; border-left: 1px solid var(--nova-lijn);
    background: #f7f7f7; color: var(--nova-inkt); cursor: pointer;
  }
  .shop-header.vorm-kaia .shop-zoek-dicht { display: none !important; }
  /* Het lijstje: een witte kaart onder de balk, 11 van de zijkant, die zacht
     naar beneden inschuift. */
  .winkel.kaia .shop-header.vorm-kaia .shop-sug {
    position: absolute; top: calc(100% + 8px); bottom: auto; left: 11px; right: 11px; width: auto; max-height: calc(100vh - 140px);
    border-radius: var(--nova-r-kaart); box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    transition: opacity .25s ease, transform .25s ease, display .25s allow-discrete;
  }
  @starting-style {
    .shop-header.vorm-kaia .shop-sug:not([hidden]) { opacity: 0; transform: translateY(-8px); }
  }
  /* De waas over de pagina: onder de balk (die staat op 33), boven de rest. */
  .winkel.kaia .shop-zoek-waas {
    position: fixed; inset: 0; z-index: 32; background: rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none; transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
  }
  .winkel.kaia:has(.shop-header.zoek-open) .shop-zoek-waas { opacity: 1; pointer-events: auto; }

}
@media (min-width: 768px) and (max-width: 1023px) {
  .shop-header.vorm-kaia .shop-header-in { padding-inline: 18px; }
  /* Op een tablet is er ruimte voor het volle logo van 112x38; het kleine
     beeldmerk is er alleen voor de telefoon. */
  .shop-header.vorm-kaia .logo-beeld.klein { display: none; }
  .shop-header.vorm-kaia .logo-beeld.klein ~ .logo-beeld.licht { display: block; height: 38px; max-height: 38px; }
}
@media (max-width: 767px) {
  /* ── Het overzicht op een telefoon ──────────────────────────────────── */
  .winkel.kaia .shop-lijst { gap: 14.4px; }
  .winkel.kaia .shop-lijst .shop-filterknop,
  .winkel.kaia .shop-lijst:not(.filters-knop) .shop-filterknop {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: calc(100% - 14.4px); margin: 0 7.2px; height: 43px;
    background: #e5e5e5; border: 0; border-radius: var(--nova-r-klein);
    font-size: 12.6px; font-weight: 600; color: var(--nova-inkt);
  }
  .winkel.kaia .shop-lijst .shop-filterknop-plus { font-size: 18px; font-weight: 400; line-height: 1; }
  .winkel.kaia .shop-lijst .shop-zijbalk { display: none; }
  .winkel.kaia .shop-lijst.filters-open .shop-zijbalk { display: block; }
  .winkel.kaia .shop-lijst h1 { font-size: 28.8px; line-height: 36px; }
  /* Twee kaarten naast elkaar, 14.4 ertussen, 8 px rand binnenin. */
  .winkel.kaia .shop-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14.4px; }
  .winkel.kaia .shop-tegels .shop-kaart { padding: 8px; }
  .winkel.kaia .shop-tegels .shop-kaart .nova-titel { font-size: 12.2px; line-height: 16px; }
  .winkel.kaia .shop-tegels .shop-kaart .nova-chip { font-size: 10.5px; }
  .winkel.kaia .shop-tegels .shop-kaart .nova-prijs { font-size: 13.7px; }
  .winkel.kaia .shop-tegels .shop-kaart .nova-tweedeprijs { font-size: 10px; }
  .winkel.kaia .shop-tegels .shop-kaart .nova-inwagen,
  .winkel.kaia .shop-tegels .shop-kaart .nova-hart { width: 40px; height: 40px; }
  /* De werkbalk: aantal en filterveld op één regel, dan de weergave en
     het aantal per pagina, dan sorteren over de volle breedte. */
  .winkel.kaia .shop-lijstbalk { display: grid; grid-template-columns: auto 1fr; gap: 10.8px; align-items: center; }
  .winkel.kaia .shop-lijstbalk .shop-inveld { font-size: 16px; }
  .winkel.kaia .shop-lijstbalk .shop-weergave { grid-column: 1; }
  .winkel.kaia .shop-lijstbalk select.shop-select { font-size: 16px; }
  .winkel.kaia .shop-lijstbalk select[name=per] { grid-column: 2; }
  .winkel.kaia .shop-lijstbalk select:last-of-type { grid-column: 1 / -1; }
  .winkel.kaia .shop-paginering, .winkel.kaia .shop-pagina-nav, .winkel.kaia nav.shop-blader { padding: 28.8px 0; }
}

/* ── De productpagina op een telefoon ─────────────────────────────────────
 * Gemeten op 390 px: foto over de volle breedte, dan de titel (23.4 px),
 * dan het koopvak op het grijze vlak (30.4/14.4 rand, hoeken onder 12 px,
 * knop 59 hoog op 16.2 px), dan de kenmerken, dan pas het verhaal. Nova
 * zet het verhaal onder de foto in de linkerkolom; op een telefoon komt
 * die kolom dan vóór de titel. De kolom opent zich hier (display:
 * contents) en de stukken krijgen hun eigen volgorde. */
@media (max-width: 767px) {
  .winkel.kaia .shop-pdp { display: flex; flex-direction: column; gap: 14.4px; }
  .winkel.kaia .shop-pdp-beeld { display: contents; }
  .winkel.kaia .shop-pdp-beeld > * { order: 4; }
  .winkel.kaia .shop-pdp-beeld > .pdp-hoofdfoto,
  .winkel.kaia .shop-pdp-beeld > .pdp-galerij,
  .winkel.kaia .shop-pdp-beeld > .pdp-fotos { order: 1; }
  .winkel.kaia .shop-pdp-info { order: 2; }
  .winkel.kaia .shop-pdp-beeld > .pdp-verhaal { order: 3; }
  .winkel.kaia .pdp-hoofdfoto { width: 100%; border-radius: var(--nova-r-klein); border: 1px solid var(--nova-lijn); }
  .winkel.kaia .shop-pdp-info h1 { font-size: 23.4px; line-height: 30.4px; }
  .winkel.kaia .pdp-koopvorm { background: var(--nova-vlak); padding: 30.4px 14.4px 14.4px; border-radius: 0 0 var(--nova-r-kaart) var(--nova-r-kaart); }
  .winkel.kaia .pdp-koopvorm button[type=submit] { height: 59px; font-size: 16.2px; font-weight: 700; }
  .winkel.kaia .pdp-hulp { background: var(--nova-tint); border-radius: var(--nova-r-kaart); }
}

/* ── Geen inzoomen op een telefoon ──────────────────────────────────────
 * Een telefoon zoomt in zodra je een veld aantikt dat kleiner is dan 16 px;
 * dus is elk veld op een telefoon 16 px, zoals de echte winkel. En
 * touch-action: manipulation haalt de dubbeltik-zoom van knoppen af. */
@media (max-width: 767px) {
  .winkel.kaia input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .winkel.kaia select,
  .winkel.kaia textarea { font-size: 16px; }
  .winkel.kaia a, .winkel.kaia button, .winkel.kaia input, .winkel.kaia select, .winkel.kaia label { touch-action: manipulation; }
}

/* ── De kop van een categoriepagina ───────────────────────────────────────
 * Gemeten op /lariks-douglas: een band van 200 hoog met ronde hoeken van
 * 12, de foto erin, een donkere waas van boven naar beneden (slate 25%
 * naar 60%), en de titel wit in Exo 2 30 px extra vet, linksonder, 20 van
 * de onderkant en 28 van de zijkant. Een categorie zonder foto toont de
 * titel gewoon zwart op wit, 29 px. */
.winkel.kaia .shop-catkop { height: 200px; border-radius: var(--nova-r-kaart); overflow: hidden; }
.winkel.kaia .shop-catkop.hoogte-sm, .winkel.kaia .shop-catkop.hoogte-lg { height: 200px; }
.winkel.kaia .shop-catkop-waas,
.winkel.kaia .shop-catkop.donker .shop-catkop-waas {
  background: linear-gradient(rgba(15, 23, 42, .25), rgba(15, 23, 42, .6));
  padding: 20px 28px;
  display: flex; align-items: flex-end;
}
.winkel.kaia .shop-catkop-titel { font-family: var(--kaia-kop); font-size: 30px; font-weight: 800; line-height: 36px; color: #fff; margin: 0; }
@media (max-width: 767px) {
  .winkel.kaia .shop-catkop, .winkel.kaia .shop-catkop.hoogte-lg { height: 150px; }
  .winkel.kaia .shop-catkop-waas { padding: 14px 16px; }
  .winkel.kaia .shop-catkop-titel { font-size: 24px; line-height: 28px; }
}

/* ── De productpagina op een groot scherm ─────────────────────────────────
 * Gemeten op 1440: de pagina staat in een kolom van 1237 breed in het
 * midden (van 102 tot 1339), de foto 699 bij 699 links, de tekst rechts
 * vanaf 768. De regel met de categorieën boven de titel is 11.7 px. Onder
 * de prijs komt meteen "Aantal" met de knop van 59 hoog; de beloftes en de
 * offerteknop staan er niet. Daaronder de betaalwijzen als kleine
 * plaatjes van 24 hoog, dan de kenmerken als regels, dan het hulpblok. */
/* De productpagina staat NIET in een eigen smallere kolom: elke pagina van
   de winkel loopt van rand tot rand binnen de zijmarge, dus ook deze. De
   echte winkel houdt hem op 1237, maar de eigenaar wil overal dezelfde
   breedte; de verhouding van de twee kolommen (613 om 570) blijft. */
.winkel.kaia .pdp-bovenregel, .winkel.kaia .pdp-paden { font-size: 11.7px; }
.winkel.kaia .pdp-paden a { font-size: 11.7px; }
.winkel.kaia .shop-usp-lijst { display: none; }
.winkel.kaia .pdp-koopvorm + div:has(> a.ghost) { display: none; }
.winkel.kaia .pdp-voorraad { display: none; }
.winkel.kaia .pdp-betalen { gap: 8px; margin-top: 14.4px; }
.winkel.kaia .pdp-betaalwijze, .winkel.kaia .pdp-betaallogo { height: 24px; padding: 0 8px; font-size: 11px; display: inline-flex; align-items: center; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-mini); background: #fff; }
/* Het hulpblok: grijsgroen vlak met ronde hoeken, grote kop, groene chatknop. */
.winkel.kaia .pdp-hulp.pdp-hulp-kaia { background: #eeefed; border: 0; border-radius: var(--nova-r-kaart); padding: 28.8px; margin-top: 28.8px; }
.winkel.kaia .pdp-hulp-kaia h2 { font-family: var(--kaia-kop); font-size: 23.4px; line-height: 30.6px; font-weight: 700; margin: 0 0 10.8px; color: #333; }
.winkel.kaia .pdp-hulp-kaia h2 span { color: #45523c; }
.winkel.kaia .pdp-hulp-kaia p { margin: 0 0 21.6px; font-size: 13.5px; }
.winkel.kaia .pdp-hulp-chat {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  background: var(--nova-accent); color: var(--nova-accent-op); border-radius: var(--nova-r-klein);
  font-size: 12.6px; font-weight: 600; text-decoration: none;
}

/* De twee kolommen van de productpagina: 613 links, 53 ertussen, de rest
   (570) rechts. De foto is vierkant en vult de linkerkolom. */
@media (min-width: 1024px) {
  /* 613 om 570 met 53 ertussen, maar dan meegroeiend met de volle kolom. */
  .winkel.kaia .shop-pdp { display: grid; grid-template-columns: minmax(0, 613fr) minmax(0, 570fr); gap: 53px; align-items: start; }
  .winkel.kaia .shop-pdp-beeld { min-width: 0; }
  .winkel.kaia .pdp-hoofdfoto { width: 100%; aspect-ratio: 1; object-fit: contain; }
}

/* Op een telefoon staan de aantal-knoppen naast de koopknop, op één regel. */
@media (max-width: 767px) {
  .winkel.kaia .pdp-koopregel { flex-wrap: nowrap; gap: 10px; }
  .winkel.kaia .pdp-koop { flex: 1 1 auto; min-width: 0; }
}

/* ── De lijstweergave: één regel per artikel, zoals www.houtjansok.nl ──
 * Foto van 101 links (7.2 van boven), naam 13.5 halfvet, artikelnummer op
 * 70%, voorraadbadges van 21 hoog onder elkaar, kenmerkchips met een
 * dunne rand; rechts onderaan de prijs van 18 en de groene knop van 88×40.
 * Op een telefoon gaan prijs en knop onder de tekst, naast elkaar. */
.winkel.kaia .shop-tegels.als-lijst { display: flex; flex-direction: column; gap: 14.4px; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart {
  display: grid; grid-template-columns: 101px minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr;
  column-gap: 14.4px; row-gap: 0; padding: 14.4px; min-height: 0; align-items: start;
  border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein);
}
.winkel.kaia .shop-tegels.als-lijst .shop-kaart > img,
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .foto-leeg { grid-column: 1; grid-row: 1 / span 4; width: 101px; height: 101px; margin: 7.2px 0 0; object-fit: contain; align-self: start; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-titel { grid-column: 2; grid-row: 1; margin: 3.6px 0 0; padding: 0 28.8px 0 3.6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-code { grid-column: 2; grid-row: 2; margin: 0; padding-left: 3.6px; font-size: 10.8px; line-height: 16px; color: rgba(51, 51, 51, .7); }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-chiprij { grid-column: 2; grid-row: 3; margin: 7.2px 0 0; padding-left: 3.6px; flex-direction: column; align-items: flex-start; gap: 3.6px; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-chip { font-size: 10.8px; font-weight: 600; padding: 1.44px 7.2px; border-radius: var(--nova-r-mini); height: 21px; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-specs { grid-column: 2; grid-row: 4; margin: 7.2px 0 0; padding-left: 3.6px; gap: 14.4px; align-self: end; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-spec { font-size: 13.5px; color: var(--nova-inkt); padding: 3.6px 7.2px; border-radius: var(--nova-r-mini); line-height: 20px; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-sterren { display: none; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-voet { grid-column: 3; grid-row: 1 / span 4; align-self: end; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 7.2px; margin: 0; padding-top: 36px; position: static; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart { position: relative; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-prijsvak { text-align: right; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-prijs { font-size: 18px; font-weight: 600; line-height: 27px; text-align: right; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-tweedeprijs { text-align: right; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-hartvorm { position: absolute; top: 14.4px; right: 14.4px; margin: 0; z-index: 2; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-hart { width: 21px; height: 21px; padding: 0; border: 0; background: transparent; color: #d6d8de; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-knoppen { justify-content: flex-end; }
.winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-inwagen { width: 88px; height: 40px; border-radius: var(--nova-r-klein); }
@media (max-width: 767px) {
  .winkel.kaia .shop-tegels.als-lijst .shop-kaart { grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; }
  .winkel.kaia .shop-tegels.als-lijst .shop-kaart > img,
  .winkel.kaia .shop-tegels.als-lijst .shop-kaart .foto-leeg { width: 100px; height: 100px; }
  .winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-titel { font-size: 16.2px; }
  .winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-chip { font-size: 9px; }
  .winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-specs { gap: 7.2px; }
  .winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-spec { font-size: 10.8px; line-height: 16px; }
  .winkel.kaia .shop-tegels.als-lijst .shop-kaart .nova-voet { grid-column: 1 / -1; grid-row: 5; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 10.8px; }
}

/* ── Het kruimelpad op een telefoon ────────────────────────────────────────
 * Daar staat alleen "Terug" en de laatste stap; de rest maakt drie regels
 * van een regel. En de rij categorieën boven de titel van een artikel
 * verdwijnt: op een telefoon staan die onder de prijs, niet erboven. */
@media (max-width: 767px) {
  .winkel.kaia .shop-kruimels > a:not(.kruimel-terug):not(:last-child),
  .winkel.kaia .shop-kruimels > span:not(:last-child):not(.kruimel-terug) { display: none; }
  .winkel.kaia .shop-kruimels { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .winkel.kaia .shop-pdp-info .pdp-bovenregel { display: none; }
}
/* Telefoon, productpagina: het kruimelpad in het midden en de foto er
   meteen onder, zoals daar (foto op 120 van boven). */
@media (max-width: 767px) {
  .winkel.kaia .shop-main:has(.shop-pdp) > .shop-kruimels { justify-content: center; margin: 10px 0 8px; height: auto; }
  .winkel.kaia .shop-main:has(.shop-pdp) { padding-top: 0; }
  .winkel.kaia .shop-pdp { gap: 10.8px; }
  .winkel.kaia .pdp-specblok, .winkel.kaia .pdp-spectabel { width: 100%; max-width: none; }
}

/* ── Het menu op een telefoon ─────────────────────────────────────────────
 * Gemeten aan het open menu daar: een kop van 59 met de sluitknop, dan
 * regels van 48 hoog, 13.5 px, 12.6 boven en onder en 14.4 opzij, zonder
 * lijntjes ertussen en zonder grijs vlak achter de eerste. */
.shop-lade.vorm-kaia .shop-lade-regel {
  display: flex; align-items: center; gap: 14.4px;
  min-height: 0; padding: 12.6px 14.4px; font-size: 14.4px; font-weight: 500; line-height: 22px;
  border-bottom: 0; background: transparent; color: var(--nova-inkt);
}
.shop-lade.vorm-kaia .shop-lade-regel:first-of-type { background: transparent; }
/* Het pijltje rechts: een dun haakje op 55%, zoals daar; het tekstpijltje
   van Nova blijft weg. */
.shop-lade.vorm-kaia .shop-lade-regel::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid var(--nova-inkt); border-bottom: 1.6px solid var(--nova-inkt);
  transform: rotate(-45deg); opacity: .55;
}
.shop-lade.vorm-kaia .shop-lade-pijl { display: none; }
.shop-lade.vorm-kaia .shop-lade-kop { height: 59px; padding: 9px 14.4px; border-bottom: 1px solid var(--nova-lijn); justify-content: space-between; }
/* De knop uit de kop (offerte) staat linksboven in de lade: groen, 40 hoog,
   16.2 opzij, zoals de echte winkel. De regels erna hebben een lijntje ertussen. */
.shop-lade.vorm-kaia .shop-lade-cta {
  display: inline-flex; align-items: center; height: 39.6px; padding: 0 16.2px;
  border-radius: var(--nova-r-klein); background: var(--nova-accent); color: var(--nova-accent-op);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.shop-lade.vorm-kaia .shop-lade-regel + .shop-lade-regel { border-top: 1px solid var(--nova-lijn); }
.shop-lade.vorm-kaia .shop-lade-titel { flex: 1; text-align: center; font-size: 14.4px; font-weight: 700; color: var(--nova-inkt); text-decoration: none; }
.shop-lade.vorm-kaia .shop-lade-lijst { padding: 0; }
.shop-lade.vorm-kaia .shop-lade-vlak { padding-bottom: 36px; }
/* Laag 2: secties met een vet kopje (de tussenkop, zelf een link) en de
   soorten als regels eronder; 10.8 tussen de secties. */
.shop-lade.vorm-kaia .shop-lade-sectie { margin-top: 10.8px; }
.shop-lade.vorm-kaia .shop-lade-sectiekop {
  display: block; padding: 7.2px 14.4px 3.6px; font-size: 14.4px; font-weight: 700; line-height: 21.6px;
  color: var(--nova-inkt); text-decoration: none;
}

/* ── Tablet (768 tot 1099): zoals daar één kolom zonder zijbalk ────────────
 * De oude winkel laat de filters op een tablet achter de knop, zet de
 * kaarten drie naast elkaar (314 breed) en de werkbalk op één regel; het
 * telefoonnummer staat pas vanaf 1280 in de balk. */
@media (max-width: 1279px) {
  .shop-header.vorm-kaia .shop-koptel { display: none; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .winkel.kaia .shop-lijst { display: block; }
  .winkel.kaia .shop-lijst .shop-filterknop,
  .winkel.kaia .shop-lijst:not(.filters-knop) .shop-filterknop {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; height: 43px; margin: 0 0 21.6px;
    background: #e5e5e5; border: 0; border-radius: var(--nova-r-klein);
    font-size: 12.6px; font-weight: 600; color: var(--nova-inkt);
  }
  .winkel.kaia .shop-lijst .shop-zijbalk { display: none; }
  .winkel.kaia .shop-lijst.filters-open .shop-zijbalk { display: block; margin-bottom: 21.6px; }
  .winkel.kaia .shop-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
}

/* ── De vaste link rechts in de menubalk ──────────────────────────────────
 * De tweede rij (met "Zakelijk account") staat daar niet onder de balk
 * maar rechts erin, vet. */
@media (min-width: 1024px) {
  .winkel.kaia .shop-menu.vorm-kaia { position: relative; }
  /* Het tweede menu ("Zakelijk account") hoort rechts IN de menubalk. Het
     staat in de stroom direct na de balk; een negatieve marge tilt het de
     balk in, en met een eigen breedte rechts uitgelijnd raakt het de koppen
     links niet. (Absoluut plaatsen ankerde op de hele pagina: dan hing de
     link midden op het scherm.) */
  .winkel.kaia .shop-menu2.vorm-kaia { position: relative; z-index: 3; margin: -44px 0 0 auto; height: 44px; width: max-content; background: transparent; border: 0; }
  .winkel.kaia .shop-menu2.vorm-kaia .shop-menu2-in { height: 100%; display: flex; align-items: center; padding-inline: var(--nova-zij); }
  .winkel.kaia .shop-menu2.vorm-kaia a { font-weight: 700; font-size: 12.6px; line-height: 19px; white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .winkel.kaia .shop-menu2.vorm-kaia .shop-menu2-in { padding-inline: 10.8px var(--nova-zij); }
  .winkel.kaia .shop-menu2.vorm-kaia a { font-size: 11.5px; }
}

/* ── Landkeuze bij een telefoonnummer ──────────────────────────────────────
 * Zoals de oude site: een vakje van 72 op lichtgrijs met het vlaggetje en
 * een pijltje; de keuzelijst ligt er onzichtbaar overheen. Het vlaggetje is
 * puur CSS (drie banen), zodat er geen plaatjes nodig zijn. */
.winkel.kaia .tel-land { position: relative; display: flex; align-items: center; justify-content: center; gap: 7.2px; width: 72px; height: 50px; flex: 0 0 72px; background: #f6f6f6; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); box-sizing: border-box; }
.winkel.kaia .tel-land::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid #333; border-bottom: 1.5px solid #333; transform: translateY(-2px) rotate(45deg); }
.winkel.kaia .tel-vlag { width: 19px; height: 13px; border-radius: var(--nova-r-mini); background: linear-gradient(#ae1c28 33.4%, #fff 33.4% 66.7%, #21468b 66.7%); }
.winkel.kaia .tel-land[data-land="be"] .tel-vlag { background: linear-gradient(90deg, #000 33.4%, #fdda24 33.4% 66.7%, #ef3340 66.7%); }
.winkel.kaia .tel-land[data-land="de"] .tel-vlag { background: linear-gradient(#000 33.4%, #dd0000 33.4% 66.7%, #ffce00 66.7%); }
.winkel.kaia .tel-land[data-land="fr"] .tel-vlag { background: linear-gradient(90deg, #0055a4 33.4%, #fff 33.4% 66.7%, #ef4135 66.7%); }
.winkel.kaia .tel-land[data-land="es"] .tel-vlag { background: linear-gradient(#aa151b 25%, #f1bf00 25% 75%, #aa151b 75%); }
.winkel.kaia .tel-land select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 16px; }

/* ── Terugbelblok: de kaart van 1164, landkeuze naast het nummer ──────────
 * Gemeten op www.houtjansok.nl: kaart 1164 breed met een rand van #e5e6e5
 * en hoek 10.4; op een telefoon 21.6 van de zijkant, kop op 28.8 van boven,
 * 28.8 tussen de zin en het veld, 28.8 onder het veld. Het vakje van 72 en
 * het veld raken elkaar; het knopje van 28.8 staat in het veld op 10.8 van
 * de rechterrand. */
.winkel.kaia .site-terugbel.kaart .site-terugbel-in { max-width: 1164px; border-color: var(--nova-lijn); border-radius: var(--nova-r-kaart); }
.winkel.kaia .site-terugbel.kaart .site-terugbel-form.met-land { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0; align-items: center; }
.winkel.kaia .site-terugbel-form .klant-veld { min-width: 0; }
.winkel.kaia .site-terugbel.kaart .site-terugbel-form .klant-veld input { width: 100%; height: 50px; padding: 17px 50.4px 3px 10.8px; font-size: 12.6px; }
.winkel.kaia .site-terugbel.kaart .site-terugbel-knop { width: 28.8px; height: 28.8px; border-radius: var(--nova-r-klein); right: 10.8px; }
/* Naast de tekst staat het veld op 69 van de bovenrand (gemeten), niet in
   het midden; onder elkaar op de telefoon staat het 28.8 onder de zin. */
@media (min-width: 1024px) {
  .winkel.kaia .site-terugbel.kaart .site-terugbel-form.met-land { align-content: start; padding: 69px 0 0; }
}
@media (max-width: 1023px) {
  .winkel.kaia .site-terugbel.kaart .site-terugbel-in { margin-inline: 7.2px; }
  .winkel.kaia .site-terugbel.kaart .site-terugbel-tekst { padding-bottom: 0; }
  .winkel.kaia .site-terugbel.kaart .site-terugbel-form { padding-top: 0; }
  .winkel.kaia .shop-menu2 { display: none; }
}

/* ── Offerte aanvragen: links op #fafafc, rechts wit, het raster van vijf ─
 * Gemeten: de velden staan op een raster van vijf kolommen met 14.4
 * ertussen en 21.6 tussen de rijen, 641 breed; aanhef één kolom, voor- en
 * achternaam twee, straat en plaats vier, huisnummer en postcode één. Op
 * een telefoon vier kolommen: namen twee, huisnummer en postcode één (72),
 * de rest de hele breedte; 28.8 van de zijkant. */
.winkel.kaia .offerte-vraag { background: #fafafc; }
.winkel.kaia .offerte-gegevens { background: #fafafc; padding: 14.4px 28.8px 43.2px 50.4px; }
.winkel.kaia .offerte-gegevens > :is(h1, h2, p) { max-width: 641px; }
.winkel.kaia .offerte-kruimels { margin-bottom: 33px; }
.winkel.kaia .klant-vorm.offerte-velden { row-gap: 21.6px; }
.winkel.kaia .offerte-regels { background: #fff; padding: 43.2px 28.8px; }
.winkel.kaia .offerte-vraag h1 { margin-bottom: 7.2px; }
.winkel.kaia .offerte-intro { color: rgba(51, 51, 51, .6); margin-bottom: 28.8px; max-width: 641px; }
.winkel.kaia .offerte-vraag h2 { margin-bottom: 7.2px; }
.winkel.kaia .offerte-velden { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 21.6px 14.4px; max-width: 641px; }
.winkel.kaia .offerte-velden .klant-veld { grid-column: span 5; }
.winkel.kaia .offerte-velden .klant-veld.ov-aanhef { grid-column: span 1; }
.winkel.kaia .offerte-velden .klant-veld.ov-naam { grid-column: span 2; }
.winkel.kaia .offerte-velden .klant-veld.ov-zes { grid-column: span 4; }
.winkel.kaia .offerte-velden .klant-veld.ov-twee { grid-column: span 1; }
.winkel.kaia .offerte-velden .offerte-upload { grid-column: span 5; }
.winkel.kaia .klant-veld.ov-tel { display: grid; grid-template-columns: 72px minmax(0, 1fr); }
.winkel.kaia .klant-veld.ov-tel > label { left: 80px; }
.winkel.kaia .klant-veld.ov-tel > input { padding-left: 10.8px; }
.winkel.kaia .offerte-bericht { max-width: 641px; }
.winkel.kaia .offerte-versturen .pdp-koop { height: 43.2px; font-size: 16.2px; font-weight: 600; }
@media (max-width: 899px) {
  .winkel.kaia .offerte-gegevens { padding: 14.4px 28.8px 36px; }
  .winkel.kaia .offerte-regels { padding: 28.8px 28.8px 43.2px; }
  .winkel.kaia .offerte-velden { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .winkel.kaia .offerte-velden .klant-veld,
  .winkel.kaia .offerte-velden .offerte-upload { grid-column: span 4; }
  .winkel.kaia .offerte-velden .klant-veld.ov-naam { grid-column: span 2; }
  .winkel.kaia .offerte-velden .klant-veld.ov-twee { grid-column: span 1; }
  .winkel.kaia .offerte-velden .klant-veld.ov-aanhef { grid-column: span 4; }
}

/* ── Het formulierblok van een pagina: hetzelfde raster ─────────────────── */
.winkel.kaia .site-formulier-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21.6px 14.4px; max-width: 641px; }
.winkel.kaia .site-formulier-in label { font-size: 12.6px; gap: 6px; }
.winkel.kaia .site-formulier-in button { height: var(--nova-h); padding: 0 21.6px; font-size: 16.2px; font-weight: 600; border-radius: var(--nova-r-klein); }
@media (max-width: 767px) {
  .winkel.kaia .site-formulier-in { grid-template-columns: minmax(0, 1fr); }
}

/* ── De klantomgeving: zoals het dashboard van www.houtjansok.nl ─────────
 * Gemeten daar: logo 56 zonder rand, "Welkom" 23.4 vet met de e-mail op
 * 12.6 eronder, tabbladen van 44 (13.5 halfvet, 25.2 ertussen, de actieve
 * in de accentkleur met een streep van 2 eronder) en rechts een knop
 * "Instellingen" van 35 met een tandwiel; de band loopt over de volle
 * breedte met een lijn erboven, 25.2 erin en 36 eronder. Kaarten hoek 9
 * met 21.6 rand; tabellen 12.6 met een grijze kopregel van 11.7 en rijen
 * van 51; knoppen 43 hoog, 12.6 halfvet. */
.winkel.kaia .klant-kop { gap: 21.6px; margin-bottom: 21.6px; padding-top: 12.6px; }
.winkel.kaia .klant-kaart { width: 56px; height: 56px; }
.winkel.kaia .klant-initialen { font-family: var(--kaia-kop, inherit); }
.winkel.kaia .klant-wie h1 { font-size: 23.4px; line-height: 35px; margin: 0 0 3.6px; }
.winkel.kaia .klant-wie p { font-size: 12.6px; color: rgba(51, 51, 51, .7); }
.winkel.kaia .klant-uit .ghost { height: auto; min-height: 0; padding: 0; border: 0; background: none; font-size: 12.6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--nova-inkt); }
.winkel.kaia .klant-tabs { gap: 25.2px; align-items: flex-end; margin-bottom: 0; border-bottom: 0; }
.winkel.kaia .klant-tabs a { padding: 9px 1.8px 12.6px; border-radius: 0; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 600; color: rgba(51, 51, 51, .7); background: none; }
.winkel.kaia .klant-tabs a:hover { color: var(--nova-inkt); background: none; }
.winkel.kaia .klant-tabs a.aan { color: var(--nova-accent); border-bottom-color: var(--nova-accent); background: none; }
.winkel.kaia .klant-tabs a.klant-tab-instel {
  margin-left: auto; align-self: center; order: 10; height: 35px; padding: 0 14.4px 0 12px;
  border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); background: #fff; color: var(--nova-inkt); font-size: 12.6px;
  display: inline-flex; align-items: center; gap: 7.2px;
}
.winkel.kaia .klant-tabs a.klant-tab-instel::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/></svg>") center / contain no-repeat;
}
.winkel.kaia .klant-tabs a.klant-tab-instel.aan { color: var(--nova-inkt); border-color: var(--nova-inkt); }
.winkel.kaia .klant-tabs-knop { display: none; }
.winkel.kaia .klant-band {
  margin-inline: calc(-1 * var(--nova-zij)); padding: 25.2px var(--nova-zij) 36px;
  border-top: 1px solid var(--nova-lijn); background: #fff;
}
.winkel.kaia .klant-kaart-blok, .winkel.kaia .klant-vak, .winkel.kaia .klant-adreskaart, .winkel.kaia .klant-melding, .winkel.kaia .klant-offertevraag { border-radius: var(--nova-r-kaart); }
.winkel.kaia .klant-kaart-blok { padding: 21.6px; margin-bottom: 14.4px; }
.winkel.kaia .klant-kaart-blok h2 { font-size: 16.2px; font-weight: 700; margin: 0 0 14.4px; }
.winkel.kaia .klant-vakken { grid-template-columns: repeat(auto-fit, minmax(197px, 1fr)); gap: 14.4px; margin-bottom: 14.4px; }
.winkel.kaia .klant-vak { padding: 21.6px; gap: 3.6px; }
.winkel.kaia .klant-vak .getal { font-size: 28.8px; }
.winkel.kaia .klant-vak .naam { font-size: 13.5px; }
.winkel.kaia .klant-vak .sub { font-size: 12.6px; }
.winkel.kaia .klant-tweekolom { gap: 14.4px; margin-bottom: 14.4px; }
.winkel.kaia .klant-tabelvak { margin: 0 -21.6px; }
.winkel.kaia .klant-tabel { font-size: 12.6px; }
.winkel.kaia .klant-tabel thead tr { background: transparent; }
.winkel.kaia .klant-tabel th { background: #f7f7f7; text-transform: none; letter-spacing: 0; font-size: 11.7px; font-weight: 600; color: rgba(51, 51, 51, .56); padding: 10.8px 14.4px; }
.winkel.kaia .klant-tabel th:first-child { border-radius: var(--nova-r-klein) 0 0 var(--nova-r-klein); }
.winkel.kaia .klant-tabel th:last-child { border-radius: 0 var(--nova-r-klein) var(--nova-r-klein) 0; }
.winkel.kaia .klant-tabel td { padding: 10.8px 14.4px; height: 51px; border-bottom: 1px solid var(--nova-lijn); }
.winkel.kaia .klant-tabel tbody tr:hover { background: transparent; }
.winkel.kaia .klant-band .ghost, .winkel.kaia .klant-band .ghost.small, .winkel.kaia .klant-band .pdp-koop.klein, .winkel.kaia .klant-band .btn-primary, .winkel.kaia .klant-band button[type=submit] {
  height: var(--nova-h); min-height: 0; padding: 0 14.4px; font-size: 12.6px; font-weight: 600; border-radius: var(--nova-r-klein); display: inline-flex; align-items: center;
}
.winkel.kaia .klant-adreskaart { padding: 21.6px; }
.winkel.kaia .klant-meer { font-size: 12.6px; font-weight: 600; }
@media (max-width: 767px) {
  /* De telefoon: logo en naam als op een groot scherm, de tabbladen achter
     een knop van 43 met de naam van het huidige tabblad en een pijltje. */
  .winkel.kaia .klant-kop { gap: 21.6px; flex-wrap: nowrap; }
  .winkel.kaia .klant-kaart { width: 56px; height: 56px; }
  .winkel.kaia .klant-wie h1 { font-size: 23.4px; }
  .winkel.kaia .klant-kop { flex-wrap: wrap; row-gap: 7.2px; }
  .winkel.kaia .klant-wie { flex: 1 1 200px; }
  .winkel.kaia .klant-uit { width: 100%; order: 3; padding-left: 77.6px; }
  .winkel.kaia .klant-tabs-knop {
    display: flex; align-items: center; justify-content: space-between; width: 100%; height: 43px; padding: 0 14.4px;
    border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-klein); background: #fff; color: var(--nova-inkt);
    font-size: 12.6px; font-weight: 600; text-align: left; cursor: pointer;
  }
  .winkel.kaia .klant-tabs-knop::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
  .winkel.kaia .klant-tabs-knop.open { border-radius: var(--nova-r-klein) var(--nova-r-klein) 0 0; }
  .winkel.kaia .klant-tabs-knop.open::after { transform: rotate(-135deg) translateY(-2px); }
  .winkel.kaia .klant-tabs { display: none; flex-direction: column; gap: 0; margin: 0 0 12px; border: 1px solid var(--nova-lijn); border-top: 0; border-radius: 0 0 var(--nova-r-klein) var(--nova-r-klein); overflow: visible; }
  .winkel.kaia .klant-tabs.open { display: flex; }
  .winkel.kaia .klant-tabs a, .winkel.kaia .klant-tabs a.klant-tab-instel { margin: 0; order: 0; height: auto; padding: 12.6px 14.4px; border: 0; border-bottom: 1px solid var(--nova-lijn); border-radius: 0; font-size: 12.6px; background: #fff; }
  .winkel.kaia .klant-tabs a:last-child { border-bottom: 0; }
  .winkel.kaia .klant-tabs a.klant-tab-instel::before { display: none; }
  .winkel.kaia .klant-band { margin-top: 12px; }
  .winkel.kaia .klant-tabelvak { margin: 0 -14.4px; }
  .winkel.kaia .klant-kaart-blok { padding: 21.6px; }
}
/* Het kleine icoonknopje in een tabel (factuur, bestel opnieuw) houdt zijn
   maat van 30, ook al is elke verzendknop in de band 43 hoog. */
.winkel.kaia .klant-band button.klant-icoon[type="submit"], .winkel.kaia .klant-band a.klant-icoon { height: 30px; width: 30px; min-height: 0; padding: 0; font-size: 0; line-height: 0; border-radius: var(--nova-r-klein); background: #fff; color: var(--nova-inkt); display: inline-grid; place-items: center; border: 1px solid var(--nova-lijn); }
.winkel.kaia .klant-band .klant-icoon svg { width: 14px; height: 14px; display: block; }

/* ── Het uitklapmenu, zoals de echte winkel ──
   Paneel over de volle breedte, wit, zonder rand, met een zachte schaduw
   eronder (rgba(51,51,51,.14) 0 24 48); 21.6 ruimte boven en onder.
   Kolomkop 12.6 halfvet in de accentkleur met 10.8 eronder, de regels 12.6
   gewoon met 7.2 ertussen (27.45 van regel tot regel). Geen "Bekijk alles":
   de kop zelf is de link naar de categorie. */
.winkel.kaia .shop-menu-paneel { border: 0; border-radius: 0; box-shadow: rgba(51, 51, 51, .14) 0 24px 48px; }
.winkel.kaia .shop-menu-paneel-in { padding: 21.6px var(--nova-zij) 21.6px; gap: 21.6px; }
.winkel.kaia .shop-menu-kolom { gap: 0; }
.winkel.kaia .shop-menu-kolomkop { font-size: 12.6px; font-weight: 600; color: var(--nova-accent); line-height: 19px; margin: 0 0 10.8px; padding: 0; }
.winkel.kaia .shop-menu-sublink { font-size: 12.6px; font-weight: 400; line-height: 20.25px; padding: 0; margin: 0 0 7.2px; color: var(--nova-inkt); }
.winkel.kaia .shop-menu-sublink:last-child { margin-bottom: 0; }
.winkel.kaia .shop-menu-kolomkop:hover, .winkel.kaia .shop-menu-sublink:hover { color: var(--nova-accent); text-decoration: underline; }
.winkel.kaia .shop-menu-paneel-voet { display: none; }

/* ── Het Assortiment-paneel, alleen categorieën ──
   Per soort een kolom, zoals het uitklapmenu: de kop in de accentkleur
   en de categorieën eronder als regels van 12.6; bovenin de regel naar de
   hele categorie. */
.winkel.kaia .shop-paneel-alles-kop { display: inline-block; font-size: 12.6px; font-weight: 600; color: var(--nova-inkt); text-decoration: none; margin: 0 0 14.4px; }
.winkel.kaia .shop-paneel-alles-kop:hover { color: var(--nova-accent); text-decoration: underline; }
.winkel.kaia .shop-paneel-kolommen.alleen-categorieen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 21.6px; align-items: start; }
.winkel.kaia .shop-paneel-kolommen.alleen-categorieen .shop-paneel-kolom { display: flex; flex-direction: column; gap: 0; }
.winkel.kaia .shop-paneel-kolommen.alleen-categorieen .shop-paneel-kop { font-size: 12.6px; font-weight: 600; color: var(--nova-accent); line-height: 19px; margin: 0 0 10.8px; padding: 0; text-decoration: none; }
.winkel.kaia .shop-paneel-sub { font-size: 12.6px; font-weight: 400; line-height: 20.25px; margin: 0 0 7.2px; color: var(--nova-inkt); text-decoration: none; }
.winkel.kaia .shop-paneel-sub:hover, .winkel.kaia .shop-paneel-kolommen.alleen-categorieen .shop-paneel-kop:hover { color: var(--nova-accent); text-decoration: underline; }

/* ── Winkelwagen (houtjansok: cart) ──────────────────────────────────────
 * Links de regels: foto 65, naam met artikelnummer, teller 79×40, bedrag,
 * kruisje; daaronder "Verder winkelen". Rechts het grijze besteloverzicht
 * van 565 (#f6f6f6, hoek 12, rand 25.2) met de eerste keuzes: als wie je
 * bestelt en afhalen of bezorgen, dan de telling en de knop van 63 hoog.
 * Op de telefoon: foto links, naam en kruisje op de eerste regel, teller
 * links en bedrag rechts op de tweede; niets loopt uit het beeld.
 * Maten uit mockups/kaia-mockup.html, scherm "wagen". */
.winkel.kaia .wagen-titel { font-size: 23.4px; line-height: 32px; margin: 0; padding: 28px 0 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.winkel.kaia .wagen-aantal { display: inline; font-size: 13.5px; font-weight: 400; color: #666; margin: 0; }
.winkel.kaia .wagen-vlak { grid-template-columns: minmax(0, 1fr) 565px; gap: 24px; padding-bottom: 43.2px; }
.winkel.kaia .wagen-regel { grid-template-columns: 65px minmax(0, 1fr) 79px 100px 20px; gap: 18px; padding: 14.4px 0; }
.winkel.kaia .wagen-regels > .wagen-regel:first-child { padding-top: 0; }
.winkel.kaia .wagen-foto { width: 65px; height: 65px; border-radius: var(--nova-r-klein); }
.winkel.kaia .wagen-naam { font-size: 14.4px; font-weight: 700; line-height: 1.35; }
.winkel.kaia .wagen-regel .cell-sub { font-size: 12px; color: #8a8f8a; margin-top: 2px; }
.winkel.kaia .wagen-stuk { display: none; }
.winkel.kaia .wagen-totaal { font-size: 15.3px; font-weight: 700; }
.winkel.kaia .wagen-weg { width: 20px; height: 20px; background: transparent; color: #8a8f8a; font-size: 18px; }
.winkel.kaia .wagen-weg:hover { background: transparent; color: var(--nova-inkt); }
.winkel.kaia .wagen-terug { margin: 18px 0 0; font-size: 13.5px; font-weight: 600; color: var(--nova-accent); gap: 6px; }
/* Het overzicht rechts. */
.winkel.kaia .wagen-telling { background: #f6f6f6; border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); padding: 25.2px; overflow: visible; box-sizing: border-box; }
.winkel.kaia .wagen-telling-kop { padding: 0; margin-bottom: 18px; }
.winkel.kaia .wagen-telling-kop h2 { font-size: 18px; line-height: 24px; }
.winkel.kaia .ck-stap { background: #eeefed; border-radius: var(--nova-r-klein); padding: 4px 10px; font-size: 12px; font-weight: 600; color: #666; white-space: nowrap; }
.winkel.kaia .wagen-olabel { font-size: 12.6px; font-weight: 600; margin: 14px 0 8px; }
.winkel.kaia .wagen-keuzeblok > .wagen-olabel:first-child { margin-top: 0; }
.winkel.kaia .wagen-keuzes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.winkel.kaia .wagen-keuzes.een { grid-template-columns: 1fr; }
.winkel.kaia .wagen-keuze { border: 1px solid var(--nova-lijn); border-radius: var(--nova-r-kaart); background: #fff; padding: 12px 14px; font-weight: 600; font-size: 13.5px; line-height: 1.3;
  display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; min-width: 0; box-sizing: border-box; }
.winkel.kaia .wagen-keuze small { font-weight: 400; color: #666; font-size: 12px; line-height: 1.35; }
.winkel.kaia .wagen-keuze .wagen-keuze-uitleg { color: #8a8f8a; font-size: 11.5px; }
a.wagen-keuze:hover { border-color: #c9ccc9; text-decoration: none; }
.winkel.kaia .wagen-keuze.aan { border-color: var(--nova-accent); box-shadow: inset 0 0 0 1px var(--nova-accent); }
.winkel.kaia .wagen-telling-lijf { padding: 0; margin-top: 18px; gap: 0; }
.winkel.kaia .wagen-korting-klap { margin: 0 0 8px; }
.winkel.kaia .wagen-korting-klap summary { cursor: pointer; font-size: 12.6px; font-weight: 600; color: var(--nova-accent); list-style: none; padding: 0 0 6px; }
.winkel.kaia .wagen-korting-klap summary::-webkit-details-marker { display: none; }
.winkel.kaia .wagen-korting-klap summary::before { content: "+ "; }
.winkel.kaia .wagen-korting-klap[open] summary::before { content: "− "; }
.winkel.kaia .wagen-korting { margin: 4px 0 10px; }
.winkel.kaia .wagen-korting input { height: var(--nova-h); border-radius: var(--nova-r-klein); }
.winkel.kaia .wagen-korting .ghost.small { height: 40px; }
.winkel.kaia .wagen-rij { padding: 8px 0; border-top: 1px solid var(--nova-lijn); font-size: 13.5px; }
.winkel.kaia .wagen-rij small { font-weight: 400; color: #8a8f8a; font-size: 11.5px; }
.winkel.kaia .wagen-rij.wagen-totaalrij { font-size: 16.2px; font-weight: 700; margin: 0; padding-top: 8px; }
.winkel.kaia .wagen-gratis { padding-top: 4px; }
.winkel.kaia .wagen-telling-voet { border: 0; padding: 14px 0 0; gap: 8px; }
.winkel.kaia .wagen-afrekenen { height: var(--nova-h-groot); border-radius: var(--nova-r-klein); font-size: 16.2px; font-weight: 700; margin: 0; }
.winkel.kaia .wagen-hint { display: block; text-align: center; color: #666; font-size: 12px; margin-top: 2px; }
.winkel.kaia .wagen-vraag { font-size: 12px; }
@media (max-width: 1099px) {
  .winkel.kaia .wagen-vlak { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  .winkel.kaia .wagen-titel { font-size: 21.6px; padding: 18px 0 8px; }
  .winkel.kaia .wagen-regel { grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-areas: "foto kern weg" "foto stap totaal"; row-gap: 10px; column-gap: 12px; align-items: start; padding: 12px 0; }
  .winkel.kaia .wagen-foto { grid-area: foto; width: 54px; height: 54px; }
  .winkel.kaia .wagen-kern { grid-area: kern; min-width: 0; }
  .winkel.kaia .wagen-wegvorm { grid-area: weg; justify-self: end; }
  .winkel.kaia .wagen-aantalvorm { grid-area: stap; justify-self: start; }
  .winkel.kaia .wagen-totaal { grid-area: totaal; justify-self: end; align-self: center; text-align: right; }
  .winkel.kaia .wagen-telling { padding: 18px; border-radius: var(--nova-r-kaart); }
  .winkel.kaia .wagen-keuzes { grid-template-columns: 1fr; }
  .winkel.kaia .wagen-afrekenen { font-size: 15.3px; }
}

/* ── Reviews (houtjansok: review-summary--gold + pdp-reviews) ──
 * De samenvatting boven de titel: gouden sterren, lege sterren grijs. */
.winkel.kaia .pdp-oordeel .nova-sterren .vol { color: #f8b400; }
.winkel.kaia .pdp-oordeel .nova-sterren .leeg { color: #c9cfdc; }
.winkel.kaia .pdp-oordeel span { color: color-mix(in srgb, var(--nova-inkt) 60%, #fff); }

/* Offerte aanvragen op de productpagina: dezelfde lichte knop als in de kop
   (grijs vlak, geen rand), 12.6 px halfvet. */
.winkel.kaia .pdp-knop-licht { background: var(--nova-vlak); border-color: transparent; font-size: 12.6px; }
.winkel.kaia .pdp-knop-licht:hover { background: #e5e5e5; color: var(--nova-inkt); }

/* Het kruimelpad op een categoriepagina staat bij hen op 13 px; op de
   productpagina op 14. */
.winkel.kaia .shop-lijstkolom .shop-kruimels { font-size: 13px; }

/* De kaart op een telefoon: bij hen geen maatchips, alleen de foto, de
   voorraad, de naam, het nummer en de prijs. Zo blijft de kaart even hoog
   als het origineel. */
@media (max-width: 639px) {
  .winkel.kaia .shop-kaart .nova-specs { display: none; }
  /* De voorraadchip loopt op een telefoon over twee regels; bij hen staan
     die regels op 16 px, zodat de chip 40 hoog wordt en niet 44. */
  .winkel.kaia .shop-tegels .shop-kaart .nova-chip { line-height: 16px; }
}

/* Het filterknopje heeft bij hen een heel klein beetje groen in het grijs. */
.winkel.kaia .shop-lijst .shop-filterknop,
.winkel.kaia .shop-lijst:not(.filters-knop) .shop-filterknop { background: #e5e6e5; }

/* Bladeren onder de lijst, zoals bij hen: grijze knopjes van 35 hoog met
   veertien tussen, de huidige pagina in het groen. */
.winkel.kaia .shop-blader { gap: 14px; margin-top: 0; padding: 28.8px 0; }
.winkel.kaia .shop-blader a,
.winkel.kaia .shop-blader .nu {
  height: 35px; min-width: 36px; padding: 0 14px; border: 0;
  border-radius: var(--hoek-klein, 6px); background: #e5e6e5; font-size: 13.5px;
}
.winkel.kaia .shop-blader a:hover { background: #d9dbd9; }
.winkel.kaia .shop-blader .nu { background: var(--nova-accent); color: var(--nova-accent-op); }