/** Shopify CDN: Minification failed

Line 2334:2 All "@import" rules must come first

**/
/* hej-acc-collection-grid — de opmaak van het collectiegrid: kaarten, filterpaneel,
   sorteren, de meescrollende lokale navigatie en de mobiele bottom sheet.

   Woordelijk hetzelfde als het inline <style>-blok dat hier stond, met twee uitzonderingen:
   de @import van het lettergezin staat nog inline in de sectie (als externe stylesheet zou dat een
   geketende import worden en het lettertype later binnenkomen), en de Liquid-commentaarblokken zijn
   CSS-commentaar geworden, want Liquid draait niet in een .css-bestand.

   Er was niets te herschrijven: de opmaak was al op klassen gescoped (.hej-acg en verder), niet op
   het sectienummer, en het blok bevatte nul Liquid buiten commentaar. De kleurvariabelen komen uit
   een style-attribuut op het wortelelement zelf.

   Volgorde en timing: dit bestand wordt geladen op precies de plek waar het blok stond, en direct
   erna staat het gridscript als gewone <script src> zonder defer. Een browser voert zo'n script pas
   uit nadat alle voorgaande stylesheets geladen zijn, dus de opmaak is binnen vóór het script en
   ruim vóór DOMContentLoaded, waar de FOUC-gate in layout/theme.liquid op wacht. Zie
   .ai/knowledge/header-en-pagina-fouc-prebody-cover.md. */

  .hej-acg {
    background: var(--acg-page-bg, var(--kleur-vlak, #f5f5f7));
    color: var(--kleur-tekst, #1d1d1f);
    font-family: -apple-system, 'SF Pro Display', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* Gebruikerswens (2026-08-26): "ik wil exact dat je die blur en transparantie... toepast op...
    de secundaire sticky bar dus de refurbished laptops. dat ze allemaal hetzelfde zijn" — zelfde
    achtergrondkleur/blur-waarden als de desktop .hej-dnav-row.is-stuck-glaseffect en de nieuwe
    mobiele .lvh-header.is-scrolled-override (beide assets/header.css), i.p.v. de eigen, net iets
    andere waarden (was rgba(255,255,255,.92) + blur(20px) zonder saturate) die deze balk eerder had.

    Herzien 2026-09-10 (gebruikerswens: exact dezelfde aanpak als de sticky balk van
    /pages/zakelijk-kopen, sections/hej-zakelijk-sticky.liquid, maar wit i.p.v. zwart): effen wit in
    rust (blendt weg tegen de witte pagina), pas het matglaseffect hierboven zodra de balk ECHT
    vastzit (.is-vast, gezet door assets/hej-acg-local-nav.js op basis van
    getBoundingClientRect().top<=0 — niet scrollY>4 zoals .hej-dnav-row.is-stuck hierboven: dat gaf
    al bij de eerste scrollpixels een flits, ruim voordat de balk zelf de bovenkant raakte). Eerdere
    versie las hier de echte --acg-page-bg van .hej-acg uit via JS; overbodige omweg, gewoon effen
    wit zoals de zakelijke balk effen zwart is. */
  .hej-acg-local-nav {
    position: sticky;
    top: 0;
    z-index: var(--laag-paginanav, 31);
    width: 100%;
    background: var(--kleur-wit, #ffffff);
    border-bottom: 1px solid var(--kleur-lijn, #d2d2d7);
    transition: background .4s ease;
  }
  .hej-acg-local-nav.is-vast {
    background: rgba(250, 250, 252, .88);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hej-acg-local-nav.is-vast { background: rgba(250, 250, 252, .99); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hej-acg-local-nav { transition: none; }
  }
  /* .hej-acg-local-nav blijft sticky, .hej-dnav-row hieronder NIET (scrollt weg, alleen op pagina's met deze local-nav). position:relative i.p.v. static: .hej-mega/.lvh-search zijn position:absolute kinderen van .hej-dnav-row (assets/header.css) en hebben een POSITIONED voorouder nodig — static breekt dat, relative niet (geen visuele verschuiving). */
  body:has(.hej-acg-local-nav) .hej-dnav-row {
    position: relative;
  }
  body:has(.hej-acg-local-nav) #hej-header .lvh-header {
    position: absolute;
  }
  /* BUGFIX (feedback 2026-08-26: "als ik scrol wordt die rij van laptop kopen heel ff transparant") —
     header.liquid's scroll-listener zet .is-stuck puur op basis van scrollY>4, zonder te weten dat
     .hej-dnav-row op deze pagina niet meer sticky is (zie hierboven). .is-stuck's eigen glaseffect
     (assets/header.css: doorschijnende achtergrond + blur) bleef daardoor ook hier toegepast, wat een
     zichtbare transparante flits gaf terwijl de rij normaal wegscrollt. Neutraliseren i.p.v. de
     gedeelde headerbestanden aan te passen (die vallen buiten deze taak/lock): terugzetten naar de
     normale, ondoorzichtige achtergrond, ongeacht .is-stuck. */
  body:has(.hej-acg-local-nav) .hej-dnav-row.is-stuck {
    background: var(--header-background);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hej-acg-local-nav-inner {
    width: min(calc(100% - 48px), 1200px);
    min-height: 56px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 56px);
  }
  /* 2026-08-26: titel 21px/600 (was 14px/400 + translateY(8px)-hack die de tekst voorbij de onderrand duwde) t.o.v. kleinere tabs 12px/400, echt verticaal gecentreerd — vergeleken met apple.com/mac-mini's productnavbalk. */
  .hej-acg-local-nav-title {
    position: relative;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--kleur-zwart, #000);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    text-decoration: none;
    white-space: nowrap;
  }
  .hej-acg-local-nav-toggle { display: none; }
  /* Feedback 2026-09-04: "op 14 inch staan alle dockingstations en
    dockingstation-accessoires te dicht op elkaar" — bij "Dockingstation
    accessoires"/"Dockingstationgids" (langere labels dan bij andere
    collecties, bv. "Accessoires"/"Monitorgids") past de balk krapper
    binnen de max-1200px-container, dus juist híer valt het extra op. Beide
    gap-clamps hieronder/hierboven verlaagd (max 72->56 / 34->24) i.p.v.
    lettergrootte kleiner (slechter leesbaar + kleiner tapdoel). */
  .hej-acg-local-nav-links {
    min-width: 0;
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(18px, 1.6vw, 24px);
  }
  .hej-acg-local-nav-links-inner { display: contents; }
  .hej-acg-local-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    color: var(--kleur-zwart, #000);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease;
  }
  .hej-acg-local-nav-link:hover,
  .hej-acg-local-nav-link:focus-visible { color: var(--kleur-zwart, #000); }
  .hej-acg-local-nav-link:focus-visible {
    outline: 2px solid var(--kleur-blauw, #0071e3);
    outline-offset: 3px;
    border-radius: 2px;
  }
  /* Streep matcht nu de eigen tekstbreedte (width:100% van de al-content-gesized
    inline-flex-titel/link, i.p.v. een vaste max-width die bij een andere tekstlengte
    niet meer klopte) en is dunner (2px), dichter bij hoe apple.com/nl/mac-mini/'s
    actieve-tab-lijn oogt qua verhouding — kleur blijft ons eigen merkgroen. De eerdere
    translateY(8px)-compensatie op de tekst is bij de bron verwijderd (zie titel/link
    hierboven), dus geen tegengestelde transform meer nodig hier. */
  .hej-acg-local-nav-link.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--kleur-groen, #20be72);
  }
  .hej-acg-local-nav-title.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--kleur-groen, #20be72);
  }
  @media (max-width: 900px) {
    .hej-acg-local-nav-inner {
      width: 100%;
      min-height: 50px;
      padding-left: 24px;
      gap: 28px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .hej-acg-local-nav-inner::-webkit-scrollbar { display: none; }
    .hej-acg-local-nav-links {
      flex: 0 0 auto;
      gap: 26px;
    }
  }
  /* Accordeon-drempel verlaagd 820->600px (iPad Mini moet de inline rij zien, niet de accordeon); JS-drempel in alignLocalNav() staat ook op 600. */
  @media (max-width: 600px) {
    .hej-acg-local-nav {
      background: transparent;
      border-bottom-color: transparent;
      color: var(--kleur-tekst, #1d1d1f);
      transition: background .42s cubic-bezier(.22,1,.36,1), border-color .42s ease, box-shadow .42s ease;
    }
    .hej-acg-local-nav.is-open {
      background: var(--menu-bg, var(--kleur-wit, #fff));
      border-bottom-color: var(--kleur-lijn, #d2d2d7);
      box-shadow: none;
    }
    .hej-acg-local-nav-inner {
      min-height: 54px;
      padding: 0 20px;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 0;
      overflow: visible;
      position: relative;
    }
    /* BUGFIX (feedback 2026-08-26: "als ik ergens op de balk klik refresht de pagina, dat moet
      alleen als ik exact klik op het hoofdwoordje") — deze titel is een grid-kind van
      `grid-template-columns: minmax(0,1fr) 36px` (regel hierboven) zonder eigen
      `justify-self`, dus stretchte hij (CSS Grid-standaardgedrag) over de VOLLEDIGE breedte van
      die 1fr-kolom, ver voorbij de zichtbare tekst. Omdat dit een `<a href>` is, was daardoor
      bijna de hele balk (alles links van de 36px-pijlkolom) klikbaar als link, ook de lege ruimte
      naast de tekst. `justify-self: start` beperkt de doos weer tot de content-breedte. */
    .hej-acg-local-nav-title {
      position: relative;
      justify-self: start;
      min-height: 54px;
      padding-left: 14px;
      align-self: auto;
      color: var(--kleur-tekst, #1d1d1f);
      font-size: 17px;
      transform: translateY(2px);
    }
    .hej-acg-local-nav-title.is-active::after { display: none; }
    .hej-acg-local-nav-title.is-active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 2px;
      height: 16px;
      border-radius: 2px;
      background: var(--acg-accent, var(--kleur-groen, #20be72));
      opacity: 0;
      transform: translateY(-50%) scaleY(.4);
      transition: opacity .22s ease, transform .38s cubic-bezier(.16,1,.3,1);
    }
    .hej-acg-local-nav.is-open .hej-acg-local-nav-title.is-active::before { opacity: 1; transform: translateY(-50%) scaleY(1); }
    .hej-acg-local-nav-toggle {
      width: 36px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--kleur-tekst, #1d1d1f);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
    }
    .hej-acg-local-nav-toggle svg { width: 20px; height: 20px; transition: transform .48s cubic-bezier(.22,1,.36,1); }
    .hej-acg-local-nav.is-open .hej-acg-local-nav-toggle svg { transform: rotate(180deg); }
    .hej-acg-local-nav-links {
      position: absolute;
      z-index: 2;
      top: 54px;
      left: -20px;
      right: -20px;
      width: auto;
      padding: 0;
      display: grid;
      grid-template-rows: 0fr;
      align-self: auto;
      align-items: stretch;
      justify-content: stretch;
      gap: 0;
      pointer-events: none;
      background: var(--menu-bg, var(--kleur-wit, #fff));
      transition: grid-template-rows .45s cubic-bezier(0,0,0.2,1);
    }
    .hej-acg-local-nav.is-open .hej-acg-local-nav-links {
      grid-template-rows: 1fr;
      pointer-events: auto;
      transition: grid-template-rows .35s cubic-bezier(.4,0,.6,1);
    }
    .hej-acg-local-nav-links-inner {
      width: 100%;
      min-height: 0;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      overflow: hidden;
      visibility: hidden;
      opacity: 0;
      transition: opacity .12s ease, visibility 0s .45s;
    }
    .hej-acg-local-nav.is-open .hej-acg-local-nav-links-inner { visibility: visible; opacity: 1; transition: opacity .16s ease .04s, visibility 0s; }
    body > .hej-acg-local-nav-backdrop {
      position: fixed;
      z-index: var(--laag-paginanav-waas, 30);
      top: 100dvh;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0,.07);
      -webkit-backdrop-filter: blur(20px) saturate(120%);
      backdrop-filter: blur(20px) saturate(120%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .3s ease, visibility 0s .3s, top .42s cubic-bezier(.22,1,.36,1);
    }
    body > .hej-acg-local-nav-backdrop.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity .3s ease, visibility 0s, top .42s cubic-bezier(.22,1,.36,1);
    }
    .hej-acg-local-nav-link {
      width: 100%;
      min-height: 30px;
      padding: 0 34px;
      box-sizing: border-box;
      align-self: auto;
      justify-content: flex-start;
      color: #515154;
      font-size: 13px;
      transform: none;
    }
    .hej-acg-local-nav-link:last-child { margin-bottom: 18px; }
    .hej-acg-local-nav-link:hover,
    .hej-acg-local-nav-link:focus-visible { color: var(--kleur-tekst, #1d1d1f); }
  }

  .hej-acg-cell.is-initial-hidden { display: none; }

  /* ── Paginakop (optioneel). Titel, tabs én raster delen dezelfde ingesloten
     containerbreedte (zelfde formule als de rest van de site, o.a. hej-acc-shelves.liquid
     en hej-laptop-vergelijking.liquid), zodat er altijd ademruimte links/rechts overblijft
     i.p.v. dat het blok tot de schermrand loopt (feedback 2026-08-04, Apple-referentie). ── */
  .hej-acg-hero {
    width: min(calc(100% - 48px), 1200px);
    margin: 0 auto;
    padding: clamp(40px, 7vw, 76px) 0 clamp(32px, 5.5vw, 64px);
    text-align: left;
  }
  .hej-acg-hero h1 {
    font-family: "Inter Tight", sans-serif;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.0;
    color: var(--kleur-tekst, #1d1d1f);
    margin: 0;
    text-wrap: balance;
  }
  @media (max-width: 1024px) {
    .hej-acg-hero h1 { font-size: 32px; }
  }
  .hej-acg-hero-sub { color: var(--kleur-tekst-zacht, #6e6e73); }
  .hej-acg-hero-intro { margin: 14px 0 0; max-width: 640px; font-size: 15px; line-height: 1.5; color: #4c4c4f; }
  .hej-acg-mobile-break { display: none; }
  @media (max-width: 600px) {
    .hej-acg-mobile-break { display: block; }
  }
  .hej-acg-desktop-break { display: block; }
  @media (max-width: 600px) {
    .hej-acg-desktop-break { display: none; }
  }

  /* ── Zoekbalk: zoekt live binnen de producten die al op déze pagina staan
     (geen losse zoekpagina/redirect), met een getypte placeholder die door de
     echte producttitels van deze collectie heen loopt (feedback 2026-08-04). ── */
  .hej-acg-search-bar {
    width: min(calc(100% - 48px), 1200px);
    margin: 0 auto;
    padding: 8px 0 0;
  }
  .hej-acg-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 420px;
    background: var(--kleur-wit, #ffffff);
    border-radius: 999px;
    padding: 0 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 10px rgba(0, 0, 0, .08);
  }
  .hej-acg-search-icon { width: 16px; height: 16px; color: var(--kleur-tekst-zachter, #86868b); flex: 0 0 auto; }
  .hej-acg-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    height: 44px;
    padding: 0 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--kleur-tekst, #1d1d1f);
  }
  .hej-acg-search-input::placeholder { color: var(--kleur-tekst-zachter, #86868b); }
  .hej-acg-search-input.is-ghost { color: var(--kleur-tekst-zachter, #86868b); }
  .hej-acg-search-clear {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border: 0; padding: 0; margin: 0;
    border-radius: 50%;
    background: #f0f0f2;
    color: var(--kleur-tekst-zacht, #6e6e73);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .hej-acg-search-clear svg { width: 11px; height: 11px; }
  .hej-acg-no-results {
    width: 100%;
    max-width: 420px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .hej-acg-no-results-text { margin: 0; font-size: 15px; color: var(--kleur-tekst-zacht, #6e6e73); }
  .hej-acg-no-results-btn {
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--kleur-tekst, #1d1d1f);
    color: var(--kleur-wit, #fff);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .hej-acg-no-results-btn:hover { background: var(--kleur-zwart, #000); }

  /* ── Categorie-tabs: één grijze pil-capsule die zich naar de inhoud voegt (niet
     edge-to-edge), met de zwarte actieve pil erin — exacte Apple-referentie 2026-08-04. ── */
  .hej-acg-tabs-bar {
    width: min(calc(100% - 48px), 1200px);
    margin: 0 auto;
    padding: 24px 0 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hej-acg-tabs-group { min-width: 0; max-width: 100%; }
  /* ── Type-filter: wit, zelfde roterend plus-icoon als de keuzehulp-labels,
     maar met JS-gemeten max-height i.p.v. grid-template-rows — die laatste
     truc botst met position:absolute (geen vaste blokgrootte om de fr-eenheid
     tegen op te lossen), gaf een kapot, plat streepje i.p.v. een net paneel
     (feedback 2026-08-04: "kan je het wit maken, alleen open/sluitgedrag
     hetzelfde"). ── */
  .hej-acg-filter { position: relative; flex: 0 0 auto; }
  .hej-acg-filter-btn {
    display: flex; align-items: center; gap: 10px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--kleur-tekst, #1d1d1f);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 10px rgba(0, 0, 0, .05);
    color: var(--kleur-wit, #ffffff);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .hej-acg-filter-icon {
    display: flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    flex: 0 0 auto;
    color: var(--kleur-wit, #ffffff);
  }
  .hej-acg-filter-icon svg {
    width: 16px; height: 16px;
    transition: color .15s ease;
  }
  .hej-acg-filter.is-open .hej-acg-filter-icon svg,
  .hej-acg-filter.has-selection .hej-acg-filter-icon svg { color: var(--acg-accent, var(--kleur-groen, #20be72)); }
  .hej-acg-filter-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--kleur-wit, #ffffff);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .38s cubic-bezier(.65, 0, .35, 1);
    z-index: 12;
  }
  .hej-acg-filter.is-open .hej-acg-filter-panel {
    pointer-events: auto;
  }
  .hej-acg-filter-options { padding: 6px; }
  .hej-acg-filter-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 10px;
    color: var(--kleur-tekst, #1d1d1f);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
  }
  .hej-acg-filter-option:hover { background: var(--kleur-vlak, #f5f5f7); }
  .hej-acg-filter-option.is-selected { background: var(--acg-accent, var(--kleur-groen, #20be72)); color: var(--kleur-wit, #ffffff); }
  .hej-acg-tabs-wrap { position: relative; display: inline-block; max-width: 100%; }
  .hej-acg-tabs {
    display: inline-flex; flex-wrap: nowrap; align-items: center;
    max-width: 100%;
    gap: 4px;
    background: var(--kleur-wit, #ffffff);
    border-radius: 999px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 10px rgba(0, 0, 0, .05);
  }
  .hej-acg-tabs::-webkit-scrollbar { display: none; }

  /* Apple-stijl scroll-affordance: vervagende rand + een "glazen", vervaagde
     puck achter het pijltje, i.p.v. de eerdere 2 dots (feedback 2026-08-06).
     Staat los van de scrollende nav zelf (niet als kind erin), anders wordt
     de puck mee weg-gescrold i.p.v. vast op de rand te blijven staan. */
  .hej-acg-tabs-edge {
    position: absolute;
    top: 0; bottom: 0;
    width: 44px;
    display: flex; align-items: center;
    border: 0; padding: 0; margin: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
    z-index: 2;
  }
  .hej-acg-tabs-edge.is-visible { opacity: 1; pointer-events: auto; }
  .hej-acg-tabs-edge--prev { left: 0; justify-content: flex-start; padding-left: 11px; }
  .hej-acg-tabs-edge--next { right: 0; justify-content: flex-end; padding-right: 11px; }
  /* Bewust GEEN gradient-achtergrond meer over de volle breedte van de knop:
     die ging ervan uit dat er altijd wit achter zit, maar zodra de actieve
     (groene) tab toevallig aan de rand staat beet die gradient lelijk in het
     groen (feedback 2026-08-06, screenshot). Alleen nog een losse, vervaagde
     glazen cirkel — die werkt correct op elke onderliggende kleur. Puck 3px
     ingezet in een knop van 44px = middelpunt op 18px; het icoon staat met
     dezelfde 11px-padding exact op dat middelpunt (18 - helft van 14px). */
  .hej-acg-tabs-edge-puck {
    position: absolute;
    top: 50%;
    width: 30px; height: 30px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
  }
  .hej-acg-tabs-edge--prev .hej-acg-tabs-edge-puck { left: 3px; }
  .hej-acg-tabs-edge--next .hej-acg-tabs-edge-puck { right: 3px; }
  .hej-acg-tabs-edge svg { position: relative; width: 14px; height: 14px; color: var(--kleur-tekst, #1d1d1f); }
  @media (min-width: 1025px) {
    /* Geen !important nodig: zelfde selector, gelijke specificiteit, deze staat later in de bron dan de basisregel (display:flex) en de enige andere regel op dit element (.is-visible) raakt alleen opacity/pointer-events, nooit display — brontekst-volgorde beslist dus al zonder !important (2026-09-09, netto-neutraal gehouden t.o.v. het CSS-plafond bij het toevoegen van een nieuwe, wél noodzakelijke !important verderop in dit bestand). */
    .hej-acg-tabs-edge { display: none; }
  }

  .hej-acg-tab {
    flex: 0 0 auto;
    color: var(--kleur-tekst-zacht, #6e6e73);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    padding: 9px 18px;
    border-radius: 999px;
    background: transparent;
    transition: background .15s ease, color .15s ease;
  }
  .hej-acg-tab.is-active { background: var(--acg-accent, var(--kleur-groen, #20be72)); color: var(--kleur-wit, #ffffff); }
  .hej-acg-tab:not(.is-active):hover { color: var(--kleur-tekst, #1d1d1f); }

  /* ── Filter-eiland: vaste linkerkolom naast het raster (feedback 2026-08-10,
     "verticale eiland" met specs om op te filteren). Buiten .has-sidebar blijft
     alles exact zoals het was (geen breedte-impact op accessoires). ── */
  .hej-acg-body.has-sidebar {
    width: min(calc(100% - 48px), 1320px);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 0 0 8px;
  }
  .hej-acg-body.has-sidebar .hej-acg-search-bar,
  .hej-acg-body.has-sidebar .hej-acg-tabs-bar,
  .hej-acg-body.has-sidebar .hej-acg-grid,
  .hej-acg-body.has-sidebar .hej-acg-pagination {
    width: 100%;
    margin: 0;
  }
  .hej-acg-sidebar { flex: 0 0 260px; position: sticky; top: 24px; }
  .hej-acg-main { flex: 1 1 auto; min-width: 0; }
  @media (min-width: 1024px) {
    .hej-acg-body.has-sidebar .hej-acg-sidebar {
      position: sticky;
      top: 72px;
      margin-top: 66px;
      padding-right: 4px;
    }
    .hej-acg-body.has-sidebar .hej-acg-sidebar-island {
      max-height: calc(100vh - 88px);
      overflow-y: auto;
      scrollbar-width: none;
    }
    .hej-acg-body.has-sidebar .hej-acg-sidebar-island::-webkit-scrollbar { display: none; }
    /* Filtereiland op dezelfde hoogte laten beginnen als de zoekbalk
       (feedback 2026-09-02): de standaard margin-top:66px hierboven bestaat
       om "Filters" verderop uit te lijnen op collecties ZONDER zoekbalk in
       de resultsbar (de andere ram_inch-collecties, ongewijzigd) — hier
       specifiek overschreven zodra de zoekbalk er wél is, want de resultsbar
       (met de zoekbalk) begint zelf al op y=0 van .hej-acg-main, exact gelijk
       aan waar de sidebar van nature (zonder margin-top) ook zou beginnen. */
    .hej-acg-body.has-sidebar.has-search-toolbar .hej-acg-sidebar {
      margin-top: 0;
    }
  }
  .hej-acg-sidebar-island {
    position: relative;
    background: var(--kleur-wit, #ffffff);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 10px rgba(0, 0, 0, .05);
    padding: 20px 18px 22px;
  }
  .hej-acg-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
  }
  .hej-acg-sidebar-head h2 { font-size: 16px; font-weight: 700; color: var(--kleur-tekst, #1d1d1f); }
  /* Feedback 2026-09-05: alle 3 knoppen in de resultsbar (Sorteren/btw/
    Liggend-Staand) exact in de stijl van het aangeleverde voorbeeld —
    lichtgrijze "track"-pil met daarin een zwevende zwarte pil voor de
    actieve stand, inactieve tekst gewoon kaal (geen eigen vak/rand). Geen
    accentgroen meer hier, dat voorbeeld gebruikt uitsluitend zwart/grijs. */
  .hej-acg-sidebar-sort {
    margin: 10px 0 4px;
    background: #e8e8ea;
    border-radius: 999px;
    padding: 4px;
  }
  .hej-acg-sidebar-sort .hej-acg-filter-btn {
    width: 100%;
    height: 32px;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--kleur-tekst, #1d1d1f);
    color: var(--kleur-wit, #fff);
    font-size: 13px;
    font-weight: 600;
  }
  .hej-acg-sidebar-sort .hej-acg-filter-btn:hover,
  .hej-acg-sidebar-sort.is-open .hej-acg-filter-btn { background: var(--kleur-zwart, #000); color: var(--kleur-wit, #fff); }
  /* BUGFIX (feedback 2026-08-26: "als ik op de sorteerknop heb geklikt, gaat die icoon naast die
    knop weg") — .hej-acg-filter.is-open .hej-acg-filter-icon svg (elders) kleurt het icoon groen
    zodra een filter open is; hier wordt tegelijk ook de knop-ACHTERGROND groen (regel hierboven),
    dus groen-op-groen maakte het icoon onzichtbaar. Icoon blijft hier wit zolang alleen .is-open
    geldt (zelfde specificiteit als de generieke regel, maar met .hej-acg-filter erbij expliciet
    even specifiek gemaakt zodat het niet van brontekst-volgorde afhangt). */
  .hej-acg-sidebar-sort.hej-acg-filter.is-open .hej-acg-filter-icon svg { color: var(--kleur-wit, #fff); }
  /* Nieuw: zodra er daadwerkelijk een niet-standaard sortering actief is (has-selection, alleen
    dan gezet in Liquid — niet zomaar bij elke keer openen), krijgt de knop dezelfde
    groen-naar-blauw-gradient als de "Voeg toe aan winkelwagen"/"Toepassen"-knoppen elders op de
    site (feedback 2026-08-26: "de sorteerknop die gradient krijgt en die icoon ernaast groen
    wordt"), blijvend zichtbaar ook nadat het paneel weer dicht is — en het icoon wordt (net als de
    generieke .has-selection-regel elders al doet) groen in plaats van wit. */
  .hej-acg-sidebar-sort.has-selection .hej-acg-filter-btn {
    background: linear-gradient(90deg, var(--acg-accent, var(--kleur-groen, #20be72)), var(--kleur-blauw, #0071e3));
    color: var(--kleur-wit, #fff);
  }
  .hej-acg-sidebar-sort.has-selection .hej-acg-filter-btn:hover {
    background: linear-gradient(90deg, var(--kleur-groen-donker, #1a9c5f), #005bb8);
  }
  /* Feedback 2026-09-05: icoon wit i.p.v. zwart zodra er gesorteerd is (gradient-knop) — zwart las te weinig contrast op de gradient. Zelfde specificiteit als de .is-open-regel hierboven (4 klassen + svg), bewust ná die regel in brontekst zodat deze wint. */
  .hej-acg-sidebar-sort.hej-acg-filter.has-selection .hej-acg-filter-icon svg { color: var(--kleur-wit, #fff); }
  .hej-acg-sidebar-sort .hej-acg-filter-panel { right: auto; left: 0; width: 100%; min-width: 0; }
  /* 2026-09-05: regels hierboven zijn voor de brede sidebar-kolom; Sorteren staat op >600px via JS in de smalle resultsbar naast BTW/Liggend-Staand, dus width:100%/oude verticale marge daar resetten (sidebar/mobiel blijft ongemoeid). */
  /* 2026-09-05: laptop-Sorteren in de resultsbar (>600px) terug naar accessoires' kale .hej-acg-filter-btn-pil i.p.v. de grijze track; mobiele bottom-sheet-knop houdt de track. */
  .hej-acg-resultsbar--with-search .hej-acg-sidebar-sort { margin: 0; background: transparent; padding: 0; }
  .hej-acg-resultsbar--with-search .hej-acg-sidebar-sort .hej-acg-filter-btn {
    width: auto;
    height: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 10px rgba(0, 0, 0, .05);
  }
  .hej-acg-resultsbar--with-search .hej-acg-sidebar-sort.hej-acg-sort-menu .hej-acg-filter-panel {
    left: 0; right: auto; width: auto; min-width: 240px;
  }
  .hej-acg-sidebar-dots {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    z-index: 5;
    width: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
  }
  .hej-acg-sidebar-dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c7c7cc;
    cursor: pointer;
    transition: height .2s ease, background-color .2s ease;
  }
  .hej-acg-sidebar-dot.is-active { height: 15px; background: var(--acg-accent, var(--kleur-groen, #20be72)); }
  .hej-acg-sidebar-clear { font-size: 12px; font-weight: 500; color: var(--acg-accent, var(--kleur-groen, #20be72)); text-decoration: none; }
  .hej-acg-sidebar-clear:hover { text-decoration: underline; }
  .hej-acg-facet-group { padding: 14px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
  .hej-acg-facet-group:first-of-type { border-top: 0; padding-top: 8px; }
  .hej-acg-facet-group-title {
    position: relative;
    margin: 0;
    padding: 2px 24px 2px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--kleur-tekst, #1d1d1f);
    cursor: pointer;
  }
  .hej-acg-facet-group-title::after {
    content: '+';
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kleur-tekst-zachter, #86868b);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
  }
  .hej-acg-facet-group:not(.is-collapsed) .hej-acg-facet-group-title { margin-bottom: 10px; }
  .hej-acg-facet-group:not(.is-collapsed) .hej-acg-facet-group-title::after { content: '−'; }
  .hej-acg-facet-group-title:focus-visible { outline: 2px solid var(--kleur-tekst, #1d1d1f); outline-offset: 4px; border-radius: 3px; }
  /* Vloeiend open/dicht i.p.v. instant display:none (feedback 2026-08-18):
     grid-template-rows 0fr<->1fr past zich automatisch aan de lijstlengte
     aan, geen JS-hoogtemeting nodig. .is-collapsed zet 'm dicht; JS beheert
     daarnaast `inert` op de collapse-laag zodat verborgen checkboxes niet
     via Tab bereikbaar blijven. */
  .hej-acg-facet-group-collapse {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1);
  }
  .hej-acg-facet-group.is-collapsed .hej-acg-facet-group-collapse { grid-template-rows: 0fr; }
  .hej-acg-facet-group-inner { overflow: hidden; min-height: 0; }
  @media (prefers-reduced-motion: reduce) {
    .hej-acg-facet-group-collapse { transition-duration: .01ms; }
  }
  .hej-acg-facet-option {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 0;
    cursor: pointer;
  }
  .hej-acg-facet-option.is-disabled { opacity: .4; cursor: default; }
  .hej-acg-facet-option.is-disabled .hej-acg-facet-label-text { text-decoration: line-through; }
  .hej-acg-facet-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .hej-acg-facet-box {
    flex: 0 0 auto;
    width: 17px; height: 17px;
    border-radius: 5px;
    border: 1.5px solid rgba(0, 0, 0, .2);
    display: flex; align-items: center; justify-content: center;
    color: var(--kleur-wit, #ffffff);
  }
  .hej-acg-facet-box svg { width: 11px; height: 11px; opacity: 0; transition: opacity .12s ease; }
  .hej-acg-facet-option input:checked + .hej-acg-facet-box { background: var(--acg-accent, var(--kleur-groen, #20be72)); border-color: var(--acg-accent, var(--kleur-groen, #20be72)); }
  .hej-acg-facet-option input:checked + .hej-acg-facet-box svg { opacity: 1; }
  .hej-acg-facet-option input:focus-visible + .hej-acg-facet-box { outline: 2px solid var(--kleur-tekst, #1d1d1f); outline-offset: 2px; }
  .hej-acg-facet-label-text { flex: 1 1 auto; font-size: 13px; color: var(--kleur-grijs-donker, #3a3a3c); }
  .hej-acg-facet-price { display: flex; align-items: center; gap: 8px; }
  .hej-acg-facet-price input {
    width: 0; flex: 1 1 auto; min-width: 0;
    height: 34px; border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .14);
    padding: 0 10px; font-size: 13px; font-family: inherit;
  }
  .hej-acg-facet-price span { color: var(--kleur-tekst-zachter, #86868b); font-size: 12px; }
  /* Feedback 2026-09-05: sticky ook op desktop (filter-eiland heeft daar al
    overflow-y:auto als eigen scrollcontainer). BUGFIX (zelfde dag, iPhone:
    "onderkant van de filter menu wordt zwart") — Safari's floating adresbalk
    tint zichzelf naar de kleur die precies op de onderste beeldschermrand
    staat; met bottom:0 raakte deze zwarte knop die rand letterlijk. bottom
    met max(12px, safe-area) houdt er altijd wit blootgesteld onder de knop,
    dus niets zwarts meer om over te nemen. */
  .hej-acg-facet-apply {
    width: 100%; height: 40px; margin-top: 6px;
    border: 0; border-radius: 10px;
    background: var(--kleur-tekst, #1d1d1f); color: var(--kleur-wit, #ffffff);
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer;
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -6px 12px -4px rgba(0, 0, 0, .12);
  }
  .hej-acg-facet-apply:hover { background: var(--acg-accent, var(--kleur-groen, #20be72)); }
  /* Na een geslaagde toepassing dezelfde gradient als de "Voeg toe aan
     winkelwagen"-knoppen elders op de site (zie .hej-acg-buynow.is-added
     hierboven), zolang er daadwerkelijk actieve filters zijn; zodra de
     gebruiker de selectie wijzigt of alles wist, staat de knop weer plat
     zwart met "Toepassen" (zie applyFilterUrl/bindFacetInputs). */
  .hej-acg-facet-apply.is-applied { background: linear-gradient(90deg, var(--acg-accent, var(--kleur-groen, #20be72)), var(--kleur-blauw, #0071e3)); }
  .hej-acg-facet-apply.is-applied:hover { background: linear-gradient(90deg, var(--kleur-groen-donker, #1a9c5f), #005bb8); }
  /* Live filter-AJAX, pas bij "Toepassen" (feedback 2026-08-18): sidebar
     dimt en blokkeert kliks terwijl de nieuwe combinatie wordt opgehaald;
     alleen het productengedeelte krijgt een eigen crossfade (opacity wordt
     daarvoor rechtstreeks door JS gestuurd, zie swapFacetResults), geen
     volledige paginaherlaad-flits. */
  .hej-acg.is-filtering .hej-acg-sidebar-island {
    opacity: .5;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .hej-acg.is-filtering [data-acg-results] { pointer-events: none; }
  .hej-acg-results { transition: opacity .22s ease; }

  /* ── Grid: 4 op desktop, 2 op tablet/mobiel. Losse afgeronde witte kaarten ("eilanden")
     op de grijze paginaondergrond, met echte tussenruimte i.p.v. een haarlijntje. ── */
  .hej-acg-grid {
    width: min(calc(100% - 48px), 1200px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(var(--acg-cols, 4), 1fr);
    gap: 16px;
    padding: 0 0 40px;
  }
  .hej-acg-cell {
    background: var(--kleur-wit, #ffffff);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 10px rgba(0, 0, 0, .05);
  }
  .hej-acg-card { display: flex; flex-direction: column; height: 100%; position: relative; }

  .hej-acg-imglink { display: block; }
  .hej-acg-imgwrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--kleur-wit, #ffffff);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .hej-acg-imgwrap img {
    max-width: calc(70% * var(--img-scale, 1));
    max-height: calc(70% * var(--img-scale, 1));
    width: auto; height: auto; object-fit: contain;
    transform: translateY(var(--img-shift, 0px));
  }
  /* Staande kaart: laptop iets omlaag t.o.v. het gecentreerde midden
    (feedback 2026-08-26: "zet de laptop meer naar beneden"). Alleen voor
    staand (geen .hej-acg-grid--landscape-voorouder) — de liggende varianten
    blijven ongewijzigd. */
  .hej-acg-grid:not(.hej-acg-grid--landscape) .hej-acg-imgwrap img {
    transform: translateY(calc(var(--img-shift, 0px) + 20px));
  }
  /* 2026-09-03: mobiel gebruikt nu letterlijk dezelfde +20px-afbeeldingverschuiving en "info-blok schuift omhoog"-truc als desktop/tablet (@media min-width:601px verderop), i.p.v. eigen afwijkende mobiele waardes. */
  .hej-acg-wish {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 26px; height: 26px; border: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--kleur-tekst, #1d1d1f); padding: 0;
  }
  .hej-acg-wish svg { width: 15px; height: 15px; transition: fill .15s ease, stroke .15s ease; }
  .hej-acg-wish[aria-pressed="true"] svg { fill: var(--acg-accent); stroke: var(--acg-accent); }

  .hej-acg-info {
    display: block;
    padding: 10px clamp(14px, 2vw, 20px) 12px;
    text-decoration: none;
    color: inherit;
  }
  .hej-acg-cdots { display: flex; gap: 5px; min-height: 9px; margin-bottom: 8px; }
  .hej-acg-cdot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); display: inline-block; }
  .hej-acg-labels {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .hej-acg-condition,
  .hej-acg-sale {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  }
  .hej-acg-condition--goed,
  .hej-acg-condition--uitstekend,
  .hej-acg-condition--als-nieuw { background: var(--kleur-tekst, #1d1d1f); color: var(--kleur-wit, #fff); }
  /* "Nieuw"-label op accessoirekaarten (feedback 2026-09-03): zelfde
     merkgradient als de bevestigde staat van "Direct bestellen", i.p.v.
     zwart zoals de laptop-conditielabels hierboven. */
  .hej-acg-condition--nieuw { background: linear-gradient(90deg, var(--acg-accent, var(--kleur-groen, #20be72)), var(--kleur-blauw, #0071e3)); color: var(--kleur-wit, #fff); }
  .hej-acg-sale { background: #d70015; color: var(--kleur-wit, #fff); }
  .hej-acg-title {
    font-size: 14px; font-weight: 500; line-height: 1.35;
    margin-bottom: 6px;
    /* Vaste hoogte (niet min-height) voor exact 3 regels + line-clamp: anders kan font-rendering per device een titel meer regels laten innemen, waardoor kaarten in dezelfde rij niet meer gelijk hoog zijn (2026-09-03). */
    height: calc(1.35em * 3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  /* Gesplitste titel (naam + processor, alleen ram_inch/laptops,
     feedback 2026-08-13): elk deel exact 1 regel met ellipsis i.p.v. de
     2-regel-clamp hierboven, zodat de totale hoogte nog steeds vast en
     voorspelbaar is (1 naamregel + 1 processorregel = zelfde principe). */
  /* Bugfix: 2 klassen i.p.v. 1 zodat deze regel altijd wint van de mobiele .hej-acg-title-regel (zelfde specificiteit gaf op mobiel een verkeerde geforceerde H3-hoogte). */
  .hej-acg-title.hej-acg-title--split {
    height: auto;
    overflow: visible;
    display: block;
    -webkit-line-clamp: unset;
  }
  /* Feedback 2026-09-03: .hej-acg-name (losse naamregel bij gesplitste
    laptoptitel) miste de vaste-hoogte-regelclamp die .hej-acg-title
    hierboven al wel had — bij Staand-weergave (portret, geen
    .hej-acg-grid--landscape-voorouder) bleef een lange laptopnaam daardoor
    altijd op 1 regel afgekapt met "...", ondanks de eerdere "geldt voor
    alle devices"-opgave. Zelfde vaste-hoogte-principe als .hej-acg-title:
    3 regels basis, mobiel hieronder naar 4. */
  .hej-acg-name {
    display: -webkit-box;
    font-size: 16px; font-weight: 650; line-height: 1.25;
    height: calc(1.25em * 3);
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  /* Titel accessoirekaarten gelijk aan laptop-titel (feedback 2026-09-03:
     "beetje groot en zwart zoals bij laptop") — zelfde grootte/gewicht als
     .hej-acg-name hierboven, alleen op de simpele (niet-gesplitste)
     .hej-acg-title van accessoires. Alleen aan als show_view_toggle aan
     staat (dus deze specifieke accessoirecollectie), niet sitebreed. */
  .hej-acg-title--bold { font-size: 16px; font-weight: 650; }
  .hej-acg-proc {
    display: block;
    font-size: 13.5px; font-weight: 400; line-height: 1.3;
    color: var(--kleur-tekst-zacht, #6e6e73);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
  }
  /* Kenmerken: optionele iconen voor product-tags feature:* plus batterij
     en toetsenbord op iedere laptopkaart. Vaste hoogte gereserveerd, zelfde uitlijnprincipe als
     titel/specs (feedback 2026-08-13). */
  .hej-acg-kenmerken {
    height: 58px;
    padding-top: 9px;
    margin-bottom: 8px;
    overflow: visible;
  }
  .hej-acg-kenmerken-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--kleur-tekst, #1d1d1f);
    margin-bottom: 5px;
  }
  .hej-acg-kenmerken-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: clamp(5px, 2.2vw, 12px);
  }
  .hej-acg-kicon {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    color: var(--kleur-groen, #20be72);
    flex: 0 0 auto;
    cursor: pointer;
    border-radius: 5px;
    transition: transform .16s ease, opacity .16s ease;
  }
  .hej-acg-kicon:hover { transform: scale(1.12); }
  .hej-acg-kicon:focus-visible { outline: 2px solid var(--kleur-tekst, #1d1d1f); outline-offset: 3px; }
  .hej-acg-kicon svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .hej-acg-kicon--unavailable { color: #c7c7cc; }
  .hej-acg-kicon--brand:not(.hej-acg-kicon--unavailable) { color: #76B900; }
  body.hej-acg-modal-open { overflow: hidden; }
  body.hej-acg-modal-open #hej-header,
  body.hej-acg-modal-open .hej-acg-local-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .hej-acg-feature-modal {
    position: fixed;
    inset: 0;
    z-index: var(--laag-venster, 39);
    display: grid;
    place-items: center;
    padding: 24px;
    isolation: isolate;
    contain: layout paint;
  }
  .hej-acg-feature-modal[hidden] { display: none; }
  .hej-acg-feature-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 22, .5);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
  }
  .hej-acg-feature-modal__stack-wrap {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    outline: none;
  }
  .hej-acg-feature-modal__stage {
    position: relative;
    width: 100%;
    height: min(620px, calc(100vh - 140px));
  }
  .hej-acg-feature-modal__card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--kleur-wit, #fff);
    color: var(--kleur-tekst, #1d1d1f);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
    overflow: hidden;
    text-align: left;
    will-change: transform, opacity;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .34s cubic-bezier(.22, 1, .36, 1);
  }
  .hej-acg-feature-modal__card.is-dark { background: var(--kleur-tekst, #1d1d1f); color: var(--kleur-vlak, #f5f5f7); }
  .hej-acg-feature-modal__card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 34px 40px 20px;
  }
  .hej-acg-feature-modal__card[data-slot="0"] { transform: translate(0, 0) scale(1); z-index: 10; opacity: 1; }
  .hej-acg-feature-modal__card[data-slot="1"] { transform: translate(16px, 26px) scale(.96); z-index: 9; opacity: 1; }
  .hej-acg-feature-modal__card[data-slot="2"] { transform: translate(28px, 44px) scale(.93); z-index: 8; opacity: 1; }
  .hej-acg-feature-modal__card[data-slot="3"] { transform: translate(40px, 60px) scale(.9); z-index: 7; opacity: .85; }
  .hej-acg-feature-modal__card[data-slot="-1"] { transform: translate(0, -40px) scale(1.04); z-index: 11; opacity: 0; }
  .hej-acg-feature-modal__card[data-slot="4"] { transform: translate(52px, 80px) scale(.82); z-index: 6; opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .hej-acg-feature-modal__card { transition-duration: .01ms; }
  }
  .hej-acg-feature-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: var(--laag-inhoud, 20);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e8e8ed;
    color: var(--kleur-tekst-zacht, #6e6e73);
    cursor: pointer;
  }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__close { background: var(--kleur-grijs-donker, #3a3a3c); color: var(--kleur-vlak, #f5f5f7); }
  .hej-acg-feature-modal__close svg { width: 18px; height: 18px; }
  .hej-acg-feature-modal__icon { width: 42px; height: 42px; margin-bottom: 16px; color: var(--kleur-groen, #20be72); }
  .hej-acg-feature-modal__icon svg { width: 100%; height: 100%; }
  .hej-acg-feature-modal__card h2 { margin: 0; color: inherit; font-size: clamp(25px, 4vw, 34px); line-height: 1.08; letter-spacing: -.035em; }
  .hej-acg-feature-modal__description { margin: 14px 0 18px; color: var(--kleur-grijs-donker, #3a3a3c); font-size: 15px; line-height: 1.5; }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__description { color: var(--kleur-vlak, #f5f5f7); }
  .hej-acg-feature-modal__status { margin: 0; padding: 13px 15px; border-radius: 12px; background: #eaf7f0; color: #18794e; font-size: 13px; font-weight: 650; }
  .hej-acg-feature-modal__status.is-unavailable { background: var(--kleur-vlak, #f5f5f7); color: var(--kleur-tekst-zacht, #6e6e73); }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__status { background: rgba(46, 204, 113, .16); color: #67d99a; }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__status.is-unavailable { background: #2c2c2e; color: var(--kleur-grijs-licht, #aeaeb2); }
  .hej-acg-feature-modal__status .hej-acg-feature-modal__negative { color: #d70015; font-weight: 750; }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__status .hej-acg-feature-modal__negative { color: #ff453a; }
  .hej-acg-feature-modal__controls {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 12px;
    padding: 16px 40px 28px;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__controls { border-top-color: rgba(255, 255, 255, .12); }
  .hej-acg-feature-modal__controls > span { color: var(--kleur-tekst-zachter, #86868b); font-size: 12px; font-weight: 600; text-align: center; }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__controls > span { color: var(--kleur-grijs-licht, #aeaeb2); }
  .hej-acg-feature-modal__progress { display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .hej-acg-feature-modal__dots { display: flex; align-items: center; justify-content: center; gap: 2px; }
  .hej-acg-feature-modal__controls button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--kleur-lijn, #d2d2d7);
    border-radius: 50%;
    background: var(--kleur-wit, #fff);
    color: var(--kleur-tekst, #1d1d1f);
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease;
  }
  .hej-acg-feature-modal__controls button:hover { transform: scale(1.06); background: var(--kleur-vlak, #f5f5f7); }
  .hej-acg-feature-modal__controls button svg { width: 19px; height: 19px; }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__controls button { border-color: #48484a; background: #2c2c2e; color: var(--kleur-wit, #fff); }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__controls button:hover { background: var(--kleur-grijs-donker, #3a3a3c); }
  .hej-acg-feature-modal__controls .hej-acg-feature-modal__dots button {
    width: 14px;
    height: 14px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .hej-acg-feature-modal__controls .hej-acg-feature-modal__dots button::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c7c7cc;
    transition: transform .18s ease, background-color .18s ease;
  }
  .hej-acg-feature-modal__controls .hej-acg-feature-modal__dots button:hover { transform: none; background: transparent; }
  .hej-acg-feature-modal__controls .hej-acg-feature-modal__dots button.is-active::before { background: var(--kleur-groen, #20be72); transform: scale(1.55); }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__dots button::before { background: rgba(255, 255, 255, .35); }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__controls .hej-acg-feature-modal__dots button.is-active::before {
    background: var(--kleur-groen, #20be72);
  }
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__controls .hej-acg-feature-modal__dots button,
  .hej-acg-feature-modal__card.is-dark .hej-acg-feature-modal__controls .hej-acg-feature-modal__dots button:hover {
    border: 0;
    background: transparent;
  }
  @media (max-width: 600px) {
    .hej-acg-feature-modal {
      padding-left: calc(24px + env(safe-area-inset-left, 0px));
      padding-right: calc(24px + env(safe-area-inset-right, 0px));
    }
    /* Back cards sit translate(40px, ...) right of the primary card, so the
       stack's visual footprint (not just the primary card) is what needs to
       clear a ~22px safe margin on both sides: the wrap is narrowed by that
       offset and re-centered with a matching leftward shift. */
    .hej-acg-feature-modal__stack-wrap {
      width: calc(100% - 36px);
      transform: translateX(-20px);
    }
    .hej-acg-feature-modal__stage { height: min(420px, calc(100vh - 100px)); }
    .hej-acg-feature-modal__card-body { padding-top: 14px; padding-bottom: 30px; }
    .hej-acg-feature-modal__icon { margin-bottom: 22px; }
    /* Clamped to 4 lines: makes the card's required height deterministic
       (independent of how long a given feature's copy happens to be)
       instead of reserving worst-case space for every card; the rare
       longest descriptions truncate gracefully with an ellipsis instead of
       being silently cut off by the card's overflow:hidden. */
    .hej-acg-feature-modal__description {
      margin: 14px 0 22px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      overflow: hidden;
    }
    .hej-acg-feature-modal__status { padding-top: 7px; padding-bottom: 7px; }
    .hej-acg-feature-modal__controls { padding: 16px 20px 18px; gap: 6px; }
    .hej-acg-feature-modal__controls > span { font-size: 11px; }
  }
  .hej-acg-divider {
    width: 100%;
    height: 1px;
    flex: 0 0 1px;
    background-color: #E8E8E8;
    border: 0;
    margin: 8px 0;
  }
  /* Kleine spec-chips (twijfelwegnemers), tussen titel en prijs — icoon +
     kort tekstje, alleen aanwezig bij producten met een case/when-match
     hierboven (feedback 2026-08-06). */
  .hej-acg-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    overflow: hidden;
    /* Vaste hoogte zodat de scheidingslijn en de prijs op elk toestel op
       exact dezelfde hoogte staan, ongeacht of een product 0, 1, 2 of 3
       specs heeft — zelfde principe als .hej-acg-title hierboven. Was
       1 regel (1.3em) toen er max 2 chips waren; nu 2 regels (feedback
       2026-09-03, "kijk of je nog meer specs kan doen" — 3e chip
       toegevoegd), want 2 chips + een langere 3e passen niet altijd op
       1 regel in de smallere kolombreedtes. +4px marge (feedback
       2026-09-03: "de tweede specs wordt aan de onderkant afgesneden") —
       1.3em was net te krap, waardoor de onderkant van de 2e regel (met
       name bij langere chip-tekst) af en toe afsneed door overflow:hidden. */
    height: calc(1.3em * 2 + 4px);
    align-content: flex-start;
  }
  .hej-acg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--kleur-grijs-donker, #3a3a3c);
    white-space: nowrap;
  }
  .hej-acg-chip svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--kleur-tekst, #1d1d1f); }
  /* Iconen bij de 3 laptop-specs (RAM/scherm/opslag) overal verwijderd
    (feedback 2026-08-18: "haal die icoontjes van die drie specs weg op
    desktop etc") — 1 regel op basisniveau i.p.v. per breakpoint, want geen
    van de latere per-breakpoint svg-formaatregels (width/height) zet
    display terug aan, dus deze wint overal. */
  .hej-acg-chips--laptop .hej-acg-chip svg { display: none; }
  /* Waarde/label als losse spans (feedback 2026-08-18, i.p.v. één
    samengevoegde tekststring) zodat de mobiele liggend-kaart ze onder
    elkaar kan tonen; standaard (portret/desktop-liggend, ongewijzigd
    zichtbaar resultaat) blijven ze gewoon inline naast elkaar. */
  .hej-acg-chip-text { display: inline-flex; align-items: baseline; gap: 3px; }
  /* 2026-08-18: echte grid-gap + symmetrische padding rond elke scheidingslijn (was gap:0, nul ruimte). Basisregel, geldt overal waar niet expliciet overschreven (tablet/desktop-staand, desktop-liggend ≥1024px). */
  .hej-acg-chips--laptop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 36px;
  }
  .hej-acg-chips--laptop .hej-acg-chip {
    position: relative;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 4px 8px;
    gap: 6px;
  }
  .hej-acg-chips--laptop .hej-acg-chip + .hej-acg-chip {
    margin-left: 0;
  }
  .hej-acg-chips--laptop .hej-acg-chip:not(:last-child) {
    position: relative;
  }
  .hej-acg-chips--laptop .hej-acg-chip:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: #E8E8E8;
  }
  .hej-acg-price {
    font-size: 17px;
    font-weight: 700;
    color: var(--acg-accent, var(--kleur-groen, #20BE72));
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }
  .hej-acg-old {
    display: block;
    width: 100%;
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 500;
    font-style: italic;
    color: var(--kleur-tekst, #1d1d1f);
    text-decoration: none;
  }
  .hej-acg-old > span { position: relative; display: inline-block; }
  .hej-acg-old > span::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 1.5px;
    background: #d70015;
    transform: translateY(-50%) rotate(-7deg);
    transform-origin: center;
    pointer-events: none;
  }
  .hej-acg-price__current { display: block; color: var(--kleur-tekst, #1d1d1f); }

  /* ── Tablet/desktop: infoblok schuift omhoog over de onderkant van de
     vierkante afbeelding-tegel. Die tegel (1:1) toont de foto met max.
     70% breedte/hoogte, dus onderin blijft altijd witruimte over die
     visueel niet van de witte kaartachtergrond te onderscheiden is —
     hier bewust benut i.p.v. leeg te laten (feedback 2026-08-13). Alleen
     ≥601px: mobiel blijft ongewijzigd (vaste projectregel). */
  @media (min-width: 601px) {
    .hej-acg-info { margin-top: -38px; position: relative; z-index: 1; }
  }
  /* Feedback 2026-09-03: "gewoon wat je op desktop hebt maar dan op mobiel
    creëren" — zelfde overlap-truc als hierboven, nu ook voor mobiel
    (eerder bewust uitgesloten, zie comment hierboven). Kleinere waarde dan
    desktops -38px omdat de mobiele afbeeldingtegel ongeveer half zo hoog
    is (166px vs ±333px bij 2 kolommen), dus evenredig geschaald. Alleen
    laptopkaarten (.hej-acg-card--ram_inch), dit ging specifiek daarover. */
  @media (max-width: 600px) {
    .hej-acg-grid:not(.hej-acg-grid--landscape) .hej-acg-card--ram_inch .hej-acg-info {
      margin-top: -20px;
      position: relative;
      z-index: 1;
    }
    /* Feedback 2026-09-03: "de divider moet regelrecht tegen .hej-acg-proc
      aankomen zoals op desktop" — desktop gebruikt gewoon de basisregel
      (.hej-acg-divider margin:8px 0, verderop in dit bestand, geen eigen
      override), en dat gaf al exact de gevraagde afstand. Geen mobiele
      override meer nodig: laat 'm terugvallen op diezelfde basisregel. */
    /* Feedback 2026-09-03 (vervolg): "zet nu gezamenlijk met de afbeelding
      en de titel etc meer naar boven" — de onderlinge afstand tussen beeld
      en titel hierboven blijft ongewijzigd, maar het hele blok (beeld +
      titel + specs) schuift als geheel omhoog binnen de kaart. .hej-acg-
      imglink is het eerste kind in de flex-kolom .hej-acg-card, dus een
      negatieve margin-top daarop trekt alles mee omhoog; de vrijgekomen
      ruimte komt onderaan de kaart terecht (na de knoppen), niet middenin. */
    .hej-acg-grid:not(.hej-acg-grid--landscape) .hej-acg-card--ram_inch .hej-acg-imglink {
      margin-top: -10px;
    }
  }

  /* ── USP-balk: JS zet deze na elke 8 (mobiel) of 12 (desktop/tablet)
     ZICHTBARE producten tussen de kaarten, spant de volle breedte van het
     grid. Standaard verborgen — JS toont 'm pas na het klonen op de juiste
     positie (feedback 2026-08-06: moet ook bij filteren/zoeken kloppen). */
  .hej-acg-usp-bar {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 16px;
    row-gap: 12px;
    border-radius: 16px;
    padding: 16px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 10px rgba(0, 0, 0, .05);
  }
  /* Tijdelijk: JS wisselt --dark/--light af per balk zodat de twee stijlen
     naast elkaar te vergelijken zijn (feedback 2026-08-06). */
  .hej-acg-usp-bar--dark,
  .hej-acg-usp-bar--light {
    background: linear-gradient(90deg, color-mix(in srgb, #2ECC71 12%, white) 0%, color-mix(in srgb, #2D9CDB 12%, white) 100%);
  }
  /* Elk item krijgt exact dezelfde kolombreedte/gap als de kaarten erboven/
     eronder (zelfde grid-template-columns + gap als .hej-acg-grid), zodat
     icoon en tekst precies in het midden van de kaartkolom staan en de
     scheidingslijntjes exact in het gat tussen de kaarten vallen (feedback
     2026-08-06). */
  .hej-acg-usp {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
    position: relative;
  }
  .hej-acg-usp:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 4px;
    bottom: 4px;
    width: 1px;
  }
  .hej-acg-usp-bar--dark .hej-acg-usp:not(:first-child)::before,
  .hej-acg-usp-bar--light .hej-acg-usp:not(:first-child)::before { background: rgba(0, 0, 0, .1); }
  .hej-acg-usp svg {
    width: 20px; height: 20px;
    flex: 0 0 auto;
    color: var(--acg-accent, var(--kleur-groen, #20be72));
  }
  .hej-acg-usp-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
  }
  .hej-acg-usp-text strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }
  .hej-acg-usp-text em {
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
  }
  .hej-acg-usp-bar--dark .hej-acg-usp-text strong,
  .hej-acg-usp-bar--light .hej-acg-usp-text strong { color: var(--kleur-tekst, #1d1d1f); }
  .hej-acg-usp-bar--dark .hej-acg-usp-text em,
  .hej-acg-usp-bar--light .hej-acg-usp-text em { color: #4c4c4f; }

  /* ── Snel-bestellen: "in winkelwagen" + "direct bestellen" onder elkaar, los
     van de link naar de productpagina (titel/prijs blijven naar de product-
     pagina linken). margin-top:auto op de wrapper duwt de knoppen altijd naar
     de onderkant van de kaart — omdat .hej-acg-card een flex-kolom is en alle
     kaarten in dezelfde grid-rij al even hoog staan (CSS Grid stretch), staan
     de knoppen zo op exact dezelfde hoogte, ongeacht of een titel 1 of 2
     regels beslaat (feedback collega, 2026-08-04). ── */
  .hej-acg-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px clamp(14px, 2vw, 20px) 16px;
  }
  .hej-acg-action-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 0;
    min-height: 24px;
    margin-bottom: -5px;
    color: var(--acg-accent, var(--kleur-groen, #20be72));
  }
  .hej-acg-action-price__current {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
  }
  .hej-acg-action-price__row { display: flex; align-items: baseline; }
  .hej-acg-action-price__stack { display: flex; flex-direction: column; align-items: flex-start; }
  .hej-acg-action-price__stack .hej-acg-old { width: auto; }
  .hej-acg-card--laptop .hej-acg-action-price { color: var(--kleur-tekst, #1d1d1f); }
  .hej-acg-action-price__tax {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    font-style: italic;
    margin-left: 3px;
    color: var(--kleur-tekst-zachter, #86868b);
  }
  .hej-acg-view, .hej-acg-buynow {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
    height: 36px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    /* "Bekijk winkelwagen" is net iets langer dan "Direct bestellen"/"Bekijk
       product" en brak op smalle mobiele kaarten naar 2 regels binnen de
       vaste 36px hoogte, dus zichtbaar afgeknipt/opeengedrukt (feedback
       2026-08-10, screenshot). Tekst mag nooit meer wrappen; overflow:hidden
       als vangnet zodat een té lange tekst netjes afgekapt blijft binnen de
       afgeronde hoeken i.p.v. buiten de knop uit te steken. */
    white-space: nowrap;
    overflow: hidden;
    /* background-color i.p.v. de background-shorthand: anders probeert de
       browser ook background-image te animeren zodra de knop van een
       vlakke kleur naar de is-added-gradient wisselt, wat een verkeerd
       gekleurde rand aan weerszijden gaf (feedback 2026-08-09, zelfde bug
       als bij Gerelateerde accessoires). */
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .hej-acg-view svg, .hej-acg-buynow svg { width: 14px; height: 14px; flex: 0 0 auto; }
  .hej-acg-view svg { margin-left: -7px; }
  .hej-acg-buynow svg { width: 17px; height: 17px; }
  .hej-acg-view {
    border: 1px solid rgba(0, 0, 0, .1);
    background: var(--kleur-wit, #ffffff);
    color: var(--kleur-tekst, #1d1d1f);
  }
  .hej-acg-view:hover { background: var(--kleur-tekst, #1d1d1f); color: var(--kleur-wit, #ffffff); border-color: var(--kleur-tekst, #1d1d1f); }
  .hej-acg-buynow {
    border: 1px solid var(--acg-accent, var(--kleur-groen, #20be72));
    background: var(--acg-accent, var(--kleur-groen, #20be72));
    color: var(--kleur-wit, #ffffff);
  }
  .hej-acg-buynow:hover:not(:disabled) { background: var(--kleur-groen-donker, #1a9c5f); border-color: var(--kleur-groen-donker, #1a9c5f); }
  .hej-acg-buynow:disabled { opacity: .45; cursor: default; }
  .hej-acg-buynow.is-loading { opacity: .7; cursor: default; }
  .hej-acg-buynow:focus-visible {
    outline: 2px solid var(--kleur-tekst, #1d1d1f);
    outline-offset: 2px;
  }
  /* Na een geslaagde toevoeging ("Bekijk winkelwagen") krijgt de knop
     dezelfde gradient als de "Voeg toe aan winkelwagen"-knoppen elders op
     de site (feedback 2026-08-09), en navigeert een klik naar de
     winkelwagenpagina i.p.v. rechtstreeks naar de checkout. `border: none`
     i.p.v. een transparante randkleur, zodat er geen randnaad op de
     afgeronde hoek kan ontstaan. */
  .hej-acg-buynow.is-added {
    border: none;
    background: linear-gradient(90deg, var(--acg-accent, var(--kleur-groen, #20be72)), var(--kleur-blauw, #0071e3));
  }
  .hej-acg-buynow.is-added:hover:not(:disabled) {
    border: none;
    background: linear-gradient(90deg, var(--kleur-groen-donker, #1a9c5f), #005bb8);
  }
  .hej-acg-buynow-arrow { display: none; width: 15px; height: 15px; flex: 0 0 auto; }
  /* Structurele fix (feedback 2026-08-10): in de "toegevoegd"-staat alleen
     nog platte tekst "Bekijk winkelwagen", geen tasje-icoon en geen pijl
     meer. Simpeler, en lost de ruimtekrapte op smalle mobiele kaarten
     definitief op i.p.v. tekst te moeten verkleinen. */
  .hej-acg-buynow.is-added svg { display: none; }

  /* ── Paginering ── */
  .hej-acg-pagination {
    display: flex; justify-content: center; align-items: center; gap: 14px;
    padding: 32px 20px;
  }
  .hej-acg-load-more {
    min-width: 164px;
    min-height: 44px;
    padding: 11px 24px;
    border: 1px solid var(--kleur-lijn, #d2d2d7);
    border-radius: 999px;
    background: var(--kleur-wit, #ffffff);
    color: var(--kleur-tekst, #1d1d1f);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, opacity .18s ease;
  }
  .hej-acg-load-more:hover { border-color: var(--kleur-tekst-zachter, #86868b); background: #f8f8fa; }
  .hej-acg-load-more:focus-visible { outline: 2px solid var(--kleur-tekst, #1d1d1f); outline-offset: 3px; }
  .hej-acg-load-more[disabled] { cursor: wait; opacity: .55; }

  /* ── Lege staat ── */
  .hej-acg-empty {
    padding: 80px 20px;
    text-align: center;
    color: var(--kleur-tekst-zacht, #6e6e73);
    font-size: 15px;
  }

  /* ── Tablet ── */
  /* Laptop-resultatenbalk en wisselbare kaartas. De bestaande kaart-DOM
     blijft intact zodat cart, wishlist, filters en Toon meer dezelfde hooks behouden. */
  .hej-acg-resultsbar {
    width: min(calc(100% - 48px), 1200px);
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
  }
  .hej-acg-body.has-sidebar .hej-acg-resultsbar { width: 100%; margin-left: 0; margin-right: 0; }
  /* Inline zoekbalk in de resultsbar (2026-09-02): eigen modifier zodat collecties zonder zoekbalk hun rechts-uitgelijnde view-toggle behouden. flex-start + gap houdt zoekbalk+Sorteren links, margin-left:auto op view-controls duwt Liggend/Staand naar rechts (2026-09-03). */
  .hej-acg-resultsbar--with-search { justify-content: flex-start; }
  /* 2026-09-07 (Codex-audit F3): met de zijbalk ernaast is deze balk tussen 601 en ongeveer 1147 px
     smaller dan de vier onderdelen samen nodig hebben (zoekbalk 248 + sorteren 107 + btw 169 +
     weergave 216 + drie keer 24 gap = 812 px). Zonder wrap liep de hele pagina daardoor tot 200 px
     naar rechts uit (live gemeten op 768 en 1100 px). Wrappen doet alleen iets als het niet past:
     vanaf ongeveer 1148 px blijft de rij exact zoals hij was. Onder 601 px geldt de mobiele regel
     verderop, die al wrapt; die blijft ongewijzigd. */
  @media (min-width: 601px) {
    .hej-acg-resultsbar--with-search { flex-wrap: wrap; row-gap: 12px; }
    /* Wrappen gebeurt op de startbreedte van de onderdelen, niet op hun minimum. Zonder deze regel
       brak de rij al bij 1148 tot 1279 px in tweeën, terwijl de zoekbalk daar voorheen gewoon
       krimpte (van 380 naar minimaal 248 px) en alles op één rij bleef. Met de minimale breedte als
       startpunt breekt de rij pas waar hij vroeger buiten het scherm liep, en groeit de zoekbalk
       daarboven tot precies dezelfde breedte als voorheen (live vergeleken op 1148, 1200, 1280). */
    .hej-acg-resultsbar--with-search .hej-acg-search-bar.hej-acg-search-bar--inline { flex-basis: min-content; }
  }
  .hej-acg-resultsbar--with-search [data-acg-filter-wrap] { order: 1; }
  /* 2026-09-05: sorteren/btw/grid bij filter-wrap: volgorde 1/2/3, rechts-marge naar de eerste. */
  .hej-acg-resultsbar--with-search:has([data-acg-filter-wrap]) [data-acg-filter-wrap] { margin-left: auto; }
  .hej-acg-resultsbar--with-search:has([data-acg-filter-wrap]) .hej-acg-btw-toggle { order: 2; }
  /* margin-left:0: anders verdeelt browser vrije ruimte over beide auto-marges (extra gat). */
  .hej-acg-resultsbar--with-search:has([data-acg-filter-wrap]) .hej-acg-view-controls { order: 3; margin-left: 0; }
  .hej-acg-resultsbar--with-search .hej-acg-view-controls { margin-left: auto; }
  /* 2026-09-05: idem voor data-acg-sort-wrap. */
  .hej-acg-resultsbar--with-search:has([data-acg-sort-wrap]) [data-acg-sort-wrap] { margin-left: auto; }
  .hej-acg-resultsbar--with-search:has([data-acg-sort-wrap]) .hej-acg-view-controls { margin-left: 0; }
  .hej-acg-search-bar.hej-acg-search-bar--inline {
    width: auto;
    max-width: 380px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
  }
  .hej-acg-view-controls { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
  /* Tabletband 601 tot 1023 px (2026-09-07): zonder deze regels viel de balk in drie rijen (zoekbalk /
     sorteren + btw / weergave), omdat de zoekbalk met zijn natuurlijke breedte (tot 380 px) de
     sorteerknop van de eerste rij duwde. Met de minimale startbreedte (regel hierboven) deelt de zoekbalk de
     eerste rij met sorteren en groeit hij in de restruimte; btw en weergave vormen samen de tweede rij,
     weergave rechts uitgelijnd zoals sorteren op de eerste rij. Staat bewust NA de regels hierboven en met
     dezelfde specificiteit (drie klassen) als de :has()-regels die margin-left op 0 zetten, zodat de
     bronvolgorde beslist en er geen !important nodig is. Vanaf 1024 px past sorteren naast de volle
     zoekbalk en blijft alleen de wrap-regel over. */
  @media (min-width: 601px) and (max-width: 1023px) {
    .hej-acg-resultsbar--with-search:has([data-acg-sort-wrap]) .hej-acg-view-controls,
    .hej-acg-resultsbar--with-search:has([data-acg-filter-wrap]) .hej-acg-view-controls { margin-left: auto; }
  }
  .hej-acg-view-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: #e8e8ea;
  }
  /* Feedback 2026-09-05: track-stijl gelijk aan Sorteren/btw hiernaast (zie comment daar); hoogte 32px + 2x4px padding = 40px totaal. */
  .hej-acg-view-mode {
    min-width: 104px;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #3c3c43;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .hej-acg-view-mode svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .hej-acg-view-mode.is-active { color: var(--kleur-wit, #fff); background: var(--kleur-donker-4, #1a1a1a); }
  .hej-acg-view-mode:focus-visible { outline: 2px solid var(--acg-accent, var(--kleur-groen, #20be72)); outline-offset: 2px; }
  /* Feedback 2026-09-05: incl./excl. btw-schakelaar, zelfde segmented-pill-
    stijl als .hej-acg-view-toggle hierboven maar compacter (secundaire
    controle, geen 2 iconen nodig). */
  /* Feedback 2026-09-05: zelfde grijze track + zwevende zwarte pil-stijl als Sorteren/Liggend-Staand hierboven. */
  .hej-acg-btw-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    flex: 0 0 auto;
    background: #e8e8ea;
    border-radius: 999px;
    padding: 4px;
  }
  .hej-acg-btw-btn {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #3c3c43;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease;
  }
  .hej-acg-btw-btn.is-active { background: var(--kleur-donker-4, #1a1a1a); color: var(--kleur-wit, #fff); }
  .hej-acg-btw-btn:focus-visible { outline: 2px solid var(--acg-accent, var(--kleur-groen, #20be72)); outline-offset: 2px; }
  .hej-acg-sort-menu .hej-acg-filter-btn { min-width: 0; padding-inline: 15px; justify-content: center; }
  .hej-acg-sort-menu .hej-acg-filter-panel { min-width: 240px; }
  /* 2026-08-26: paneel moet exact de breedte van de volledige-breedte sidebarknop volgen, niet .hej-acg-sort-menu's eigen min-width:240px — deze regel is een klasse specifieker en wint dus altijd. */
  .hej-acg-sidebar-sort.hej-acg-sort-menu .hej-acg-filter-panel { min-width: 0; }

  @media (min-width: 1024px) {
    .hej-acg-grid.hej-acg-grid--landscape { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .hej-acg-grid--landscape .hej-acg-cell { border-radius: 20px; }
    .hej-acg-grid--landscape .hej-acg-card--laptop {
      min-height: 252px;
      display: grid;
      grid-template-columns: minmax(200px, 27%) minmax(0, 1fr) 230px;
      grid-template-rows: 1fr;
      align-items: stretch;
    }
    .hej-acg-grid--landscape .hej-acg-imglink { grid-column: 1; grid-row: 1; min-width: 0; }
    .hej-acg-grid--landscape .hej-acg-imgwrap { height: 100%; min-height: 252px; aspect-ratio: auto; }
    .hej-acg-grid--landscape .hej-acg-imgwrap img { max-width: calc(76% * var(--img-scale, 1)); max-height: calc(68% * var(--img-scale, 1)); }
    .hej-acg-grid--landscape .hej-acg-info {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      padding: 34px 26px 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      z-index: 2;
    }
    .hej-acg-grid--landscape .hej-acg-name,
    .hej-acg-grid--landscape .hej-acg-title--bold { font-size: clamp(17px, 1.5vw, 21px); }
    .hej-acg-grid--landscape .hej-acg-proc { margin-top: 3px; font-size: 14px; }
    .hej-acg-grid--landscape .hej-acg-divider { display: none; }
    .hej-acg-grid--landscape .hej-acg-kenmerken { height: auto; min-height: 70px; padding: 22px 0 14px; margin: 0; }
    .hej-acg-grid--landscape .hej-acg-kenmerken-label { margin-bottom: 9px; }
    .hej-acg-grid--landscape .hej-acg-kenmerken-icons { justify-content: flex-start; gap: 14px; }
    .hej-acg-grid--landscape .hej-acg-kicon { width: 21px; height: 21px; }
    .hej-acg-grid--landscape .hej-acg-chips--laptop {
      width: min(88%, 440px);
      min-height: 48px;
      height: auto;
      margin-top: auto;
      padding: 8px 4px;
      border: 1px solid #e4e4e7;
      border-radius: 10px;
      background: rgba(255,255,255,.78);
    }
    .hej-acg-grid--landscape .hej-acg-chip { font-size: 13px; }
    .hej-acg-grid--landscape .hej-acg-actions {
      grid-column: 3;
      grid-row: 1;
      margin: 0;
      padding: 52px 22px 20px;
      justify-content: center;
      gap: 10px;
      z-index: 2;
    }
    .hej-acg-grid--landscape .hej-acg-action-price { width: 100%; margin: 24px 0 -6px; justify-content: center; text-align: left; }
    .hej-acg-grid--landscape .hej-acg-action-price__current { font-size: 24px; }
    .hej-acg-grid--landscape .hej-acg-view,
    .hej-acg-grid--landscape .hej-acg-buynow { height: 44px; font-size: 13px; }
    .hej-acg-grid--landscape .hej-acg-wish { top: 14px; right: 18px; }
    .hej-acg-grid--landscape + .hej-acg-usp-bar { grid-column: 1 / -1; }
  }


  /* 601-1023px (2026-08-26): 2 kolommen + filter-eiland naast het raster i.p.v. gestapeld, zoals desktop. ≤600px ongewijzigd (eigen position:fixed-regel verderop). */
  @media (max-width: 1023px) {
    .hej-acg-grid { grid-template-columns: repeat(2, 1fr); }
  }
  /* Mobiel-liggend (2026-08-18): eigen 2-koloms kaart (afbeelding/prijs
    links, titel+specs+CTA's rechts), niet zomaar de desktopkaart verkleind.
    Titelhoogte/regelaantal en kenmerken-icoonrij zijn nadien meermaals
    aangepast, zie latere feedback-comments verderop bij de betreffende regels. */
  @media (max-width: 1023px) {
    .hej-acg-grid.hej-acg-grid--landscape { grid-template-columns: 1fr; gap: 12px; }
    .hej-acg-grid--landscape .hej-acg-cell { border-radius: 22px; }
    .hej-acg-grid--landscape .hej-acg-card--laptop {
      display: grid;
      grid-template-columns: 40% 1fr;
      grid-template-rows: 1fr auto;
      column-gap: 14px;
      row-gap: 12px;
      padding: 15px;
    }
    /* 15px spiegelt kaartpadding + wish-icon (right:15px), symmetrische hoekplaatsing (2026-09-03). Ongescoopt op --laptop: geldt ook voor accessoirekaarten. */
    .hej-acg-grid--landscape .hej-acg-labels { top: 15px; left: 15px; }
    .hej-acg-grid--landscape .hej-acg-wish { top: 15px; right: 15px; }
    /* flex-start (2026-09-03): titel heeft nu vaste hoogte van 4 regels, met align-items:center zweefde de vierkante afbeelding los met te veel lege ruimte erboven/eronder. */
    .hej-acg-grid--landscape .hej-acg-imglink {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      min-width: 0;
    }
    /* Feedback 2026-09-03: "de afbeelding moet stukken naar beneden bij
      laptops en bij accessoires een beetje" — align-items:flex-start
      hierboven lost de vorige "beeld zweeft los in het midden"-bug op,
      maar zet het beeld nu wel exact tegen de bovenkant. padding-top
      schuift 'm weer wat naar beneden zonder terug te vallen op center
      (dat schaalt automatisch mee met de kolomhoogte i.p.v. een vaste
      afstand, en gaf zo de vorige bug). Laptopkaarten (.hej-acg-card--
      ram_inch) krijgen een grotere waarde dan accessoirekaarten
      (.hej-acg-card--accessoire), zoals gevraagd. */
    .hej-acg-grid--landscape .hej-acg-card--ram_inch .hej-acg-imglink { padding-top: 56px; }
    .hej-acg-grid--landscape .hej-acg-card--accessoire .hej-acg-imglink { padding-top: 16px; }
    .hej-acg-grid--landscape .hej-acg-imgwrap {
      width: 100%;
      aspect-ratio: 1 / 1;
      height: auto;
    }
    .hej-acg-grid--landscape .hej-acg-imgwrap img {
      max-width: calc(92% * var(--img-scale, 1));
      max-height: calc(92% * var(--img-scale, 1));
    }
    .hej-acg-grid--landscape .hej-acg-info {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      padding: 0 34px 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }
    .hej-acg-grid--landscape .hej-acg-name,
    .hej-acg-grid--landscape .hej-acg-title--bold {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.28;
      /* Feedback 2026-09-03: "het mag daar 4 regels worden want ik zie nog
         steeds ......" — 3 regels was op deze compactere liggend-kaart nog
         niet altijd genoeg. Zelfde vaste-hoogte-principe, nu 4 regels net
         als de staande mobiele titel, blijft dus nog steeds gelijke
         kaarthoogte binnen een rij. */
      height: calc(1.28em * 4);
      white-space: normal;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      line-clamp: 4;
    }
    /* Processor mag net als de titel naar een 2e regel doorlopen i.p.v.
      afgekapt te worden (feedback 2026-08-18: "als het tweede gedeelte van
      de titel niet past moet je verder gaan op de volgende regel, voor
      zowel het eerste als het tweede gedeelte") — basisregel elders in dit
      bestand zet white-space:nowrap+ellipsis voor de éénregelige desktop-
      standaardweergave, hier expliciet teruggedraaid. */
    .hej-acg-grid--landscape .hej-acg-proc {
      font-size: 12px;
      margin-top: 5px;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    .hej-acg-grid--landscape .hej-acg-divider { display: none; }
    .hej-acg-grid--landscape .hej-acg-kenmerken {
      height: auto;
      min-height: 0;
      padding-top: 0;
      margin: 14px 0 8px;
    }
    .hej-acg-grid--landscape .hej-acg-kenmerken-icons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: start;
      gap: 4px 6px;
      width: 100%;
      max-width: 160px;
    }
    .hej-acg-grid--landscape .hej-acg-kicon {
      width: 18px;
      height: 18px;
      justify-self: start;
    }
    /* Voorkomt dat kenmerkens margin-bottom:8px + deze 16px optellen tot asymmetrische ruimte. */
    .hej-acg-grid--landscape .hej-acg-kenmerken + .hej-acg-chips--laptop {
      margin-top: 0;
    }
    /* Kader-vormgeving zoals desktop-liggend. width:calc(100%+34px) i.p.v.
      100%: 34px = .hej-acg-info's bookmark-padding-right, zodat de balk tot
      de knoppenrand komt (2026-08-18). */
    .hej-acg-grid--landscape .hej-acg-chips--laptop {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: calc(100% + 34px);
      height: auto;
      margin-top: 16px;
      padding: 10px 10px;
      border: 1px solid #e4e4e7;
      border-radius: 10px;
      background: rgba(255, 255, 255, .78);
      gap: 18px;
    }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 0;
      padding: 4px 6px;
      gap: 3px;
    }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip:first-child {
      align-items: flex-start;
      padding-left: 0;
    }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip svg { width: 12px; height: 12px; }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip-text { flex-direction: column; align-items: center; gap: 0; }
    /* Waarde niet meer vetgedrukt (feedback 2026-08-18: "maak de tekst niet
      dikgedrukt, ze moeten allemaal hetzelfde zijn") — zelfde gewicht als
      het label eronder (500), i.p.v. waarde 700 vs. label 500. */
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip-value { font-size: 11px; font-weight: 500; color: var(--kleur-tekst, #1d1d1f); line-height: 1.2; }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip-label {
      font-size: 8.5px;
      font-weight: 500;
      color: var(--kleur-tekst-zachter, #86868b);
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: .01em;
    }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip:not(:last-child)::after {
      display: block;
      right: -9px;
      height: 30px;
      top: 50%;
      transform: translateY(-50%);
    }
    /* 2026-08-18: .hej-acg-actions eigen geneste grid (prijs boven "Bekijk product" in kolom 1, "Direct bestellen" in kolom 2), zodat beide knoppen in rij 2 exact even breed zijn zonder de buitenste kaart-grid aan te passen. */
    .hej-acg-grid--landscape .hej-acg-actions {
      grid-column: 1 / -1;
      grid-row: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 10px;
      row-gap: 10px;
      margin: 0;
      padding: 0;
    }
    .hej-acg-grid--landscape .hej-acg-action-price {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      margin: 0;
      min-height: 0;
    }
    .hej-acg-grid--landscape .hej-acg-action-price__current { font-size: 17px; }
    /* white-space:nowrap voorkomt dat "incl. btw" in deze smalle kolom
      middenin het woord afbreekt naar een 2e regel (feedback 2026-08-18:
      "schrijf incl. btw op 1 lijn"). */
    .hej-acg-grid--landscape .hej-acg-action-price__tax { font-size: 9px; white-space: nowrap; }
    .hej-acg-grid--landscape .hej-acg-view {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
      padding: 0 10px;
      height: 46px;
      font-size: 12px;
      gap: 5px;
    }
    .hej-acg-grid--landscape .hej-acg-buynow {
      grid-column: 2;
      grid-row: 2;
      width: 100%;
      padding: 0 10px;
      height: 46px;
      font-size: 12px;
      gap: 5px;
    }
    .hej-acg-grid--landscape .hej-acg-view svg,
    .hej-acg-grid--landscape .hej-acg-buynow svg { width: 14px; height: 14px; }
    .hej-acg-grid--landscape .hej-acg-view svg { margin-left: 0; }
    .hej-acg-grid--landscape + .hej-acg-usp-bar { grid-column: 1 / -1; }
  }
  /* Op de smalste telefoons (bijv. iPhone SE, ≤374px) blijft de spec-rij
    altijd 3 kolommen naast elkaar (nooit wrappen naar meerdere rijen, zodat
    de kaart liggend blijft aanvoelen) — spacing/iconen/tekst verkleinen
    eerst, in die volgorde. */
  @media (max-width: 374px) {
    .hej-acg-grid--landscape .hej-acg-card--laptop { column-gap: 10px; padding: 14px; }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip { padding: 1px 2px; }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip svg { width: 10px; height: 10px; }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip-value { font-size: 10px; }
    .hej-acg-grid--landscape .hej-acg-chips--laptop .hej-acg-chip-label { font-size: 7.5px; }
  }
  /* Mobiel + tablet/kleine desktop (≤1199px): de sidebar staat niet meer
     altijd open/gestapeld boven het raster. In plaats daarvan wordt dezelfde
     <aside> (geen dubbel formulier) een bottom-sheet/volledig-scherm-paneel
     die de 2 zwevende knoppen hieronder openen/sluiten; data-mobile-panel
     schakelt binnen die ene sheet tussen het sorteerblok en het
     filterformulier (feedback 2026-08-18; grens verbreed 601-1199px op
     2026-09-09, gebruikerswens: "die formaten [iPad mini t/m iPad Pro] de
     functie van mobiel, dus zwevende knoppen" — was tot dan uitsluitend
     ≤600px, ≥601px kreeg hiervoor de permanente desktop-zijbalk). */
  @media (max-width: 1199px) {
    .hej-acg-body.has-sidebar { gap: 0; }
    .hej-acg-mobile-filterbar {
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: max(16px, env(safe-area-inset-bottom));
      z-index: var(--laag-filterbalk, 35);
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    /* Feedback 2026-09-09: "die 2 zwevende knoppen niet zo breed" — waren flex:1 1 0 (elk exact de helft van de balk); nu content-breedte (padding) i.p.v. gelijk verdeeld over de volle breedte, en de balk zelf centreert ze. */
    .hej-acg-mobile-filterbar-btn {
      flex: 0 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 48px;
      padding: 0 34px;
      border: 0;
      border-radius: 14px;
      background: var(--kleur-tekst, #1d1d1f);
      color: var(--kleur-wit, #fff);
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
    }
    .hej-acg-mobile-filterbar-btn .hej-acg-filter-icon svg { width: 18px; height: 18px; }
    /* Feedback 2026-09-05: mobiele Sorteren/Filters-knoppen krijgen dezelfde groen-blauwe gradient als desktop zodra er echt iets actief is. */
    .hej-acg-mobile-filterbar-btn.has-selection { background: linear-gradient(90deg, var(--acg-accent, var(--kleur-groen, #20be72)), var(--kleur-blauw, #0071e3)); color: var(--kleur-wit, #fff); }
    /* is-hidden verbergt de zwevende knoppen zelf zolang hun paneel open
      staat (JS-getoggeld in initMobileFilterBar). Zelfde vertraagde-
      visibility-truc als de backdrop hieronder (2026-08-18, live screenshot
      toonde anders een pixel-lek van de tekst "Filters" onderin het scherm
      op iOS Safari — translateY/opacity alleen is daar niet betrouwbaar
      genoeg, visibility:hidden sluit het lek volledig uit). */
    .hej-acg-mobile-filterbar {
      opacity: 1;
      visibility: visible;
      transition: opacity .22s ease, visibility 0s;
    }
    .hej-acg-mobile-filterbar.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s ease, visibility 0s .22s;
    }
    .hej-acg-mobile-filterbar-backdrop {
      position: fixed;
      inset: 0;
      z-index: var(--laag-filterbalk-waas, 33);
      background: rgba(0, 0, 0, .42);
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility 0s .3s;
    }
    .hej-acg-mobile-filterbar-backdrop.is-open {
      opacity: 1;
      visibility: visible;
      transition: opacity .3s ease, visibility 0s;
    }
    /* Paneel bedekt de volledige pagina (2026-08-18). inset:0 i.p.v. height:100dvh (2026-09-05, iPhone: "soms groen onderaan" — dvh-herberekening bij adresbalk-animatie gaf heel even een gaatje met de pagina erachter zichtbaar; inset:0 volgt altijd exact de echte viewportranden). */
    /* Feedback 2026-09-05: "zorg dat heel mn beeldscherm het menu wordt, geen gekke kleuren" — geen grijze achtergrond met een los zwevend wit kaartje meer; het WITTE paneel zelf vult nu de volledige aside (zie .hej-acg-sidebar-island hieronder), geen padding/kleur hier die nog ergens doorheen kan schemeren. */
    .hej-acg-body.has-sidebar .hej-acg-sidebar {
      position: fixed;
      inset: 0;
      width: auto;
      height: auto;
      z-index: var(--laag-zijbalk, 34);
      background: var(--kleur-wit, #ffffff);
      border-radius: 0;
      padding: 0;
      box-sizing: border-box;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transform: translateY(100%);
      visibility: hidden;
      transition: transform .36s cubic-bezier(.22, 1, .36, 1), visibility 0s .36s;
    }
    .hej-acg-body.has-sidebar .hej-acg-sidebar.is-mobile-open {
      transform: translateY(0);
      visibility: visible;
      transition: transform .36s cubic-bezier(.22, 1, .36, 1), visibility 0s;
    }
    /* Kruisje position:absolute: los van de flex-centrering hieronder (die alleen voor het korte sorteerpaneel geldt, niet de lange filterlijst). */
    /* !important nodig: assets/header.css heeft zelf al #hej-header{display:block!important} (bewuste bescherming tegen een oude theme.liquid-bug). Deze regel is specifieker (extra :has + id), dus wint alleen zolang de sidebar echt open is. */
    body:has(.hej-acg-sidebar.is-mobile-open) #hej-header { display: none !important; }
    /* BUGFIX (feedback 2026-09-09, tablet/kleine desktop: "sorteren komt niet helemaal lekker open") — .hej-dnav-row (de "Laptop kopen/Desktop kopen/..."-rij) is GEEN kind van #hej-header, dus bleef zichtbaar boven het paneel op 601-1199px (op ≤600px was 'm toevallig al onzichtbaar via zijn eigen mobiele hamburger-vervanging, vandaar dat dit daar nooit opviel). Zelfde !important-patroon als hierboven nodig: assets/header.css zet 'm zelf op body > .hej-dnav-row{display:flex!important}. */
    body:has(.hej-acg-sidebar.is-mobile-open) .hej-dnav-row { display: none !important; }
    /* theme.liquid kreeg viewport-fit=cover (was tot nu toe niet gezet, dus env(safe-area-inset-*) stond overal op 0) — hier de top-klaring zodat het kruisje niet onder de dynamic island valt terwijl de achtergrond wel helemaal doorloopt. */
    .hej-acg-sidebar-mobile-close {
      display: flex;
      position: absolute;
      top: calc(14px + env(safe-area-inset-top));
      right: 18px;
      z-index: 2;
      width: 32px;
      height: 32px;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: var(--kleur-tekst, #1d1d1f);
      color: var(--kleur-wit, #fff);
      padding: 0;
    }
    .hej-acg-sidebar-mobile-close svg { width: 16px; height: 16px; }
    .hej-acg-sidebar-dots { display: none; }
    /* Feedback 2026-09-05 (opnieuw): "ik zie geen eilanden meer, ik wil dat op
      een eiland, binnen die eiland" — het kaartje terug (ronding+schaduw+
      marge), de buitenste aside blijft wél de volle inset:0-dekking houden
      (dat ging over "helemaal naar boven", niet over het eiland zelf). Marge
      onderaan is ook meteen de fix voor "onderkant wordt zwart": de zwevende
      Toepassen-knop kan nu niet meer verder komen dan de RAND VAN HET
      EILAND, dat zelf niet meer tot de fysieke schermrand doorloopt — Safari
      ziet daaronder dus altijd de grijze aside-achtergrond, nooit zwart. */
    /* Feedback 2026-09-05: "maak dat witte eiland iets duidelijker" — donkerder grijs op de aside + een steviger schaduw op het eiland, want de oorspronkelijke desktop-schaduw (subtiel, bedoeld tussen andere content) viel op een volledig grijs scherm bijna niet op. */
    .hej-acg-sidebar { background: var(--kleur-lijn-licht, #e5e5ea); }
    .hej-acg-sidebar-island {
      width: auto;
      /* BUGFIX (feedback 2026-09-10, iPhone XR-screenshot: "Werkgeheugen"/
         "Toepassen" renderden buiten het ronde witte eiland) — dit was
         hier eerst min-height:0. Het eiland is een flex-item in de
         kolom-flexbox van .hej-acg-sidebar (regel hieronder); min-height:0
         schakelde flexbox's automatische content-gebaseerde minimum uit,
         waardoor de browser het eiland mocht comprimeren tot ONDER de
         hoogte van zijn eigen inhoud bij lange filterlijsten. Het eiland
         zelf heeft geen overflow:hidden, dus de rest van de inhoud liep
         gewoon door voorbij de (te kort geknepen) ronde rand, zichtbaar op
         de grijze achtergrond erachter. Zonder min-height:0 valt flexbox
         terug op zijn eigen automatische minimum (content-hoogte), dus kan
         het eiland niet meer smaller worden dan zijn inhoud; past het
         geheel niet op het scherm, dan vangt justify-content:safe center
         (regel verderop) dat al op zoals bedoeld: start-uitgelijnd en
         scrollbaar via .hej-acg-sidebar's eigen overflow-y:auto. */
      margin: calc(56px + env(safe-area-inset-top)) 12px calc(28px + env(safe-area-inset-bottom));
      border-radius: 22px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .07), 0 16px 32px rgba(0, 0, 0, .12);
      padding: 20px 18px 22px;
      box-sizing: border-box;
    }
    .hej-acg-sidebar[data-mobile-panel="sort"] .hej-acg-sidebar-head,
    .hej-acg-sidebar[data-mobile-panel="sort"] form { display: none; }
    .hej-acg-sidebar[data-mobile-panel="filters"] .hej-acg-sidebar-sort { display: none; }
    /* Feedback 2026-09-05: prijsfilter alleen in de Filters-knop, niet in Sorteren. */
    .hej-acg-sidebar[data-mobile-panel="sort"] .hej-acg-price-filter { display: none; }
    .hej-acg-sidebar[data-mobile-panel="sort"] [data-acg-sort-btn] { display: none; }
    /* De grijze-track-pil (.hej-acg-sidebar-sort, desktop-stijl) blijft anders zichtbaar als lege pil rond het witte paneel — vandaar die rare grijze bogen. */
    .hej-acg-sidebar[data-mobile-panel="sort"] .hej-acg-sidebar-sort {
      background: transparent; padding: 0; margin: 0; border-radius: 0;
    }
    .hej-acg-sidebar[data-mobile-panel="sort"] .hej-acg-filter-panel {
      position: static;
      max-height: none;
      overflow: visible;
      pointer-events: auto;
      box-shadow: none;
      width: 100%;
    }
  }
  /* De @media(min-width:1024px)-verfijningen hierboven (sticky/margin-top/padding-right op de zijbalk, max-height/overflow-y op het eiland) zijn gemaakt voor de permanente inline zijbalk van "breed" (>=1200px) en gelden anders ongewenst ook door in 1024-1199px, waar de zijbalk nu net als op tablet een volledig-scherm paneel is (positie:fixed hierboven wint al op specificiteit, margin/max-height niet: die staan hier los gereset). */
  @media (min-width: 1024px) and (max-width: 1199px) {
    .hej-acg-body.has-sidebar .hej-acg-sidebar {
      margin-top: 0;
      padding-right: 0;
    }
    .hej-acg-body.has-sidebar .hej-acg-sidebar-island {
      max-height: none;
      overflow-y: visible;
    }
  }
  /* Feedback 2026-09-09 (2 rondes): "eilanden niet van links naar rechts
     uitstrekken, mooi in het midden" + "eiland wel wat groter, kruisje niet
     zo hoog maar vlak boven de eiland" + "geldt voor alle drie". min(94%,
     600px) i.p.v. een vaste 600px: op mobiel (≤600px) blijft 94% altijd
     kleiner dan 600px, dus daar verandert er zichtbaar NIETS (dezelfde
     bijna-volle-breedte als voorheen) — de 600px-cap wordt pas echt bereikt
     vanaf ~638px viewport, dus precies vanaf tablet. Kruisje niet meer
     position:absolute (dat dwong een handmatige top-afstand tot de
     schermrand, los van waar het eiland zelf staat — bij het verticaal
     gecentreerde sorteerpaneel gaf dat een groot, wisselend gat). Nu een
     gewone flex-rij vóór het eiland (align-self:flex-end + margin-right als
     rand-uitlijning, min(47%,300px) = exact de helft van de eilandbreedte
     hierboven op elke viewportbreedte), dus hij staat altijd letterlijk
     vlak boven het eiland, wat de inhoud ook doet. */
  @media (max-width: 1199px) {
    /* Feedback 2026-09-09: "filtermenu mooier en beter plaatsen bij alle drie" — justify-content:safe center i.p.v. het standaard flex-start: centreert het paneel verticaal zodra het past (zoals Filters vaak op tablet/desktop-hoogte, nu geen grote lege grijze onderkant meer), valt automatisch terug op start-uitgelijnd+scrollbaar zodra de inhoud niet past (lange lijst op een laag scherm) — dus geen aparte regel per paneeltype meer nodig, zie [data-mobile-panel="sort"] hieronder. */
    .hej-acg-sidebar { display: flex; flex-direction: column; align-items: center; justify-content: safe center; }
    .hej-acg-sidebar-island {
      width: min(94%, 600px);
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
    }
    /* Was position:absolute met een eigen top-afstand tot de schermrand, los van de (56px+safe-top)-marge die het eiland zelf had voor die ruimte. Nu in de gewone flow: kruisje krijgt die top-klaring zelf (margin-top), het eiland niet meer (hierboven op 0 gezet) — anders zou de ruimte dubbel op tellen. */
    /* BUGFIX (feedback 2026-09-10, screenshot: kruisje was plat gedrukt tot een
       ovaal i.p.v. een rondje bij het lange Filters-paneel, bij het korte
       Sorteren-paneel wel gewoon rond) — zonder flex-shrink:0 mag dit
       vaste-hoogte (32px) flex-item bij overlopende inhoud alsnog verticaal
       krimpen richting zijn eigen content-hoogte (het kruisje-icoon, ±16px),
       zelfde soort flexbox-automatische-minimumhoogte-val als hierboven bij
       .hej-acg-sidebar-island al gevonden en gefixt. Breedte (cross-axis)
       bleef daarbij wel altijd 32px, vandaar een ovaal i.p.v. een kleinere
       cirkel. Tegelijk iets meer ademruimte boven het kruisje (14px -> 22px). */
    .hej-acg-sidebar-mobile-close {
      position: static;
      align-self: flex-end;
      flex-shrink: 0;
      margin: calc(22px + env(safe-area-inset-top)) calc(50% - min(47%, 300px)) 10px 0;
    }
  }
  /* Grens 601 -> 1200 (2026-09-09): de zwevende knoppen/kruisje blijven nu ook 601-1199px staan, alleen "breed" (>=1200px) krijgt weer de permanente zijbalk. */
  @media (min-width: 1200px) {
    .hej-acg-mobile-filterbar,
    .hej-acg-mobile-filterbar-backdrop,
    .hej-acg-sidebar-mobile-close { display: none; }
  }
  /* ── Mobiel ── */
  @media (max-width: 600px) {
    .hej-acg-resultsbar { width: calc(100% - 32px); margin-bottom: 14px; align-items: flex-start; }
    .hej-acg-body.has-sidebar .hej-acg-resultsbar { width: 100%; }
    .hej-acg-view-controls { flex: 1 1 auto; }
    /* Feedback 2026-09-03: op mobiel moet de weergavekeuze (Liggend/Staand)
       links staan en BOVEN de zoekbalk, i.p.v. eronder rechts-uitgelijnd —
       view-controls krijgt order:-1 (i.p.v. de zoekbalk), volle breedte
       (feedback vervolg: "moet ook helemaal strekken naar rechts", zelfde
       edge-to-edge stijl als de zwarte "Sorteren"-knop erboven — was eerst
       natuurlijke breedte + links uitgelijnd); zoekbalk verschuift naar
       order:0 (2e rij, volle breedte). Scope alleen
       .hej-acg-resultsbar--with-search zodat de ~64 andere laptopcollecties
       zonder zoekbalk hun bestaande rechts-uitgelijnde view-controls (regel
       hierboven) behouden. */
    .hej-acg-resultsbar--with-search { flex-wrap: wrap; row-gap: 10px; }
    .hej-acg-resultsbar--with-search .hej-acg-view-controls { order: -1; flex: 1 1 100%; width: 100%; }
    .hej-acg-resultsbar--with-search .hej-acg-view-toggle { width: 100%; }
    .hej-acg-resultsbar--with-search [data-acg-filter-wrap] { order: 0; width: 100%; }
    .hej-acg-search-bar.hej-acg-search-bar--inline { order: 1; width: 100%; max-width: none; flex: 1 1 100%; }
    /* Feedback 2026-09-05: volgorde op mobiel = grid, btw, zoekbalk. */
    .hej-acg-resultsbar--with-search .hej-acg-btw-toggle { order: 0; width: 100%; }
    .hej-acg-btw-toggle { display: grid; }
    .hej-acg-sort-menu { min-width: 0; }
    .hej-acg-result-count { padding-top: 14px; font-size: 12px; }
    .hej-acg-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 0 28px; }
    .hej-acg-cell { border-radius: 16px; }
    /* BUGFIX (feedback 2026-09-03: "volgens mij komen niet alle USP's voor op
       mobiel" — klopte: items 3+4 van elke balk stonden op display:none op
       mobiel, dus garantie/bedenktijd/batterij/CO2 waren daar NOOIT
       zichtbaar, ongeacht welke balkvariant langskwam, want die 2 posities
       zijn altijd verborgen ongeacht de inhoud. Nu een 2x2-grid i.p.v. de
       oorspronkelijke 2-van-4 (feedback 2026-08-06 was over drukte bij 4
       náást elkaar; dat probleem bestaat niet meer sinds dit al een 2-koloms
       grid is, dus alle 4 items kunnen gewoon in 2 rijen). */
    .hej-acg-usp-bar { padding: 14px 16px; border-radius: 14px; grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 14px; }
    .hej-acg-usp:nth-child(3)::before { display: none; }
    .hej-acg-usp-text strong { font-size: 12px; }
    .hej-acg-usp-text em { font-size: 10.5px; }
    .hej-acg-tabs-bar { padding: 16px 0 12px; }
    .hej-acg-tabs { -webkit-overflow-scrolling: touch; }
    /* Feedback 2026-09-03: "bij mobiel moet het ook, en desnoods mag het
       naar de 4e regel" — op mobiel is de kaart smaller, dus 3 regels is
       soms nog niet genoeg. Zelfde vaste-hoogte-principe als de
       basisregel, nu met 4 in plaats van 3 regels gereserveerd; blijft dus
       nog steeds gelijke kaarthoogte binnen een rij, alleen ruimer. */
    .hej-acg-title { font-size: 13px; height: calc(1.35em * 4); -webkit-line-clamp: 4; }
    .hej-acg-name { font-size: 14px; height: calc(1.25em * 4); -webkit-line-clamp: 4; }
    .hej-acg-title--bold { font-size: 14px; }
    .hej-acg-proc { font-size: 12px; }
    .hej-acg-price { font-size: 15px; }
    .hej-acg-search-wrap { max-width: 100%; }
    .hej-acg-filter, .hej-acg-filter-btn { width: 100%; }
    .hej-acg-filter-btn { justify-content: center; }
    .hej-acg-filter-panel { left: 0; right: 0; min-width: 0; }
    /* Mobiel blijft ongewijzigd t.o.v. vóór feedback 2026-08-13: specs
       gestapeld i.p.v. naast elkaar, oude ruimte behouden (regel:
       ≤600px niet aanpassen tenzij gevraagd). */
    .hej-acg-info { padding-top: 16px; }
    .hej-acg-kenmerken { height: 80px; padding-top: 8px; margin-bottom: 8px; }
    .hej-acg-kenmerken-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px 8px; width: 100%; }
    .hej-acg-kicon { width: 18px; height: 18px; justify-self: center; }
    .hej-acg-action-price__current { font-size: 16px; }
    .hej-acg-chips {
      flex-direction: column;
      align-items: flex-start;
      flex-wrap: nowrap;
      justify-content: flex-end;
      gap: 4px;
      /* Was vast op 2 chips (feedback 2026-09-03: "op mobiel mag je ook 3
         specs doen als ze dat hebben, maar dan moet de kaart iets hoger
         worden") — nu ruimte voor 3 gestapelde regels + 2 tussenruimtes
         i.p.v. 2 regels + 1 tussenruimte. De kaart zelf heeft geen eigen
         vaste maximumhoogte, dus die groeit hierdoor vanzelf evenredig mee. */
      height: calc(1.3em * 3 + 8px);
    }
    /* Waarde/label onder elkaar i.p.v. naast elkaar (feedback 2026-08-18,
      screenshot toonde overlappende/verweven tekst: "8 GB RAM"+"14.1 inch"
      liepen in elkaar over): bij 8.5px lettergrootte in een kolom van maar
      ~55-60px paste de samengevoegde tekst niet altijd binnen white-space:
      nowrap, waardoor die over de volgende kolom heen liep. Gestapeld
      (waarde boven, label eronder, zelfde patroon als de mobiel-liggend-
      kaart) heeft elke regel nog maar een klein deel van de tekst nodig,
      dus geen overlap meer mogelijk. */
    /* Zelfde ademruimte-fix als de basisregel hierboven, aangepast voor de
      krappere portret-breedte (feedback 2026-08-18: geldt voor alle
      devices/grids, dus ook hier). gap:0 + padding-left:0 gaf voorheen
      nul ruimte rond elke scheidingslijn. */
    .hej-acg-chips--laptop {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: center;
      gap: 8px;
      width: 100%;
      height: auto;
      min-height: 32px;
    }
    .hej-acg-chips--laptop .hej-acg-chip {
      gap: 0;
      font-size: 8.5px;
      letter-spacing: -.015em;
      min-height: 30px;
      padding: 3px 4px;
    }
    .hej-acg-chips--laptop .hej-acg-chip-text { flex-direction: column; align-items: center; gap: 0; }
    .hej-acg-chips--laptop .hej-acg-chip-value { font-weight: 500; }
    .hej-acg-chips--laptop .hej-acg-chip-label {
      font-size: 7px;
      color: var(--kleur-tekst-zachter, #86868b);
      text-transform: uppercase;
      letter-spacing: 0;
    }
    .hej-acg-chips--laptop .hej-acg-chip + .hej-acg-chip {
      margin-left: 0;
    }
    .hej-acg-chips--laptop .hej-acg-chip:not(:last-child)::after {
      right: -4px;
      height: 20px;
    }
  }

/* Hieronder de vaste helft van regels die verder van instellingen afhangen. Die regels staan dus
   op twee plekken: het instelbare deel is in de sectie gebleven en houdt daar zijn hogere gewicht,
   het deel dat nooit verandert staat hier. Bewust onderaan, zodat de volgorde klopt met hoe het
   eerst was. */
  @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');