/* 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; }
}

/* Het bolletje dat zegt dat je binnen bent. Klein en rustig: de kopbalk hoort
   er hetzelfde uit te zien, alleen dan kloppend. */
#menu_inloggen.gk-ingelogd > a { position: relative; }
#menu_inloggen.gk-ingelogd > a > i:first-of-type::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3f9d63;
  box-shadow: 0 0 0 2px #fff;
}

/* ── 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;
  }
}