/* 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: 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. */
.shop-header.vorm-kaia .shop-kop-rechts { gap: 7.2px; }
.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: 12.9px; }
.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;
  margin: 0;
  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: 10.4px; }
.winkel.kaia .site-hero.kaart .site-hero-in { padding: 43.2px calc(var(--nova-zij) + 43.2px); }
.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; }

/* ── Op een groot scherm bestaan de telefoonknoppen niet ─────────────── */
.shop-header.vorm-kaia .shop-zoek-knop { display: none; }
.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. */
@media (max-width: 767px) {
  .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: 6px; 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: 6px; 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: 9px; gap: 5px; }
  .shop-header.vorm-kaia .shop-wagen .wagen-woord { display: none; }
  /* Het zoekveld: dicht tot de knop hem opent; dan onder de balk, over de
     volle breedte. */
  .shop-header.vorm-kaia .shop-zoek { display: none; order: 10; flex: 1 0 100%; max-width: none; margin: 0 0 10.8px; }
  .shop-header.vorm-kaia.zoek-open .shop-header-in { flex-wrap: wrap; height: auto; }
  .shop-header.vorm-kaia.zoek-open .shop-zoek { display: flex; }

  /* ── 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: 6px;
    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: 6px; 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 12px 12px; }
  .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: 9px; }
}