/* basis */
/* De kleuren van de demo, op één plek.
   Stond zestien keer #4e7ca5 verspreid over vijf bestanden; verander je er dan
   één, dan lopen ze uiteen — precies hoe het hartje op de ene pagina rood werd
   bij hover en op de andere bonkte. Dit bestand is een paar regels en staat op
   elke pagina, dus de rest kan er gewoon naar wijzen.

   De naamgeving zegt wát het is, niet hoe het eruitziet: --gk-accent, niet
   --gk-blauw. Wordt het merk ooit groen, dan hoeft alleen dit bestand mee. */
:root {
  /* Het blauw uit hun logo. Op wit haalt het 2,0:1 — goed genoeg voor een vlak,
     te licht voor letters. */
  --gk-logo: #77bdfa;
  /* Diezelfde tint, donker genoeg voor tekst en randen: 4,87:1 op wit. */
  --gk-accent: #4e7ca5;
  --gk-accent-vlak: #f0f6fb;
  /* Het rood van een gevuld hartje; komt uit hun eigen stylesheet. */
  --gk-hart: #eb5e5e;
  --gk-inkt: #1c1c1c;
  --gk-zacht: #6b7378;
  --gk-rust: #999999;

  /* De bedieningen boven de lijst — Filter, de cijfers, het sorteerveld —
     delen één hoogte en één ronding. Dat is een ontwerpbesluit, geen detail van
     de paginering, dus hoort het hier. */
  --gk-knop-hoog: 29px;
  --gk-knop-rond: 8px;
}

/* Geen zijwaarts swipen op mobiel (Ries 06-09: op kaart- en andere pagina's kon
   je op de telefoon links/rechts uit beeld swipen; de homepage niet). Headless
   Chrome meet op alle pagina's scrollWidth = schermbreedte, dus dit is Safari-
   gedrag: Safari negeert overflow-x op <body> alleen, en laat de pagina
   pannen zodra iets breder is dan het scherm. Vandaar op html én body, en
   overscroll uit zodat een carrousel aan zijn einde niet doorschuift naar de
   pagina. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; overscroll-behavior-x: none; }
  body { position: relative; }
}

/* omhulsel */
/* De schil om aangeleverde HTML: /account/ en alles wat verder "kaal" binnenkomt.

   De pagina komt uit een categoriepagina als mal (tools/omhulsel.py), dus alles
   wat bij een categorie hoort staat er nog. Weghalen zou betekenen tellen waar
   een <div> weer dichtgaat; verbergen doet hetzelfde werk en kan de opmaak niet
   stukmaken. Zelfde afweging als op de favorietenpagina en het swipescherm. */
body.gk-omhulsel-pagina #left_container,
body.gk-omhulsel-pagina #categorie_header_text,
body.gk-omhulsel-pagina #pagination_top,
body.gk-omhulsel-pagina .pagination_bottom,
body.gk-omhulsel-pagina #pagination_bottom,
body.gk-omhulsel-pagina #home_speerpunten,
body.gk-omhulsel-pagina #categorie_footer_text,
body.gk-omhulsel-pagina #kaarten_teller,
body.gk-omhulsel-pagina #introText,
body.gk-omhulsel-pagina #seo_text { display: none !important; }

/* De kruimelbalk van de mal ook, want hun eigen pagina brengt er al een mee
   ("Terug | Home | Je account | Opgeslagen ontwerpen"). Twee kruimelpaden naast
   elkaar, met in de onze hun paginatitel uitgeschreven, leest als een fout. */
body.gk-omhulsel-pagina #breadcrumb_bar { display: none !important; }

/* De cookiebanner van de schil is hierboven al uit de pagina gehaald. Wat
   overblijft is de link "Cookies" in de voettekst; die zou nu naar een
   toestemmingsvenster wijzen dat er niet meer is. De pagina in het kader heeft
   zijn eigen banner én zijn eigen link. */
body.gk-omhulsel-pagina #cookie-settings,
body.gk-omhulsel-pagina .stcm-widget,
body.gk-omhulsel-pagina #stcm-widget,
body.gk-omhulsel-pagina [class*="stcm-"] { display: none !important; }

/* Zonder zijbalk mag de rechterkolom de hele breedte hebben. */
body.gk-omhulsel-pagina #right_container {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* De aangeleverde inhoud zelf. Bewust karig: hoe minder wij hier voorschrijven,
   hoe minder er botst met de opmaak die de bron zelf meestuurt. Alleen een
   leesbare maat, een leesbare breedte en de letters van de site. */
.gk-omhulsel {
  /* Geen max-width en geen marges: het accountgedeelte krijgt de volle breedte
     van de pagina (Ries, 25-08-2026). De leesbare breedte zit waar hij hoort —
     op de tekstblokken zelf, niet op de bak eromheen. */
  margin: 0 0 48px;
  padding: 0;
  color: var(--gk-inkt, #1c1c1c);
  font-size: 15px;
  line-height: 1.6;
}
/* De voorbeeldinhoud — die staat er alleen als GK_ACCOUNT_BRON leeg is — zou
   zonder dit tegen de schermrand plakken. Een echte accountpagina brengt zijn
   eigen marges mee en heeft dit niet nodig. */
.gk-omhulsel > h2,
.gk-omhulsel > h3,
.gk-omhulsel > p,
.gk-omhulsel > form,
.gk-omhulsel > label { padding-inline: 16px; }
.gk-omhulsel h2 { font-size: 20px; margin: 26px 0 10px; }
/* h3 volgt het origineel: 24px, geen margin, line-height 24px. Onze eerdere
   override (17px + margin) maakte het rechtermenu op de accountpagina's anders dan
   bij hen (Robbert, 28-08). `#show_totaal_veld` krijgt dezelfde regelhoogte. */
.gk-omhulsel h3 { font-size: 24px; margin: 0; line-height: 24px; }
.gk-omhulsel #show_totaal_veld { line-height: 24px; }
.gk-omhulsel p { margin: 0 0 14px; }
/* Onze accentkleur op links in de schil — maar NIET op knoppen. Een
   `<a class="button">` is een knop met een eigen tekstkleur (hun account-CSS
   zet die op wit voor de groene knoppen). Onze `.gk-omhulsel a` was specifieker
   dan hun `.button`, dus onze accentkleur won en de knopteksten werden blauw op
   groen — slecht leesbaar (Ries, 27-08-2026: *"op het origineel zijn de teksten
   in de buttons wit"*). Met `:not(.button)` blijven knoppen van hén, links van
   ons. */
.gk-omhulsel a:not(.button) { color: var(--gk-accent, #4e7ca5); }

/* Géén eigen opmaak op formulieren, knoppen of velden.

   Dat stond hier eerst wel — 44 px hoge invoervelden en een blauwe knop — en
   dat was goed zolang er kale HTML binnenkwam. Sinds tools/accountproxy.py hun
   echte pagina's ophaalt brengen die hun eigen stylesheets mee, en dan vechten
   de twee: hun veld kreeg een rand van hen én een breedte van ons, met een
   dubbel kader om het e-mailveld tot gevolg. Wie zijn opmaak meebrengt, houdt
   hem. Alleen wat de schil zelf nodig heeft staat hieronder. */

/* Een tabel uit een vreemde pagina is zelden smal genoeg voor een telefoon.
   Laat hem op een telefoon schuiven in plaats van de pagina breed te maken.
   LET OP: `display: block` op de tabel breekt de tabel-layout — `thead`/`tbody`
   verliezen dan hun tabel-context en rekken niet mee tot 100% (Robbert zag dat op
   #shopcarttable, 28-08). Daarom houden we de tabel op een gewoon scherm een échte
   tabel, en laten we hem alléén op smal scherm schuiven, waar het echt nodig is. */
.gk-omhulsel table { width: 100%; border-collapse: collapse; }
@media (max-width: 640px) {
  .gk-omhulsel table { display: block; overflow-x: auto; }
}
.gk-omhulsel th, .gk-omhulsel td { padding: 8px 10px; border-bottom: 1px solid #eceff1; text-align: left; }
/* Hun eigen tabellen brengen hun opmaak mee; onze generieke th-opmaak (padding +
   onderrand) botst daarmee. Bij de winkelwagen-tabel horen de koppen geen padding
   en geen onderrand te hebben (Robbert, 28-08). */
.gk-omhulsel #shopcarttable th { padding: 0; border-bottom: none; }
/* De prijskolom uitlijnen: de kop "Prijs", de bedragen en het totaal moeten
   dezelfde rechterrand delen (Ries, 28-08: *"lijn deze even, prijs padding right
   30px ofzo"*). Kop stond op padding 0 (flush rechts), de bedragen op 10px — die
   liepen dus niet gelijk. Nu allebei 30px rechts, rechts uitgelijnd. */
.gk-omhulsel #shopcarttable th:last-child,
.gk-omhulsel #shopcarttable td:last-child { text-align: right; padding-right: 30px; }
.gk-omhulsel #show_totaal_veld { text-align: right; padding-right: 30px; }

/* Beeld uit de bron mag nooit breder zijn dan de kolom. */
.gk-omhulsel img { max-width: 100%; height: auto; }

/* Het kader waarin het accountgedeelte draait. Hun pagina blijft van hen; wij
   zetten er alleen onze kopbalk en voettekst omheen.

   De uitleg eronder is geen versiering maar een vangnet: kan de browser het
   kader niet laden (omdat frame-ancestors ons niet toestaat), dan blijft het
   kader doorzichtig en lees je wat eraan schort. Laadt het wel, dan ligt het
   kader er ondoorzichtig overheen en zie je die tekst nooit. */
.gk-kader {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 86vh;
}

/* Zodra de andere kant zijn hoogte doorgeeft telt alleen die nog. */
.gk-kader iframe.gk-op-maat { min-height: 0; }
.gk-kader iframe {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Zolang de andere kant zijn hoogte niet doorgeeft vult het kader het scherm.
     Dat is beter dan een vast getal: geen half afgesneden pagina, en geen groot
     leeg vlak onder een korte pagina. Geeft hij hem wél door (zie het script in
     tools/omhulsel.py), dan zet dat script de echte hoogte en groeit het kader
     mee met de inhoud — dan is er binnenin niets meer te scrollen. */
  min-height: 86vh;
  border: 0;
  /* Doorzichtig, zodat de uitleg eronder te lezen is zolang de browser het
     kader weigert. Laadt hun pagina wel, dan schildert die zijn eigen
     achtergrond en zie je die uitleg nooit. */
  background: transparent;
  display: block;
}
/* De uitleg is tekst en houdt daarom wél een leesbare regellengte. */
.gk-kader-uitleg {
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 4px 16px 24px;
  color: var(--gk-zacht, #6b7378);
  font-size: 15px;
  line-height: 1.6;
}
.gk-kader-uitleg h2 { margin: 0 0 12px; font-size: 19px; color: var(--gk-inkt, #1c1c1c); }
.gk-kader-uitleg ul { margin: 0 0 14px; padding-left: 20px; }
.gk-kader-uitleg li { margin: 0 0 8px; }
.gk-kader-uitleg code {
  background: var(--gk-accent-vlak, #f0f6fb);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  word-break: break-all;
}

/* Het balletje met het aantal favorieten, naast "Favorieten" in hun accountmenu.
   Zelfde kleur en zelfde opveren als het balletje in de kopbalk (hartje.css),
   maar niet over een icoon heen: hier staat het gewoon achter de tekst. */
.gk-menu-teller {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  margin-left: 8px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gk-hart, #eb5e5e);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  vertical-align: middle;
  /* Bij nul is hij er niet: scale(0) in plaats van display:none, zodat hij
     vanuit het niets opveert zodra je je eerste kaartje bewaart. */
  transform: scale(0);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.gk-menu-teller.gk-erop { transform: scale(1); }
.gk-menu-teller.gk-tel-op { animation: gk-menu-tel .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gk-menu-tel {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gk-menu-teller { transition: none; }
  .gk-menu-teller.gk-tel-op { animation: none; }
}

/* wachtwoord */
/* De sterk-wachtwoordhulp bij registreren.
   Ries, 26-08-2026: *"ik wil bij account aanmaken dat je voor sterk wachtwoord
   kan kiezen dus niet zelf iets hoeft te verzinnen, dat zie ik heel vaak bij
   moderne sites."*
   Kleuren komen uit basis.css, zodat dit meebeweegt met de rest. */

.gk-ww {
  margin: 6px 0 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* De knop leunt tegen de maat van de andere bedieningen aan (--gk-knop-hoog),
   maar mag iets hoger: hij staat onder een invoerveld en niet in een balk. */
.gk-ww-knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--gk-accent);
  border-radius: var(--gk-knop-rond, 8px);
  background: var(--gk-accent-vlak);
  color: var(--gk-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.gk-ww-knop:hover { background: #e4eff8; }
.gk-ww-knop:active { transform: translateY(1px); }
.gk-ww-knop svg { width: 15px; height: 15px; flex: none; }


/* Het voorstel zelf: groot genoeg om over te tikken, en met de tekens uit
   elkaar zodat een 1 en een l te onderscheiden zijn — al zitten die er niet in. */
.gk-ww-voorstel {
  flex: 1 1 100%;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px dashed var(--gk-accent);
  border-radius: var(--gk-knop-rond, 8px);
  background: var(--gk-accent-vlak);
}
.gk-ww-voorstel.gk-erop { display: flex; }
.gk-ww-tekst {
  flex: 1 1 auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--gk-inkt);
  word-break: break-all;
}
.gk-ww-kopieer {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--gk-accent);
  border-radius: 6px;
  background: #fff;
  color: var(--gk-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.gk-ww-kopieer svg { width: 14px; height: 14px; }

.gk-ww-uitleg {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  color: var(--gk-zacht);
}

/* De sterktebalk. Vier stappen, want meer schijnnauwkeurigheid dan dat is het
   niet. Kleur alléén is geen mededeling — er staat ook een woord bij. */
.gk-ww-meter {
  flex: 1 1 100%;
  display: none;
  align-items: center;
  gap: 8px;
}
.gk-ww-meter.gk-erop { display: flex; }
.gk-ww-balk {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  background: #e6e9ec;
  overflow: hidden;
}
.gk-ww-balk i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--gk-rust);
  transition: width 180ms ease, background 180ms ease;
}
.gk-ww-woord { flex: none; font-size: 12px; color: var(--gk-zacht); }

.gk-ww-1 i { width: 25%; background: var(--gk-hart); }
.gk-ww-2 i { width: 50%; background: #e0a13c; }
.gk-ww-3 i { width: 75%; background: var(--gk-accent); }
.gk-ww-4 i { width: 100%; background: #3f9d63; }

@media (max-width: 480px) {
  .gk-ww-knop { flex: 1 1 auto; justify-content: center; }
}

/* hartje */
/* De favorieten-ingang in de kopbalk.
 *
 * Deze regels hingen tot 01-09-2026 aan `#contact.gk-fav-nav`, omdat dit item
 * toen letterlijk de plaats van "Contact" innam. Sinds Favorieten ernaast staat
 * in plaats van eroverheen (zie serve.py:voeg_favnav_toe) heeft het een eigen id,
 * en toen viel de opmaak weg: het item stond er wel maar was 0 bij 0 pixels.
 * Daarom nu aan de class en niet aan een id — dan overleeft het de volgende keer
 * dat er iets aan die kopbalk verandert.
 */
/* Het favorieten-hartje: hoe het eruitziet en hoe het beweegt.
   Eén bron voor alle plekken waar een hartje staat — de rubriekpagina, de
   kaartpagina en de favorietenpagina. Het gedrag staat in hartje.js. */

/* Zelfde bewegingslijn als het favorieten-sterretje in Sjoppy: eerst schieten,
   dan drie hele slagen om de as, dan zakken en landen. */
@keyframes gk-hartpling {
  0%   { transform: translateY(0)     rotateY(0deg)    scale(1); }
  18%  { transform: translateY(-26px) rotateY(240deg)  scale(1.35); }
  38%  { transform: translateY(-42px) rotateY(540deg)  scale(1.4); }
  52%  { transform: translateY(-44px) rotateY(720deg)  scale(1.35); }
  78%  { transform: translateY(-8px)  rotateY(1080deg) scale(1.1); }
  90%  { transform: translateY(3px)   rotateY(1080deg) scale(0.9); }
  100% { transform: translateY(0)     rotateY(1080deg) scale(1); }
}
.favoriet_login { cursor: pointer; transition: color .18s ease; }
/* De bron zet het hartje in de lijst op z-index 2. Dat is genoeg tot er bij
   hover een kader of overlay over de kaart komt; dan valt het hartje eronder.
   Het is de bovenste laag van een kaartje, dus dat hoort het ook te zijn. */
.card .favBtn, .cards_list .favBtn { z-index: 20 !important; }
.favoriet_login.gk-vlucht {
  animation: gk-hartpling .85s cubic-bezier(0.22,0.9,0.3,1);
  transform-origin: center;
  will-change: transform;
}
/* Gevuld en rood zodra hij favoriet is. Font Awesome vult op font-weight 900;
   dat werkt ongeacht welke stijlvariant de kit meelevert. */
.favoriet_login.gk-favoriet {
  color: var(--gk-hart, #eb5e5e);
  font-weight: 900;
  -webkit-text-stroke: 0;
}
@media (prefers-reduced-motion: reduce) {
  .favoriet_login.gk-vlucht { animation: none; }
}

/* De vlucht gebeurt in een eigen laag, rechtstreeks aan <body> gehangen.
   Waarom: de menubalk (`#menu_bar`) is een kind van `.mm-page` met z-index 3,
   en alle pagina-inhoud zit in `#main.wrapper` met z-index 2. Alles binnen die
   wrapper valt dus onder het menu, hoe hoog je de z-index van het hartje zelf
   ook zet — een stapelcontext laat zich niet van binnenuit overrulen. Buiten
   die wrapper kan het wel. */
/* Niets meer dan een doosje op de goede plek. Kleur en vulling komen van
   `.favoriet_login.gk-favoriet` hierboven — dezelfde regel die het hartje op
   zijn eigen plek rood maakt. Maat en regelhoogte neemt het scriptje over van
   het origineel, zodat de kloon precies op dezelfde plek staat en de vlucht
   niet met een sprongetje begint. */
.gk-vluchtlaag {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  display: block;
}

/* "Contact" in de kopbalk wees naar dezelfde pagina als "Klantenservice"; die
   plek is nu van de favorieten. Het balletje telt mee zodra je iets aanklikt. */
.gk-fav-nav .gk-hart-wrap { position: relative; display: inline-block; }
/* Klein genoeg om het hartje heel te laten: het balletje hoort een aantekening
   te zijn, geen tweede icoon. */
.gk-fav-nav .gk-fav-teller {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--gk-hart, #eb5e5e);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 1.5px #fff;
  transform: scale(0);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.gk-fav-nav .gk-fav-teller.gk-erop { transform: scale(1); }
/* Kort opveren bij elke wijziging, zodat je ziet dát er iets bijkwam. */
.gk-fav-nav .gk-fav-teller.gk-tel-op { animation: gk-tel .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes gk-tel {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
/* Het hartje in de kopbalk blijft de omlijnde vorm van een niet-gekozen kaart —
   alleen het balletje is rood. */
/* "far" is dezelfde variant als het poppetje van Inloggen en het karretje van
   Winkelwagen; met fa-light was het hartje merkbaar dunner dan zijn buren. */
.gk-fav-nav .gk-hart-icoon { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .gk-fav-nav .gk-fav-teller { transition: none; }
  .gk-fav-nav .gk-fav-teller.gk-tel-op { animation: none; }
}

/* ── Het hartje in de mobiele kopbalk ────────────────────────────────────
   Op een telefoon toont de kopbalk drie iconen: zoeken, account en
   winkelwagen. Het favorietentegeltje stond daar wél in de pagina maar op
   0 bij 0 — hun mobiele opmaak verbergt alles wat in zo'n <a> een <span> is,
   en ons hartje zit nu juist in een span (die het balletje moet kunnen
   positioneren). Ries, 26-08-2026: *"op mobile mijn favorieten in de header
   als icoon met notificatie belletje erbij."*

   Hieronder krijgt het tegeltje dezelfde maat en kleur als de andere drie:
   24 px, #555, en de tekst eronder blijft verborgen net als bij hen. */
@media (max-width: 767px) {
  li.gk-fav-nav > a > .gk-hart-wrap {
    display: inline-block !important;
    position: relative;
    line-height: 24px;
  }
  /* Het woord "Favorieten" blijft weg: de andere drie tonen ook alleen hun
     icoon. De tekst blijft wel in de pagina staan voor schermlezers. */
  li.gk-fav-nav > a > span:not(.gk-hart-wrap) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  li.gk-fav-nav .gk-hart-icoon {
    display: inline-block !important;
    font-size: 24px;
    line-height: 24px;
    color: #555;
  }
  li.gk-fav-nav .gk-fav-teller {
    display: block !important;
    top: -4px;
    right: -8px;
  }
}

/* ── Het tegeltje zichtbaar houden op de grote kopbalk ───────────────────
   Sinds 01-09-2026 staat Favorieten náást Contact in plaats van eroverheen, en
   heeft het dus een eigen id. Toen bleek dat het item op desktop 0 bij 0 werd:
   het thema verbergt de <span>'s in zo'n kopbalk-link, en toen ons tegeltje nog
   letterlijk #contact heette liftte het mee op de regels die dáárvoor gemaakt
   zijn. Met een eigen id valt die dekking weg en blijft er niets over om breed
   te zijn — het hartje en het woord zitten allebei in een span.

   Daarom hier expliciet, en aan de class zodat het niet weer omvalt als er iets
   aan de kopbalk verandert. Alleen boven de mobiele grens; daaronder geldt het
   blok hierboven, waar het woord juist wél verborgen hoort te blijven. */
@media (min-width: 768px) {
  li.gk-fav-nav > a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  li.gk-fav-nav > a > .gk-hart-wrap {
    display: inline-block !important;
    position: relative;
    line-height: 1;
  }
  li.gk-fav-nav > a > span:not(.gk-hart-wrap) {
    display: inline !important;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
  li.gk-fav-nav .gk-hart-icoon { display: inline-block !important; }
  /* Het balletje zit ín .gk-hart-wrap en is dus géén direct kind van de <a>.
     De regel hierboven redt alleen die directe kinderen, dus zonder deze regel
     bleef het verborgen: juiste tekst, juiste kleur, display none. Robbert zag
     dat meteen ("het rode balletje is nu wel verdwenen"). Onder de mobiele grens
     staat dezelfde regel al. */
  li.gk-fav-nav .gk-fav-teller { display: block !important; }
}

/* kopbalk-stand */
/* Zie assets/kopbalk-stand.js. Het balletje volgt bewust hetzelfde patroon als
   de favorietenteller: één manier om "hier staat iets voor jou" te zeggen. */
/* Zelfde opbouw en dezelfde maten als de favorietenteller in hartje.css. Dat is
   geen toeval maar het punt: twee tellers in één kopbalk die er anders uitzien
   leren een bezoeker geen patroon aan. */
.gk-stand-nav .gk-wagen-wrap { position: relative; display: inline-block; }
.gk-stand-nav .gk-stand-teller {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--gk-hart, #eb5e5e);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transform: scale(0);
  transition: transform 140ms cubic-bezier(.34, 1.56, .64, 1);
}
.gk-stand-nav .gk-stand-teller.gk-erop { transform: scale(1); }
.gk-stand-nav .gk-stand-teller.gk-tel-op { animation: gk-tel .4s cubic-bezier(.34, 1.56, .64, 1); }

@media (prefers-reduced-motion: reduce) {
  .gk-stand-nav .gk-stand-teller { transition: none; }
  .gk-stand-nav .gk-stand-teller.gk-tel-op { animation: none; }
}

/* Ingelogd is het poppetje blauw. Geen groen stipje ernaast.

   Geschiedenis, want dit is twee keer heen en weer gegaan. Ik zette er eerst een
   groen bolletje bij; Ries koos op 27-08-2026 voor het merkblauw #00ade7 uit hun
   eigen palet en het bolletje ging eruit. Bij het opzetten van de repo op 03-09 is
   die blauwe regel verdwenen en stond het groene bolletje er weer — niemand zag het
   tot Ries er 09-09 over viel: *"die was blauw hoor maar nu weer met een groen
   stipje."* Vandaar dat het hier staat, in git, met de reden erbij.

   Twee selectoren: uitgelogd heet de tegel #menu_inloggen, en zodra het echte
   account-menu van hun kant erin geschoven is heet hij #account
   (tools/kopbalkserver.py zet daar dezelfde klasse gk-ingelogd op). */
#menu_inloggen.gk-ingelogd > a > i,
#account.gk-ingelogd > a > i {
  /* Gevuld blauw, niet alleen de omtrek. Ries, 09-09: "ingekleurd blauw, niet
     de randen alleen."

     Waarom dit een plaatje is en geen icoonlettertype: het lettertype op deze
     site is een Font Awesome-kit, en die bevat alleen de tekens die de site
     gebruikt. Uitgelogd is dat `far fa-user`, de dunne lijnversie. De gevulde
     variant zit er dus niet in — zet je het gewicht op 900, dan krijg je een
     leeg vierkantje met een kruis. Gemeten, niet gegokt: van far/fas/fal/fad
     fa-user rendert alleen de far-versie en de duotone. Vandaar dat het
     poppetje hier als tekening in de stylesheet staat: dan hangt het nergens
     van af en kan het niet stilletjes verdwijnen. */
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20fill%3D%27%2300ade7%27%20d%3D%27M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z%27%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* ── De winkelwagen in de mobiele kopbalk ──────────────────────────────────
   Zelfde probleem als bij het hartje (zie hartje.css): hun mobiele opmaak
   verbergt élke <span> binnen zo'n kopbalk-<a>, en onze wagen-wrap — die het
   balletje positioneert — is een span. Ingelogd met iets in de mand verdween
   daardoor de hele winkelwagen op mobiel, terwijl favorieten en account wél
   bleven staan. Ries, 26-08-2026: *"op mobiel valt de winkelwagen weg als ik
   ingelogd ben."* Dezelfde oplossing als het hartje: de wrap en zijn icoon
   expliciet terugzetten, de losse tekst en pijl blijven weg. */
@media (max-width: 767px) {
  #winkelwagen.gk-stand-nav > a > .gk-wagen-wrap {
    display: inline-block !important;
    position: relative;
    line-height: 24px;
  }
  #winkelwagen.gk-stand-nav > a > span:not(.gk-wagen-wrap),
  #winkelwagen.gk-stand-nav > a > pijl {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #winkelwagen.gk-stand-nav .gk-wagen-wrap > i {
    display: inline-block !important;
    font-size: 24px;
    line-height: 24px;
    color: #555;
  }
  #winkelwagen.gk-stand-nav .gk-stand-teller {
    display: block !important;
    top: -4px;
    right: -8px;
  }
}

/* 05-09-2026 — de kopbalk liep op smalle schermen 5px buiten het scherm, waardoor
   élke pagina zijwaarts te scrollen was (gemeten: 380px inhoud op een scherm van
   375px). Sinds Favorieten ernaast staat zijn het vijf iconen; met 10px ertussen
   past dat op een iPhone net niet. Alleen de tussenruimte krimpt — de knoppen
   zelf blijven even groot, dus even goed te raken.
   Let op: het thema zet deze marges met #header_row ervoor, dus die selector
   moet je hier ook gebruiken — een losse class verliest het. */
@media (max-width: 420px) {
  #header_row .right .lower li { margin-left: 7px; }
  #header_row .right .lower li#winkelwagen { margin-right: 8px; }
}

/* kopbalk-cyclus */
/* De blauwe balk boven de kopbalk (.payoffs): vier regels — collectie, proefdruk,
   verzendkosten, reviewscore. Het thema laat ze onder 992px één voor één cyclen
   (topCycleFirst t/m topCycleFourth, 16 s) en zet ze vanaf 992px naast elkaar.
   Maar naast elkaar passen ze pas vanaf 1141px (gemeten 10-09-2026: de vier
   regels zijn samen mét marges 1141px breed). Tussen 992 en 1140 viel de
   reviewregel daardoor op een tweede regel, half buiten de balk. Ries, 10-09:
   "ik denk dat je eigenlijk van 1140 al moet gaan animeren".

   Dus: tot 1160px laten we ze cyclen, precies zoals onder 992. De 20px speling
   boven de gemeten 1141 is voor een ander lettertype of een reviewaantal met
   een cijfer meer — bij 0px marge klapt hij in een andere browser alsnog om.
   Hoogte en padding van de balk blijven die van het thema (40px), zodat de
   rest van de kopbalk niet verschuift. De keyframes komen uit het thema zelf. */
@media only screen and (min-width: 992px) and (max-width: 1159px) {
  .payoffs ul li { position: absolute; margin: 0; }
  .payoffs ul li:first-child  { animation: topCycleFirst  16s linear infinite; }
  .payoffs ul li:nth-child(2) { animation: topCycleSecond 16s linear infinite; }
  .payoffs ul li:nth-child(3) { animation: topCycleThird  16s linear infinite; }
  .payoffs ul li:nth-child(4) { animation: topCycleFourth 16s linear infinite; }
}

/* nav-actief */
/* Laten zien in welk deel van de site je zit. */

/* De veer is uitgerekend uit een gedempte harmonische oscillator (stijfheid 210,
   demping 17) en als linear() in CSS gezet. Een cubic-bezier kan maar één bocht;
   deze curve schiet even door en veert terug, zoals een echt tabblad dat op zijn
   plek valt. Oudere browsers vallen terug op een gewone bezier. */
:root {
  --gk-veer: cubic-bezier(.34,1.56,.64,1);
  --gk-veer-duur: 813ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --gk-veer: linear(0.0, 0.0157, 0.0583, 0.1212, 0.1986, 0.2853, 0.3768, 0.4696, 0.5604, 0.6469, 0.7274, 0.8005, 0.8655, 0.9219, 0.9698, 1.0093, 1.0408, 1.065, 1.0825, 1.0941, 1.1006, 1.1028, 1.1014, 1.0972, 1.0909, 1.083, 1.0742, 1.0648, 1.0553, 1.0459, 1.037, 1.0287, 1.0211, 1.0143, 1.0085, 1.0035, 0.9993, 0.996, 0.9935, 0.9916, 0.9904, 0.9897, 0.9894, 0.9896, 0.99, 0.9906, 0.9914, 0.9923, 0.9933, 0.9942, 0.9952, 0.9961, 0.997, 0.9978, 0.9985, 0.9991, 0.9996, 1.0, 1.0004, 1.0007, 1.0008, 1.001, 1.0011, 1.0011, 1); }
}

.top-level-link > a {
  position: relative;
  display: inline-block;
  transition: color .2s ease, transform .26s var(--gk-veer);
  transform-origin: center bottom;
}
/* De site onderstreept links bij hover; hier vertelt de streep al waar je bent,
   en twee lijnen onder elkaar is er één te veel. */
.top-level-link > a:hover,
.top-level-link > a:focus { text-decoration: none !important; }
/* Aanwijzen: het woord groeit een tikje en neemt vast de kleur van de keuze aan. */
.top-level-link > a:hover { color: var(--gk-accent, #4e7ca5); transform: scale(1.06); }
.top-level-link.gk-actief > a { color: var(--gk-accent, #4e7ca5); font-weight: 600; }

/* De streep loopt precies zo breed als het woord, niet zo breed als het tabblad
   met zijn opvulling — anders zweeft er links en rechts een stuk lijn naast de
   letters. */
.gk-nav-streep {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gk-logo, #77bdfa);
  opacity: 0;
  transform: translateX(0);
  width: 0;
  transition: transform var(--gk-veer-duur) var(--gk-veer),
              width var(--gk-veer-duur) var(--gk-veer),
              opacity .2s ease;
  pointer-events: none;
  z-index: 2;
}
.gk-nav-streep.gk-zichtbaar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gk-nav-streep { transition: opacity .2s ease; }
  .top-level-link > a { transition: color .2s ease; }
  .top-level-link > a:hover { transform: none; }
}
/* In het uitgeklapte mobiele menu hetzelfde verhaal, maar dan een streep aan de
   zijkant — daar staan de items onder elkaar. */
.mm-listitem.gk-actief > a,
.mm-listitem.gk-actief > .mm-listitem__text {
  color: var(--gk-accent, #4e7ca5);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gk-logo, #77bdfa);
}

/* Het hele menu in dezelfde tint. De site gebruikt #669999 als accent — dat is
   een groenige kleur die nergens in hun logo voorkomt. Binnen de kopbalk en het
   menu wordt dat het blauw uit het logo; buiten het menu blijft alles zoals het
   was, want dat viel niet onder de vraag. Tekst krijgt de donkere variant, want
   var(--gk-logo, #77bdfa) haalt op wit maar 2,0:1. */
#header_row .center form button { color: var(--gk-accent, #4e7ca5) !important; }
#header_row .right .lower li .list-item:hover,
#header_row .right .lower li .list-item:hover i,
#header_row .right .lower li .list-item.active { color: var(--gk-accent, #4e7ca5) !important; }
#header_row .right .lower li .list-item span.aantal { background-color: var(--gk-logo, #77bdfa) !important; }
#header_row .sub-menu-block .body .count,
#header_row .sub-menu-block .body .left.totaal span { color: var(--gk-accent, #4e7ca5) !important; }
#header_menu .icon a:hover { border-bottom-color: var(--gk-logo, #77bdfa) !important; }

/* voettekst */
/* Swipe replaces Toppop in the bottom footer on mobile and desktop.
   The ordinary link inherits the typography and colour of its neighbours. */
.gk-voet-swipen { display: inline; }