<!--
  ============================================================================================
  RICHTING D — CATEGORY-MACHINES.HTML (2026-06-23) — "Machines"
  Basis = direction-d/category.html (zustercategorie "Accessoires / Onderdelen"), heel strak gevolgd.
  Verschillen t.o.v. die pagina: (1) GEEN machinezoeker in de cat-head (die hoort alleen bij Accessoires);
  de cat-head is één kolom (titel + intro + subcategorie-chips). (2) Productkaarten dragen een USP-lijst
  (zelfde .prod ul-component als de homepage-bestsellers). Verder identiek systeem, filters, cattree, SEO.
  Afgeleid van direction-d/index.html: ALLE chrome (topbar, header, zoek, mega-menu, zoek-overlay,
  minicart, footer + JS) + het D-designsysteem (Figtree, navy/rood/lichtblauw, rode selvedge,
  stiksel-motief: .ruit + dashed .seam + .link-stitch) zijn ongewijzigd overgenomen. De homepage-content
  (hero t/m merkenband) is vervangen door een categorie-body; reviews + nieuwsbrief + footer blijven staan.
  Het .prod-kaartcomponent is hergebruikt (zelfde anatomie als de bestsellers-slider), nu in een wrap-grid
  i.p.v. een track. Filter-/toolbar-idioom (.fgroup/.fopt) komt uit richting-A category.html, herzet in Figtree.

  CONTENT = live van https://www.huissteden.nl/accessoires-onderdelen (playwright-cli, 2026-06-23):
   • H1 "Accessoires / Onderdelen", intro = live meta-omschrijving; 9 subcategorieën als chips (live sidebar-nav).
   • Filters met ECHTE labels + counts: Merk (Bernina 467 … Inspira 1), Product (Borduurringen 106 …),
     Soort naald (Borduurnaald 9 …), Prijs (live bounds € 1 – € 2.280). Toolbar: 1-18 van 2.195, 122 pagina's,
     sorteer-/toon-opties verbatim. Filters zijn illustratief/statisch (filteren niet echt) — net als richting A.
   • 17 ECHTE producten (naam/merk/prijs/beeld 1-op-1; 2 met actieprijs). Beelden gedownload van /media/catalog/
     product/ naar assets/products/ (geen lazy). [De live pagina toont er 18 per pagina; 17 unieke gevangen —
     1 DOM-duplicaat ontdubbeld. Toolbar houdt het live "1-18"-bereik aan, conform de mockup-conventie.]
   • Voorraadstatus "Op voorraad" is een redelijke aanname (live category exposeerde geen per-product stock).

  PRIJSBLOK (.price-block) — spiegelt de homepage-grid "Best verkochte machines":
   • De ⓘ-tooltip naast de actieprijs (.omni) → hover/tap toont de prijsopbouw voor de Omnibus-richtlijn
       ("laagste prijs in de 30 dagen vóór deze aanbieding"). Hover via CSS; tap/toetsenbord via aria-expanded-toggle.
   • Oude + nieuwe prijs staan ALTIJD op één regel (.price-line: flex nowrap + white-space:nowrap; op zeer
       smalle telefoons krimpt de prijs i.p.v. te wrappen). Reguliere (niet-actie) prijs = navy-ink; actieprijs = rood.
   • De losse "Bespaar € X,XX (Y%)"-kortingsbalk (.save-flag) is verwijderd (uit het ontwerp gehaald,
       2026-06-23): korting blijkt nu uit de rode actieprijs + doorgestreepte was-prijs, zoals op de homepage.

  WIJZIGING (2026-06-23, klantfeedback ronde 2):
   • De MACHINEZOEKER is de IDENTIEKE homepage-finderkaart (.finder: kicker "Machinezoeker", Stap 1 + Stap 2
     selects, knop "Toon passende onderdelen", telefoon-hulpregel). Hij zit nu IN de cat-head: .cat-head-grid is
     2-koloms op desktop — links titel + intro + subcategorie-chips, rechts de finder (boven uitgelijnd); op
     mobiel (<901px) vallen de kolommen onder elkaar (tekst boven, finder eronder). BEWUST NIET overgenomen
     (klantverzoek): de hero-titel, de hero-tekst en de "deze week aanbevolen"-producthighlight. [Eerdere rondes:
     eerst de volledige homepage-hero, daarna een genummerde live-part-finder, daarna een losse band onder de
     cat-head; nu in de cat-head rechts uitgelijnd.]
   • De eyebrows op de categoriepagina zijn verwijderd (de "… artikelen op voorraad"-eyebrow in de cat-head
     én de "Over deze categorie"-eyebrow boven het SEO-blok).

  WIJZIGING (2026-06-23, header-sync uit Open Design):
   • De header-edits uit de direction-d Open Design-bron zijn meegenomen, identiek aan index.html: (1) een
     land-/store-switcher rechts in de topbar (NL-vlag + "NL" + chevron) die een modal "Kies uw land" opent
     (Nederland / België / Europese Unie, met vlaggen + actief-vinkje; sluit via backdrop/✕/Escape), incl. de
     bijbehorende .ctry/.ctry-modal CSS + countrySwitcher-JS; (2) logo verkleind: rust 212→180px, stuk 168→143px.

  WIJZIGING (2026-06-23, CATEGORIEËN-BOOM toegevoegd):
   • Nieuw blok "Categorieën" (.cattree) bovenaan de filter-aside, vóór Merk/Product/Soort naald/Prijs. Het
     reconstrueert de live category-sidebar-navigation van huissteden.nl/accessoires-onderdelen (verbatim
     gescraped met playwright-cli, 2026-06-23): een grijze root-kop "Accessoires / Onderdelen" + 9 level-2
     categorieën; de 3 met kinderen (Voor de Naaimachine, Voor de Borduurmachine, Voor de Lock- Covermachine)
     dragen een rechter-chevron en drillen naar een level-3 paneel met een "← <ouder>"-terugrij + "Alle <ouder>"
     + de echte level-3 kinderlabels; de 6 overige zijn kale links. De heading volgt het zustermodel "Filteren"
     (.ruit rode ruit-prefix, Figtree 19px). VOLLEDIG INTERACTIEF in vanilla JS (geen framework): klik/Enter
     drillt, "← terug" / Escape gaat een niveau omhoog; echte <button>/<a>-elementen, focus-states, ≥46px rijen,
     prefers-reduced-motion → instant swap (anders zachte fade). Werkt ook in de mobiele filter-drawer
     (<901px) en is daar scrollbaar. Sub-pagina's bestaan niet in de mockup → alle hrefs wijzen naar
     category.html. De cat-head subcategorie-chips zijn bewust ONGEMOEID gelaten (mogelijk nu deels redundant
     met de boom; bewust niet aangeraakt — laat de klant beslissen).
  ============================================================================================
-->
<!--
  ============================================================================================
  RICHTING D (2026-06-16) — basis = richting A (index.html, v15-lijn), met designelementen uit richting C.
  Alleen de HOMEPAGE; A-content blijft inhoudelijk gelijk. Interactieve onderdelen (mega-menu, minicart,
  zoek-overlay + alle JS) zijn ONGEWIJZIGD overgenomen — dit is een STIJL-pass, geen herbouw.

  Toegepaste klantpunten:
   • Designsysteem uit C: stiksel-motief (rode selvedge, dashed seams, .hero-thread draadlijn, dashed
     sectie-links + blog-"lees verder") + ruit-patch (.ruit) consistent vóór alle eyebrows/kickers/chips.
   • Knopsysteem: SALES-CTA = enige SOLIDE navy #1F3A5F (.btn-cart koop-knoppen + .btn-sale hero-highlight);
     alle andere knoppen op WIT met navy/rood/lichtblauw (.btn-primary wit+navy, .btn-ink wit+rood,
     .btn-ghost wit+navy). Alle navy = #1F3A5F.
   • Header: achtergrond lichtblauw; zoekknop rood → navy #1F3A5F; header- + menubalk-items op normaal
     gewicht (geen vet); product-zoekknop "Vind mijn onderdeel" rechts in de menubalk.
   • Homepage: topbanner vervangen door C-hero (copy + machinezoeker links); rechts een PRODUCTHIGHLIGHT
     (Brother CS70S-actie) i.p.v. statisch beeld, de 3 vinkjes vervallen; blog-sectie (uit C) boven de
     merkenband; machine-categorieën tonen productfoto's OP WIT i.p.v. sfeerbeeld.
  [AANNAME, mag de klant vetoën: de 2e hero-banner van A (showroom/reviews) past niet in de C-hero-layout
   en is weggelaten — die info staat al in de trust-ribbon + reviews-sectie.]

  V2 (2026-06-16): header zand-achtergrond verwijderd (terug naar wit); font-systeem-selector toegevoegd
    (wissel tussen A Zilla Slab+Atkinson / B Poppins / C Figtree via body[data-fontset], in localStorage
    bewaard). Stijl/feature-pass; geen interactieve logica herbouwd. Header navy-zoekknop, normaal-gewicht
    items en nav-CTA "Vind mijn onderdeel" blijven intact. Elke hardgecodeerde "Zilla Slab"/"Atkinson
    Hyperlegible" font-family is nu var(--font-display)/var(--font-body).
  V3 (2026-06-16): HERO COMPACTER (klantverzoek — banner nam te veel schermhoogte zonder reden). Kleinere
    verticale wrap-paddings (34/40 → 22/26), kleinere H1 (clamp 30-40 → 26-33), krappere finder-kaart
    (margin-top 22→15, padding 20/17 → 16/14, steps-gap 18→14, selects 50→46, CTA min-height 50→46) en een
    compactere producthighlight (kaart-padding 22/24 → 18/20, foto max-height 188→150, min-height visual
    380→300). Tap-targets blijven ≥44px. Rest van de pagina ongewijzigd t.o.v. v2.
  V4 (2026-06-16): (1) de losse rode hero-ruit (zwevende diamant rechtsonder de producthighlight)
    verwijderd op klantverzoek ("useless gimmick"); de subtiele lichtrode tint achter de kaart blijft.
    (2) Font-selector uitgebreid met een 4e optie "D · Verfijnd" = Plus Jakarta Sans — zelfde moderne,
    vriendelijke vibe als C (Figtree) maar gepolijster/verfijnder (zit qua karakter tussen A en C in).
  V5 (2026-06-16): font-selector toont nu de ÉCHTE fontnamen i.p.v. richting-labels (A/B/C…):
    "Zilla Slab + Atkinson" · "Poppins" · "Figtree" · "Plus Jakarta Sans" · "Hanken Grotesk"; elke knop is
    in z'n eigen lettertype gezet (live preview). Runner-up "Hanken Grotesk" (data-fontset="e") toegevoegd.
    Chip mag wrappen (langere labels). data-fs-waarden (a-e) + #fonts=-deeplink ongewijzigd qua mechaniek.
    Ook: hero-kicker "De machinezoeker" (met ruit) verwijderd op klantverzoek — de H1 leidt nu direct.
    Mobiele hero-spacing gelijkgetrokken: de tussenruimte tussen de twee blokken (~43px) geldt nu óók
    boven (naar zoek/menu) en onder (naar de USP-balk). De section-default padding (46px) staat op mobiel
    op 0; wrap-padding 26/20 + grid-gap 36 + aangrenzende header-/USP-padding leveren ~gelijke gaps (≈43px).
  ============================================================================================

  V15.1-USABILITY (2026-06-08): zoek-overlay BRUIKBAARHEIDSFIX (geen herbouw — alleen positionering/stacking/
    scroll-affordance/visuele koppeling; rust-pagina, mega-menu, minicart en sticky-chrome ongemoeid). Drie punten:
    (1) ZOEKBALK BLIJFT SCHERP & ACTIEF BOVEN DE SCRIM: de scrim dimde voorheen de hele chrome (scrim was kind van
        .chrome-sticky en schilderde over header/zoek/nav). Nu krijgt de HEADERRIJ bij open de overlay z-index 63
        (> scrim 55, > paneel 62) + position:relative, plus een subtiele 'actieve' navy focus-ring op het zoekveld
        → de zoekbalk blijft wit/verheven en 'bezit' het paneel; alleen de pagina eronder wordt gedimd (zoals productie).
    (2) OVERLAY ANKERT DIRECT ONDER DE ZOEKRIJ: het paneel viel voorheen onder de HELE chrome (de nav stond ertussen).
        Nu top:var(--ac-top) = live gemeten HEADERHOOGTE (JS, geldig in rust-/.is-stuck-/mobiele-staat) → het paneel
        valt vlak onder de zoekbalk en BEDEKT de nav-strip eronder, exact als productie (geen losse zweef-gap).
    (3) DUIDELIJKE SCROLL-AFFORDANCE: het paneel heeft max-height tot vlak boven de viewport-bodem (zoekbalk blijft
        zichtbaar erboven); de paneel-body (.ac-inner, incl. typo-banner) scrollt met overflow-y:auto. Naast de
        gestylede native scrollbar staat er een ALTIJD-ZICHTBARE custom scroll-rail op de paneelrand (OS-onafhankelijk;
        de macOS overlay-scrollbar fadet anders weg) + een zachte BODEMFADE die 'er is meer' hint. De pagina-body scrollt
        niet (body.ac-open-lock blijft); enkel de overlay scrollt. Nieuw grafisch paar: scroll-duim --muted #6B7385 op
        rail #E3E8F0 = 3,86:1 / op webkit-track #EAEFF6 = 4,12:1 (beide ≥3:1, ✓). [FLAG: net als productie BEDEKT het
        paneel de nav-strip (i.p.v. 'm zichtbaar te laten + dimmen) — bewuste keuze, mag de klant vetoën.]

  V15 (2026-06-08): DRIE chrome-features toegevoegd (alle in de header/nav-chrome). Basis = goedgekeurde index.html (v14-lijn).
    Niets aan de rustende pagina veranderd; alle nieuwe UI deelt tokens/fonts/radii/idioom met de bestaande chrome.

    1) ZOEK-OVERLAY (faceted instant-search) — (HERZIEN 2026-06-08).
       De eerdere V15-implementatie was een SMAL multi-koloms dropdown onder het zoekveld (.ac-* met Producten/
       Zoeksuggesties/Categorieën). Die geleek NIET op productie. Op basis van een nieuwe live-capture
       (huissteden.nl, query "berdina"/"bernina") is de zoek-autocomplete VOLLEDIG vervangen door een getrouwe,
       herstylde kopie van de productie-zoekoverlay: een PAGINABREED paneel dat onder de chrome opent met
       (1) een query-conditionele TYPO-CORRECTIEBANNER ("U zocht op berdina, … Wij vonden op bernina wel 501
       resultaten." — gecorrigeerde term in rood; "Sluiten"-knop), (2) een LINKER FACET-RAIL (hergebruik van het
       category.html .fgroup/.fopt-idioom): kop "501 resultaten" + "Verfijn je resultaten", groepen Merk
       (Bernette 1 / Bernina 492 / Juki 4 / Merkloos 4), Prijs (statische slider € 1 – € 15001) en
       Subsubcategorie (lange machinemodel-lijst, 8 + "Toon meer"), (3) een TOOLBAR (count + grid/list
       view-toggle, lijst actief + sort-select Relevantie / Prijs laag→hoog / Prijs hoog→laag), (4) LIST-VIEW
       PRODUCTRIJEN (beeld · "Merk: X" · navy naam-link → product.html · 2-regelige omschrijving · rode prijs +
       secundaire "Meer informatie"-knop → product.html), en (5) de slotregel "Er zijn 493 extra resultaten …".
       STATISCHE aanpak (toegestaan voor een mockup): de 8 echte bernina-rijen staan in de markup en worden voor
       elke niet-lege query getoond; alleen de typo-banner is query-afhankelijk (verschijnt enkel bij "berdina",
       case-insensitive). Verschijnt bij invoer ≥2 tekens; sluit via Escape / "Sluiten" / scrim / buiten-klik.
       Beelden = echte productfoto's uit assets/products/ (gedownload van /media/catalog/product/, GEEN lazy).
       BODY-SCROLL-LOCK met dezelfde sticky-veilige fix als de minicart (body.ac-open .chrome-sticky{position:fixed}).
       Rustige fade (140ms), prefers-reduced-motion → instant. Mobiel ≤900: facet-rail achter een "Verfijn"-drawer
       (category.html-drawer-idioom), rijen enkel-koloms (beeld+tekst boven, prijs/knop eronder), past 390px.

    2) MINICART (slide-in lade, gebaseerd op demo.hyva.io). Live structuur (gelezen uit het <dialog> van demo.hyva.io):
       lade schuift van rechts (480px) met scrim; kop "My Cart" + sluit-✕; regel = thumbnail + "1 x Naam" + regelprijs +
       potlood/prullenbak per regel; Subtotaal-rij; CTA's Checkout (btn-primary) + View and Edit Cart (btn-secondary) +
       express-betaalblok. Wij bouwen: rechter slide-in lade (~400px desktop / bijna full-width mobiel) met scrim, opent op
       de header-winkelwagen (.hact.cart). Nederlandse labels (NIET het Engels van de demo): "Winkelwagen", "Subtotaal",
       "Naar afrekenen", "Bekijk winkelwagen", "Aantal", "Gratis verzending". Voorgevuld met 2 ECHTE regels (Brother CS70S
       €188,00 ×1 + Brother spoeltjes 11,5mm 10st €8,00 ×1) → echt subtotaal €196,00; header .cart-count + "€ X,XX" weerspiegelen
       de seed (was hardgecodeerd 0 / € 0,00). PRIMAIRE afreken-CTA = SOLIDE navy (.btn-cart-idioom, enige navy-vulrol);
       "Bekijk winkelwagen" = wit + navy rand (secundair). Werkende qty-steppers + regel-✕ (JS herberekent subtotaal+telling+
       header-spiegel). Sluit via ✕/scrim/Escape; body-scroll-lock. Plus rustige gratis-verzending-balk (drempel €35).
       Rustige slide ~200ms; prefers-reduced-motion → instant.

    3) DESKTOP MEGA-MENU — [VERWIJDERD op de categoriepagina's, 2026-06-23; zie decisions.md.] De nav is hier een
       platte linkbalk die NIET op hover opent; de mega-menu-implementatie wordt alleen in index.html bijgehouden.
       De .mega-CSS is bewust blijven staan (ongebruikt) zodat terugzetten triviaal is. Oorspronkelijke opzet:
       (Miedema-`.catnav/.mega`-interactiepatroon her-geïmplementeerd in ons systeem; ECHTE huissteden-data,
       DESKTOP ≥901px). De 5 caret-items (Machines/Accessoires & onderdelen/Fournituren/Garen & vlies/Merken) worden
       data-mega-triggers met een breed paneel dat direct onder de nav ankert; ScanNCut + Sale blijven kale links.
       Per paneel: meerdere .mega-col (Zilla-Slab .mega-col-title + Atkinson .mega-link's + rode "Bekijk alles in X →") +
       ÉÉN .mega-feature promokaart. Open op hover ÉN focus/klik (aria-expanded/-controls, Escape sluit, Tab door links,
       één paneel tegelijk, kleine hover-intent-delay 120ms → rustig). Werkt in rust- én .is-stuck-staat (z-index boven content,
       ankert onder de — mogelijk lagere — stuck-nav). Echte categoriedata verbatim van de live desktop-navigatie (gescraped
       uit `_research/_sub-*.html`, de gehydrateerde Hyvä `desktop-menu`).

    HUISSTEDEN-ADAPTATIES (bewust afwijkend van Miedema's look):
       • GEEN decoratieve stippen/ruiten — Miedema's .mega-link::before-diamant is NIET overgenomen (Tjitse's dot-aversie).
         Kale links, hover = rode tekst + lichtblauwe rij, geen bulletglyph.
       • Palet navy/rood/lichtblauw/wit. Navy-vullingen blijven voorbehouden aan koop-CTA's → de .mega-feature is GEEN
         solide navy blok (zoals Miedema) maar een LICHTBLAUWE --sand-kaart met een echte promo (ACTIE Brother CS70S €188 was
         €209) + rode "Bekijk →"-link. [FLAG: bewuste afwijking van Miedema's donkere feature-kaart.]
       • Fonts: Zilla Slab voor kolomtitels + feature-kop, Atkinson voor links/body.
       • De GESLOTEN nav blijft de huidige huissteden-nav (rode-onderlijn-hover/active-idioom ongewijzigd); caret ▾ roteert
         subtiel bij open.

    STICKY × SCROLL-LOCK: index.html heeft GEEN bestaand body-scroll-lock-idioom (geen .menu-open/.filters-open). Nieuw:
       body.cart-open{overflow:hidden}. Caveat uit eerdere rondes (direction-c V8): overflow:hidden op body breekt
       position:sticky → bewezen fix toegepast: body.cart-open .chrome-sticky{position:fixed;top:0;left:0;right:0} zodat de
       (mogelijk gestuckte) chrome gepind blijft terwijl de lade open is. Mega-panelen vereisen GEEN scroll-lock.

    NIEUWE WCAG-PAREN (berekend, relatieve luminantie):
       • mega-col-title --ink-text #16263D op wit = 15,2:1 (hergebruik, ✓)   • mega-link navy #1F3A5F op wit = 11,48:1 (✓)
       • mega-link hover rood #AE1B21 op wit = 7,05:1 (✓)                    • mega-link hover-rij lichtblauw #EAEFF6: navy 9,81:1 (✓)
       • "Bekijk alles in X →" rood #AE1B21 op wit = 7,05:1 (✓)             • mega-feature op --sand #EFF5FB: kop #16263D 13,87:1, body #545D70 6,02:1, rode link #AE1B21 6,42:1 (alle ✓)
       • zoek-overlay (2026-06-08): typo-banner navy-ink #16263D op lichtblauw #EAEFF6 13,18:1, body #545D70 5,72:1, gecorrigeerde term rood #AE1B21 6,10:1, "Sluiten" navy #1F3A5F 9,94:1 (alle ✓); facet-kop #16263D op wit 15,23:1; rij-naam navy #1F3A5F op wit 11,48:1 (hover rood 7,05:1); omschrijving #545D70 op wit 6,61:1; "Merk:"/count #6B7385 op wit 4,76:1; prijs rood #AE1B21 op wit 7,05:1; "Meer informatie" navy #1F3A5F op wit 11,48:1; sort-select #16263D op wit 15,23:1; actieve view-toggle navy op lichtblauw 9,94:1 (grafisch ≥3:1); extra-regel #545D70 op wit 6,61:1 (alle ✓)
       • minicart: kop #16263D op wit 15,2:1; regelnaam #16263D 15,2:1; regelprijs rood 7,05:1; subtotaal #16263D 15,2:1;
         afreken-CTA wit op navy #1F3A5F 11,48:1 (hover #162B47 14,28:1); secundaire CTA navy #1F3A5F op wit 11,48:1;
         gratis-verzending-balk: track lichtblauw, vulling navy 9,94:1 (grafisch ≥3:1), tekst #545D70 6,02:1, "gratis"-groen #1E7A3D 4,90:1 (✓);
         qty-stepper-knop navy op wit 11,48:1; verwijder-✕ --muted #6B7385 op wit 4,76:1 (✓).

    DATA DIE NIET TE VANGEN WAS / AANNAMES:
       • (2026-06-08) De vorige note meldde dat de live autocomplete headless geen rijen gaf; bij de herziening is de
         overlay WEL live gevangen via de INTERACTIEVE browser (playwright-cli, native value-setter + input/keyup-events
         op #search) — daarmee zijn de typo-banner-tekst, de Merk-/Subsubcategorie-opties + exacte counts, de prijs-
         bounds (€ 1 – € 15001), de 8 productrijen (merk/naam/omschrijving/prijs/beeld-URL) en de "extra resultaten"-
         regel verbatim overgenomen. Beelden gedownload van /media/catalog/product/ (geen imgproxy nodig; directe URLs).
       • Productie toonde ~24 rijen van 501; de mockup toont er 8 (rust voor 45+ + laadgewicht) → slotregel "Er zijn
         493 extra resultaten" (501 − 8). De facets zijn illustratief/statisch (filteren niet echt) — net als category.html.
       • De rij-omschrijvingen zijn de live teksten, licht ingekort/normalisatie van spelling waar de live snippet
         halverwege werd afgekapt; merk/naam/prijs/beeld zijn 1-op-1.
       • Mega-menu kolomgroepering: waar de live nav eigen tussenkoppen heeft (Accessoires: "Voor de Naaimachine"/"Voor de
         Borduurmachine"/"Voor de Lock-/Covermachine"; Fournituren leidt met Prym-subgroepen; Garen/Vlies eigen segmenten) zijn
         díe als .mega-col-title aangehouden. Waar een lijst plat was (Machines = 10 types; Merken = 30+ merken) is logisch
         gegroepeerd en dat is hieronder GEFLAGD (Machines → Naaien/Borduren&Quilten/Lock&Cover+Overig; Merken →
         Naaimachine-merken / Garen & fournituren-merken — eigen groepering, geen live-koppen).
       • Live nav heeft 8 top-levels (incl. "Cadeaus"); de mockup-nav houdt zijn 7 items aan (mega bedraadt de BESTAANDE items).

  V9 (2026-06-05): index-v8-smaller-categories.html door Tjitse goedgekeurd en gepromoveerd tot v9 —
  nieuwe basis voor al het vervolgwerk (4×2 machines-grid, samengevoegde lock/coverlock, paginabreed dot-vrij).
  V9-bestsellers-1 (2026-06-05): bestsellers-slider iteratie 2 — pijlen bovenin de sectiekop (Hyvä-demo-patroon, track full-width met peek), koopknop GROEN (#1E7A3D-familie, berekend contrast) i.p.v. rood (klant: rood = no-go); kaartanatomie trouw aan live grid, 13 échte producten, dot-vrij conform v9. Basis = goedgekeurde v9.
  V9-bestsellers-3 (2026-06-05): = bestsellers-1-kaart met de CTA-stijlen van bestsellers-2 — koopknop wit/navy 1,5px rand + wagentje-icoon (geen groen meer), niet-in-voorraad = solid navy "Meer informatie"; voorraadwoorden terug op normaal gewicht. Verder identiek aan v9-bestsellers-1.
  V9-bestsellers-4 (2026-06-05): CTA-vullingen geïnverteerd t.o.v. b3 — op voorraad = SOLID navy + witte tekst/wagentje, niet-in-voorraad = wit met navy rand. Verder identiek aan v9-bestsellers-3.
  V10 (2026-06-05): winnaar v9-bestsellers-4 gepromoveerd tot v10 + label-sweep — solid navy is gereserveerd voor de koop-CTA; alle navy-gevulde labels/badges (Leverbaar/Web only/+cadeau e.d.) nu wit met navy tekst + dunne navy rand; rode Actie-badge en navy vlakken (footer, reviews-score) ongewijzigd.
  V11 (2026-06-05): (1) bestsellers-carrousel mechanisch gelijkgetrokken met demo.hyva.io — dot-paginatie onder de track (klik = spring, actief volgt scroll, recompute bij resize), native scrollbar verborgen, pijlen + snap behouden; (2) mobiel: header+zoekveld sticky (USP-balk scrolt weg), schaduw bij vastklikken, scroll-margin mobiel bijgesteld. Rest ongewijzigd.
  V12 (2026-06-05): mobiele stuck-staat verfijnd — logo kleiner (170→148px), iconen onaangetast met extra ademruimte boven/onder, chrome 167px (was 179); scroll-margin mobiel bijgesteld. Rest ongewijzigd.
  V13 (2026-06-05): navy-vlakken voortaan exclusief voor primaire CTA's — (1) Feedback Company-paneel van navy naar lichtblauw #EAEFF6 met navy-ink tekst (9,5 = 13,18:1; subtekst body #545D70 = 5,72:1; sterren goud #8C5C13 = 4,97:1; FC-logo op witte chip) — leest nog steeds als anker van de reviews-sectie; (2) footer her-ontworpen als licht vlak (wit met rode toplijn + lichtblauwe #EFF5FB onderbalk; wordmark navy-ink #16263D; koppen #16263D = 15,2:1; links navy #1F3A5F = 11,5:1 → hover rood #AE1B21 = 7,05:1; body #545D70; legal op onderbalk body #545D70 = 6,02:1) met échte betaallogo's (iDEAL, Klarna, Apple Pay, Bancontact, Maestro, Mastercard, PayPal, Visa) uit assets/payment/ (Wikimedia, public domain; bronnen in ATTRIBUTION.md) i.p.v. tekst-kaartjes — in3 niet vindbaar op Wikimedia → nette tekst-chip. Enige resterende navy-vlakken: koop-CTA (.btn-cart) + kleine functionele bits (stap-cirkels, actieve slider-dot). Rest ongewijzigd.
  V14 (2026-06-05): betaallogo's vervangen door Mollie's uniforme iconenset (mollie/magento2, BSD-2; mapping in ATTRIBUTION.md) — optisch gelijke maten, in3-tekstchip vervallen; pay-row CSS daarop aangepast. Rest ongewijzigd. [Kaart-merken: Mollie's set kent géén losse Visa/Mastercard/Maestro → één creditcard.svg representeert kaartbetalingen, conform Mollie's eigen ontwerp. iDEAL/in3 uit een pre-Wero revisie van dezelfde repo i.p.v. master, omdat master's co-branded iDEAL|Wero + 'iD in3' onleesbaar zijn op footerformaat.]
  V9-edit (2026-06-05): SERVICE/VERTROUWEN-blok volledig verwijderd op klantverzoek (markup + CSS + responsive
      regels); #service-ankers (topbar Klantenservice, hero showroom-banner) her-gericht op footer id="contact".
      Servicepunten blijven gedragen door trust-ribbon, showroom-banner en footer.
  V3 (2026-06-05): menu-variant 5 (volledig licht) gepromoveerd tot v3 + hero opnieuw ingericht — machinezoeker links (~55%), rechts 2 promobanners: ACTIE Brother CS70S (echte was-prijs 209,00 → 188,00) en showroom/9,5-banner. Chrome (wit) en rest van de pagina ongewijzigd.
  V4 (2026-06-05): chrome verfijnd op klantfeedback — (1) nav-CTA "Vind mijn onderdeel" verwijderd; (2) USP-balk teruggebracht tot 1 USP + Klantenservice + 9,5-chip, gegarandeerd één regel (1440/1280/390); (3) header ~30px lager: zichtbaar zoeklabel weg (bewuste afwijking van audience.md-zichtbaar-label-regel op klantverzoek; aria-label behouden), padding 16→11, logo 230→212. Rest van de pagina ongewijzigd.
  V5 (2026-06-05): zoekveld geherstyled (te vet/pill paste niet bij de rest) — hairline-rechthoek: 1px #D0D5DD,
      radius 10, h44, input 16px; Zoeken-knop = rode ICOON-knop (alleen loepje, 52×44, flush rechts uitgelijnd,
      binnenhoeken 0/9px) op klantverzoek — afwijking van audience.md-regel "knoppen met tekstlabel"
      (aria-label="Zoeken" behouden); focus = navy rand + zachte ring. Rest van de pagina ongewijzigd.
  V6 (2026-06-05): (1) desktop: header+zoek+menubalk sticky (wrapper, top:0, z-60, zachte schaduw), USP-balk scrolt weg; scroll-margin-top op ankers; (2) mobiel: full-width Menu-balk vervangen door compacte hamburger-knop links in de header (☰ met "menu" eronder, ≥44px, aria-label); mobiel niet sticky. Rest ongewijzigd.
  V7 (2026-06-05): compacte sticky-staat desktop — bij vastklikken (IntersectionObserver-sentinel + .is-stuck, ~6 regels JS): logo 212→168, Bel ons/Mijn account/Winkelwagen icon-only (aria-labels dragen de naam, ≥44px targets), header-padding 11→6, nav-links 13→9 verticaal; chrome ~129→112px (gemeten). Rust-staat, mobiel en pagina ongewijzigd.
  V8 (2026-06-05): "Kies uw afdeling" herbouwd als twee grids — Machines (9 categorieën, echte stockfoto's uit assets/stock/categories/, gelicentieerd; coverlock = PLACEHOLDER productrender (Juki MO-50eN), geen stock gevonden — klant levert echte coverstitch-foto) en Accessoires & onderdelen (6 custom inline-SVG pictogrammen, navy lijnstijl). Alle dots in deze sectie verwijderd (gimmick-feedback) — foto's/pictogrammen nemen de identificatierol over. Rest van de pagina ongewijzigd (basis = goedgekeurde v7).
  V8-smaller-categories (2026-06-05): machines-grid compacter — 4×2 met 8 kaarten (Lockmachines + Coverlock samengevoegd tot "Lock- & coverlockmachines" met écht stockbeeld; placeholder-coverlockkaart vervalt), kleinere beelden; én alle decoratieve eyebrow-dots paginabreed verwijderd (functionele indicatoren zoals voorraad-dots blijven). Rest = v8.
  Huissteden.nl — Pitch optie C — "De Naaikamer" (moderne atelier-winkel)
  Concept: de eigentijdse naaikamer — rustig, tactiel, stil-stijlvol; het meest "herontworpen" gevoel
           van de drie opties, maar shop-first en conversiegericht. Geheugenhaken: (1) sfeerfotografie
           van handen aan de machine, (2) een rustig draadklos-kleurstippensysteem als statische
           categoriemarkeringen, (3) Atkinson Hyperlegible als toegankelijkheids-bodyfont voor 45+ ogen.
  Datum: 2026-06-05
  Doelgroep: hobbynaaisters/-naaiers 45+ (zwaartepunt 50-70). Usability = leidend. Bijna nul beweging
             (alleen subtiele hover/focus). Geen carrousels, geen autoplay, geen parallax.

  V2 (2026-06-05): het originele Huissteden-logo hersteld in de header (assets/Logo_1_.png — rood
      woordmerk met draad-zwiep, grijs "barneveld", machine op rode ruit) i.p.v. het groene
      tekst-woordmerk met stiksel-underline. Footer houdt bewust het witte tekst-woordmerk:
      er bestaat geen diapositief-logoversie (brand-spec: op donker vlak alleen-woordmerk wit zetten).

  V2-b (2026-06-05): KLEUR-ONLY herskinning naar het échte Huissteden-merk — rood/wit/grijs met
      NAVY #1F3A5F als secundaire chrome-kleur. Layout, spacing, typografie (Zilla Slab + Atkinson
      Hyperlegible), content, beeld en menu-opzet ongewijzigd. Mapping: actie-groen → brand-rood
      #AE1B21 (hover #8E161B; alle koop/zoek/submit-knoppen rood/wit 7,05:1); chrome (topbar, hoofdnav,
      service-/vertrouwenblok, hero-foto-badge, footer) → navy #1F3A5F (footer iets dieper #162B47);
      zand/papier-vlakken → wit + brand-lichtblauw tints #EFF5FB / #EDF4FC / #EAEFF6; spruce-ink-koppen
      → navy-ink #16263D; bodytekst → brand-blauwgrijs #545D70. Nav-CTA = WITTE pill met RODE tekst
      (7,05:1) — bewuste WCAG-keuze (rood-op-navy = 1,63:1, verboden). Apricot #D98A3D volledig
      RETIRED en herverdeeld: reviewsterren = sterrengoud #D2AA1C op navy (5,2:1) / donker goud #996515
      op lichte kaarten; korting/actie-chips = rood-op-wit of rood-op-red-tint #FCEDED; eyebrows/links =
      rood of navy. Voorraad-status = functioneel groen #1E7A3D (4,5:1+) behouden. Hero-foto + logo intact.

  Fonts: display = Zilla Slab (warme slab-serif), body/UI = Atkinson Hyperlegible (low-vision-vriendelijk).
  Palet (V2-b): wit #FFFFFF / brand-lichtblauw #EFF5FB·#EDF4FC·#EAEFF6, navy-chrome #1F3A5F (diep #162B47),
         navy-ink #16263D, actie-rood #AE1B21 (hover #8E161B), brand-blauwgrijs body #545D70, gedempt #6B7385,
         sterrengoud #D2AA1C (op navy) / #996515 (op licht), voorraadgroen #1E7A3D.

  AANNAMES / PLACEHOLDERS:
  - Hero-foto: assets/stock/atelier-hands-machine-alt.jpg (donkere zijde links → kaart staat solide op zand,
    NIET over het drukke fotodeel; tekst nooit los over de foto).
  - Categorie-thumbnails uit assets/full/ zijn deels klein (152x152) → object-fit:contain op zandtegel,
    zo blijven ze scherp.
  - Service-/vertrouwencopy ("Reparatie & onderhoud van alle merken", levertijden, garantie-formuleringen)
    is PLACEHOLDER-aanname (generieke serviceteksten), GEEN geverifieerd feit. Adres, telefoon, e-mail,
    reviews, productdata en prijzen zijn wél geverifieerd (brand-spec / product-facts).
  - Machinezoeker type-select is bewust leeg/disabled ("Selecteer eerst een merk") — statische mockup.
  - Voorraadstatus in woorden is per product een redelijke aanname (op de live site stond alleen "Singer
    Heavy Duty 500 Classic" als niet-op-voorraad; getoonde 5 producten = op voorraad).
-->
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naaimachines, lock- en borduurmachines kopen · Huissteden</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- V6: lettertype vastgezet op Figtree (font-selector verwijderd op klantverzoek) -->
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
<style>
  :root{
    /* V2-b: rood/wit/grijs + navy chrome + brand-lichtblauw tints */
    --paper:#FFFFFF;        /* page base — white */
    --sand:#EFF5FB;         /* brand lichtblauw — section tint */
    --sand-2:#EAEFF6;       /* deeper lichtblauw — tiles/photo wells */
    --ink:#1F3A5F;          /* NAVY — chrome surfaces (topbar/nav/service/footer/badges) */
    --ink-deep:#162B47;     /* deeper navy — footer depth */
    --ink-text:#16263D;     /* navy-ink — headings on light */
    --action:#AE1B21;       /* brand red — buttons/links */
    --action-dark:#8E161B;  /* darker red — hover */
    --accent:#AE1B21;       /* (apricot retired) red now carries accent role */
    --accent-soft:#FCEDED;  /* brand red-tint fill (avatars, soft chips) */
    --body:#545D70;         /* brand blue-grey body text (6,6:1 on white) */
    --muted:#6B7385;        /* muted blue-grey — struck price, captions (>=4.5:1) */
    --line:#D0D5DD;         /* hairlines (brand blue-grey) */
    --line-soft:#E3E8F0;
    --red-line:#E7C2C4;     /* D: zachte rode stiksel-lijn (dashed underlines / seam--red) */
    --star:#D2AA1C;         /* brand star-gold — review stars ON NAVY (5,2:1) */
    --star-light:#996515;   /* darker gold — review stars on white/lichtblauw cards (>=4.5:1) */
    --stock:#1E7A3D;        /* in-stock functional green (>=4.5:1 on white) */
    --white:#FFFFFF;
    --shadow:0 1px 2px rgba(31,58,95,.07), 0 8px 24px rgba(31,58,95,.09);
    --shadow-card:0 14px 40px rgba(31,58,95,.15);
    --radius:14px;
    --radius-sm:10px;
    --maxw:1240px;
    /* V6: lettertype vastgezet op Figtree (display + body). Font-selector verwijderd op klantverzoek. */
    --font-display:"Figtree",sans-serif;
    --font-body:"Figtree",sans-serif;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    font-family:var(--font-body);
    font-size:17px;
    line-height:1.55;
    color:var(--body);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    border-top:3px solid var(--action); /* D: rode selvedge / zelfkant — C-stiksel-signatuur */
  }
  img{max-width:100%;display:block;}
  a{color:var(--action);text-decoration:none;}
  a:hover{color:var(--action-dark);text-decoration:underline;}
  h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-text);margin:0;line-height:1.15;font-weight:600;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  .tnum{font-variant-numeric:tabular-nums;}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;
    font-family:var(--font-body);font-weight:700;font-size:17px;
    min-height:48px;padding:0 22px;border-radius:999px;border:2px solid transparent;
    cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
    text-decoration:none;line-height:1;
  }
  /* D-KNOPSYSTEEM (klantregel): de SALES-CTA (koop/conversie) is de enige SOLIDE navy #1F3A5F knop;
     alle andere knoppen staan op WIT met navy/rood/lichtblauw. (.btn-cart = bestseller-koopknop, blijft
     navy; .btn-sale = hero-producthighlight CTA, óók navy.)
     • .btn-primary (machinezoeker-CTA) → WIT + navy rand + navy tekst, hover lichtblauwe vulling.
     • .btn-ink (nieuwsbrief) → WIT + RODE rand + rode tekst, hover rode vulling (kleuraccent).
     • .btn-ghost (secundaire "bekijk alles") → WIT + navy rand, hover lichtblauwe vulling. */
  .btn-sale{background:var(--ink);color:#fff;border-color:var(--ink);}
  .btn-sale:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff;text-decoration:none;}
  .btn-primary{background:#fff;color:var(--ink);border-color:var(--ink);}
  .btn-primary:hover{background:var(--sand-2);color:var(--ink);border-color:var(--ink);text-decoration:none;}
  .btn-ink{background:#fff;color:var(--action);border-color:var(--action);}
  .btn-ink:hover{background:var(--action);color:#fff;border-color:var(--action);text-decoration:none;}
  .btn-ghost{background:#fff;color:var(--ink);border-color:var(--ink);}
  .btn-ghost:hover{background:var(--sand-2);color:var(--ink);text-decoration:none;}
  .btn-block{width:100%;}

  /* ---------- D: stiksel-motief (naailijn) + ruit-patch — designsysteem uit richting C ----------
     .ruit = roteerde rode ruit (label-/eyebrow-accent); .seam = onderbroken stiksel-lijn (divider). */
  .ruit{display:inline-block;width:9px;height:9px;background:var(--action);transform:rotate(45deg);
      border-radius:1.5px;flex:0 0 auto;vertical-align:middle;}
  .seam{height:2px;border:0;margin:0;
      background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 16px);}
  .seam--red{background:repeating-linear-gradient(90deg,var(--red-line) 0 9px,transparent 9px 16px);}
  /* dashed-underline "stiksel"-link — vervangt het kale "→"-link-idioom in sectiekoppen */
  .link-stitch{display:inline-flex;align-items:center;gap:8px;color:var(--action);font-weight:700;
      text-decoration:underline;text-decoration-style:dashed;text-decoration-thickness:1.5px;
      text-underline-offset:6px;text-decoration-color:var(--red-line);
      transition:text-decoration-color .15s ease,color .15s ease;}
  .link-stitch:hover{text-decoration-style:solid;text-decoration-color:var(--action);color:var(--action-dark);}

  /* V8-smaller-categories: decoratieve eyebrow-/kicker-stippen paginabreed verwijderd (klantfeedback);
     de oude stip-stelregels vervallen volledig. Functionele indicatoren (voorraad-pip, badges) blijven los. */

  /* ---------- topbar (usp) — MENU5 VOLLEDIG LICHT: white bg, navy text, hairline ---------- */
  /* V4: slimmed to 1 USP + Klantenservice + 9,5-chip; nowrap → guaranteed ONE line at 1440/1280/390 */
  .topbar{background:#FFFFFF;color:#1F3A5F;font-size:14.5px;border-bottom:1px solid #E3E8F0;}
  .topbar .wrap{display:flex;align-items:center;gap:18px;min-height:42px;flex-wrap:nowrap;}
  .topbar .usp{display:flex;align-items:center;gap:8px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  @media(max-width:900px){.topbar .usp{display:none;} .topbar .spacer{display:none;} .topbar .ks{display:inline;margin-right:auto;}} /* mobiel: USP weg, Klantenservice links uitgelijnd, score+switcher rechts (geen lege plek) */
  .topbar .check{color:#1E7A3D;font-weight:700;flex:0 0 auto;}  /* functional green ✓ on white (5,38:1) */
  .topbar .spacer{margin-left:auto;}
  .topbar a{color:#1F3A5F;}                        /* navy links on white (11,48:1) */
  .topbar a:hover{color:#16263D;}
  .topbar .ks{white-space:nowrap;flex:0 0 auto;}   /* Klantenservice — never wraps/shrinks */
  .topbar .score{display:inline-flex;align-items:center;gap:7px;background:#EAEFF6;
      border:1px solid #E3E8F0;border-radius:999px;padding:4px 11px;white-space:nowrap;flex:0 0 auto;}  /* lichtblauw score chip */
  .topbar .score b{color:#16263D;}                 /* navy-ink "9,5" on lichtblauw (9,9:1) */
  .topbar .stars{color:#996515;letter-spacing:1px;font-size:13px;}  /* dark-gold glyphs on lichtblauw (graphical ≥3:1) */
  .topbar .score .revcount{opacity:.85;}
  /* country / store switcher — far right of de topbar */
  .topbar .ctry{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;background:#EAEFF6;
      border:1px solid #E3E8F0;border-radius:999px;padding:4px 9px 4px 10px;cursor:pointer;
      font:inherit;color:#1F3A5F;line-height:1;transition:background-color .15s ease,border-color .15s ease;}
  .topbar .ctry:hover{background:#E0E7F1;border-color:#CFD8E6;}
  .topbar .ctry:focus-visible{outline:2px solid #1F3A5F;outline-offset:2px;}
  .topbar .ctry .flag{display:inline-flex;line-height:0;}
  .flag svg{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(22,38,61,.14);}
  .topbar .ctry .flag svg{width:16.8px;height:11.2px;}
  .topbar .ctry .ctry-code{font-size:13px;font-weight:700;letter-spacing:.02em;color:#16263D;}
  .topbar .ctry .chev{width:13px;height:13px;stroke:#6B7385;stroke-width:2.2;fill:none;flex:0 0 auto;}

  /* store-switcher modal */
  .ctry-modal[hidden]{display:none;}
  .ctry-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;}
  .ctry-backdrop{position:absolute;inset:0;background:rgba(22,38,61,.55);
      animation:ctry-fade .18s ease;}
  .ctry-dialog{position:relative;width:100%;max-width:420px;background:#fff;border-radius:18px;
      box-shadow:0 24px 70px rgba(22,38,61,.35);padding:26px 26px 22px;
      animation:ctry-pop .22s cubic-bezier(.16,.84,.32,1);}
  @keyframes ctry-fade{from{opacity:0;}}
  @keyframes ctry-pop{from{opacity:0;transform:translateY(10px) scale(.98);}}
  .ctry-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;
      background:transparent;color:#6B7385;font-size:24px;line-height:1;cursor:pointer;
      display:grid;place-items:center;transition:background-color .15s ease,color .15s ease;}
  .ctry-x:hover{background:#EAEFF6;color:#16263D;}
  .ctry-dialog h2{font-family:var(--font-display,inherit);font-size:21px;font-weight:700;color:#16263D;margin:0 4px 4px 0;}
  .ctry-dialog .ctry-lead{font-size:14.5px;color:#6B7385;margin:0 0 18px;line-height:1.45;}
  .ctry-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
  .ctry-opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
      background:#fff;border:1.5px solid #E3E8F0;border-radius:13px;padding:12px 14px;
      font:inherit;color:#16263D;transition:border-color .15s ease,background-color .15s ease;}
  .ctry-opt:hover{border-color:#CFD8E6;background:#F6F9FC;}
  .ctry-opt:focus-visible{outline:2px solid #1F3A5F;outline-offset:2px;}
  .ctry-opt .flag{display:inline-flex;line-height:0;flex:0 0 auto;}
  .ctry-opt .flag svg{width:30px;height:20px;}
  .ctry-opt .lbl{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
  .ctry-opt .lbl b{font-family:var(--font-display,inherit);font-size:16px;font-weight:700;line-height:1.2;}
  .ctry-opt .lbl small{font-size:13px;color:#6B7385;}
  .ctry-opt .tick{width:22px;height:22px;flex:0 0 auto;color:#fff;background:var(--action,#AE1B21);
      border-radius:50%;display:none;place-items:center;font-size:13px;font-weight:700;}
  .ctry-opt.is-active{border-color:var(--action,#AE1B21);background:#FCEDED;}
  .ctry-opt.is-active .tick{display:grid;}

  /* ≤900px: land-switcher uit de topbar (consistent met de homepage; balk blijft één regel) */
  @media(max-width:900px){
    .topbar .ctry{display:none;}
  }

  /* ≤480px: keep the 9,5 score visible, hide only the review-count text so the row stays one line */
  @media(max-width:480px){
    .topbar .wrap{gap:12px;}
    .topbar .score .revcount{display:none;}
    .topbar .ctry .ctry-code{display:none;} /* op smal: alleen vlag + chevron, houdt de balk één regel */
  }

  /* ---------- header ---------- */
  /* V4: header ~30px slimmer — padding 16→11, logo 230→212; visible search label removed (kept as sr-only/aria) */
  /* V2: koptekst-achtergrond terug naar WIT (de lichtblauwe header is teruggedraaid op klantverzoek).
     Overige V1-koptekstwijzigingen blijven: navy zoekknop #1F3A5F, normaal-gewicht header/nav-items, nav-CTA. */
  .header{background:var(--paper);border-bottom:1px solid var(--line);}
  .header .wrap{display:flex;align-items:center;gap:26px;padding-top:11px;padding-bottom:11px;transition:padding-top .18s ease,padding-bottom .18s ease;}
  .brand{display:flex;align-items:center;flex:0 0 auto;}
  /* V7: width-transition toegevoegd voor rustige krimp bij vastklikken (rust-staat: 180px, -15%) */
  .brand .logo{width:180px;height:auto;display:block;transition:width .18s ease;}

  .search{flex:1 1 auto;min-width:0;}
  /* V5: hairline-zoekveld — sluit aan op finder-selects (1px rand, radius 10) i.p.v. vette pill */
  .search form{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;
      background:#fff;transition:border-color .15s ease, box-shadow .15s ease;}
  .search form:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,58,95,.14);}
  .search input{flex:1 1 auto;min-width:0;border:0;outline:0;padding:0 16px;font-size:16px;
      font-family:inherit;color:var(--body);background:transparent;height:44px;}
  .search input::placeholder{color:#6B7385;}
  /* D: zoekknop-achtergrond rood → navy #1F3A5F (klantverzoek) */
  .search button{border:0;background:var(--ink);color:#fff;width:52px;height:44px;flex:0 0 auto;
      cursor:pointer;display:flex;align-items:center;justify-content:center;
      transition:background-color .15s ease;font-family:inherit;border-radius:0 9px 9px 0;}
  .search button:hover{background:var(--ink-deep);}
  .search button:focus-visible{outline:3px solid rgba(31,58,95,.45);outline-offset:-3px;}

  .header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  /* D: header-items op normaal gewicht (klantverzoek — geen vet meer); hover-vlak = lichtblauw --sand-2,
     leest goed op de witte header (V2: header terug naar wit). */
  .hact{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 12px;border-radius:12px;
      color:var(--ink);font-weight:400;font-size:15px;
      transition:background-color .15s ease,padding .18s ease,min-height .18s ease;}
  .hact:hover{background:var(--sand-2);text-decoration:none;color:var(--ink);}
  .hact .ic{width:24px;height:24px;flex:0 0 auto;stroke:var(--ink);}
  .hact small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);line-height:1.2;}
  .hact .lbl{display:flex;flex-direction:column;line-height:1.15;}
  .hact .cart-count{background:var(--action);color:#fff;font-weight:700;font-size:12px;
      border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;
      justify-content:center;padding:0 5px;margin-left:2px;}

  /* V6: hamburger-knop standaard verborgen (alleen mobiel <901px zichtbaar, zie media-query) */
  .ham-btn{display:none;}

  /* ---------- V6: chrome-sticky wrapper (header + zoek + hoofdnav) ---------- */
  /* Basis: gewoon blok (mobiel NIET sticky). Desktop sticky-gedrag staat in @media(min-width:901px).
     position:relative → containing block voor de absolute zoek-overlay (#ac-panel) in de rust-staat;
     in de sticky/fixed-staat is .chrome-sticky zelf al een containing block. */
  .chrome-sticky{background:#fff;position:relative;}

  /* V6: ankers krijgen scroll-margin zodat sprongen niet onder de sticky chrome verdwijnen
     (sticky chrome = header+nav ≈ 129px, gemeten; + ~10px marge) */
  #machinezoeker,#reviews,#contact{scroll-margin-top:140px;}
  /* V11: mobiel is de chrome nu óók sticky (alleen de header-rij + zoekbalk; .nav is verborgen).
     Ankers springen altijd in de gescrolde (stuk) staat → marge op de stuk-hoogte + ~14px lucht zodat de
     sectiekop nooit onder de chrome verdwijnt.
     V12: de mobiele stuk-staat is verlaagd naar ~167px (was 179px), dus de oude 220px-marge schoot ~53px
     door (te veel witruimte boven de sectiekop). Bijgesteld naar 180px (167 stuk + ~13px lucht) → de kop
     landt netjes vlak onder de zwevende chrome, conform de V11-idiomatiek. Rust-marge desktop ongewijzigd. */
  @media(max-width:900px){
    #machinezoeker,#reviews,#contact{scroll-margin-top:180px;}
  }

  /* ---------- main nav — MENU5 VOLLEDIG LICHT: white bg, navy links, hairline ---------- */
  .nav{background:#FFFFFF;border-bottom:1px solid #E3E8F0;}
  .nav .wrap{display:flex;align-items:center;gap:4px;min-height:52px;flex-wrap:wrap;}
  /* D: menubalk-items op normaal gewicht (klantverzoek — geen vet meer) */
  .nav a{color:#1F3A5F;font-weight:400;font-size:15.5px;padding:13px 14px;border-radius:8px;
      display:inline-flex;align-items:center;gap:7px;transition:background-color .15s ease,padding .18s ease;}  /* navy links on white (11,48:1) */
  .nav a:hover{background:#EAEFF6;color:#16263D;text-decoration:none;}  /* lichtblauw hover */
  .nav .caret{font-size:11px;opacity:.7;}
  .nav .sale{color:#AE1B21;}  /* red Sale on white (7,05:1) */
  .nav .sale:hover{color:#8E161B;background:#EAEFF6;}
  /* D: "Vind mijn onderdeel" product-zoekknop terug, rechts in de menubalk (zoals de live shop).
     Witte knop met navy rand + navy tekst (volgt het D-knopsysteem: navy-vlak blijft voor de koop-CTA);
     margin-left:auto duwt 'm naar rechts, los van de links uitgelijnde menu-items. */
  .nav .nav-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
      background:#fff;color:var(--ink);font-weight:700;font-size:14.5px;padding:9px 16px;
      border:1.5px solid var(--ink);border-radius:999px;transition:background-color .15s ease,color .15s ease;}
  .nav .nav-cta:hover{background:var(--sand-2);color:var(--ink);text-decoration:none;}
  .nav .nav-cta svg{width:17px;height:17px;stroke:currentColor;flex:0 0 auto;}
  @media(max-width:980px){
    .nav .wrap{gap:2px;}
    .nav a{padding:11px 10px;font-size:14.5px;}
  }

  /* V6: DESKTOP — header+zoek+hoofdnav samen sticky bovenaan; USP-balk (buiten de wrapper) scrolt weg.
     Zachte always-on schaduw zodat de chrome 'zweeft' zodra content eronder schuift. z-60 > kaart-hovers. */
  @media(min-width:901px){
    .chrome-sticky{position:sticky;top:0;z-index:60;background:#fff;
        box-shadow:0 2px 14px rgba(22,38,61,.08);}
  }

  /* V11: MOBIEL (<901px) — header+zoek óók sticky. Op mobiel rendert de wrapper alleen de header-rij
     (hamburger+logo+acties) + de full-width zoekbalk eronder; .nav staat hier op display:none. De
     USP-balk zit BUITEN de wrapper en scrolt dus gewoon weg (gevraagde besparing van schermruimte).
     z-index gelijk aan desktop (60) zodat de chrome boven de pagina-content blijft (geen overlap-issues).
     Geen always-on schaduw in rust — pas een zachte schaduw zodra .is-stuck (zie hieronder), zodat de
     chrome 'zweeft' wanneer er content onder schuift. */
  @media(max-width:900px){
    .chrome-sticky{position:sticky;top:0;z-index:60;background:#fff;}
    /* schaduw bij vastklikken (dezelfde zachte behandeling als desktop). De .is-stuck-class toggelt al
       globaal via de IntersectionObserver; op mobiel gebruiken we 'm enkel voor deze schaduw. */
    .chrome-sticky.is-stuck{box-shadow:0 2px 14px rgba(22,38,61,.08);}
    /* lichte compactie in stuk-staat: logo iets kleiner + krappere verticale header-padding. Bewust
       subtiel (geen icon-only/zoekveld-krimp zoals desktop): de zoekbalk is op mobiel het hoofd-anker en
       blijft volwaardig. Scheelt ~14px hoogte zonder de bruikbaarheid te raken.
       V12: op mobiel staan logo-rij, acties-rij en zoekbalk gestapeld (3 rijen, wrap). De stuk-staat is
       extra verfijnd op klantverzoek: (a) logo 170 → 148 (rij 1 ~42 → ~37px, blijft goed leesbaar);
       (b) de iconen (hamburger/bel/account/winkelwagen) blijven ONAANGETAST — .hact min-height 48 en
       icoon-maten ongewijzigd, ≥44px touch-target intact; (c) de rij-tussenruimte (row-gap) zakt van 12
       → 8px zodat de acties-rij een kleine, nette adempauze van ~8px boven én onder houdt (niet krap) en
       de hele stack toch lager uitvalt; (d) de buitenste header-padding zakt 8 → 6 (alleen rand-marge boven
       het logo / onder de zoekbalk — raakt de icoon-tussenruimte niet). Zelfde 0.18s ease-idiomatiek
       (transition op padding via .header .wrap, op width via .logo). */
    /* V15: het logo behoudt op mobiel zijn rust-breedte in de stuk-staat (geen krimp/groei meer).
       De oude 148px-override liet het logo op telefoons (rust 138/118) bij vastklikken juist GROTER
       worden — een zichtbare dimensiesprong. Alleen de header-padding/row-gap compacteert nog. */
    .chrome-sticky.is-stuck .header .wrap{padding-top:6px;padding-bottom:6px;row-gap:8px;}
  }

  /* V7: COMPACTE STUK-STAAT (alleen desktop ≥901px). De 1px-sentinel boven .chrome-sticky verlaat de
     viewport zodra de gebruiker scrolt → IntersectionObserver zet .is-stuck op de wrapper. Op klantverzoek:
     (1) logo kleiner, (2) Bel ons/Mijn account/Winkelwagen icon-only (aria-labels dragen de naam),
     (3) lagere header. Rust-staat = byte-identiek aan V6; mobiel <901px heeft geen sticky én geen stuk-stijl
     (CSS hier is media-gescoped, dus de class mag mobiel gerust meeklikken zonder effect). */
  @media(min-width:901px){
    /* 1. logo 180 → 143 bij vastklikken (hoogte volgt auto) */
    .chrome-sticky.is-stuck .brand .logo{width:143px;}
    /* 3. header-padding 11 → 6; .hact min-height 48 → 44 (zoekveld blijft h44 — usability-anker, ongewijzigd) */
    .chrome-sticky.is-stuck .header .wrap{padding-top:6px;padding-bottom:6px;}
    .chrome-sticky.is-stuck .hact{min-height:44px;}
    /* 2. action-links icon-only: tekstlabel weg, icoon gecentreerd, hit-area ≥44×44 behouden.
       cart-count blijft zichtbaar; marge-reset zodat de badge netjes naast het kale icoon zit. */
    .chrome-sticky.is-stuck .hact .lbl{display:none;}
    .chrome-sticky.is-stuck .hact{min-width:44px;padding:6px;justify-content:center;}
    .chrome-sticky.is-stuck .hact .cart-count{margin-left:4px;}
    /* 4. nav-links 13 → 9 verticaal (rij ≈44px); doelen blijven ≥44 breed door horizontale padding 14 */
    .chrome-sticky.is-stuck .nav a{padding-top:9px;padding-bottom:9px;}
  }

  /* ---------- section scaffolding ---------- */
  section{padding:46px 0;}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:24px;}
  .sec-head .eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
      font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:9px;}
  .sec-head h2{font-size:30px;font-weight:600;}
  /* D: sectie-link in stiksel-stijl (dashed underline) i.p.v. kaal "→" */
  .sec-head .link{font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
      color:var(--action);text-decoration:underline;text-decoration-style:dashed;
      text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:var(--red-line);}
  .sec-head .link:hover{text-decoration-style:solid;text-decoration-color:var(--action);color:var(--action-dark);}
  /* D: ruit-patch vóór de eyebrows (C-motief, consistent paginabreed) */
  .sec-head .eyebrow::before,.news-inner .eyebrow::before,.brands .head .eyebrow::before{
      content:"";width:9px;height:9px;background:var(--action);transform:rotate(45deg);
      border-radius:1.5px;flex:0 0 auto;}
  .brands .head .eyebrow{display:inline-flex;align-items:center;gap:9px;}

  /* ---------- HERO (D: layout uit richting C — copy + machinezoeker links · producthighlight rechts) ----------
     Lichtblauwe verloop-achtergrond met een onderbroken stiksel-draadlijn (SVG) als C-signatuur; rechts
     een echte producthighlight (geen statisch beeld, geen 3 vinkjes) met ruit-/tint-accent. */
  .hero{background:linear-gradient(180deg,var(--sand) 0%,var(--sand-2) 100%);
      border-bottom:1px solid var(--line);position:relative;overflow:hidden;
      padding-top:24px;padding-bottom:24px;}
  .hero-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  /* V7: hero compacter + GELIJKE KOLOMHOOGTE (klantverzoek). align-items:stretch geeft links en
     rechts exact dezelfde hoogte; de tip-kaart vult die hoogte (CTA onderaan via margin-top:auto)
     i.p.v. een midden-gat → geen lege ruimte boven de H1 / onder de telefoonregel, en de kaart
     schaalt mobiel netjes (compacte horizontale productrij i.p.v. hoge gestapelde foto). */
  .hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
      gap:38px;align-items:stretch;padding-top:26px;padding-bottom:28px;}

  /* V8: linkerkolom als flex-kolom zodat de machinezoeker-kaart exact even hoog uitlijnt met de
     tip-kaart rechts (zelfde onderrand). De resterende ruimte gaat als lucht boven de finder
     i.p.v. een gat eronder. */
  .hero-copy{display:flex;flex-direction:column;}
  .hero-copy h2{font-family:var(--font-display);font-size:clamp(26px,2.3vw,33px);font-weight:700;
      color:var(--ink-text);line-height:1.13;letter-spacing:-.005em;max-width:13em;}
  .hero-copy h2 em{font-style:italic;font-weight:700;color:var(--action);}
  .hero-sub{margin-top:9px;font-size:16px;color:var(--body);max-width:34em;}

  /* V7: roterend merk in de kop — verticale rol (odometer-effect), valt terug op statisch
     "machine" bij prefers-reduced-motion. Breedte vastgezet op het langste merk (JS). */
  .roll{display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom;line-height:1.2;
      font-style:italic;font-weight:700;color:var(--action);white-space:nowrap;}
  .roll-col{display:flex;flex-direction:column;}
  .roll-col.move{transition:transform .78s cubic-bezier(.16,.84,.32,1);}
  .roll-item{height:1.2em;line-height:1.2;}
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  @media(prefers-reduced-motion:reduce){ .roll-col.move{transition:none;} }

  /* finder card — machinezoeker (A-content), C-vormgeving (2-koloms steps, lichte kaart) */
  .finder{margin-top:auto;background:var(--paper);border:1px solid var(--line-soft);
      border-radius:16px;box-shadow:var(--shadow-card);padding:16px 18px 14px;max-width:660px;}
  .finder .kicker{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--action);font-weight:700;margin-bottom:10px;}
  .finder-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  /* V8: stap-label = alleen een rustige grijze eyebrow ("Stap 1"/"Stap 2"); het
     veldwoord ("Merk"/"Type") vervalt — de placeholder in de select draagt de
     veldnaam ("Kies eerst je merk" / "Kies machine type"). */
  .fstep label{display:block;font-family:var(--font-display);line-height:1.1;margin-bottom:8px;}
  .fstep .step-eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;
      text-transform:uppercase;color:var(--muted);}
  .select-wrap{position:relative;}
  .select-wrap select{width:100%;height:46px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
      background:#fff;font-family:inherit;font-size:16.5px;color:var(--ink-text);padding:0 44px 0 16px;
      appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;}
  .select-wrap select:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 3px rgba(174,27,33,.14);}
  .select-wrap select:disabled{background:var(--sand);color:#737C8C;cursor:not-allowed;border-style:dashed;}
  .select-wrap .chev{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;
      width:17px;height:17px;stroke:var(--muted);}
  .finder-cta{margin-top:11px;}
  .finder-cta .btn{width:100%;font-size:17px;min-height:46px;}
  .finder-foot{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding-top:10px;
      border-top:2px dashed var(--line-soft);font-size:15px;color:var(--muted);}
  .finder-foot svg{stroke:var(--action);flex:0 0 auto;margin-top:3px;}
  .finder-foot a{color:var(--ink-text);font-weight:700;white-space:nowrap;}
  .finder-foot a:hover{color:var(--action);}

  /* ---------- MACHINEZOEKER-band: de homepage-finderkaart (.finder, identiek) standalone onder de cat-head,
     zónder hero-titel/-tekst/producthighlight. .finder zelf is byte-identiek aan de homepage. ---------- */

  /* ---- RIGHT: tip-kaart (optie 4) — V7 compacte, even-hoge variant ---- */
  /* align-items:stretch zodat de kaart de volledige (gelijke) kolomhoogte vult */
  .hero-visual{position:relative;display:flex;align-items:stretch;justify-content:center;}
  /* V4: de losse rode hero-ruit (zwevende diamant) verwijderd op klantverzoek ("useless gimmick");
     de subtiele lichtrode tint achter de kaart blijft als rustige diepte. */
  .hero-ruit-tint{position:absolute;width:160px;height:160px;background:var(--accent-soft);
      border-radius:16px;transform:rotate(24deg);left:10px;top:14px;z-index:0;}
  .hero-feature{position:relative;z-index:2;width:100%;max-width:400px;background:#fff;
      border:1px solid var(--line-soft);border-radius:18px;box-shadow:var(--shadow-card);
      padding:16px 18px 18px;display:flex;flex-direction:column;}
  .hero-feature .hf-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
      font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
      padding:5px 12px;border-radius:999px;margin-bottom:12px;}
  /* V7: product in één HORIZONTALE rij (foto naast merk/titel/prijs) i.p.v. hoge gestapelde foto */
  .hero-feature .hf-prod{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
  .hero-feature .hf-photo{width:160px;height:160px;flex:0 0 auto;background:transparent;border:0;
      display:flex;align-items:center;justify-content:center;padding:0;}
  .hero-feature .hf-photo img{max-width:100%;max-height:100%;width:auto;object-fit:contain;}
  .hero-feature .hf-info{min-width:0;}
  .hero-feature .hf-brand{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
      color:var(--muted);font-weight:700;margin-bottom:1px;}
  .hero-feature h2{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--ink-text);
      line-height:1.12;margin-bottom:6px;}
  .hero-feature .hf-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .hero-feature .hf-now{font-family:var(--font-display);font-weight:700;font-size:25px;color:var(--action);line-height:1;}
  .hero-feature .hf-was{font-size:15px;color:var(--muted);text-decoration:line-through;}
  /* hero-optie 4: "Tip van de specialist" — advies-variant van de producthighlight (chip navy,
     expert-citaat met rode zelfkant + specialist-chip; prijs blijft als tweede regel). */
  .hero-feature .hf-chip--navy{background:var(--sand-2);color:var(--ink);}
  .hero-feature .v4-quote{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--ink-text);
      border-left:3px solid var(--action);padding-left:13px;margin:2px 0 12px;line-height:1.36;}
  .hero-feature .v4-person{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
  .hero-feature .v4-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:2px solid var(--accent-soft);}
  .hero-feature .v4-avatar img{width:100%;height:100%;object-fit:cover;}
  .hero-feature .v4-meta b{display:block;font-family:var(--font-display);font-size:14.5px;color:var(--ink-text);}
  .hero-feature .v4-meta small{display:block;font-size:12.5px;color:var(--muted);line-height:1.25;}
  /* V7: CTA onderaan zodat de kaart de gelijke kolomhoogte netjes opvult */
  .hero-feature .btn{margin-top:auto;}

  /* trust ribbon under hero */
  .trust-ribbon{background:var(--paper);border-bottom:1px solid var(--line);}
  .trust-ribbon .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
  .trust-ribbon .ti{display:flex;align-items:center;gap:13px;padding:18px 22px;border-right:1px solid var(--line-soft);}
  .trust-ribbon .ti:last-child{border-right:0;}
  .trust-ribbon .ti svg{width:28px;height:28px;stroke:var(--action);flex:0 0 auto;}
  .trust-ribbon .ti b{display:block;font-family:var(--font-display);font-size:16.5px;color:var(--ink);font-weight:600;}
  .trust-ribbon .ti span{font-size:14px;color:var(--muted);}

  /* ---------- category section (V8: twee grids — machines met echte foto's, accessoires met custom pictogrammen) ---------- */
  .cats{background:var(--paper);}
  /* V8: tweede sub-header binnen dezelfde sectie (accessoires) — zelfde idioom als .sec-head, met top-marge */
  .cats .sec-head.sub{margin-top:50px;}

  /* --- Grid 1: machines — foto in vaste 4:3-window (object-fit:cover) + label op wit eronder --- */
  /* V8-smaller-categories: 4 koloms × 2 rijen = 8 kaarten; kaart ~285px @1240-container → kleinere 4:3-beelden */
  .cat-machines{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .cat-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
      border-radius:var(--radius);overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;}
  .cat-card:hover{box-shadow:var(--shadow-card);border-color:var(--sand-2);text-decoration:none;transform:translateY(-2px);}
  /* vaste fotokader — alle 9 lezen als één set ongeacht portret/outlier; per-foto object-position tempert de crops */
  /* D: machine-categorieën tonen nu PRODUCTFOTO'S OP WIT (klantverzoek) i.p.v. bijgesneden sfeerbeeld —
     witte fotobak + object-fit:contain + ademruimte, zodat de machine vrijstaand en scherp leest. */
  .cat-card .ph{position:relative;background:#fff;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line-soft);}
  .cat-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
      padding:14px;transition:transform .3s ease;}
  .cat-card:hover .ph img{transform:scale(1.04);}
  /* per-foto crop-correcties (portretten/outliers) — subject gecentreerd, drukke randen weg */
  .cat-card .ph.pos-borduur img{object-position:center 42%;}
  .cat-card .ph.pos-strijken img{object-position:center 34%;}
  .cat-card .ph.pos-rechtstik img{object-position:center 46%;}
  .cat-card .ph.pos-kindernaai img{object-position:35% center;}
  /* PLACEHOLDER-vaantje (coverlock — nog geen echte foto) */
  .cat-card .ph .flag{position:absolute;left:10px;top:10px;background:rgba(22,38,61,.82);color:#fff;
      font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;}
  /* V8-smaller-categories: compactere body voor smallere 4-koloms kaarten; titel ≥16px (usability-anker) */
  .cat-card .body{padding:13px 14px 14px;display:flex;align-items:center;justify-content:space-between;gap:9px;}
  .cat-card .ttl{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);line-height:1.2;}
  .cat-card .meta{font-size:13px;color:var(--muted);margin-top:2px;}
  .cat-card .arrow{color:var(--action);font-weight:700;font-size:20px;flex:0 0 auto;transition:transform .15s ease;}
  .cat-card:hover .arrow{transform:translateX(3px);}

  /* --- Grid 2: accessoires — custom inline-SVG pictogram (navy lijnstijl) + label --- */
  .cat-accessoires{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
  .acc-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;background:#fff;
      border:1px solid var(--line);border-radius:var(--radius);padding:20px 12px 16px;
      transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;}
  .acc-card:hover{box-shadow:var(--shadow);border-color:var(--sand-2);text-decoration:none;transform:translateY(-2px);}
  .acc-card .pic{width:64px;height:64px;border-radius:50%;background:var(--sand);display:flex;align-items:center;
      justify-content:center;transition:background-color .15s ease;}
  .acc-card:hover .pic{background:var(--sand-2);}
  /* alle pictogrammen op één 28px-grid, navy stroke ~1.8, ronde caps, geen fills (op kleine accenten na) */
  .acc-card .pic svg{width:36px;height:36px;display:block;fill:none;stroke:var(--ink-text);
      stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .acc-card .pic svg .accent{fill:var(--ink-text);stroke:none;}
  .acc-card .lbl{font-weight:700;font-size:15px;color:var(--ink);line-height:1.25;}

  /* ---------- bestsellers (V9-bestsellers-1: Hyvä-demo slider — pijlen in de sectiekop, track full-width) ---------- */
  .best{background:var(--sand);}
  /* V9-bestsellers-4: CTA-vullingen geïnverteerd t.o.v. b3 (klantverzoek).
     Koopknop = SOLIDE navy #1F3A5F, witte tekst + wit wagentje-icoon (svg stroke=currentColor → volgt de
     knopkleur). Wit op navy = 11,21:1 ✓; hover = dieper navy #162B47 = 14,11:1 ✓ ("zelfde knop, gehoverd"). */
  .btn-cart{background:var(--ink);color:#fff;border:1.5px solid var(--ink);}
  .btn-cart svg{width:19px;height:19px;stroke:currentColor;flex:0 0 auto;}
  .btn-cart:hover{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep);text-decoration:none;}
  /* niet-leverbaar: WIT met navy 1,5px-rand (inverse van de solide koopknop) — duidelijk een ándere knop.
     Navy #1F3A5F op wit = 11,21:1 ✓; hover = rustige lichtblauwe vulling #EAEFF6, navy tekst blijft = 9,81:1 ✓. */
  .btn-info{background:#fff;color:var(--ink);border:1.5px solid var(--ink);}
  .btn-info:hover{background:var(--sand-2);border-color:var(--ink);color:var(--ink);text-decoration:none;}

  /* FEEDBACK 1: pijlen in de sectiekop, rechts naast de "Naar alle machines →"-link (Hyvä-demo-patroon).
     De track loopt daardoor over de volle containerbreedte (geen flankerende pijlen meer). */
  .best .sec-head{align-items:center;}
  .best .head-right{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
  .prod-nav{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  /* pijlknoppen: ≥44px (48 voor ruime targets), navy chevron op wit, hairline-rand, radius 10 */
  .prod-nav .p-arrow{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
      background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;cursor:pointer;
      box-shadow:var(--shadow);transition:background-color .15s ease,opacity .15s ease;}
  .prod-nav .p-arrow:hover{background:var(--sand-2);}
  .prod-nav .p-arrow:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,58,95,.14);}
  .prod-nav .p-arrow svg{width:22px;height:22px;stroke:currentColor;}
  .prod-nav .p-arrow[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none;}

  /* track: full-width horizontaal scroll-snap. V11: native scrollbar VERBORGEN — de dot-paginatie
     onder de track is voortaan de positie-indicator (mechanisch gelijk aan demo.hyva.io; expliciet
     klantverzoek dat de eerdere zichtbare-balk-keuze overschrijft). Snap-swipen op touch blijft. */
  .prod-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
      -webkit-overflow-scrolling:touch;padding:4px 4px 12px;scrollbar-width:none;-ms-overflow-style:none;}
  .prod-grid::-webkit-scrollbar{display:none;height:0;width:0;}
  /* kaart = vaste breedte in de track; ~4 zichtbaar + laatste kaart peekt aan de rechterrand op 1440 (basis 100/4.4) */
  .prod{flex:0 0 calc((100% - 3*16px) / 4.4);scroll-snap-align:start;
      display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
      overflow:visible;position:relative;transition:box-shadow .15s ease,transform .15s ease;}
  /* Omnibus-tooltip mag uit de kaart steken: bij hover/focus of een geopende tooltip wordt de kaart
     opgetild (z-index) zodat de tooltip niet wordt afgekapt of onder een volgende kaart valt. De kaart
     is overflow:visible; .pimg/.pbody ronden hun eigen buitenhoeken af zodat de kaart rond blijft. */
  .prod:hover,.prod:focus-within,.prod:has(.omni[aria-expanded="true"]){z-index:6;}
  .prod:hover{box-shadow:var(--shadow-card);transform:translateY(-2px);}
  .prod .pimg{position:relative;background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14px;border-bottom:1px solid var(--line-soft);border-radius:var(--radius) var(--radius) 0 0;}
  .prod .pimg img{max-width:100%;max-height:100%;object-fit:contain;}
  .prod .badge{position:absolute;left:11px;top:11px;background:var(--action);color:#fff;font-weight:700;
      font-size:13px;padding:4px 10px;border-radius:999px;}
  /* label-badge (promo/levertijd) — los van voorraad. V10 label-sweep: solide navy is voortaan
     uitsluitend voor de koop-CTA gereserveerd; dit info-label wordt WIT met navy tekst + dunne 1px navy
     rand (zelfde padding/radius/positie → geen reflow). De rand houdt het label leesbaar op de
     lichtblauwe/witte fotobakken; navy tekst op wit = 11,21:1 ✓. Rood blijft voorbehouden aan de Actie-badge. */
  .prod .badge.badge-label{background:#fff;color:var(--ink);border:1px solid var(--ink);}
  .prod .pbody{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1 1 auto;border-radius:0 0 var(--radius) var(--radius);}
  .prod .brand-line{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px;}
  .prod h3{font-size:18px;font-weight:600;line-height:1.2;margin-bottom:10px;min-height:2.4em;}
  .prod ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:5px;}
  .prod ul li{font-size:14.5px;color:var(--body);display:flex;align-items:flex-start;gap:8px;line-height:1.35;}
  .prod ul li svg{width:16px;height:16px;stroke:var(--action);flex:0 0 auto;margin-top:2px;}
  /* voorraad-status in woorden. V9-bestsellers-3: gewicht terug op 700 (v9/bestsellers-2-idioom) nu de
     groene koopknop weg is — geen 'groen-soep'-risico meer naast de witte/navy knop; pip+tekst dragen de status. */
  .prod .stock{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--stock);font-weight:700;margin-bottom:12px;}
  .prod .stock .pip{width:9px;height:9px;border-radius:50%;background:var(--stock);flex:0 0 auto;}
  /* niet-in-voorraad: status in woorden, gedempt grijs i.p.v. groen (mirrors live grid) */
  .prod .stock.out{color:var(--muted);}
  .prod .stock.out .pip{background:var(--muted);}
  .prod .price-row{display:flex;align-items:baseline;gap:10px;margin-top:auto;margin-bottom:12px;flex-wrap:wrap;}
  .prod .price{font-family:var(--font-display);font-weight:700;font-size:27px;color:var(--action);line-height:1;}
  .prod .was{font-size:16px;color:var(--muted);text-decoration:line-through;}
  .prod .save{font-size:13px;font-weight:700;color:#fff;background:var(--action);border-radius:6px;padding:2px 8px;}
  /* V12: dot-paginatie ONDER de track — nu 1-op-1 met demo.hyva.io (.snap-pager/.snap-marker).
     Demo-spec (Tailwind --spacing=4px): marker 16×16 ring (slate-600, 1px) → actief aria-current
     verbreedt naar 28px gevulde pil in de primary-kleur, border transparant; transition op
     inline-size/border-color/background-color 0.3s. Pager: flex, gap 12, center, padding-block 8,
     min-block 44. ÉÉN rij (geen wrap) — de oude wrap brak op mobiel in 2 rijen. Onze idle-ring is
     grijs (--muted) i.p.v. navy, exact zoals de demo; actieve pil blijft navy (ons primary-idioom). */
  .prod-pager{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:nowrap;
      min-height:44px;padding:8px 0;margin-top:10px;}
  .prod-pager.is-single{display:none;}
  /* marker = <button>; de stip ZELF is het element (16px), geen ::before-truc meer. Een onzichtbare
     ::after vergroot het tikgebied tot ~44px hoog zonder de strakke rij-afstand te beïnvloeden. */
  .prod-marker{position:relative;appearance:none;-webkit-appearance:none;box-sizing:border-box;
      flex:0 0 auto;cursor:pointer;width:16px;height:16px;padding:0;margin:0;border-radius:999px;
      border:1px solid var(--muted);background:transparent;
      transition:width .3s ease,background-color .3s ease,border-color .3s ease;}
  .prod-marker::after{content:"";position:absolute;inset:-14px -4px;}  /* tikgebied ~44px hoog */
  .prod-marker:hover{border-color:var(--ink);background:rgba(31,58,95,.10);}
  .prod-marker:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,58,95,.20);}
  /* actief = gevulde navy pil, breder (28px) — exact de demo-verhouding (16→28). */
  .prod-marker[aria-current="true"]{width:28px;background:var(--ink);border-color:transparent;}
  .prod-marker[aria-current="true"]:hover{background:var(--ink-deep);border-color:transparent;}

  .best .below{margin-top:26px;text-align:center;}

  /* ---------- D: INSPIRATIE / BLOG (uit richting C, boven de merkenband) ---------- */
  .blog{background:var(--sand);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
  .blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .blog-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
      overflow:hidden;display:flex;flex-direction:column;
      transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;}
  .blog-card:hover{border-color:var(--sand-2);box-shadow:var(--shadow-card);transform:translateY(-3px);}
  .blog-card .imgwrap{aspect-ratio:16/8.5;overflow:hidden;background:var(--sand-2);}
  .blog-card .imgwrap img{width:100%;height:100%;object-fit:cover;}
  .blog-body{padding:18px 20px 19px;}
  .blog-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;color:var(--action);}
  .blog-body h3{font-size:21px;font-weight:600;margin-top:9px;color:var(--ink-text);line-height:1.2;}
  .blog-body h3 a{color:inherit;text-decoration:none;}
  .blog-body h3 a::after{content:"";position:absolute;inset:0;}
  .blog-body h3 a:hover{color:var(--action);}
  .blog-body p{margin-top:8px;font-size:15.5px;color:var(--body);}
  .blog-more{display:inline-flex;align-items:center;gap:8px;margin-top:13px;color:var(--action);
      font-weight:700;font-size:15px;text-decoration:underline;text-decoration-style:dashed;
      text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--red-line);}
  .blog-card:hover .blog-more{text-decoration-color:var(--action);}

  /* ---------- brand strip ---------- */
  .brands{background:var(--paper);padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .brands .head{text-align:center;margin-bottom:22px;}
  .brands .head .eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:7px;}
  .brands .head h2{font-size:24px;font-weight:600;}
  /* Full-bleed merken-slider: alle merken op één regel, continu schuivend (mobielvriendelijk) */
  .brand-slider{position:relative;width:100%;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
  .brand-track{display:flex;align-items:center;width:max-content;
    animation:brand-marquee 38s linear infinite;}
  .brand-slider:hover .brand-track{animation-play-state:paused;}
  .brand-track a{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    height:46px;margin:0 28px;border-radius:8px;transition:background-color .15s ease;}
  .brand-track a:hover{background:var(--sand);}
  .brand-track img{max-height:30px;width:auto;opacity:.78;transition:opacity .15s ease;}
  .brand-track a:hover img{opacity:1;}
  @keyframes brand-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media(prefers-reduced-motion:reduce){
    .brand-slider{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .brand-track{animation:none;}
  }

  /* V9-edit: serviceblok verwijderd op klantverzoek (CSS + sectie weg; ankers her-gericht op footer #contact) */

  /* ---------- reviews ---------- */
  .reviews{background:var(--sand);}
  .rev-grid{display:grid;grid-template-columns:300px 1fr 1fr;gap:20px;align-items:stretch;}
  /* V13: navy is nu exclusief voor de koop-CTA — score-paneel naar lichtblauw #EAEFF6 met navy-ink tekst,
     blijft het visuele anker van de sectie (donkerder/voller dan de witte rev-cards ernaast) */
  .rev-score{background:var(--sand-2);color:var(--ink-text);border:1px solid var(--line-soft);
      border-radius:var(--radius);padding:26px 24px;display:flex;
      flex-direction:column;justify-content:center;text-align:center;box-shadow:var(--shadow-card);}
  .rev-score .big{font-family:var(--font-display);font-size:62px;font-weight:700;line-height:1;color:var(--ink-text);}  /* 13,18:1 op #EAEFF6 */
  .rev-score .out{font-size:15px;color:var(--body);margin-top:2px;}  /* 5,72:1 */
  .rev-score .stars{color:#8C5C13;font-size:24px;letter-spacing:3px;margin:12px 0 8px;}  /* goud op lichtblauw 4,97:1 */
  .rev-score .count{font-size:15px;color:var(--body);}  /* 5,72:1 */
  .rev-score .count b{color:var(--ink-text);}  /* 13,18:1 */
  .rev-score .fc{margin-top:16px;background:#fff;border:1px solid var(--line-soft);border-radius:10px;
      padding:8px 10px;display:inline-flex;align-items:center;justify-content:center;}
  .rev-score .fc img{height:26px;width:auto;}
  .rev-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;
      display:flex;flex-direction:column;}
  .rev-card .stars{color:var(--star-light);font-size:19px;letter-spacing:2px;margin-bottom:12px;}  /* darker gold on white 4,97:1 */
  .rev-card blockquote{margin:0 0 16px;font-size:17px;line-height:1.55;color:var(--body);flex:1 1 auto;}
  .rev-card .who{display:flex;align-items:center;gap:11px;border-top:1px solid var(--line-soft);padding-top:14px;}
  .rev-card .av{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--ink);
      display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:17px;flex:0 0 auto;}
  .rev-card .who b{display:block;font-size:15.5px;color:var(--ink);}
  .rev-card .who small{font-size:13.5px;color:var(--muted);}

  /* ---------- newsletter ---------- */
  .news{background:var(--paper);}
  /* V2-b: newsletter re-skinned calm — brand lichtblauw panel + red submit button */
  .news-inner{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);
      padding:34px 40px;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;}
  .news-inner .eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--action);font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:9px;}
  .news-inner h2{font-size:28px;font-weight:600;color:var(--ink-text);margin-bottom:7px;}
  .news-inner p{font-size:16.5px;color:var(--body);margin:0;}
  .news-inner p b{color:var(--ink-text);}
  .news-form label{display:block;font-weight:700;font-size:15px;color:var(--ink-text);margin-bottom:8px;}
  .news-form .row{display:flex;gap:10px;}
  .news-form input{flex:1 1 auto;min-width:0;height:54px;border:2px solid var(--ink);border-radius:999px;
      padding:0 20px;font-family:inherit;font-size:17px;background:#fff;color:var(--body);}
  .news-form input::placeholder{color:#6B7385;}
  .news-form input:focus{outline:none;box-shadow:0 0 0 3px rgba(174,27,33,.18);}
  .news-form .fine{margin-top:11px;font-size:13.5px;color:var(--muted);}

  /* ---------- footer (V13: LICHT vlak — navy gereserveerd voor koop-CTA) ----------
     Wit hoofdvlak met krachtige rode toplijn als merk-accent; navy-ink koppen, navy links → rode hover,
     blue-grey body. Onderbalk = lichtblauw #EFF5FB met échte betaallogo's op witte chips. */
  footer{background:var(--paper);color:var(--body);padding:0;border-top:3px solid var(--action);}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding:50px 0 40px;}
  footer .fbrand .word{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--ink-text);}  /* 15,2:1 */
  footer .fbrand .sub{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:6px;}  /* 4,76:1 */
  footer .fbrand p{font-size:15px;color:var(--body);margin:16px 0 0;max-width:34ch;}  /* 6,61:1 */
  footer .contact{margin-top:18px;display:flex;flex-direction:column;gap:9px;font-size:15.5px;}
  footer .contact a,footer .contact span{display:flex;align-items:flex-start;gap:10px;color:var(--ink);}  /* 11,5:1 */
  footer .contact a:hover{color:var(--action);text-decoration:none;}  /* 7,05:1 */
  footer .contact svg{width:19px;height:19px;stroke:var(--ink);flex:0 0 auto;margin-top:2px;}
  footer h4{color:var(--ink-text);font-size:17px;font-weight:600;margin-bottom:14px;}  /* 15,2:1 */
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  footer ul li a{color:var(--ink);font-size:15.5px;}  /* 11,5:1 */
  footer ul li a:hover{color:var(--action);text-decoration:underline;}  /* 7,05:1 */
  .foot-bottom{background:var(--sand);border-top:1px solid var(--line);padding:20px 0;}
  .foot-bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;
      font-size:14px;color:var(--body);}  /* legal op #EFF5FB = 6,02:1 */
  /* betaalrij: Mollie's uniforme iconenset — elk icoon is een eigen 32×24 badge met
     afgeronde hoek (rx≈4) en eigen achtergrond → kaal renderen, géén witte chip eromheen.
     Vaste hoogte = optisch identieke maten (acceptatiecriterium). */
  .foot-bottom .pays{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .foot-bottom .pay-ic{height:24px;width:auto;display:block;}

  /* ---------- responsive ---------- */
  @media(max-width:1100px){
    /* slider: ~3,3 kaarten zichtbaar + peek */
    .prod{flex:0 0 calc((100% - 2*16px) / 3.3);}
    .cat-accessoires{grid-template-columns:repeat(4,1fr);}
    .rev-grid{grid-template-columns:1fr 1fr;}
    .rev-score{grid-column:1 / -1;flex-direction:row;justify-content:space-between;text-align:left;align-items:center;}
    .rev-score .stars{margin:0;}
  }
  @media(max-width:900px){
    .header .wrap{flex-wrap:wrap;gap:14px 18px;}
    .search{order:3;flex:1 1 100%;}
    .header-actions{margin-left:auto;}
    /* V6: compacte hamburger links in de header (☰ + "menu" eronder, gestapeld, ≥44px target, rustige stijl) */
    .ham-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
        flex:0 0 auto;min-width:44px;min-height:44px;padding:4px 6px;background:transparent;border:0;
        border-radius:10px;color:#1F3A5F;cursor:pointer;font-family:inherit;line-height:1;
        transition:background-color .15s ease;}
    .ham-btn:hover{background:#EAEFF6;}
    .ham-btn svg{width:22px;height:22px;stroke:#1F3A5F;}
    .ham-btn .ham-lbl{font-size:11.5px;font-weight:700;color:#1F3A5F;}
    /* V6: header-rij krijgt iets krappere gaps zodat hamburger + logo niet botsen */
    .header .wrap{gap:12px 12px;}
    .brand .logo{width:188px;}
    /* V6: hoofdnav-linkrij verbergen op mobiel — toegang loopt nu via de hamburger (geen dubbele menu's) */
    .nav{display:none;}
    /* V5: mobiele hero-spacing gelijkgetrokken — de tussenruimte tussen de twee blokken (grid-gap, ~26px)
       geldt nu óók boven (naar zoek/menu) en onder (naar de USP-balk). De section-default padding (46px)
       wordt op mobiel afgezet; de wrap-padding (+ aangrenzende header-/USP-padding) levert ~dezelfde gap. */
    .hero{padding-top:0;padding-bottom:0;}
    /* V7: krappere stapel-gap (was 36); kaart + kop + finder vullen de volle kolombreedte
       (geen smalle caps op tablet) en lijnen links uit i.p.v. gecentreerd te zweven. */
    .hero .wrap{grid-template-columns:1fr;gap:22px;padding-top:24px;padding-bottom:22px;}
    .hero-visual{min-height:0;justify-content:flex-start;}
    .hero-feature{max-width:none;}
    .hero-copy h2{max-width:none;}
    .hero-sub{max-width:none;}
    .finder{max-width:none;}
    .hero-ruit-tint{display:none;}
    .hero-ruit-tint{display:none;}
    .trust-ribbon .wrap{grid-template-columns:1fr 1fr;}
    .trust-ribbon .ti:nth-child(2){border-right:0;}
    .trust-ribbon .ti{border-bottom:1px solid var(--line-soft);}
    .cat-machines{grid-template-columns:repeat(2,1fr);}
    /* slider: ~2,3 kaarten zichtbaar + peek */
    .prod{flex:0 0 calc((100% - 16px) / 2.3);}
    .news-inner{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .blog-grid{grid-template-columns:1fr;}
  }
  @media(max-width:680px){
    body{font-size:17px;}
    /* V6: full-width Menu-balk verwijderd; mobiele menutoegang via hamburger links in de header (zie 900px-blok) */
    .sec-head{flex-direction:column;align-items:flex-start;gap:10px;}
    .sec-head h2{font-size:25px;}
    /* bestsellers-kop stapelt: H2 boven, daaronder link + pijlen-paar (links uitgelijnd, blijft boven de track) */
    .best .sec-head{align-items:flex-start;}
    /* slider: ~1,5 kaarten zichtbaar + peek op kleinere tablets/phones */
    .prod{flex:0 0 calc((100% - 16px) / 1.5);}
    /* veel dots op mobiel (1 kaart per 'pagina') → kleinere gap zodat de hele rij past, géén wrap */
    .prod-pager{gap:8px;}
    .hero-copy h2{font-size:27px;}
    .finder-steps{grid-template-columns:1fr;gap:14px;}
    /* op mobiel stapelen de velden (gap 14px) — CTA en streepje-sectie volgen
       dezelfde verticale ritme i.p.v. de krappere 11/10px desktopwaarden */
    .finder-cta{margin-top:14px;}
    .finder-foot{margin-top:14px;}
    .hero-feature{max-width:none;}
    .cat-accessoires{grid-template-columns:repeat(3,1fr);}
    .rev-grid{grid-template-columns:1fr;}
    .rev-score{flex-direction:column;text-align:center;}
    .rev-score .stars{margin:12px 0 8px;}
    .foot-grid{grid-template-columns:1fr;gap:28px;}
    .news-inner{padding:26px 22px;}
    /* V15: logo vult de headerruimte beter op telefoon (138 → 162); past nog op één regel met
       ham · logo · iconen omdat de acties icon-only zijn. Stuk-staat = zelfde maat (geen sprong). */
    .brand .logo{width:162px;}
    .header-actions .hact .lbl{display:none;}
    /* Iconen compacter + krappere tussenruimte → ham · logo · bel · account · cart op één regel */
    .header-actions{gap:2px;}
    .header-actions .hact{padding:7px;min-height:44px;}
    .header .wrap{gap:8px;}
    /* Mobiel: winkelwagen ook icon-only (label "Winkelwagen € …" weg) zodat
       hamburger · logo · telefoon · account · cart op één regel passen.
       De cart-count-badge + het totaal in de slide-in lade blijven. */
    .header-actions .hact.cart .lbl{display:none;}
    .news-form .row{flex-direction:column;}
    .news-form .row .btn{width:100%;}
  }
  @media(max-width:430px){
    /* slider: ~1,3 kaart zichtbaar + duidelijke peek op telefoon (toont dat er meer is) */
    .prod{flex:0 0 calc((100% - 16px) / 1.3);}
    .cat-accessoires{grid-template-columns:repeat(2,1fr);}
    .wrap{padding:0 16px;}
    /* V15: telefoons 381–430 — logo 118 → 142 zodat het de headerruimte vult; ham · logo · iconen
       blijven op één regel (acties icon-only, krappe paddings). Voor ≤380 zie het blok hieronder. */
    .brand .logo{width:142px;}
    .header-actions .hact{padding:6px;}
    .trust-ribbon .wrap{grid-template-columns:1fr;}
    .trust-ribbon .ti{border-right:0;border-bottom:1px solid var(--line-soft);}
    .trust-ribbon .ti:last-child{border-bottom:0;}
    /* V7: product-rij blijft horizontaal, foto iets kleiner zodat de prijs niet wrapt */
    .hero-feature .hf-photo{width:130px;height:130px;}
    .hero-feature h2{font-size:20px;}
  }
  @media(max-width:380px){
    /* V15: kleinste telefoons (≤380, o.a. 360px Android & 375px iPhone SE) — logo iets
       compacter (142 → 122) zodat ham · logo · iconen óók hier op één regel blijven.
       Stuk-staat = zelfde maat (de mobiele logo-krimp bij vastklikken is verwijderd). */
    .brand .logo{width:122px;}
  }

  /* ============================================================================
     V15 — DRIE CHROME-FEATURES (zoek-autocomplete · minicart-lade · desktop mega-menu)
     ============================================================================ */

  /* ---------- V15.1 · ZOEK-OVERLAY (faceted instant-search) ----------
     (2026-06-08) Herbouwd om de ECHTE productie-zoekoverlay te spiegelen i.p.v. een smal dropdown:
     een paginabreed paneel dat onder de chrome opent met (1) typo-correctiebanner, (2) linker facet-rail
     (Merk/Prijs/Subsubcategorie — hergebruikt category.html's .fgroup/.fopt-idioom), (3) toolbar
     (count + sort-select + grid/list view-toggle), (4) list-view productrijen, (5) "extra resultaten"-regel.
     Statische dataset (de bernina-rijen); de typo-banner is query-conditioneel (alleen bij "berdina").
     Idioom: --line-rand, --radius, --shadow-card, navy tekst, rode prijzen, lichtblauw --sand/--sand-2. */
  .search{position:relative;}
  /* (USABILITY 2026-06-08) De overlay moet visueel BIJ de zoekbalk horen, net als productie:
     de zoekbalk + headerrij blijven SCHERP/actief bovenop de scrim, het paneel valt direct ónder
     de headerrij (en bedekt de nav-strip, zoals productie) en de scrim dimt enkel de pagina eronder.
     STACKING binnen .chrome-sticky (z:60, eigen stacking-context): headerrij z:63 (scherp, bovenaan,
     'bezit' het paneel) > paneel z:62 (valt onder de headerrij, bedekt de nav) > scrim z:55 (dimt de
     rest). De headerrij krijgt position:relative + z-index zodra de overlay open is, zodat hij boven de
     scrim schildert en nooit grijs wordt. */
  body.ac-open .header{position:relative;z-index:63;background:#fff;}
  /* zoekveld krijgt een subtiele 'actieve' behandeling zodra de overlay open is: blijft wit/verheven
     boven de scrim met een rustige navy focus-ring + een connector die 'm aan het paneel koppelt. */
  body.ac-open .search form{border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,58,95,.16);}
  /* scrim achter de overlay (onder het paneel, boven de pagina; headerrij blijft erboven en scherp) */
  .ac-scrim{position:fixed;inset:0;background:rgba(22,38,61,.34);z-index:55;
      opacity:0;visibility:hidden;transition:opacity .14s ease,visibility .14s;}
  .ac-scrim.is-open{opacity:1;visibility:visible;}
  /* het brede paneel — kind van .chrome-sticky, ankert vlak ónder de HEADERRIJ (niet onder de hele
     chrome): top:var(--ac-top) = live gemeten headerhoogte (JS), zodat het paneel direct onder de
     zoekbalk valt en de nav-strip eronder bedekt — exact als productie. left/right:0 → volle
     chrome-breedte. Werkt in rust- én .is-stuck-staat omdat .chrome-sticky position:sticky/fixed is
     (= containing block) en --ac-top live wordt herberekend. PROBLEEM-3 (scroll-affordance): vaste
     max-height tot vlak boven de viewport-bodem → het paneel schuift NIET de hele pagina, maar zijn
     eigen body (.ac-inner) scrollt met een ZICHTBARE scrollbar + bodemfade. */
  .ac-panel{position:absolute;top:var(--ac-top,100%);left:0;right:0;z-index:62;
      background:#fff;border-top:2px solid var(--ink);box-shadow:0 22px 48px rgba(22,38,61,.20);
      max-height:calc(100vh - var(--ac-top,140px));
      opacity:0;visibility:hidden;transform:translateY(-6px);
      transition:opacity .14s ease,transform .14s ease,visibility .14s;}
  .ac-panel.is-open{opacity:1;visibility:visible;transform:translateY(0);}
  /* zachte bodemfade ONDERAAN het paneel — hint 'er is meer'; rechts ingesprongen zodat de
     scrollbar zichtbaar blijft. pointer-events:none → vangt geen klikken/scroll. */
  .ac-panel::after{content:"";position:absolute;left:0;right:14px;bottom:0;height:46px;pointer-events:none;
      background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 82%);
      border-radius:0 0 var(--radius) var(--radius);opacity:0;transition:opacity .14s ease;}
  .ac-panel.is-open::after{opacity:1;}
  /* .ac-inner = de SCROLLENDE body van het paneel (typo-banner + grid scrollen samen, zoals productie).
     Zichtbare scrollbar (NIET verbergen) + bodemruimte zodat de fade niet over de laatste rij valt. */
  .ac-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px 30px;
      max-height:calc(100vh - var(--ac-top,140px));overflow-y:auto;overscroll-behavior:contain;
      scrollbar-width:thin;scrollbar-color:#9AA6BC #EAEFF6;}
  /* zichtbare WebKit-scrollbar (navy-grijs duim op lichtblauw spoor).
     -webkit-appearance:none dwingt op de meeste systemen een KLASSIEKE, altijd-zichtbare scrollbar af.
     LET OP: macOS' overlay-scrollbar fadet alsnog weg ondanks deze styling — daarom staat er ÓÓK een
     altijd-zichtbare custom scroll-rail (.ac-scrollrail) op de paneelrand (zie hieronder), zodat de
     scroll-affordance op ELK systeem blijft staan (cruciaal voor 45+). Ik laat de --ac-pad-right ruimte
     vrij voor de rail zodat content er niet onder valt. */
  .ac-inner::-webkit-scrollbar{-webkit-appearance:none;width:12px;}
  .ac-inner::-webkit-scrollbar-track{background:#EAEFF6;border-radius:0;}
  .ac-inner::-webkit-scrollbar-thumb{background:var(--muted);border-radius:999px;border:3px solid #EAEFF6;
      min-height:48px;}                                  /* --muted #6B7385 op #EAEFF6 = 4,12:1 (grafisch ≥3:1) */
  .ac-inner::-webkit-scrollbar-thumb:hover{background:#545D70;}
  /* altijd-zichtbare custom scroll-rail op de rechter paneelrand (OS-onafhankelijk; vult de macOS-
     overlay-leemte). JS update de duim-hoogte/-positie op scroll/resize. Alleen getoond als er te
     scrollen valt (.ac-panel.has-scroll). pointer-events:none → de echte scrollbar/scrollgebied blijft leidend. */
  .ac-scrollrail{position:absolute;top:14px;bottom:54px;right:5px;width:8px;border-radius:999px;
      background:var(--line-soft);opacity:0;transition:opacity .14s ease;pointer-events:none;z-index:3;}
  .ac-panel.has-scroll.is-open .ac-scrollrail{opacity:1;}
  .ac-scrollthumb{position:absolute;left:0;right:0;border-radius:999px;background:var(--muted);
      min-height:36px;}                                  /* --muted #6B7385 op rail #E3E8F0 = 3,86:1 (grafisch ≥3:1) */
  /* als de native (klassieke) scrollbar wél ruimte reserveert, schuift de rail er net binnen; geen dubbel beeld op overlay-OS */
  /* typo-correctiebanner — lichtblauwe balk bovenaan het resultaatgebied */
  .ac-typo{display:flex;align-items:center;gap:14px;background:var(--sand-2);border:1px solid var(--line-soft);
      border-radius:var(--radius-sm);padding:12px 16px;margin:18px 0 0;}
  .ac-typo[hidden]{display:none;}   /* expliciete display:flex mag het [hidden]-attribuut niet overrulen */
  .ac-typo .ac-typo-txt{font-size:15.5px;color:var(--ink-text);line-height:1.4;flex:1 1 auto;min-width:0;}
  .ac-typo .ac-typo-txt b{color:var(--action);font-weight:700;}   /* gecorrigeerde term in rood (6,10:1) */
  .ac-typo .ac-typo-close{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:#fff;
      border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;font-family:inherit;font-weight:700;
      font-size:14px;padding:0 14px;min-height:40px;cursor:pointer;transition:background-color .15s ease;}
  .ac-typo .ac-typo-close:hover{background:var(--sand);}
  .ac-typo .ac-typo-close svg{width:15px;height:15px;stroke:currentColor;}
  /* hoofdgrid: facet-rail links (280px) + resultatenkolom rechts.
     (USABILITY 2026-06-08) De scroll is verplaatst naar .ac-inner (paneel-body) zodat de typo-banner
     mee-scrollt en de scrollbar duidelijk aan de paneelrand staat (productie-gedrag) — dit grid groeit
     dus natuurlijk mee binnen de scrollende .ac-inner (geen eigen overflow/max-height meer). */
  .ac-grid{display:grid;grid-template-columns:280px 1fr;gap:26px;padding:20px 0 4px;align-items:start;}
  /* facet-rail (hergebruik category.html .filters/.fgroup/.fopt) */
  .ac-facets{display:flex;flex-direction:column;gap:14px;min-width:0;}
  .ac-facets .ac-fhead h2{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--ink-text);
      margin-bottom:2px;}
  .ac-facets .ac-fhead p{font-size:14px;color:var(--muted);margin:0;}
  .ac-fgroup{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
  .ac-fgroup > button.ac-ftoggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
      background:#fff;border:0;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:16px;
      color:var(--ink-text);padding:14px 15px;min-height:48px;text-align:left;transition:background-color .15s ease;}
  .ac-fgroup > button.ac-ftoggle:hover{background:var(--sand);}
  .ac-fgroup > button.ac-ftoggle .chev{width:18px;height:18px;stroke:var(--ink);flex:0 0 auto;
      transition:transform .18s ease;}
  .ac-fgroup.collapsed > button.ac-ftoggle .chev{transform:rotate(-90deg);}
  .ac-fgroup .ac-fbody{padding:4px 15px 14px;}
  .ac-fgroup.collapsed .ac-fbody{display:none;}
  .ac-fopt{display:flex;align-items:center;gap:11px;padding:7px 4px;min-height:40px;cursor:pointer;border-radius:8px;
      transition:background-color .12s ease;}
  .ac-fopt:hover{background:var(--sand);}
  .ac-fopt input{position:absolute;opacity:0;width:0;height:0;}
  .ac-fopt .box{width:20px;height:20px;border:1.5px solid var(--muted);border-radius:5px;background:#fff;flex:0 0 auto;
      display:flex;align-items:center;justify-content:center;transition:background-color .12s ease,border-color .12s ease;}
  .ac-fopt .box svg{width:13px;height:13px;stroke:#fff;opacity:0;}
  .ac-fopt input:checked + .box{background:var(--ink);border-color:var(--ink);}
  .ac-fopt input:checked + .box svg{opacity:1;}
  .ac-fopt input:focus-visible + .box{box-shadow:0 0 0 3px rgba(31,58,95,.22);}
  .ac-fopt .lab{font-size:15px;color:var(--body);flex:1 1 auto;line-height:1.3;}
  .ac-fopt .cnt{font-size:13px;color:var(--muted);flex:0 0 auto;}
  .ac-fopt input:checked ~ .lab{color:var(--ink-text);font-weight:700;}
  .ac-fgroup .ac-fmore{margin-top:8px;background:none;border:0;color:var(--action);font-weight:700;font-size:13.5px;
      cursor:pointer;padding:6px 4px;font-family:inherit;}
  .ac-fgroup .ac-fmore:hover{color:var(--action-dark);text-decoration:underline;}
  /* prijs: statische range-slider-behandeling (illustratief) */
  .ac-fprice{padding-top:8px;}
  .ac-fprice .ac-prange{position:relative;height:6px;border-radius:999px;background:var(--sand-2);margin:18px 4px 12px;}
  .ac-fprice .ac-prange i{position:absolute;top:0;height:100%;left:6%;right:6%;background:var(--ink);border-radius:999px;}
  .ac-fprice .ac-prange .knob{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;
      border:2px solid var(--ink);transform:translate(-50%,-50%);}
  .ac-fprice .ac-prange .knob.lo{left:6%;} .ac-fprice .ac-prange .knob.hi{left:94%;}
  .ac-fprice .ac-pbounds{display:flex;justify-content:space-between;font-size:14px;color:var(--body);font-weight:700;}
  /* resultatenkolom */
  .ac-results{min-width:0;}
  .ac-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px 16px;flex-wrap:wrap;
      padding-bottom:16px;border-bottom:1px solid var(--line-soft);margin-bottom:6px;}
  .ac-toolbar .ac-count{font-size:15px;color:var(--body);}
  .ac-toolbar .ac-count b{color:var(--ink-text);font-weight:700;}
  .ac-tbc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  /* grid/list view-toggle */
  .ac-viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
  .ac-viewtoggle button{width:42px;height:44px;display:flex;align-items:center;justify-content:center;
      background:#fff;border:0;cursor:pointer;color:var(--muted);transition:background-color .15s ease,color .15s ease;}
  .ac-viewtoggle button + button{border-left:1px solid var(--line);}
  .ac-viewtoggle button svg{width:19px;height:19px;stroke:currentColor;}
  .ac-viewtoggle button[aria-pressed="true"]{background:var(--sand-2);color:var(--ink);}   /* actief: navy op lichtblauw (9,94:1) */
  .ac-sort{display:flex;align-items:center;gap:9px;}
  .ac-sort > span{font-size:14px;color:var(--muted);font-weight:700;white-space:nowrap;}
  .ac-sel{position:relative;display:inline-flex;}
  .ac-sel select{appearance:none;-webkit-appearance:none;height:44px;border:1px solid var(--line);
      border-radius:var(--radius-sm);background:#fff;font-family:inherit;font-size:15px;color:var(--ink-text);
      padding:0 40px 0 14px;cursor:pointer;transition:border-color .15s ease;font-weight:700;}
  .ac-sel select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,58,95,.14);}
  .ac-sel .chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;
      width:17px;height:17px;stroke:var(--ink);}
  /* list-view productrijen */
  .ac-rows{display:flex;flex-direction:column;}
  .ac-prow{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;
      padding:16px 2px;border-bottom:1px solid var(--line-soft);}
  .ac-prow .ac-pimg{width:84px;height:84px;border:1px solid var(--line-soft);border-radius:10px;background:#fff;
      display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px;}
  .ac-prow .ac-pimg img{max-width:100%;max-height:100%;object-fit:contain;}
  .ac-prow .ac-pinfo{min-width:0;}
  .ac-prow .ac-pbrand{font-size:12.5px;color:var(--muted);margin-bottom:2px;}
  .ac-prow .ac-pbrand b{color:var(--ink-text);font-weight:700;}
  .ac-prow .ac-pname{display:block;font-family:var(--font-display);font-size:18px;font-weight:600;
      color:var(--ink-text);line-height:1.2;margin-bottom:5px;}
  .ac-prow a.ac-pname:hover{color:var(--action);text-decoration:none;}
  .ac-prow .ac-pdesc{font-size:14px;color:var(--body);line-height:1.4;margin:0;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .ac-prow .ac-pbuy{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto;}
  .ac-prow .ac-pprice{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--action);
      white-space:nowrap;}
  /* "Meer informatie" = secundair (wit + navy rand) — navy-vulling blijft voorbehouden aan koop-CTA's */
  .ac-prow .ac-pmore{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);
      border:1.5px solid var(--ink);border-radius:999px;font-family:inherit;font-weight:700;font-size:14.5px;
      padding:0 16px;min-height:44px;white-space:nowrap;transition:background-color .15s ease;}
  .ac-prow .ac-pmore:hover{background:var(--sand-2);color:var(--ink);text-decoration:none;}
  /* "Er zijn N extra resultaten …" slotregel */
  .ac-extra{display:flex;align-items:center;justify-content:center;gap:9px;padding:18px 2px 2px;
      font-size:15px;color:var(--body);text-align:center;}
  .ac-extra a{font-weight:700;color:var(--action);}
  .ac-extra a:hover{color:var(--action-dark);}
  /* mobiele "Verfijn"-knop + drawer-sluitkop (desktop verborgen) */
  .ac-filterbar{display:none;}
  .ac-facets .ac-fclose{display:none;}
  /* mobiel ≤900: stapelen — facet-rail achter een "Verfijn"-drawer, rijen enkel-koloms */
  @media(max-width:900px){
    .ac-inner{padding:0 16px 24px;}
    .ac-grid{grid-template-columns:1fr;gap:16px;padding:16px 0 4px;}
    /* "Verfijn"-knop boven de resultaten */
    .ac-filterbar{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
    .ac-filterbar .ac-fbtn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);
        border:1.5px solid var(--ink);border-radius:999px;font-family:inherit;font-weight:700;font-size:15px;
        padding:0 18px;min-height:44px;cursor:pointer;transition:background-color .15s ease;}
    .ac-filterbar .ac-fbtn:hover{background:var(--sand-2);}
    .ac-filterbar .ac-fbtn svg{width:19px;height:19px;stroke:currentColor;}
    /* drawer: links inschuivend (zelfde idioom als category.html mobiele filterdrawer) */
    .ac-facets{position:fixed;inset:0 auto 0 0;width:min(340px,88vw);max-width:88vw;background:#fff;z-index:96;
        padding:18px 16px;box-shadow:8px 0 30px rgba(22,38,61,.2);overflow-y:auto;
        transform:translateX(-102%);transition:transform .18s ease;gap:14px;}
    .ac-facets > *{flex:0 0 auto;}
    .ac-facets.open{transform:translateX(0);}
    .ac-facets .ac-fhead{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;
        background:#fff;padding-bottom:8px;border-bottom:1px solid var(--line-soft);}
    .ac-facets .ac-fclose{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
        background:transparent;border:0;border-radius:10px;color:var(--ink);cursor:pointer;flex:0 0 auto;}
    .ac-facets .ac-fclose:hover{background:var(--sand);}
    .ac-facets .ac-fclose svg{width:20px;height:20px;stroke:currentColor;}
    /* rijen enkel-koloms: beeld+tekst boven, prijs/knop eronder */
    .ac-prow{grid-template-columns:64px 1fr;gap:13px;}
    .ac-prow .ac-pimg{width:64px;height:64px;}
    .ac-prow .ac-pbuy{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;
        width:100%;padding-top:2px;}
    .ac-toolbar{gap:12px 14px;}
    .ac-tbc{width:100%;justify-content:space-between;}
  }
  @media(max-width:420px){
    .ac-sort > span{display:none;}   /* "Sorteren"-label weg op heel smal; aria-label op de select draagt de naam */
  }

  /* ---------- V15.2 · MINICART (slide-in lade van rechts + scrim) ----------
     Scrim onder de lade; lade ~400px desktop / bijna full-width mobiel. Sluit via ✕/scrim/Escape. */
  .mc-scrim{position:fixed;inset:0;background:rgba(22,38,61,.42);z-index:90;
      opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;}
  .mc-scrim.is-open{opacity:1;visibility:visible;}
  /* V5-fix: de gesloten lade staat off-screen (translateX(100%)) maar haar linker box-shadow lekte terug
     over de rechter schermrand. visibility:hidden in rust houdt de schaduw weg tot de lade opent (zelfde
     patroon als de scrim); de visibility-transitie laat de uitschuif-animatie wél zichtbaar. */
  .minicart{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;z-index:95;
      background:#fff;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(22,38,61,.22);
      transform:translateX(100%);visibility:hidden;transition:transform .2s ease,visibility .2s ease;}
  .minicart.is-open{transform:translateX(0);visibility:visible;}
  /* kop */
  .mc-head{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line);flex:0 0 auto;}
  .mc-head h2{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--ink-text);}
  .mc-head .mc-itemcount{font-size:14px;color:var(--muted);font-weight:400;}
  .mc-close{margin-left:auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
      background:transparent;border:0;border-radius:10px;color:var(--ink);cursor:pointer;
      transition:background-color .15s ease;}
  .mc-close:hover{background:var(--sand-2);}
  .mc-close svg{width:22px;height:22px;stroke:currentColor;}
  /* gratis-verzending-balk */
  .mc-ship{padding:14px 20px;border-bottom:1px solid var(--line-soft);flex:0 0 auto;background:var(--sand);}
  .mc-ship .mc-ship-txt{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--body);margin-bottom:9px;}
  .mc-ship .mc-ship-txt svg{width:19px;height:19px;stroke:var(--ink);flex:0 0 auto;}
  .mc-ship .mc-ship-txt b{color:var(--ink-text);}
  .mc-ship .mc-ship-done{color:var(--stock);font-weight:700;}
  .mc-ship .mc-bar{height:7px;border-radius:999px;background:var(--sand-2);overflow:hidden;}
  .mc-ship .mc-bar i{display:block;height:100%;background:var(--ink);border-radius:999px;
      transition:width .25s ease;}  /* navy vulling = grafisch ≥3:1 op lichtblauw */
  /* regels (scrollbaar) */
  .mc-lines{flex:1 1 auto;overflow-y:auto;padding:6px 20px;}
  .mc-line{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft);}
  .mc-line:last-child{border-bottom:0;}
  .mc-line .mc-thumb{width:64px;height:64px;border:1px solid var(--line-soft);border-radius:10px;background:#fff;
      display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .mc-line .mc-thumb img{max-width:100%;max-height:100%;object-fit:contain;padding:4px;}
  .mc-line .mc-detail{min-width:0;display:flex;flex-direction:column;}
  .mc-line .mc-brand{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;}
  .mc-line .mc-name{font-size:15.5px;font-weight:700;color:var(--ink-text);line-height:1.25;margin:1px 0 8px;}
  .mc-line .mc-name a{color:var(--ink-text);}
  .mc-line .mc-name a:hover{color:var(--action);text-decoration:none;}
  .mc-line .mc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
  /* qty-stepper: navy hairline knoppen, 32px (binnen 44px-rij door padding van de regel) */
  .mc-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
  .mc-qty button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
      background:#fff;border:0;color:var(--ink);cursor:pointer;font-size:18px;line-height:1;
      transition:background-color .15s ease;}
  .mc-qty button:hover{background:var(--sand-2);}
  .mc-qty button:disabled{color:var(--line);cursor:not-allowed;background:#fff;}
  .mc-qty .mc-qval{min-width:34px;text-align:center;font-size:15px;font-weight:700;color:var(--ink-text);
      font-variant-numeric:tabular-nums;}
  .mc-line .mc-lineprice{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--action);
      white-space:nowrap;}
  .mc-line .mc-remove{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:6px;
      border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
      transition:background-color .15s ease,color .15s ease;margin-left:2px;}
  .mc-line .mc-remove:hover{background:var(--accent-soft);color:var(--action);}
  .mc-line .mc-remove svg{width:18px;height:18px;stroke:currentColor;}
  /* voet: subtotaal + CTA's */
  .mc-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:18px 20px;background:#fff;}
  .mc-sub{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;}
  .mc-sub .mc-sub-lbl{font-size:16px;font-weight:700;color:var(--ink-text);}
  .mc-sub .mc-sub-val{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--ink-text);}
  .mc-vat{font-size:13px;color:var(--muted);margin:0 0 14px;}
  .mc-cta{display:flex;flex-direction:column;gap:10px;}
  /* primaire afreken-CTA = solide navy (.btn-cart-idioom, enige navy-vulrol) */
  .mc-cta .btn{min-height:50px;font-size:16px;}
  .mc-cta .mc-checkout{background:var(--ink);color:#fff;border:1.5px solid var(--ink);}
  .mc-cta .mc-checkout:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff;text-decoration:none;}
  .mc-cta .mc-checkout svg{width:19px;height:19px;stroke:currentColor;}
  /* secundaire = wit + navy rand */
  .mc-cta .mc-viewcart{background:#fff;color:var(--ink);border:1.5px solid var(--ink);}
  .mc-cta .mc-viewcart:hover{background:var(--sand-2);border-color:var(--ink);color:var(--ink);text-decoration:none;}
  /* lege staat (defensief — seed heeft 2 regels, maar JS kan leeg raken) */
  .minicart.is-empty .mc-empty{display:block;}
  .minicart.is-empty .mc-lines,.minicart.is-empty .mc-foot,.minicart.is-empty .mc-ship{display:none;}
  .mc-empty{display:none;padding:40px 20px;text-align:center;color:var(--muted);font-size:16px;flex:1 1 auto;}
  @media(max-width:480px){
    .minicart{width:100%;max-width:100%;}
  }
  /* V15 STICKY × SCROLL-LOCK: body-scroll-lock terwijl de lade open is. overflow:hidden op body
     breekt position:sticky → pin de chrome expliciet (bewezen fix uit direction-c V8). */
  body.cart-open{overflow:hidden;}
  body.cart-open .chrome-sticky{position:fixed;top:0;left:0;right:0;}
  /* (2026-06-08) De zoek-overlay gebruikt dezelfde bewezen sticky-veilige body-lock:
     overflow:hidden op body breekt position:sticky → pin de (mogelijk gestuckte) chrome expliciet,
     zodat hij niet wegspringt terwijl de overlay open is. */
  body.ac-open{overflow:hidden;}
  body.ac-open .chrome-sticky{position:fixed;top:0;left:0;right:0;}

  /* ---------- V15.3 · DESKTOP MEGA-MENU (≥901px) ----------
     Miedema-interactiepatroon, ons systeem. De nav krijgt position:relative zodat het paneel
     full-width onder de nav ankert. GEEN decoratieve stippen (Tjitse's dot-aversie). */
  /* de bestaande .nav a (links) blijven; alleen de 5 caret-items worden buttons (.nav-trigger).
     We stijlen .nav-trigger identiek aan .nav a zodat de gesloten balk byte-gelijk oogt. */
  .nav .nav-trigger{font-family:inherit;background:transparent;border:0;cursor:pointer;
      color:#1F3A5F;font-weight:400;font-size:15.5px;padding:13px 14px;border-radius:8px;
      display:inline-flex;align-items:center;gap:7px;transition:background-color .15s ease,padding .18s ease;}
  .nav .nav-trigger:hover{background:#EAEFF6;color:#16263D;}
  /* actieve categorie in de nav: alleen vet (geen accentlijn/rand/achtergrond) */
  .nav .nav-trigger[aria-current="page"]{font-weight:700;}
  .nav a[aria-current="page"]{font-weight:700;}   /* actieve categorie als platte link (mega-overlays verwijderd) */
  .nav .nav-trigger .caret{font-size:11px;opacity:.7;transition:transform .15s ease;}
  .nav-mega-item.open .nav-trigger{background:#EAEFF6;color:#16263D;}
  .nav-mega-item.open .nav-trigger .caret{transform:rotate(180deg);}
  /* .nav-mega-item is een flex-child van .nav .wrap (net als de <a>'s); houd 'm compact rond de trigger */
  .nav-mega-item{display:flex;align-items:center;}
  /* desktop: het paneel ankert op .nav (full-width), niet op het item */
  @media(min-width:901px){
    .nav{position:relative;}
    .nav-mega-item{position:static;}
  }
  /* het paneel zelf */
  .mega{position:absolute;top:100%;left:0;right:0;z-index:65;
      max-width:var(--maxw);margin-inline:auto;
      background:#fff;border:1px solid var(--line);border-top:2px solid var(--ink);
      box-shadow:0 18px 40px rgba(22,38,61,.16);border-radius:0 0 var(--radius) var(--radius);
      padding:24px 28px 26px;
      opacity:0;visibility:hidden;transform:translateY(6px);
      transition:opacity .15s ease,transform .15s ease,visibility .15s;
      display:grid;grid-template-columns:repeat(3,1fr) .9fr;gap:6px 32px;}
  /* onzichtbare hover-brug zodat van trigger → paneel bewegen niet flikkert */
  .mega::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;}
  .nav-mega-item.open .mega{opacity:1;visibility:visible;transform:translateY(0);}
  .mega-col{display:flex;flex-direction:column;min-width:0;}
  .mega-col-title{font-family:var(--font-display);font-size:13.5px;font-weight:700;letter-spacing:.02em;
      color:var(--ink-text);padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line-soft);}
  /* GEEN bullet/diamant — kale link; hover = rode tekst + lichtblauwe rij */
  .mega-link{display:block;font-size:14.5px;font-weight:400;color:var(--ink);
      padding:7px 8px;margin:0 -8px;border-radius:8px;line-height:1.3;
      transition:color .14s ease,background-color .14s ease;}
  .mega-link:hover{color:var(--action);background:var(--sand-2);text-decoration:none;}
  .mega-all{margin-top:12px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
      font-size:14px;font-weight:700;color:var(--action);transition:gap .14s ease,color .14s ease;}
  .mega-all svg{width:16px;height:16px;stroke:currentColor;}
  .mega-all:hover{color:var(--action-dark);gap:12px;text-decoration:none;}
  /* feature-promokaart — LICHTBLAUW (GEEN navy blok; navy = alleen koop-CTA) */
  .mega-feature{grid-column:4;background:var(--sand);border:1px solid var(--line-soft);border-radius:var(--radius);
      padding:18px 18px 20px;display:flex;flex-direction:column;}
  .mega-feature .mf-kick{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
      background:var(--accent-soft);color:var(--action);font-weight:700;font-size:11.5px;letter-spacing:.08em;
      text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:10px;}
  .mega-feature .mf-photo{background:#fff;border:1px solid var(--line-soft);border-radius:10px;
      height:96px;display:flex;align-items:center;justify-content:center;padding:8px;margin-bottom:11px;}
  .mega-feature .mf-photo img{max-width:100%;max-height:100%;object-fit:contain;}
  .mega-feature h4{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink-text);line-height:1.15;}
  .mega-feature .mf-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:6px 0 0;}
  .mega-feature .mf-now{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--action);line-height:1;}
  .mega-feature .mf-was{font-size:14px;color:var(--muted);text-decoration:line-through;}
  .mega-feature .mf-cta{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;
      color:var(--action);font-weight:700;font-size:14.5px;transition:gap .14s ease,color .14s ease;}
  .mega-feature .mf-cta svg{width:16px;height:16px;stroke:currentColor;}
  .mega-feature .mf-cta:hover{color:var(--action-dark);gap:11px;text-decoration:none;}
  /* tablet 901–1100: feature-kaart smaller; nog steeds 3 link-kolommen */
  @media(min-width:901px) and (max-width:1100px){
    .mega{grid-template-columns:repeat(3,1fr) .8fr;gap:6px 24px;padding:22px 22px 24px;}
  }
  /* mobiel <901px: GEEN mega-paneel (hamburger-gedrag blijft). nav-trigger valt mee weg met .nav{display:none}. */
  @media(max-width:900px){
    .mega{display:none !important;}
  }
  /* respecteer prefers-reduced-motion: geen transform/transitie-animaties, alleen tonen/verbergen */
  @media(prefers-reduced-motion:reduce){
    .ac-panel,.ac-scrim,.ac-facets,.mc-scrim,.minicart,.mega,.ac-panel::after{transition:none;}
    .mega{transform:none;}
    .ac-panel{transform:none;}
  }

  /* ======================================================================
     CATEGORIEPAGINA (D) — Accessoires / Onderdelen
     Hergebruikt het bestaande .prod-kaartcomponent (zelfde anatomie als de
     bestsellers-slider) maar in een WRAP-grid i.p.v. een track. Filters/toolbar
     volgen het richting-A category-idioom (.fgroup/.fopt), nu in Figtree + het
     D-stikselmotief (rode ruit + dashed seams + .link-stitch).
     PRIJSBLOK = herontworpen op klantverzoek (4 punten):
       (1) kortingsbedrag BOVEN de oude+nieuwe prijs;
       (2) dat bedrag groot/duidelijk (rode "Bespaar"-balk, niet meer een mini -100);
       (3) ⓘ-tooltip naast de actieprijs → uitleg prijsopbouw (Omnibus, laagste 30-daagse prijs);
       (4) oude + nieuwe prijs staan ALTIJD op één regel (.price-line, nowrap).
     ====================================================================== */

  /* ---------- breadcrumb ---------- */
  .crumbs{background:var(--paper);border-bottom:1px solid var(--line-soft);}
  .crumbs .wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:13px 24px;font-size:14px;}
  .crumbs a{color:var(--muted);font-weight:400;}
  .crumbs a:hover{color:var(--action);text-decoration:underline;}
  .crumbs .sep{color:var(--line);flex:0 0 auto;}
  .crumbs .here{color:var(--ink-text);font-weight:700;}

  /* ---------- category header (links: H1 + intro + subcategorie-chips · rechts: machinezoeker) ---------- */
  .cat-head{background:var(--sand);border-bottom:1px solid var(--line);padding:30px 0 30px;position:relative;}
  /* desktop: 2 koloms — tekst/subcats links, machinezoeker-finder rechts (boven uitgelijnd) */
  .cat-head-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:34px;align-items:start;}
  .cat-head .eyebrow{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.16em;
      text-transform:uppercase;color:var(--action);font-weight:700;margin-bottom:9px;}
  .cat-head h1{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--ink-text);line-height:1.1;}
  .cat-head .lede{font-size:17px;color:var(--body);max-width:60ch;margin:11px 0 0;}
  .cat-head .lede a{color:var(--action);font-weight:700;}
  .cat-head .seam{margin:20px 0 0;}
  /* de finder vult de rechterkolom (homepage-.finder is verder ongewijzigd) */
  .cat-head-finder .finder{margin-top:0;max-width:none;width:100%;}
  /* subcategorie-chips (live category-sidebar-navigatie, horizontaal) */
  .subcats{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;}
  .subcats a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
      border-radius:999px;padding:8px 15px;font-size:14.5px;font-weight:700;color:var(--ink);
      transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
  .subcats a:hover{background:var(--sand-2);border-color:var(--ink);color:var(--ink);text-decoration:none;}
  .subcats a .cc{font-weight:400;color:var(--muted);}

  /* ---------- main two-column layout ---------- */
  .catwrap{padding:34px 0 8px;}
  .cat-grid{display:grid;grid-template-columns:268px 1fr;gap:30px;align-items:start;}

  /* ---------- filter sidebar ---------- */
  .filters{display:flex;flex-direction:column;gap:14px;min-width:0;}
  .filters .f-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  /* "Filteren"-kop staat onder de Categorieën-boom → wat lucht erboven, plus een dunne scheidslijn */
  .filters .f-head--inline{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);}
  .filters .f-head h2{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink-text);
      display:flex;align-items:center;gap:9px;}
  .fgroup{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
  .fgroup > button.f-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
      background:#fff;border:0;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:16px;
      color:var(--ink-text);padding:14px 15px;min-height:48px;text-align:left;transition:background-color .15s ease;}
  .fgroup > button.f-toggle:hover{background:var(--sand);}
  .fgroup > button.f-toggle .chev{width:18px;height:18px;stroke:var(--ink);flex:0 0 auto;transition:transform .18s ease;}
  .fgroup.collapsed > button.f-toggle .chev{transform:rotate(-90deg);}
  .fgroup .f-body{padding:4px 15px 14px;}
  .fgroup.collapsed .f-body{display:none;}
  .fgroup .f-search{width:100%;height:40px;border:1px solid var(--line);border-radius:8px;padding:0 12px;
      font-family:inherit;font-size:14.5px;color:var(--body);background:#fff;margin:2px 0 10px;}
  .fgroup .f-search::placeholder{color:#6B7385;}
  .fgroup .f-search:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,58,95,.14);}
  .fopt{display:flex;align-items:center;gap:11px;padding:7px 4px;min-height:40px;cursor:pointer;border-radius:8px;
      transition:background-color .12s ease;}
  .fopt:hover{background:var(--sand);}
  .fopt input{position:absolute;opacity:0;width:0;height:0;}
  .fopt .box{width:20px;height:20px;border:1.5px solid var(--muted);border-radius:5px;background:#fff;flex:0 0 auto;
      display:flex;align-items:center;justify-content:center;transition:background-color .12s ease,border-color .12s ease;}
  .fopt .box svg{width:13px;height:13px;stroke:#fff;opacity:0;}
  .fopt input:checked + .box{background:var(--ink);border-color:var(--ink);}
  .fopt input:checked + .box svg{opacity:1;}
  .fopt input:focus-visible + .box{box-shadow:0 0 0 3px rgba(31,58,95,.22);}
  .fopt .lab{font-size:15px;color:var(--body);flex:1 1 auto;line-height:1.3;}
  .fopt .cnt{font-size:13px;color:var(--muted);flex:0 0 auto;}
  .fopt input:checked ~ .lab{color:var(--ink-text);font-weight:700;}
  .fgroup .f-more{margin-top:8px;background:none;border:0;color:var(--action);font-weight:700;font-size:13.5px;
      cursor:pointer;padding:6px 4px;font-family:inherit;text-decoration:underline;text-decoration-style:dashed;
      text-decoration-color:var(--red-line);text-underline-offset:5px;}
  .fgroup .f-more:hover{color:var(--action-dark);text-decoration-style:solid;text-decoration-color:var(--action);}
  .f-price{display:flex;flex-direction:column;gap:12px;padding-top:8px;}
  .fp-inputs{display:flex;gap:10px;}
  .fp-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:700;flex:1 1 0;}
  .fp-inwrap{display:flex;align-items:center;gap:6px;height:42px;border:1px solid var(--line);border-radius:8px;
      padding:0 12px;background:#fff;transition:border-color .14s ease,box-shadow .14s ease;}
  .fp-inwrap:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,58,95,.14);}
  .fp-inwrap .cur{font-size:14px;color:var(--muted);font-weight:700;flex:0 0 auto;}
  .fp-field input{flex:1 1 auto;width:100%;min-width:0;border:0;outline:none;background:transparent;font-family:inherit;
      font-size:15px;font-weight:600;color:var(--body);font-variant-numeric:tabular-nums;-moz-appearance:textfield;}
  .fp-field input::-webkit-outer-spin-button,.fp-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  /* dual-handle range slider */
  .fp-slider{position:relative;height:22px;margin:2px 9px 0;touch-action:none;}
  .fp-track{position:absolute;top:50%;left:0;right:0;height:5px;transform:translateY(-50%);
      background:var(--line-soft);border-radius:999px;}
  .fp-fill{position:absolute;top:50%;height:5px;transform:translateY(-50%);background:var(--ink);border-radius:999px;}
  .fp-thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;
      border:2px solid var(--ink);transform:translate(-50%,-50%);cursor:grab;box-shadow:0 1px 3px rgba(22,38,61,.22);
      transition:box-shadow .14s ease,border-color .14s ease;}
  .fp-thumb:hover{border-color:var(--action);}
  .fp-thumb:active{cursor:grabbing;}
  .fp-thumb:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,58,95,.26);border-color:var(--action);}
  .fp-readout{margin:6px 0 0;font-size:14px;font-weight:700;color:var(--ink-text);font-variant-numeric:tabular-nums;}
  .fp-readout .fp-dash{color:var(--muted);font-weight:600;}
  .f-price .btn-confirm{align-self:flex-start;background:#fff;color:var(--ink);border:1.5px solid var(--ink);
      border-radius:999px;font-weight:700;font-size:14.5px;padding:0 18px;min-height:44px;cursor:pointer;
      font-family:inherit;transition:background-color .15s ease;margin-top:2px;}
  .f-price .btn-confirm:hover{background:var(--sand-2);}
  .filter-bar{display:none;}
  .filters .f-close{display:none;}

  /* ---------- CATEGORIEËN-boom (sidebar category-tree, getrouw aan de live category-sidebar-navigation) ----------
     Live gedrag (huissteden.nl/accessoires-onderdelen): grijze root-kop "Accessoires / Onderdelen", daaronder
     de level-2 categorieën; items met kinderen dragen een rechter-chevron en schuiven naar een level-3 paneel
     met een "← terug"-rij (de ouder) + "Alle <ouder>" + de level-3 kinderen. Items zonder kinderen zijn kale links.
     Onze versie: vanilla JS drill-down (geen framework), 2 niveaus diep, rust-/45+-vriendelijk (rustige slide,
     prefers-reduced-motion → instant). Hover = rood #AE1B21 (live), scheidingslijnen #EDF4FC (live --line tint). */
  .cattree{background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
      position:relative;}
  .cattree .ct-root{display:block;padding:14px 15px;font-family:var(--font-display);font-weight:700;font-size:17px;
      color:var(--ink-text);background:var(--sand-2);border-bottom:1px solid #fff;}
  /* viewport krimpt/groeit mee met het ACTIEVE paneel. We tonen één paneel tegelijk (swap met zachte fade) —
     rustig en betrouwbaar voor 45+; prefers-reduced-motion → instant. Het verborgen paneel valt uit de flow
     (display:none) zodat de hoogte altijd het zichtbare paneel volgt. */
  .cattree .ct-viewport{position:relative;}
  .cattree .ct-panel{width:100%;animation:ctFade .22s ease;}
  @keyframes ctFade{from{opacity:0;transform:translateX(6px);}to{opacity:1;transform:translateX(0);}}
  @media(prefers-reduced-motion:reduce){.cattree .ct-panel{animation:none;}}
  /* rust: level-2 zichtbaar, level-3 verborgen */
  .cattree #ct-p3{display:none;}
  /* subpaneel: level-3 zichtbaar, level-2 verborgen */
  .cattree.is-sub #ct-p2{display:none;}
  .cattree.is-sub #ct-p3{display:block;}
  /* level-2 / level-3 rij = volledige-breedte knop of link, ≥44px tap target */
  .cattree .ct-item,.cattree a.ct-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
      background:#fff;border:0;border-top:1px solid #EDF4FC;cursor:pointer;font-family:var(--font-body);
      font-weight:500;font-size:15px;line-height:1.3;color:var(--ink-text);padding:11px 14px;min-height:46px;
      transition:background-color .12s ease,color .12s ease;}
  .cattree .ct-panel > .ct-item:first-child,.cattree .ct-panel > a.ct-item:first-child{border-top:0;}
  .cattree .ct-item:hover,.cattree a.ct-item:hover{background:var(--sand);color:var(--action);text-decoration:none;}
  .cattree .ct-item:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
  .cattree .ct-item .ct-lbl{flex:1 1 auto;min-width:0;}
  .cattree .ct-item .ct-arrow{width:16px;height:16px;flex:0 0 auto;stroke:var(--muted);transition:stroke .12s ease;}
  .cattree .ct-item:hover .ct-arrow{stroke:var(--action);}
  /* "← terug"-rij in het level-3 paneel = de ouder; bold, lichtblauwe band, draagt de back-actie */
  .cattree .ct-back{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--sand-2);
      border:0;border-bottom:1px solid #fff;cursor:pointer;font-family:var(--font-display);font-weight:700;
      font-size:15.5px;color:var(--ink-text);padding:11px 14px;min-height:46px;
      transition:background-color .12s ease,color .12s ease;}
  .cattree .ct-back:hover{background:#E1E9F4;color:var(--action);}
  .cattree .ct-back:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
  .cattree .ct-back svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;}
  /* "Alle <ouder>" snelkoppeling bovenaan het level-3 paneel */
  .cattree a.ct-all{display:block;background:#fff;border-bottom:1px solid #EDF4FC;font-family:var(--font-body);
      font-weight:700;font-size:14px;color:var(--action);padding:10px 14px;min-height:44px;
      display:flex;align-items:center;transition:background-color .12s ease;}
  .cattree a.ct-all:hover{background:var(--sand);color:var(--action-dark);text-decoration:none;}
  .cattree a.ct-all:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}

  /* ---------- right column + toolbar ---------- */
  .results{min-width:0;}
  .cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px 18px;flex-wrap:wrap;
      padding-bottom:18px;border-bottom:1px solid var(--line-soft);margin-bottom:22px;}
  .cat-toolbar .amount{font-size:15.5px;color:var(--body);}
  .cat-toolbar .amount b{color:var(--ink-text);font-weight:700;}
  .cat-toolbar .tb-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .tb-field{display:flex;align-items:center;gap:9px;}
  .tb-field > span{font-size:14px;color:var(--muted);font-weight:700;white-space:nowrap;}
  .sel-wrap{position:relative;display:inline-flex;}
  .sel-wrap select{appearance:none;-webkit-appearance:none;height:44px;border:1px solid var(--line);
      border-radius:var(--radius-sm);background:#fff;font-family:inherit;font-size:15px;color:var(--ink-text);
      padding:0 40px 0 14px;cursor:pointer;transition:border-color .15s ease;font-weight:700;}
  .sel-wrap select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,58,95,.14);}
  .sel-wrap .chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;
      width:17px;height:17px;stroke:var(--ink);}
  /* sorteer-richting-knop (oplopend/aflopend) — naast de sorteer-select, zoals op de live site */
  .sort-dir{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
      border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);cursor:pointer;
      transition:background .15s ease,border-color .15s ease;}
  .sort-dir:hover{background:var(--sand-2);}
  .sort-dir:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,58,95,.14);}
  .sort-dir svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  /* ---------- product grid (hergebruik .prod-kaart, nu in een wrap-grid) ---------- */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .grid .prod{flex:initial;scroll-snap-align:none;}
  /* accessoires-foto's zijn klein/contain → iets lagere fotokolom dan machines */
  .grid .prod .pimg{aspect-ratio:1/1;}
  .grid .prod h3{font-size:17px;min-height:2.6em;margin-bottom:8px;}
  .grid .prod .pbody{padding:14px 15px 16px;}

  /* ---------- PRIJSBLOK (herontworpen, klantfeedback) ---------- */
  .price-block{margin-top:auto;display:flex;flex-direction:column;gap:7px;margin-bottom:13px;}
  /* (4) oude + nieuwe prijs ALTIJD op één regel */
  .price-line{display:flex;align-items:baseline;gap:9px;flex-wrap:nowrap;white-space:nowrap;min-width:0;}
  /* V-sync (homepage "Best verkochte machines"): reguliere prijs navy + compacter (21px), rood
     blijft gereserveerd voor échte korting (.has-sale). Spiegelt de nieuwe .prod .price op de homepage. */
  .price-line .now{font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1;color:var(--ink-text);}
  .price-block.has-sale .price-line .now{color:var(--action);}   /* actieprijs = rood (deal-signaal) */
  .price-line .was{font-size:16px;color:var(--muted);text-decoration:line-through;}
  /* (3) Omnibus ⓘ-tooltip naast de actieprijs */
  .omni{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
      width:22px;height:22px;margin-left:1px;border:0;background:none;padding:0;cursor:pointer;color:var(--muted);
      border-radius:50%;transition:color .15s ease,background-color .15s ease;}
  .omni:hover,.omni:focus-visible,.omni[aria-expanded="true"]{color:var(--ink);background:var(--sand-2);outline:none;}
  .omni svg{width:17px;height:17px;stroke:currentColor;}
  .omni-pop{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
      width:248px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-card);
      padding:12px 13px;font-size:13px;line-height:1.45;color:var(--body);white-space:normal;text-align:left;
      z-index:20;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease;}
  .omni-pop b{display:block;font-family:var(--font-display);font-size:13.5px;color:var(--ink-text);margin-bottom:4px;}
  .omni-pop .lp{color:var(--ink-text);font-weight:700;}
  .omni-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
      border:7px solid transparent;border-top-color:#fff;}
  .omni-pop::before{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
      border:8px solid transparent;border-top-color:var(--line);margin-top:1px;}
  .omni:hover .omni-pop,.omni:focus-visible .omni-pop,.omni[aria-expanded="true"] .omni-pop{
      opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}

  /* ---------- pagination ---------- */
  .pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:34px 0 6px;}
  .pager a,.pager span.gap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
      height:44px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;
      color:var(--ink);font-weight:700;font-size:15px;transition:background-color .15s ease,border-color .15s ease;}
  .pager a:hover{background:var(--sand-2);text-decoration:none;color:var(--ink);}
  .pager a.is-current{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default;}
  .pager a.is-current:hover{background:var(--ink);}
  .pager span.gap{border-color:transparent;background:transparent;color:var(--muted);font-weight:700;min-width:32px;}
  .pager .pg-edge{padding:0 16px;gap:7px;}
  .pager .pg-edge svg{width:18px;height:18px;stroke:currentColor;}
  .pager .pg-edge.is-disabled{opacity:.4;pointer-events:none;}

  /* ---------- SEO-tekstblok onderaan (lees-meer) ---------- */
  .seo{background:var(--paper);border-top:1px solid var(--line);padding:42px 0 46px;}
  .seo .seo-inner{max-width:880px;}
  .seo .eyebrow{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--action);font-weight:700;margin-bottom:10px;}
  .seo h2{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--ink-text);margin:26px 0 9px;}
  .seo h2:first-of-type{margin-top:0;}
  .seo p{font-size:16px;line-height:1.6;color:var(--body);margin:0 0 14px;}
  .seo p a{color:var(--action);font-weight:700;}
  .seo .seo-collapsed{position:relative;max-height:230px;overflow:hidden;}
  .seo .seo-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
      background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;}
  .seo .seo-collapsed.open{max-height:none;}
  .seo .seo-collapsed.open::after{display:none;}
  .seo .seo-more{margin-top:18px;}

  /* ---------- responsive ---------- */
  @media(max-width:1100px){
    .cat-grid{grid-template-columns:240px 1fr;gap:22px;}
    .grid{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:900px){
    .cat-head h1{font-size:30px;}
    /* mobiel: tekst/subcats boven, machinezoeker eronder */
    .cat-head-grid{grid-template-columns:1fr;gap:22px;}
    .cat-grid{grid-template-columns:1fr;}
    .filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
    .filter-bar .btn-filter{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);
        border:1.5px solid var(--ink);border-radius:999px;font-family:inherit;font-weight:700;font-size:15.5px;
        min-height:46px;padding:0 20px;cursor:pointer;transition:background-color .15s ease;}
    .filter-bar .btn-filter:hover{background:var(--sand-2);}
    .filter-bar .btn-filter svg{width:19px;height:19px;stroke:currentColor;}
    /* scrim = 100vmax box-shadow; TRANSPARANT in rust (drawer dicht) zodat hij niet altijd zichtbaar is —
       wordt pas zichtbaar (en faded in) zodra .open. Transparante schaduw vangt geen kliks, dus de pagina
       blijft normaal bruikbaar met de drawer dicht. */
    .filters{position:fixed;inset:0 auto 0 0;width:min(340px,88vw);max-width:88vw;background:#fff;z-index:80;
        padding:18px 18px 28px;gap:14px;overflow-y:auto;box-shadow:0 0 0 100vmax rgba(22,38,61,0);
        transform:translateX(-102%);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;}
    .filters > *{flex:0 0 auto;}
    .filters.open{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(22,38,61,.45);}
    .filters .f-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
        border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;flex:0 0 auto;}
    .filters .f-close:hover{background:var(--sand);}
    .filters .f-close svg{width:20px;height:20px;stroke:currentColor;}
    /* alleen de EERSTE kop (Categorieën, met sluitknop) is sticky bovenin de drawer; de "Filteren"-kop scrolt mee */
    .filters .f-head:first-of-type{position:sticky;top:0;background:#fff;padding-bottom:8px;border-bottom:1px solid var(--line-soft);z-index:2;}
    .filters .f-head--inline{position:static;}
    body.filters-open{overflow:hidden;}
  }
  @media(max-width:680px){
    .cat-head h1{font-size:26px;}
    .grid{grid-template-columns:1fr;}
    .cat-toolbar{gap:12px 14px;}
    .cat-toolbar .tb-controls{width:100%;}
    .tb-field{flex:1 1 auto;}
    .sel-wrap{flex:1 1 auto;}
    .sel-wrap select{width:100%;}
    .crumbs .wrap{padding:11px 16px;}
  }
  /* op de smalste telefoons blijft de prijsregel toch op één regel: krimp de actieprijs i.p.v. te wrappen */
  @media(max-width:380px){
    .price-line .now{font-size:19px;}
    .price-line .was{font-size:14px;}
  }

</style>
</head>
<body>

<!-- ===================== TOPBAR / USP ===================== -->
<div class="topbar">
  <div class="wrap">
    <span class="usp"><span class="check">✓</span> Gratis verzending <span class="innl">in NL </span>vanaf&nbsp;€&nbsp;35,-</span>
    <span class="spacer"></span>
    <a href="#contact" class="ks">Klantenservice</a>
    <a href="#reviews" class="score">
      <span class="stars">★★★★★</span><b>9,5</b><span class="revcount">&nbsp;uit 12.619 reviews</span>
    </a>
    <button type="button" class="ctry" id="ctryBtn" aria-haspopup="dialog" aria-expanded="false" aria-label="Land en winkel wijzigen — nu Nederland">
      <span class="flag" aria-hidden="true"><svg viewBox="0 0 24 16"><rect width="24" height="16" fill="#21468B"/><rect width="24" height="10.67" fill="#fff"/><rect width="24" height="5.33" fill="#AE1C28"/></svg></span>
      <span class="ctry-code">NL</span>
      <svg class="chev" viewBox="0 0 24 24" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
    </button>
  </div>
</div>

<!-- ===================== STORE / LAND-SWITCHER MODAL ===================== -->
<div class="ctry-modal" id="ctryModal" hidden>
  <div class="ctry-backdrop" data-ctry-close></div>
  <div class="ctry-dialog" role="dialog" aria-modal="true" aria-labelledby="ctryTitle">
    <button type="button" class="ctry-x" data-ctry-close aria-label="Sluiten">&times;</button>
    <h2 id="ctryTitle">Kies uw land</h2>
    <p class="ctry-lead">Selecteer uw winkel voor de juiste taal, prijzen en levering.</p>
    <ul class="ctry-list">
      <li>
        <button type="button" class="ctry-opt is-active" data-ctry="nl" data-code="NL" data-label="Nederland">
          <span class="flag" aria-hidden="true"><svg viewBox="0 0 24 16"><rect width="24" height="16" fill="#21468B"/><rect width="24" height="10.67" fill="#fff"/><rect width="24" height="5.33" fill="#AE1C28"/></svg></span>
          <span class="lbl"><b>Nederland</b><small>Nederlands · levering 1 werkdag</small></span>
          <span class="tick" aria-hidden="true">✓</span>
        </button>
      </li>
      <li>
        <button type="button" class="ctry-opt" data-ctry="be" data-code="BE" data-label="België">
          <span class="flag" aria-hidden="true"><svg viewBox="0 0 24 16"><rect width="8" height="16" fill="#000"/><rect x="8" width="8" height="16" fill="#FDDA24"/><rect x="16" width="8" height="16" fill="#EF3340"/></svg></span>
          <span class="lbl"><b>België</b><small>Nederlands · levering 2 werkdagen</small></span>
          <span class="tick" aria-hidden="true">✓</span>
        </button>
      </li>
      <li>
        <button type="button" class="ctry-opt" data-ctry="eu" data-code="EU" data-label="Europese Unie">
          <span class="flag" aria-hidden="true"><svg viewBox="0 0 24 16"><rect width="24" height="16" fill="#003399"/><g fill="#FFCC00"><circle cx="12" cy="3" r="0.85"/><circle cx="14.5" cy="3.67" r="0.85"/><circle cx="16.33" cy="5.5" r="0.85"/><circle cx="17" cy="8" r="0.85"/><circle cx="16.33" cy="10.5" r="0.85"/><circle cx="14.5" cy="12.33" r="0.85"/><circle cx="12" cy="13" r="0.85"/><circle cx="9.5" cy="12.33" r="0.85"/><circle cx="7.67" cy="10.5" r="0.85"/><circle cx="7" cy="8" r="0.85"/><circle cx="7.67" cy="5.5" r="0.85"/><circle cx="9.5" cy="3.67" r="0.85"/></g></svg></span>
          <span class="lbl"><b>Europese Unie</b><small>Engels · internationale levering</small></span>
          <span class="tick" aria-hidden="true">✓</span>
        </button>
      </li>
    </ul>
  </div>
</div>

<!-- V7: 1px-sentinel direct vóór de sticky-wrapper. Absoluut gepositioneerd (top:0) zodat hij GEEN
     ruimte in de flow inneemt → de rust-staat blijft pixel-identiek aan V6. Zodra de sentinel de viewport
     verlaat (gebruiker scrolt), zet de IntersectionObserver onderaan de pagina .is-stuck op .chrome-sticky. -->
<div class="chrome-sentinel" aria-hidden="true" style="position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;"></div>

<!-- ===================== CHROME-STICKY (V6: header + zoek + hoofdnav samen; desktop sticky top:0, USP-balk hierboven scrolt weg) ===================== -->
<div class="chrome-sticky">

<!-- ===================== HEADER ===================== -->
<header class="header">
  <div class="wrap">
    <!-- V6: compacte hamburger-knop links in de header (alleen mobiel <901px) — vervangt de full-width Menu-balk -->
    <button class="ham-btn" type="button" aria-expanded="false" aria-label="Menu openen">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
      <span class="ham-lbl">menu</span>
    </button>
    <a href="index.html" class="brand" aria-label="Huissteden, naaimachines, Barneveld">
      <img class="logo" src="assets/Logo_1_.png" alt="huissteden, naaimachines, Barneveld" width="894" height="222">
    </a>

    <div class="search">
      <!-- V4: zichtbaar label "Zoek op product of modelnummer" verwijderd op klantverzoek (header-compressie);
           toegankelijkheid geborgd via aria-label op de input — bewuste afwijking van audience.md-regel -->
      <!-- V15: zoekveld krijgt ARIA-combobox-bedrading voor de autocomplete (listbox = #ac-panel) -->
      <form role="search" onsubmit="return false">
        <input type="search" id="hsearch" aria-label="Zoek op product of modelnummer" placeholder="Bijv. “CS70S” of “spoeltjes Bernina”"
               role="combobox" aria-expanded="false" aria-controls="ac-panel" aria-autocomplete="list" autocomplete="off">
        <!-- V5: icoon-knop zonder "Zoeken"-tekst op klantverzoek; aria-label draagt de naam -->
        <button type="submit" aria-label="Zoeken">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        </button>
      </form>
      <!-- (2026-06-08) De smalle autocomplete-dropdown is vervangen door een paginabrede faceted
           zoek-overlay (zie #ac-panel onderaan .chrome-sticky) die de productie-zoekoverlay spiegelt. -->
    </div>

    <div class="header-actions">
      <a href="tel:0342491591" class="hact" aria-label="Bel ons op 0342 49 15 91">
        <svg class="ic" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg>
        <span class="lbl"><small>Bel ons</small>(0342) 49 15 91</span>
      </a>
      <a href="#" class="hact" aria-label="Mijn account">
        <svg class="ic" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 21a7 7 0 0 1 14 0"/></svg>
        <span class="lbl"><small>Welkom</small>Mijn account</span>
      </a>
      <!-- V15: header-winkelwagen = minicart-trigger. Telling/totaal weerspiegelen de seed (JS herberekent live).
           aria-haspopup=dialog + aria-controls verwijzen naar de slide-in lade. -->
      <a href="#" class="hact cart" data-cart-toggle aria-haspopup="dialog" aria-controls="minicart" aria-expanded="false" aria-label="Winkelwagen openen, 2 artikelen">
        <svg class="ic" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg>
        <span class="lbl"><small>Winkelwagen</small><span data-cart-total>€&nbsp;196,00</span></span>
        <span class="cart-count" data-cart-count>2</span>
      </a>
    </div>
  </div>
</header>

<!-- ===================== MAIN NAV ===================== -->
<!-- V6: full-width "Menu"-knop verwijderd — mobiel zit de hamburger nu links in de header -->
<nav class="nav" aria-label="Hoofdmenu">
  <div class="wrap">
    <!-- LET OP: de desktop mega-menu-overlays zijn op de categoriepagina's BEWUST verwijderd (zie
         decisions.md). De nav is hier een platte linkbalk die NIET op hover opent. De volledige
         mega-menu-implementatie leeft in direction-d/index.html; de categoriepagina's houden we simpel. -->
    <a href="category-machines.html" aria-current="page">Machines</a>
    <a href="category.html">Accessoires &amp; onderdelen</a>
    <a href="#">ScanNCut</a>
    <a href="#">Fournituren</a>
    <a href="#">Garen &amp; vlies</a>
    <a href="#">Merken</a>
    <a href="#" class="sale">Sale</a>
    <a href="#machinezoeker" class="nav-cta">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
      Vind mijn onderdeel
    </a>
  </div>
</nav>

<!-- ===================== V15.1: ZOEK-OVERLAY (faceted instant-search; 2026-06-08) =====================
     Spiegelt de productie-zoekoverlay (typo-banner + facet-rail + toolbar + list-rijen + extra-regel),
     herstyled naar ons systeem. Statische dataset (echte bernina-resultaten); de typo-banner is
     query-conditioneel (alleen bij "berdina"). Ankert als kind van .chrome-sticky vlak onder de nav. -->
<div class="ac-panel" id="ac-panel" role="region" aria-label="Zoekresultaten">
  <div class="ac-inner">

    <!-- 1) typo-correctiebanner (alleen getoond bij de typo-query) -->
    <div class="ac-typo" id="ac-typo" hidden>
      <p class="ac-typo-txt">U zocht op <b id="ac-typo-q">berdina</b>, maar wij vonden geen resultaten. Wij vonden op <b>bernina</b> wel 501 resultaten.</p>
      <button type="button" class="ac-typo-close" data-ac-close>
        Sluiten
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
      </button>
    </div>

    <!-- mobiele "Verfijn"-knop (desktop verborgen) -->
    <div class="ac-filterbar">
      <button type="button" class="ac-fbtn" data-ac-filters-open aria-controls="ac-facets">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
        Verfijn je resultaten
      </button>
    </div>

    <div class="ac-grid">

      <!-- 2) FACET-RAIL (Merk · Prijs · Subsubcategorie) — hergebruikt het category.html-filteridioom -->
      <aside class="ac-facets" id="ac-facets" aria-label="Verfijn je resultaten">
        <div class="ac-fhead">
          <div>
            <h2><span class="tnum">501</span> resultaten</h2>
            <p>Verfijn je resultaten</p>
          </div>
          <button type="button" class="ac-fclose" aria-label="Filters sluiten" data-ac-filters-close>
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>

        <!-- Merk -->
        <div class="ac-fgroup">
          <button type="button" class="ac-ftoggle" aria-expanded="true">Merk
            <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="ac-fbody">
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernette</span><span class="cnt">1</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina</span><span class="cnt">492</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Juki</span><span class="cnt">4</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Merkloos</span><span class="cnt">4</span></label>
          </div>
        </div>

        <!-- Prijs (statische range-slider) -->
        <div class="ac-fgroup">
          <button type="button" class="ac-ftoggle" aria-expanded="true">Prijs
            <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="ac-fbody">
            <div class="ac-fprice">
              <div class="ac-prange" aria-hidden="true"><i></i><span class="knob lo"></span><span class="knob hi"></span></div>
              <div class="ac-pbounds tnum"><span>€ 1</span><span>€ 15001</span></div>
            </div>
          </div>
        </div>

        <!-- Subsubcategorie (lange machinemodel-lijst; ~8 + 'Toon meer') -->
        <div class="ac-fgroup">
          <button type="button" class="ac-ftoggle" aria-expanded="true">Subsubcategorie
            <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="ac-fbody">
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Voor de Naaimachine</span><span class="cnt">316</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 770 QE</span><span class="cnt">184</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 790</span><span class="cnt">184</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 780</span><span class="cnt">182</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 750 QE</span><span class="cnt">179</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 590</span><span class="cnt">176</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 735</span><span class="cnt">175</span></label>
            <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 720</span><span class="cnt">174</span></label>
            <div class="ac-fopt-extra" hidden>
              <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 570 QE -2017 en later</span><span class="cnt">172</span></label>
              <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 540</span><span class="cnt">171</span></label>
              <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 880</span><span class="cnt">170</span></label>
              <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 830</span><span class="cnt">168</span></label>
              <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 740</span><span class="cnt">167</span></label>
              <label class="ac-fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina B 710</span><span class="cnt">164</span></label>
            </div>
            <button type="button" class="ac-fmore">Toon meer +</button>
          </div>
        </div>
      </aside>

      <!-- 3) RESULTATEN — toolbar + list-rijen -->
      <div class="ac-results">
        <div class="ac-toolbar">
          <div class="ac-count">Toont <b class="tnum">1&ndash;8</b> van <b class="tnum">501</b> resultaten</div>
          <div class="ac-tbc">
            <div class="ac-viewtoggle" role="group" aria-label="Weergave">
              <button type="button" aria-label="Rasterweergave" aria-pressed="false">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
              </button>
              <button type="button" aria-label="Lijstweergave" aria-pressed="true">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3.5" cy="6" r="1.2"/><circle cx="3.5" cy="12" r="1.2"/><circle cx="3.5" cy="18" r="1.2"/></svg>
              </button>
            </div>
            <div class="ac-sort">
              <span>Sorteren</span>
              <div class="ac-sel">
                <select aria-label="Sorteren op">
                  <option value="relevance" selected>Relevantie</option>
                  <option value="price_asc">Prijs (laag naar hoog)</option>
                  <option value="price_desc">Prijs (hoog naar laag)</option>
                </select>
                <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
              </div>
            </div>
          </div>
        </div>

        <div class="ac-rows">
          <!-- 8 echte resultaatrijen (productie-data; beelden uit assets/products/) -->
          <div class="ac-prow">
            <span class="ac-pimg"><img src="assets/products/bernina-accessoirebox.jpg" alt="Bernina accessoirebox"></span>
            <div class="ac-pinfo">
              <div class="ac-pbrand">Merk: <b>Bernina</b></div>
              <a class="ac-pname" href="product-machine.html">Bernina accessoirebox</a>
              <p class="ac-pdesc">De Bernina accessoirebox kan gebruikt worden bij een naaimachine of lockmachines. Bij de overlocker kan u naaivoeten en andere accessoires erin opbergen en bij de naaimachine kan u diverse accessoires erin doen.</p>
            </div>
            <div class="ac-pbuy">
              <span class="ac-pprice tnum">€&nbsp;10,00</span>
              <a class="ac-pmore" href="product-machine.html">Meer informatie</a>
            </div>
          </div>

          <div class="ac-prow">
            <span class="ac-pimg"><img src="assets/products/bernina-garenschijf.jpg" alt="Bernina Garenschijf"></span>
            <div class="ac-pinfo">
              <div class="ac-pbrand">Merk: <b>Bernina</b></div>
              <a class="ac-pname" href="product-machine.html">Bernina Garenschijf</a>
              <p class="ac-pdesc">Wanneer naaigaren klossen worden gebruikt, de trilvrije klemstukken verwijderen. Klossen opzetten, daarna de garengeleidingsschijven met de afgeronde zijde naar de klos toe plaatsen.</p>
            </div>
            <div class="ac-pbuy">
              <span class="ac-pprice tnum">€&nbsp;4,00</span>
              <a class="ac-pmore" href="product-machine.html">Meer informatie</a>
            </div>
          </div>

          <div class="ac-prow">
            <span class="ac-pimg"><img src="assets/products/bernina-spoelhouder.jpg" alt="Bernina spoelhouder"></span>
            <div class="ac-pinfo">
              <div class="ac-pbrand">Merk: <b>Bernina</b></div>
              <a class="ac-pname" href="product-machine.html">Bernina spoelhouder</a>
              <p class="ac-pdesc">Extra Bernina spoelhouder voor metalen spoeltjes die in de Bernina accessoires box kunnen.</p>
            </div>
            <div class="ac-pbuy">
              <span class="ac-pprice tnum">€&nbsp;6,00</span>
              <a class="ac-pmore" href="product-machine.html">Meer informatie</a>
            </div>
          </div>

          <div class="ac-prow">
            <span class="ac-pimg"><img src="assets/products/bernina-435.jpg" alt="Bernina 435"></span>
            <div class="ac-pinfo">
              <div class="ac-pbrand">Merk: <b>Bernina</b></div>
              <a class="ac-pname" href="product-machine.html">Bernina 435</a>
              <p class="ac-pdesc">De Bernina 435 is een handig formaat naaimachine die krachtig genoeg is om zelfs de dikste lagen van de dikste jeans te kunnen. Door de constante draadspanning is elke steek min of meer perfect.</p>
            </div>
            <div class="ac-pbuy">
              <span class="ac-pprice tnum">€&nbsp;1899,00</span>
              <a class="ac-pmore" href="product-machine.html">Meer informatie</a>
            </div>
          </div>

          <div class="ac-prow">
            <span class="ac-pimg"><img src="assets/products/bernina-tornmesje.jpg" alt="Bernina tornmesje"></span>
            <div class="ac-pinfo">
              <div class="ac-pbrand">Merk: <b>Bernina</b></div>
              <a class="ac-pname" href="product-machine.html">Bernina tornmesje</a>
              <p class="ac-pdesc">De originele Bernina tornmesje is om naden los te tornen of om eigen gemaakte knoopsgaten open te maken. Tussen de tanden van het vorkgedeelte bevindt zich een scherpe rand die als mes fungeert.</p>
            </div>
            <div class="ac-pbuy">
              <span class="ac-pprice tnum">€&nbsp;5,00</span>
              <a class="ac-pmore" href="product-machine.html">Meer informatie</a>
            </div>
          </div>

          <div class="ac-prow">
            <span class="ac-pimg"><img src="assets/products/bernina-ondermes.jpg" alt="Bernina Ondermes"></span>
            <div class="ac-pinfo">
              <div class="ac-pbrand">Merk: <b>Bernina</b></div>
              <a class="ac-pname" href="product-machine.html">Bernina Ondermes</a>
              <p class="ac-pdesc">Vervang het Bernina / Bernette ondermes wanneer het bot is geworden! Zelf het beweegbare bovenmes of ondermes vervangen? Er zitten altijd twee messen in uw lockmachine; deze twee messen werken als een schaar.</p>
            </div>
            <div class="ac-pbuy">
              <span class="ac-pprice tnum">€&nbsp;15,00</span>
              <a class="ac-pmore" href="product-machine.html">Meer informatie</a>
            </div>
          </div>

          <div class="ac-prow">
            <span class="ac-pimg"><img src="assets/products/multi-schroevendraaier.jpg" alt="Multi schroevendraaier"></span>
            <div class="ac-pinfo">
              <div class="ac-pbrand">Merk: <b>Merkloos</b></div>
              <a class="ac-pname" href="product-machine.html">Multi schroevendraaier</a>
              <p class="ac-pdesc">Onmisbaar voor fijnmechanische werkzaamheden voor uw naaimachine, met een breed en smal vlak.</p>
            </div>
            <div class="ac-pbuy">
              <span class="ac-pprice tnum">€&nbsp;3,00</span>
              <a class="ac-pmore" href="product-machine.html">Meer informatie</a>
            </div>
          </div>

          <div class="ac-prow">
            <span class="ac-pimg"><img src="assets/products/klosnetje.jpg" alt="Klosnetje"></span>
            <div class="ac-pinfo">
              <div class="ac-pbrand">Merk: <b>Merkloos</b></div>
              <a class="ac-pname" href="product-machine.html">Klosnetje</a>
              <p class="ac-pdesc">Het handige klossennetje kunt u gebruiken bij borduurgaren, naaigaren of lockgaren. Wanneer u draad gebruikt die snel afwikkelt, zoals doorzichtig nylon, houdt het netje de klos netjes in bedwang.</p>
            </div>
            <div class="ac-pbuy">
              <span class="ac-pprice tnum">€&nbsp;1,00</span>
              <a class="ac-pmore" href="product-machine.html">Meer informatie</a>
            </div>
          </div>
        </div>

        <!-- slotregel: 501 totaal − 8 getoond = 493 extra -->
        <p class="ac-extra">Er zijn <b class="tnum">493</b> extra resultaten. <a href="#">Bekijk alle 501 resultaten &rarr;</a></p>
      </div>

    </div>
  </div>
  <!-- (USABILITY 2026-06-08) altijd-zichtbare custom scroll-rail op de paneelrand — OS-onafhankelijke
       scroll-affordance (vult de macOS overlay-scrollbar-leemte; JS update de duim). aria-hidden: puur visueel. -->
  <div class="ac-scrollrail" data-ac-rail aria-hidden="true"><span class="ac-scrollthumb" data-ac-thumb></span></div>
</div>

<!-- scrim achter de zoek-overlay -->
<div class="ac-scrim" data-ac-scrim hidden></div>

</div><!-- /.chrome-sticky -->


<!-- ===================== BREADCRUMB ===================== -->
<nav class="crumbs" aria-label="Kruimelpad">
  <div class="wrap">
    <a href="index.html">Home</a>
    <span class="sep" aria-hidden="true">/</span>
    <span class="here" aria-current="page">Machines</span>
  </div>
</nav>

<!-- ===================== CATEGORY HEADER ===================== -->
<header class="cat-head">
  <div class="wrap">
    <!-- Eén kolom: titel + intro + subcategorie-chips. GEEN machinezoeker (die hoort alleen bij
         Accessoires / Onderdelen, niet bij de Machines-categorie). -->
    <div class="cat-head-text">
      <h1>Machines</h1>
      <p class="lede">Een nieuwe machine kopen? Op deze pagina vindt u het volledige assortiment <strong>naaimachines, borduurmachines, lock- en coverlockmachines</strong> van alle topmerken. Vakkundig advies, ingebruikname en service vanuit onze eigen werkplaats.</p>
      <!-- subcategorie-chips = live category-sidebar-navigatie (huissteden.nl/machines) -->
      <div class="subcats">
        <a href="category-machines.html">Naaimachines</a>
        <a href="category-machines.html">Borduurmachines</a>
        <a href="category-machines.html">Quiltmachines</a>
        <a href="category-machines.html">Lockmachines</a>
        <a href="category-machines.html">Coverlock machines</a>
        <a href="category-machines.html">Rechtstikmachines</a>
        <a href="category-machines.html">Kindernaaimachines</a>
        <a href="category-machines.html">Snijplotters</a>
        <a href="category-machines.html">Strijken</a>
        <a href="category-machines.html">Occasion / Showmodel</a>
      </div>
    </div>
  </div>
</header>

<!-- ===================== MAIN: filters + resultaten ===================== -->
<div class="catwrap">
  <div class="wrap">
    <div class="cat-grid">

      <!-- ---------- FILTER SIDEBAR (live filters: Merk · Product · Soort Naald · Prijs) ---------- -->
      <aside class="filters" id="filters" aria-label="Filteren">
        <!-- CATEGORIEËN-boom (live category-sidebar-navigation) — BOVENAAN de sidebar, boven de filters;
             vanilla JS drill-down. De boom wordt door JS opgebouwd uit cattree-data (level-2 + level-3,
             verbatim van de live shop). Heading volgt het zustermodel: .ruit rode ruit-prefix + Figtree.
             De drawer-sluitknop (alleen mobiel) zit in deze eerste, sticky kop. -->
        <div class="f-head">
          <h2><span class="ruit" aria-hidden="true"></span> Categorieën</h2>
          <button type="button" class="f-close" aria-label="Filters sluiten" onclick="closeFilters()">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>
        <nav class="cattree" id="cattree" aria-label="Categorieën"></nav>

        <!-- Filteren — kop voor de filtergroepen (Merk / Product / Soort naald / Prijs) -->
        <div class="f-head f-head--inline">
          <h2><span class="ruit" aria-hidden="true"></span> Filteren</h2>
        </div>

        <!-- Merk (machinemerken — realistische machine-counts) -->
        <div class="fgroup">
          <button type="button" class="f-toggle" aria-expanded="true">Merk
            <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="f-body">
            <input type="text" class="f-search" placeholder="Zoek merk…" aria-label="Zoek binnen merken">
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernina</span><span class="cnt">38</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Pfaff</span><span class="cnt">31</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Brother</span><span class="cnt">27</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Janome</span><span class="cnt">24</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Husqvarna</span><span class="cnt">19</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Singer</span><span class="cnt">17</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Bernette</span><span class="cnt">12</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Juki</span><span class="cnt">11</span></label>
            <div class="fopt-extra" hidden>
              <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Babylock</span><span class="cnt">6</span></label>
              <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Elna</span><span class="cnt">4</span></label>
              <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Lewenstein</span><span class="cnt">3</span></label>
            </div>
            <button type="button" class="f-more">Toon meer +</button>
          </div>
        </div>

        <!-- Product (machinesoort) -->
        <div class="fgroup">
          <button type="button" class="f-toggle" aria-expanded="true">Product
            <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="f-body">
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Naaimachines</span><span class="cnt">84</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Borduurmachines</span><span class="cnt">31</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Lockmachines</span><span class="cnt">26</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Coverlock machines</span><span class="cnt">14</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Strijken</span><span class="cnt">12</span></label>
            <div class="fopt-extra" hidden>
              <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Quiltmachines</span><span class="cnt">9</span></label>
              <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Rechtstikmachines</span><span class="cnt">7</span></label>
              <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Kindernaaimachines</span><span class="cnt">5</span></label>
              <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Snijplotters</span><span class="cnt">4</span></label>
            </div>
            <button type="button" class="f-more">Toon meer +</button>
          </div>
        </div>

        <!-- Machine type -->
        <div class="fgroup">
          <button type="button" class="f-toggle" aria-expanded="true">Machine type
            <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="f-body">
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Computergestuurd</span><span class="cnt">73</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Mechanisch</span><span class="cnt">61</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Elektronisch</span><span class="cnt">42</span></label>
            <label class="fopt"><input type="checkbox"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg></span><span class="lab">Semi-industrieel</span><span class="cnt">16</span></label>
          </div>
        </div>

        <!-- Prijs (range €1 – €2280, live bounds) -->
        <div class="fgroup">
          <button type="button" class="f-toggle" aria-expanded="true">Prijs
            <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="f-body">
            <div class="f-price" data-price-range data-min="49" data-max="7999">
              <div class="fp-inputs">
                <label class="fp-field">Vanaf<span class="fp-inwrap"><span class="cur">€</span><input type="number" inputmode="numeric" min="49" max="7999" class="fp-from" value="49" aria-label="Minimale prijs in euro"></span></label>
                <label class="fp-field">Tot<span class="fp-inwrap"><span class="cur">€</span><input type="number" inputmode="numeric" min="49" max="7999" class="fp-to" value="7999" aria-label="Maximale prijs in euro"></span></label>
              </div>
              <div class="fp-slider">
                <span class="fp-track"></span>
                <span class="fp-fill"></span>
                <span class="fp-thumb fp-thumb-min" role="slider" tabindex="0" aria-label="Minimale prijs" aria-valuemin="49" aria-valuemax="7999" aria-valuenow="49" aria-valuetext="€ 49"></span>
                <span class="fp-thumb fp-thumb-max" role="slider" tabindex="0" aria-label="Maximale prijs" aria-valuemin="49" aria-valuemax="7999" aria-valuenow="7999" aria-valuetext="€ 7.999"></span>
              </div>
              <p class="fp-readout" aria-live="polite"><span class="fp-out-min">€ 49</span> <span class="fp-dash">–</span> <span class="fp-out-max">€ 7.999</span></p>
              <button type="button" class="btn-confirm">Bevestig</button>
            </div>
          </div>
        </div>

      </aside>

      <!-- ---------- RESULTATEN ---------- -->
      <div class="results" id="grid-top">

        <!-- mobiele filterknop -->
        <div class="filter-bar">
          <button type="button" class="btn-filter" onclick="openFilters()" aria-controls="filters" aria-expanded="false">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
            Filteren
          </button>
        </div>

        <!-- toolbar: count + sorteren + per pagina (live: 1-18 van 2195, 122 pagina's) -->
        <div class="cat-toolbar">
          <div class="amount">Producten <b class="tnum">1-18</b> van <b class="tnum">192</b></div>
          <div class="tb-controls">
            <div class="tb-field">
              <span>Sorteren</span>
              <div class="sel-wrap">
                <select aria-label="Sorteren op">
                  <option value="position" selected>Positie</option>
                  <option value="name">Product Naam</option>
                  <option value="price">Prijs</option>
                  <option value="label">Product labels</option>
                </select>
                <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
              </div>
            </div>
            <div class="tb-field">
              <span>Toon</span>
              <div class="sel-wrap">
                <select aria-label="Aantal producten per pagina">
                  <option value="18" selected>18</option>
                  <option value="48">48</option>
                  <option value="96">96</option>
                  <option value="192">192</option>
                </select>
                <svg class="chev" viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
              </div>
              <button type="button" class="sort-dir" aria-pressed="false" title="Van hoog naar laag sorteren" aria-label="Van hoog naar laag sorteren">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"/></svg>
              </button>
            </div>
          </div>
        </div>

        <!-- PRODUCT GRID (18 echte live machines van huissteden.nl/machines; USP-lijst per kaart
             zoals op de homepage; prijsblok herontworpen op klantfeedback, identiek aan category.html) -->
        <div class="grid">

          <!-- 1. Bernina L620 -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">Leverbaar begin Juli</span><img src="assets/products/bernina-l620.jpg" alt="Bernina L620 covermachine"></div>
            <div class="pbody">
              <div class="brand-line">Bernina</div>
              <h3>Bernina L620</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> 3/4-draads coversteek</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Inrijgen met lucht</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Differentieel transport</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Kniehevel (FHS)</li>
          </ul>
              <div class="stock out"><span class="pip"></span> Niet in voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 1.999,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-info btn-block">Meer informatie</a>
            </div>
          </article>

          <!-- 2. Bernina L660 -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">Leverbaar begin Juli</span><img src="assets/products/bernina-l660.jpg" alt="Bernina L660 lockmachine"></div>
            <div class="pbody">
              <div class="brand-line">Bernina</div>
              <h3>Bernina L660</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> 2/3/4-draads overlock</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Ingebouwde rolzoom</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Automatische naaldstop</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Kniehevel (FHS)</li>
          </ul>
              <div class="stock out"><span class="pip"></span> Niet in voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 2.299,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-info btn-block">Meer informatie</a>
            </div>
          </article>

          <!-- 3. Bernina L650 -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">Leverbaar herfst 2026</span><img src="assets/products/bernina-l650.jpg" alt="Bernina L650 overlockmachine"></div>
            <div class="pbody">
              <div class="brand-line">Bernina</div>
              <h3>Bernina L650</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> 2/3/4-draads overlock</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Ingebouwde rolzoom</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Automatische naaldstop</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Kniehevel (FHS)</li>
          </ul>
              <div class="stock out"><span class="pip"></span> Niet in voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 1.899,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-info btn-block">Meer informatie</a>
            </div>
          </article>

          <!-- 4. Pfaff E-unit Creative Elevate 680 -->
          <article class="prod">
            <div class="pimg"><img src="assets/products/pfaff-e-unit-creative-elevate-680.jpg" alt="Pfaff E-unit Creative Elevate 680"></div>
            <div class="pbody">
              <div class="brand-line">Pfaff</div>
              <h3>Pfaff E-unit Creative Elevate 680</h3>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 799,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 5. Pfaff creative elevate 680 -->
          <article class="prod">
            <div class="pimg"><span class="badge">Actie</span><img src="assets/products/pfaff-creative-elevate-680.jpg" alt="Pfaff creative elevate 680 naaimachine"></div>
            <div class="pbody">
              <div class="brand-line">Pfaff</div>
              <h3>Pfaff creative elevate 680</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Computergestuurd</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Steekpatronen: 400</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> 9 mm steekbreedte</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Met borduur optie</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block has-sale">
                <div class="price-line">
                  <span class="now tnum">€ 2.899,00</span>
                  <span class="was tnum">€ 2.999,00</span>
                  <button class="omni" type="button" aria-label="Uitleg over deze actieprijs" aria-expanded="false">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></svg>
                    <span class="omni-pop" role="tooltip"><b>Zo is deze prijs opgebouwd</b>De laagste prijs in de 30 dagen vóór deze aanbieding was <span class="lp">€ 2.999,00</span>. U betaalt nu € 2.899,00 en bespaart € 100,00.</span>
                  </button>
                </div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 6. Bernette B79 Harry Potter -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">Web only</span><img src="assets/products/bernette-harry-potter.jpg" alt="Bernette B79 Harry Potter naai- en borduurmachine"></div>
            <div class="pbody">
              <div class="brand-line">Bernette</div>
              <h3>Bernette B79 Harry Potter</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Steekpatronen: 505</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Borduurmotieven: 260</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Max. borduurbereik 260x160mm</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Dubbeltransport</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 2.299,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 7. Singer Kledingstomer -->
          <article class="prod">
            <div class="pimg"><img src="assets/products/singer-kledingstomer.jpg" alt="Singer Kledingstomer"></div>
            <div class="pbody">
              <div class="brand-line">Singer</div>
              <h3>Singer Kledingstomer</h3>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 53,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 8. Singer Intelligent 2.0 – 36 Steam Press -->
          <article class="prod">
            <div class="pimg"><img src="assets/products/singer-intelligent-2-0-36-steam-press.jpg" alt="Singer Intelligent 2.0 – 36 Steam Press"></div>
            <div class="pbody">
              <div class="brand-line">Singer</div>
              <h3>Singer Intelligent 2.0 – 36 Steam Press</h3>
              <div class="stock out"><span class="pip"></span> Niet in voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 449,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-info btn-block">Meer informatie</a>
            </div>
          </article>

          <!-- 9. BabyLock Hagane -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">Nieuw</span><img src="assets/products/babylock-hagane.jpg" alt="BabyLock Hagane rechtstikmachine"></div>
            <div class="pbody">
              <div class="brand-line">BabyLock</div>
              <h3>BabyLock Hagane</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Mechanisch</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Rechtstikker</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Semi industriële machine</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Naaldpositie boven/onderaan</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 1.998,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 10. Singer Heavy Duty 500 Classic -->
          <article class="prod">
            <div class="pimg"><span class="badge">Actie</span><img src="assets/products/singer-heavy-duty-500-classic.png" alt="Singer Heavy Duty 500 Classic naaimachine"></div>
            <div class="pbody">
              <div class="brand-line">Singer</div>
              <h3>Singer Heavy Duty 500 Classic</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Mechanisch</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Steekpatronen: 32</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Veel naaldkracht</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Hoge naaisnelheid</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block has-sale">
                <div class="price-line">
                  <span class="now tnum">€ 399,00</span>
                  <span class="was tnum">€ 429,00</span>
                  <button class="omni" type="button" aria-label="Uitleg over deze actieprijs" aria-expanded="false">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></svg>
                    <span class="omni-pop" role="tooltip"><b>Zo is deze prijs opgebouwd</b>De laagste prijs in de 30 dagen vóór deze aanbieding was <span class="lp">€ 429,00</span>. U betaalt nu € 399,00 en bespaart € 30,00.</span>
                  </button>
                </div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 11. Pfaff Creative Expression 750 -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">Web only</span><img src="assets/products/pfaff-creative-expression-750.jpg" alt="Pfaff Creative Expression 750 naai- en borduurmachine"></div>
            <div class="pbody">
              <div class="brand-line">Pfaff</div>
              <h3>Pfaff Creative Expression 750</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Steekpatronen: 750</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Borduurmotieven: 638</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Borduurbereik: 360x350mm</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Boventransport</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block has-sale">
                <div class="price-line">
                  <span class="now tnum">€ 5.299,00</span>
                  <span class="was tnum">€ 5.499,00</span>
                  <button class="omni" type="button" aria-label="Uitleg over deze actieprijs" aria-expanded="false">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></svg>
                    <span class="omni-pop" role="tooltip"><b>Zo is deze prijs opgebouwd</b>De laagste prijs in de 30 dagen vóór deze aanbieding was <span class="lp">€ 5.499,00</span>. U betaalt nu € 5.299,00 en bespaart € 200,00.</span>
                  </button>
                </div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 12. Juki HZL-353Z -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">Web only</span><img src="assets/products/placeholder-machine.svg" alt="Juki HZL-353Z naaimachine (afbeelding volgt)"></div>
            <div class="pbody">
              <div class="brand-line">Juki</div>
              <h3>Juki HZL-353Z</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Mechanisch</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Steekpatronen 21</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> 1-Fase knoopsgat</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Draadinsteker</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 449,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 13. Singer S0605 -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">Web only</span><img src="assets/products/singer-s0605.jpg" alt="Singer S0605 overlockmachine"></div>
            <div class="pbody">
              <div class="brand-line">Singer</div>
              <h3>Singer S0605</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> 2/3/4-draads overlock</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Differentieel transport</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Automatische naaldstop</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Volledig metalen frame</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 999,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 14. Pfaff Admire Air 3000 -->
          <article class="prod">
            <div class="pimg"><span class="badge">Actie</span><img src="assets/products/pfaff-admire-air-3000.jpg" alt="Pfaff Admire Air 3000 lockmachine"></div>
            <div class="pbody">
              <div class="brand-line">Pfaff</div>
              <h3>Pfaff Admire Air 3000</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> 2/3/4-draads overlock</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Krachtige motor</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Ingebouwde rolzoom</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Draaddoorhaler</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block has-sale">
                <div class="price-line">
                  <span class="now tnum">€ 999,00</span>
                  <span class="was tnum">€ 1.099,00</span>
                  <button class="omni" type="button" aria-label="Uitleg over deze actieprijs" aria-expanded="false">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></svg>
                    <span class="omni-pop" role="tooltip"><b>Zo is deze prijs opgebouwd</b>De laagste prijs in de 30 dagen vóór deze aanbieding was <span class="lp">€ 1.099,00</span>. U betaalt nu € 999,00 en bespaart € 100,00.</span>
                  </button>
                </div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 15. Singer Intelligent 2.0 – 26 Steam Press -->
          <article class="prod">
            <div class="pimg"><img src="assets/products/singer-intelligent-2-0-26-steam-press.jpg" alt="Singer Intelligent 2.0 – 26 Steam Press"></div>
            <div class="pbody">
              <div class="brand-line">Singer</div>
              <h3>Singer Intelligent 2.0 – 26 Steam Press</h3>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 399,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 16. Singer Intelligent 2.0 – 20 Steam Press -->
          <article class="prod">
            <div class="pimg"><img src="assets/products/singer-intelligent-2-0-20-steam-press.jpg" alt="Singer Intelligent 2.0 – 20 Steam Press"></div>
            <div class="pbody">
              <div class="brand-line">Singer</div>
              <h3>Singer Intelligent 2.0 – 20 Steam Press</h3>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 349,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 17. Singer Heavy Duty Pink + Schaar -->
          <article class="prod">
            <div class="pimg"><span class="badge badge-label">+cadeau</span><img src="assets/products/singer-heavy-duty-pink-plus-schaar.jpg" alt="Singer Heavy Duty Pink naaimachine met schaar"></div>
            <div class="pbody">
              <div class="brand-line">Singer</div>
              <h3>Singer Heavy Duty Pink + Schaar</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Mechanisch</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Steekpatronen: 11</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Stabiel metalen frame</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Hoge naaisnelheid</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block has-sale">
                <div class="price-line">
                  <span class="now tnum">€ 349,00</span>
                  <span class="was tnum">€ 399,00</span>
                  <button class="omni" type="button" aria-label="Uitleg over deze actieprijs" aria-expanded="false">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/></svg>
                    <span class="omni-pop" role="tooltip"><b>Zo is deze prijs opgebouwd</b>De laagste prijs in de 30 dagen vóór deze aanbieding was <span class="lp">€ 399,00</span>. U betaalt nu € 349,00 en bespaart € 50,00.</span>
                  </button>
                </div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

          <!-- 18. Husqvarna Topaz 55Q -->
          <article class="prod">
            <div class="pimg"><img src="assets/products/husqvarna-topaz-55q.jpg" alt="Husqvarna Topaz 55Q naai- en quiltmachine"></div>
            <div class="pbody">
              <div class="brand-line">Husqvarna</div>
              <h3>Husqvarna Topaz 55Q</h3>
          <ul>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Computergestuurd</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Steekpatronen 470</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Sewing Advisor</li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg> Sterke doorstikkracht</li>
          </ul>
              <div class="stock"><span class="pip"></span> Op voorraad</div>
              <div class="price-block">
                <div class="price-line"><span class="now tnum">€ 2.999,00</span></div>
              </div>
              <a href="product-machine.html" class="btn btn-cart btn-block"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h3l2.2 12.4a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.3L21.5 7H6"/></svg> In winkelwagen</a>
            </div>
          </article>

        </div><!-- /.grid -->

        <!-- PAGINATION (live machines: 11 pagina's bij 18 per pagina) -->
        <nav class="pager" aria-label="Paginering">
          <span class="pg-edge is-disabled" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg> Vorige</span>
          <a href="#grid-top" class="is-current" aria-current="page">1</a>
          <a href="#grid-top">2</a>
          <a href="#grid-top">3</a>
          <span class="gap" aria-hidden="true">…</span>
          <a href="#grid-top">11</a>
          <a href="#grid-top" class="pg-edge">Volgende <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg></a>
        </nav>

      </div><!-- /.results -->
    </div><!-- /.cat-grid -->
  </div>
</div><!-- /.catwrap -->

<!-- ===================== SEO-TEKST ===================== -->
<section class="seo">
  <div class="wrap">
    <div class="seo-inner">
      <div class="seo-collapsed" id="seoBody">
        <h2>De juiste machine voor elk project</h2>
        <p>Een nieuwe machine kopen? Op Huissteden vindt u het volledige assortiment <strong>naaimachines</strong>, <strong>borduurmachines</strong>, <strong>lock-</strong> en <strong>coverlockmachines</strong>. Of u nu net begint of al jaren naait: van een betaalbare mechanische instapper tot een computergestuurde machine met borduuroptie, wij hebben voor elk niveau een passend model. Twijfelt u welke machine bij u past? Bel onze klantenservice op <a href="tel:0342491591">(0342) 49 15 91</a>, dan denken we graag met u mee.</p>
        <h2>Alle topmerken onder één dak</h2>
        <p>Wij voeren machines van alle bekende merken, waaronder Bernina, Pfaff, Brother, Janome, Husqvarna, Singer, Bernette, Juki en Babylock. Filter links op merk, machinesoort of machine type om snel het juiste model te vinden. Vergelijk eenvoudig op steekpatronen, transport en functies dankzij de kenmerken op elke productkaart.</p>
        <h2>Inclusief uitleg, service en garantie</h2>
        <p>Elke machine wordt door onze eigen werkplaats gecontroleerd en gebruiksklaar geleverd. U krijgt persoonlijke uitleg en kunt voor onderhoud en reparatie altijd bij ons terecht. Liever eerst proberen? In onze showroom kunt u de machines uitgebreid testen voordat u kiest.</p>
      </div>
      <div class="seo-more">
        <button type="button" class="btn btn-ghost" id="seoToggle" aria-expanded="false">Lees meer</button>
      </div>
    </div>
  </div>
</section>

<!-- ===================== REVIEWS ===================== -->
<section class="reviews" id="reviews">
  <div class="wrap">
    <div class="sec-head">
      <div>
        <div class="eyebrow">Beoordeeld via Feedback Company</div>
        <h2>Wat onze klanten zeggen</h2>
      </div>
    </div>

    <div class="rev-grid">
      <div class="rev-score">
        <div>
          <div class="big tnum">9,5</div>
          <div class="out">gemiddeld cijfer</div>
        </div>
        <div>
          <div class="stars">★★★★★</div>
          <div class="count">uit <b class="tnum">12.619</b> beoordelingen</div>
          <div class="fc"><img src="assets/feedback-company-mini.png" alt="Feedback Company"></div>
        </div>
      </div>

      <div class="rev-card">
        <div class="stars">★★★★★</div>
        <blockquote>“Ik ben al heel lang naar tevredenheid internetklant. Ook mijn vorige levering was wederom snel, goed en helemaal naar wens. De site is nog gebruiksvriendelijker geworden. Topbedrijf.”</blockquote>
        <div class="who">
          <div class="av">D</div>
          <div><b>D. Ploenes-Entius</b><small>Geverifieerde klant · 16-05-2026</small></div>
        </div>
      </div>

      <div class="rev-card">
        <div class="stars">★★★★★</div>
        <blockquote>“Betrouwbaar en goede kwaliteit producten. In de winkel vind ik medewerkers hartelijk en behulpzaam. Online bestellingen worden altijd snel en goed geleverd!”</blockquote>
        <div class="who">
          <div class="av">J</div>
          <div><b>J. van Houten</b><small>Geverifieerde klant · 27-04-2026</small></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===================== NEWSLETTER ===================== -->
<section class="news">
  <div class="wrap">
    <div class="news-inner">
      <div>
        <div class="eyebrow">Nieuwsbrief</div>
        <h2>Wilt u niets missen?</h2>
        <p>Schrijf u in en ontvang eenmalig <b>5% korting op fournituren, garens, accessoires en onderdelen</b>. Daarna sturen wij u zo nu en dan tips en aanbiedingen.</p>
      </div>
      <form class="news-form" onsubmit="return false">
        <label for="nl-email">Uw e-mailadres</label>
        <div class="row">
          <input type="email" id="nl-email" placeholder="naam@voorbeeld.nl" aria-label="Uw e-mailadres">
          <button type="submit" class="btn btn-ink">Inschrijven</button>
        </div>
        <p class="fine">U kunt zich op elk moment weer uitschrijven. Wij gaan zorgvuldig met uw gegevens om.</p>
      </form>
    </div>
  </div>
</section>

<!-- ===================== FOOTER ===================== -->
<footer id="contact">
  <div class="wrap">
    <div class="foot-grid">
      <div class="fbrand">
        <div class="word">huissteden</div>
        <div class="sub">naaimachines · barneveld</div>
        <p>Dé specialist in naaimachines, lockmachines en borduurmachines. Uw naaimachinespecialist midden in Nederland.</p>
        <div class="contact">
          <span><svg viewBox="0 0 24 24" fill="none" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-5.7-7-11a7 7 0 0 1 14 0c0 5.3-7 11-7 11Z"/><circle cx="12" cy="10" r="2.6"/></svg> Langstraat 96, 3771 BJ Barneveld</span>
          <a href="tel:0342491591"><svg viewBox="0 0 24 24" fill="none" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg> (0342) 49 15 91</a>
          <a href="mailto:info@huissteden.nl"><svg viewBox="0 0 24 24" fill="none" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> info@huissteden.nl</a>
        </div>
      </div>

      <div>
        <h4>Klantenservice</h4>
        <ul>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Veelgestelde vragen</a></li>
          <li><a href="#">Verzending &amp; levering</a></li>
          <li><a href="#">Retourneren</a></li>
          <li><a href="#">Reparatie &amp; onderhoud</a></li>
          <li><a href="#">Garantie</a></li>
        </ul>
      </div>

      <div>
        <h4>Informatie</h4>
        <ul>
          <li><a href="#">Over Huissteden</a></li>
          <li><a href="#">Showroom &amp; openingstijden</a></li>
          <li><a href="#">Naai-advies &amp; blog</a></li>
          <li><a href="#">Algemene voorwaarden</a></li>
          <li><a href="#">Privacy &amp; cookies</a></li>
        </ul>
      </div>

      <div>
        <h4>Producten</h4>
        <ul>
          <li><a href="category.html">Naaimachines</a></li>
          <li><a href="category.html">Lockmachines</a></li>
          <li><a href="category.html">Borduurmachines</a></li>
          <li><a href="category.html">Voetjes &amp; spoeltjes</a></li>
          <li><a href="category.html">Naalden &amp; onderdelen</a></li>
          <li><a href="category.html">Garen &amp; vlies</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="foot-bottom">
    <div class="wrap">
      <span>© 2026 Huissteden Naaimachines · KvK Barneveld · Alle prijzen incl. btw</span>
      <span class="pays" aria-label="Geaccepteerde betaalmethoden">
        <img class="pay-ic" src="assets/payment/ideal.svg" alt="iDEAL" loading="lazy">
        <img class="pay-ic" src="assets/payment/bancontact.svg" alt="Bancontact" loading="lazy">
        <img class="pay-ic" src="assets/payment/creditcard.svg" alt="Creditcard (Mastercard / Visa / Maestro)" loading="lazy">
        <img class="pay-ic" src="assets/payment/paypal.svg" alt="PayPal" loading="lazy">
        <img class="pay-ic" src="assets/payment/klarna.svg" alt="Klarna" loading="lazy">
        <img class="pay-ic" src="assets/payment/apple-pay.svg" alt="Apple Pay" loading="lazy">
        <img class="pay-ic" src="assets/payment/in3.svg" alt="in3" loading="lazy">
      </span>
    </div>
  </div>
</footer>

<!-- ===================== V15: MINICART (slide-in lade van rechts) ===================== -->
<!-- Gebaseerd op de demo.hyva.io-minicart (<dialog>, rechter slide-in + scrim). Nederlandse labels.
     Voorgevuld met 2 ECHTE regels; JS herberekent regelprijs/subtotaal/telling + header-spiegel via data-attrs. -->
<div class="mc-scrim" data-mc-scrim hidden></div>
<aside class="minicart" id="minicart" role="dialog" aria-modal="true" aria-label="Winkelwagen" aria-hidden="true" hidden>
  <div class="mc-head">
    <h2>Winkelwagen</h2>
    <span class="mc-itemcount" data-mc-itemcount>2 artikelen</span>
    <button class="mc-close" type="button" data-mc-close aria-label="Winkelwagen sluiten">
      <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
    </button>
  </div>

  <!-- gratis-verzending-balk (drempel €35) -->
  <div class="mc-ship">
    <div class="mc-ship-txt" data-mc-ship-txt></div>
    <div class="mc-bar"><i data-mc-ship-bar style="width:100%"></i></div>
  </div>

  <!-- regels -->
  <div class="mc-lines">
    <!-- regel 1 — Brother CS70S €188,00 ×1 -->
    <div class="mc-line" data-line data-price="188.00" data-qty="1">
      <div class="mc-thumb"><img src="assets/products/brother-cs70s.jpg" alt="Brother CS70S naaimachine"></div>
      <div class="mc-detail">
        <span class="mc-brand">Brother</span>
        <span class="mc-name"><a href="product-machine.html">Brother CS70S</a></span>
        <div class="mc-row">
          <div class="mc-qty">
            <button type="button" data-mc-dec aria-label="Aantal verlagen">−</button>
            <span class="mc-qval" data-mc-qval aria-live="polite">1</span>
            <button type="button" data-mc-inc aria-label="Aantal verhogen">+</button>
          </div>
          <span class="mc-lineprice" data-mc-lineprice>€&nbsp;188,00</span>
          <button class="mc-remove" type="button" data-mc-remove aria-label="Brother CS70S verwijderen">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
          </button>
        </div>
      </div>
    </div>
    <!-- regel 2 — Brother spoeltjes 11,5mm 10st €8,00 ×1 -->
    <div class="mc-line" data-line data-price="8.00" data-qty="1">
      <div class="mc-thumb"><img src="assets/products/brother-spoeltjes-115mm-hoog.jpg" alt="Brother spoeltjes 11,5 mm, 10 stuks"></div>
      <div class="mc-detail">
        <span class="mc-brand">Brother</span>
        <span class="mc-name"><a href="product-machine.html">Brother spoeltjes 11,5 mm, 10 st</a></span>
        <div class="mc-row">
          <div class="mc-qty">
            <button type="button" data-mc-dec aria-label="Aantal verlagen">−</button>
            <span class="mc-qval" data-mc-qval aria-live="polite">1</span>
            <button type="button" data-mc-inc aria-label="Aantal verhogen">+</button>
          </div>
          <span class="mc-lineprice" data-mc-lineprice>€&nbsp;8,00</span>
          <button class="mc-remove" type="button" data-mc-remove aria-label="Brother spoeltjes verwijderen">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- lege staat (defensief) -->
  <div class="mc-empty">Uw winkelwagen is leeg.</div>

  <!-- voet -->
  <div class="mc-foot">
    <div class="mc-sub">
      <span class="mc-sub-lbl">Subtotaal</span>
      <span class="mc-sub-val" data-mc-subtotal>€&nbsp;196,00</span>
    </div>
    <p class="mc-vat">Incl. btw, excl. verzendkosten</p>
    <div class="mc-cta">
      <a href="#" class="btn mc-checkout">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        Naar afrekenen
      </a>
      <a href="#" class="btn mc-viewcart">Bekijk winkelwagen</a>
    </div>
  </div>
</aside>

<!-- V7: ~6 regels vanilla-JS — geen scroll-listener (geen jank). De IntersectionObserver kijkt of de 1px-
     sentinel nog in beeld is; zodra hij wegscrolt → .is-stuck aan, bij terug naar boven → weer uit.
     CSS is desktop-gescoped, dus mobiel meeklikken heeft geen zichtbaar effect. -->
<script>
  (function(){
    var sentinel = document.querySelector('.chrome-sentinel');
    var chrome = document.querySelector('.chrome-sticky');
    if (!sentinel || !chrome || !('IntersectionObserver' in window)) return;
    new IntersectionObserver(function(entries){
      var e = entries[0];
      // 'stuck' alleen als de sentinel BOVEN de viewport is gescrold (top<0), niet bij een
      // transient/0-hoogte layout tijdens laden — zo blijft de rust-staat exact gelijk aan V6.
      chrome.classList.toggle('is-stuck', !e.isIntersecting && e.boundingClientRect.top < 0);
    }).observe(sentinel);
  })();
</script>

<!-- V11: bestsellers-slider — mechanisch gelijkgetrokken met de demo.hyva.io product-carrousel
     (x-snap-slider.group-pager), maar in vanilla JS (geen Alpine). Wat de demo doet en wat we mirroren:
       • TRACK = scroll-snap-track met VERBORGEN native scrollbar (CSS); de dots zijn de positie-indicator.
       • DOTS = paginatie ONDER de track. De demo rendert structureel één marker per kaart maar verbergt
         via .group-pager alle markers behalve de eerste van elke 'pagina' → visueel één dot per pagina.
         Wij renderen meteen één dot per pagina (zelfde eindresultaat, simpeler DOM).
       • PAGINA = één viewport vol kaarten (= de pijl-stap clientWidth in de demo). #pagina's = ceil(totaal / per view).
       • ACTIEVE dot volgt het scrollen (range-based, net als de demo: aria-current op de pagina die het
         dichtst bij scrollLeft ligt).
       • DOT-KLIK = smooth-scroll naar die pagina (snapt netjes uit).
       • PIJLEN (sectiekop, behouden) sturen DEZELFDE paging-logica aan: ±1 pagina; aria-disabled aan de uiteinden.
       • RESIZE = aantal-per-view + pagina's + dots opnieuw berekenen (de demo herberekent ook op resize). -->
<script>
  (function(){
    var track = document.querySelector('.prod-grid');
    var prev  = document.querySelector('.p-prev');
    var next  = document.querySelector('.p-next');
    var pager = document.querySelector('.prod-pager');
    if (!track || !prev || !next || !pager) return;

    var cards = Array.prototype.slice.call(track.querySelectorAll('.prod'));
    if (!cards.length) return;

    var pages = 0;          // aantal pagina's bij de huidige viewport
    var perView = 1;        // hoeveel hele kaarten passen er per viewport
    var TOL = 6;            // tolerantie (track heeft 4px padding-links → 'rust' ≈ 4, niet 0)

    // hoeveel kaarten passen er (afgerond) in één viewport — bepaalt de pagina-grootte
    function computePerView(){
      var stride = cards.length > 1
        ? (cards[1].offsetLeft - cards[0].offsetLeft)   // kaartbreedte + gap
        : cards[0].getBoundingClientRect().width;
      if (!stride) return 1;
      return Math.max(1, Math.round(track.clientWidth / stride));
    }

    // de scrollLeft waarop pagina i begint (de eerste kaart van die pagina, links uitgelijnd)
    function pageOffset(i){
      var idx = Math.min(i * perView, cards.length - 1);
      // offsetLeft binnen de track, minus de track-padding zodat de kaart netjes links 'snapt'
      return Math.max(0, cards[idx].offsetLeft - track.offsetLeft - parseFloat(getComputedStyle(track).paddingLeft || 0));
    }

    // welke pagina ligt het dichtst bij de huidige scrollpositie? (actieve dot volgt het scrollen)
    function activePage(){
      var max = track.scrollWidth - track.clientWidth;
      if (track.scrollLeft >= max - TOL) return pages - 1;        // helemaal rechts → laatste pagina
      var sl = track.scrollLeft, best = 0, bestDist = Infinity;
      for (var i = 0; i < pages; i++){
        var d = Math.abs(pageOffset(i) - sl);
        if (d < bestDist){ bestDist = d; best = i; }
      }
      return best;
    }

    // (her)bouw de dots — één <button role=tab> per pagina
    function buildDots(){
      pager.innerHTML = '';
      pager.classList.toggle('is-single', pages <= 1);
      for (var i = 0; i < pages; i++){
        var b = document.createElement('button');
        b.type = 'button';
        b.className = 'prod-marker';
        b.setAttribute('role', 'tab');
        b.setAttribute('aria-label', 'Ga naar pagina ' + (i + 1) + ' van ' + pages);
        b.dataset.page = i;
        b.addEventListener('click', (function(idx){
          return function(){ track.scrollTo({ left: pageOffset(idx), behavior: 'smooth' }); };
        })(i));
        pager.appendChild(b);
      }
    }

    // actieve dot + pijl-disabled-staat bijwerken op basis van de scrollpositie
    function syncState(){
      var max = track.scrollWidth - track.clientWidth - 1;
      prev.setAttribute('aria-disabled', track.scrollLeft <= TOL ? 'true' : 'false');
      next.setAttribute('aria-disabled', track.scrollLeft >= max ? 'true' : 'false');
      var act = activePage();
      var dots = pager.children;
      for (var i = 0; i < dots.length; i++){
        var on = (i === act);
        dots[i].setAttribute('aria-current', on ? 'true' : 'false');
        dots[i].setAttribute('tabindex', on ? '0' : '-1');
      }
    }

    // alles herberekenen (init + resize): per-view, #pagina's, dots, daarna staat syncen
    function recompute(){
      perView = computePerView();
      pages = Math.max(1, Math.ceil(cards.length / perView));
      buildDots();
      syncState();
    }

    // pijlen sturen dezelfde paging-logica: spring naar de vorige/volgende pagina
    prev.addEventListener('click', function(){
      if (prev.getAttribute('aria-disabled') === 'true') return;
      track.scrollTo({ left: pageOffset(Math.max(0, activePage() - 1)), behavior: 'smooth' });
    });
    next.addEventListener('click', function(){
      if (next.getAttribute('aria-disabled') === 'true') return;
      track.scrollTo({ left: pageOffset(Math.min(pages - 1, activePage() + 1)), behavior: 'smooth' });
    });

    // scroll (incl. swipe op touch) → actieve dot + pijlen live bijwerken
    track.addEventListener('scroll', syncState, { passive: true });
    // resize → opnieuw berekenen (kaarten/viewport veranderen → ander aantal pagina's/dots)
    var rt;
    window.addEventListener('resize', function(){ clearTimeout(rt); rt = setTimeout(recompute, 120); });

    recompute();
  })();
</script>

<!-- ============================================================================
     V15 — JS voor de drie chrome-features. Vanilla, geen dependencies.
     ============================================================================ -->
<script>
  /* prijs-helper: 188 → "188,00" (NL-notatie, tabular) */
  function v15fmt(n){
    return n.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
  }
  function v15euro(n){ return '€ ' + v15fmt(n); }
  function v15esc(s){ return s.replace(/[&<>"]/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]; }); }
  var V15_REDUCED = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  /* ---------------------------------------------------------------------------
     V15.1 — ZOEK-OVERLAY (faceted instant-search) — (2026-06-08)
     Spiegelt de productie-zoekoverlay: typo-banner (query-conditioneel) + facet-rail + toolbar +
     list-rijen + extra-regel. De rijen zijn een vaste echte dataset (in de markup); typen ≥2 tekens
     opent de overlay, "berdina" (ongeacht hoofdletters) toont de typo-banner, andere queries niet.
     Sluit via Escape / "Sluiten" / scrim / buiten-klik. Body-scroll-lock met de bewezen sticky-veilige fix.
  --------------------------------------------------------------------------- */
  (function(){
    var input = document.getElementById('hsearch');
    var panel = document.getElementById('ac-panel');
    if (!input || !panel) return;
    var search  = input.closest('.search');
    var header  = input.closest('.header');
    var scrim   = document.querySelector('[data-ac-scrim]');
    var typo    = document.getElementById('ac-typo');
    var typoQ   = document.getElementById('ac-typo-q');
    var facets  = document.getElementById('ac-facets');
    var inner   = panel.querySelector('.ac-inner');
    var rail    = panel.querySelector('[data-ac-rail]');
    var thumb   = panel.querySelector('[data-ac-thumb]');
    var MIN = 2;
    var isOpen = false;

    /* (USABILITY 2026-06-08) Anker het paneel direct ónder de HEADERRIJ (zoekbalk), niet onder de hele
       chrome: meet de live headerhoogte en zet 'm als --ac-top (CSS leest 'm voor top + max-height).
       Live gemeten zodat rust-/.is-stuck-/mobiele-staat allemaal kloppen (de header krimpt bij stuck). */
    function setTop(){
      if (!header) return;
      document.documentElement.style.setProperty('--ac-top', Math.round(header.getBoundingClientRect().height) + 'px');
    }

    /* (USABILITY 2026-06-08) altijd-zichtbare custom scroll-rail bijwerken (OS-onafhankelijke affordance):
       toon de rail enkel als er te scrollen valt en map scrollTop → duim-positie/-hoogte. */
    function updateRail(){
      if (!inner || !rail || !thumb) return;
      var sh = inner.scrollHeight, ch = inner.clientHeight;
      var canScroll = sh - ch > 2;
      panel.classList.toggle('has-scroll', canScroll);
      if (!canScroll) return;
      var trackH = rail.clientHeight;
      var thumbH = Math.max(36, Math.round(trackH * (ch / sh)));
      var maxTop = trackH - thumbH;
      var top = Math.round((inner.scrollTop / (sh - ch)) * maxTop);
      thumb.style.height = thumbH + 'px';
      thumb.style.transform = 'translateY(' + top + 'px)';
    }
    if (inner) inner.addEventListener('scroll', updateRail, {passive:true});

    /* toon de typo-correctiebanner alleen voor de typo-query "berdina" (case-insensitive) */
    function syncTypo(q){
      var show = q.toLowerCase() === 'berdina';
      if (typo){ typo.hidden = !show; if (show && typoQ) typoQ.textContent = q; }
    }

    function open(){
      if (isOpen) return;
      isOpen = true;
      if (scrim) scrim.hidden = false;
      // body-scroll-lock (sticky-veilige fix: zie body.ac-open CSS) — spiegelt het minicart-idioom
      document.body.classList.add('ac-open');
      setTop();
      requestAnimationFrame(function(){ setTop(); panel.classList.add('is-open'); if (scrim) scrim.classList.add('is-open'); updateRail(); });
      input.setAttribute('aria-expanded','true');
    }
    function close(){
      if (!isOpen) return;
      isOpen = false;
      panel.classList.remove('is-open');
      if (scrim) scrim.classList.remove('is-open');
      document.body.classList.remove('ac-open');
      input.setAttribute('aria-expanded','false');
      closeFilters();
      var delay = V15_REDUCED ? 0 : 140;
      setTimeout(function(){ if (!isOpen && scrim) scrim.hidden = true; }, delay);
    }

    function onInput(){
      var q = input.value.trim();
      if (q.length < MIN){ close(); return; }
      syncTypo(q);
      open();
    }

    input.addEventListener('input', onInput);
    input.addEventListener('focus', function(){ if (input.value.trim().length >= MIN) onInput(); });

    // "Sluiten"-controls (typo-banner-knop), Escape, scrim, buiten-klik
    Array.prototype.slice.call(panel.querySelectorAll('[data-ac-close]')).forEach(function(b){
      b.addEventListener('click', function(){ close(); input.focus(); });
    });
    if (scrim) scrim.addEventListener('click', close);
    document.addEventListener('keydown', function(e){ if ((e.key === 'Escape' || e.key === 'Esc') && isOpen) close(); });
    // herbereken het anker (--ac-top) + scroll-rail bij resize zolang de overlay open is
    var acRt; window.addEventListener('resize', function(){ if (!isOpen) return; clearTimeout(acRt); acRt = setTimeout(function(){ setTop(); updateRail(); }, 100); });
    document.addEventListener('click', function(e){
      if (!isOpen) return;
      // buiten-klik = niet in het zoekveld én niet in het paneel
      if (search.contains(e.target) || panel.contains(e.target)) return;
      close();
    });

    /* facet-rail interacties (hergebruik van het category.html-idioom) */
    // 1) filtergroep in-/uitklappen
    Array.prototype.slice.call(panel.querySelectorAll('.ac-fgroup > .ac-ftoggle')).forEach(function(btn){
      btn.addEventListener('click', function(){
        var g = btn.closest('.ac-fgroup');
        var collapsed = g.classList.toggle('collapsed');
        btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
      });
    });
    // 2) 'Toon meer/minder' binnen de Subsubcategorie-groep
    Array.prototype.slice.call(panel.querySelectorAll('.ac-fgroup .ac-fmore')).forEach(function(btn){
      btn.addEventListener('click', function(){
        var extra = btn.parentElement.querySelector('.ac-fopt-extra');
        if (!extra) return;
        var hidden = extra.hasAttribute('hidden');
        if (hidden){ extra.removeAttribute('hidden'); btn.textContent = 'Toon minder −'; }
        else { extra.setAttribute('hidden',''); btn.textContent = 'Toon meer +'; }
      });
    });
    // 3) mobiele "Verfijn"-drawer
    function openFilters(){ if (facets){ facets.classList.add('open'); var b=panel.querySelector('[data-ac-filters-open]'); if(b)b.setAttribute('aria-expanded','true'); } }
    function closeFilters(){ if (facets){ facets.classList.remove('open'); var b=panel.querySelector('[data-ac-filters-open]'); if(b)b.setAttribute('aria-expanded','false'); } }
    var fOpenBtn  = panel.querySelector('[data-ac-filters-open]');
    var fCloseBtn = panel.querySelector('[data-ac-filters-close]');
    if (fOpenBtn)  fOpenBtn.addEventListener('click', openFilters);
    if (fCloseBtn) fCloseBtn.addEventListener('click', closeFilters);

    // 4) grid/list view-toggle (visueel-only)
    var vbtns = Array.prototype.slice.call(panel.querySelectorAll('.ac-viewtoggle button'));
    vbtns.forEach(function(b){
      b.addEventListener('click', function(){
        vbtns.forEach(function(x){ x.setAttribute('aria-pressed','false'); });
        b.setAttribute('aria-pressed','true');
      });
    });
  })();

  /* ---------------------------------------------------------------------------
     Sorteer-richting-knop (oplopend ⇄ aflopend) — visueel, zoals op de live site
  --------------------------------------------------------------------------- */
  (function(){
    var ARROW_DOWN = 'M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4';
    var ARROW_UP   = 'M3 4h13M3 8h9m-9 4h9m5 12V4m0 0l-4 4m4-4l4 4';
    Array.prototype.slice.call(document.querySelectorAll('.sort-dir')).forEach(function(btn){
      btn.addEventListener('click', function(){
        var desc = btn.getAttribute('aria-pressed') === 'true';
        desc = !desc;
        btn.setAttribute('aria-pressed', desc ? 'true' : 'false');
        var label = desc ? 'Van laag naar hoog sorteren' : 'Van hoog naar laag sorteren';
        btn.title = label;
        btn.setAttribute('aria-label', label);
        var path = btn.querySelector('path');
        if (path) path.setAttribute('d', desc ? ARROW_UP : ARROW_DOWN);
      });
    });
  })();

  /* ---------------------------------------------------------------------------
     V15.2 — MINICART (slide-in lade)
  --------------------------------------------------------------------------- */
  (function(){
    var cart   = document.getElementById('minicart');
    var scrim  = document.querySelector('[data-mc-scrim]');
    if (!cart || !scrim) return;
    var triggers = Array.prototype.slice.call(document.querySelectorAll('[data-cart-toggle]'));
    var closeBtn = cart.querySelector('[data-mc-close]');
    var FREE_SHIP = 35.00;
    var lastFocus = null;

    function lines(){ return Array.prototype.slice.call(cart.querySelectorAll('[data-line]')); }

    function recalc(){
      var subtotal = 0, items = 0;
      lines().forEach(function(line){
        var price = parseFloat(line.getAttribute('data-price')) || 0;
        var qty = parseInt(line.getAttribute('data-qty'), 10) || 0;
        subtotal += price * qty;
        items += qty;
        var lp = line.querySelector('[data-mc-lineprice]');
        if (lp) lp.innerHTML = v15euro(price * qty);
        var qv = line.querySelector('[data-mc-qval]');
        if (qv) qv.textContent = qty;
        var dec = line.querySelector('[data-mc-dec]');
        if (dec) dec.disabled = qty <= 1;
      });
      var lineCount = lines().length;

      var subEl = cart.querySelector('[data-mc-subtotal]');
      if (subEl) subEl.innerHTML = v15euro(subtotal);
      var icEl = cart.querySelector('[data-mc-itemcount]');
      if (icEl) icEl.textContent = items + (items === 1 ? ' artikel' : ' artikelen');

      cart.classList.toggle('is-empty', lineCount === 0);

      // gratis-verzending-balk
      var shipTxt = cart.querySelector('[data-mc-ship-txt]');
      var shipBar = cart.querySelector('[data-mc-ship-bar]');
      var pct = Math.min(100, (subtotal / FREE_SHIP) * 100);
      if (shipBar) shipBar.style.width = pct.toFixed(1) + '%';
      if (shipTxt){
        var truck = '<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="6" width="13" height="10" rx="1"/><path d="M14 9h4l3 3v4h-7z"/><circle cx="6" cy="18" r="1.6"/><circle cx="17.5" cy="18" r="1.6"/></svg>';
        if (subtotal >= FREE_SHIP){
          shipTxt.innerHTML = truck + '<span class="mc-ship-done">U heeft gratis verzending!</span>';
        } else {
          shipTxt.innerHTML = truck + '<span>Nog <b>' + v15euro(FREE_SHIP - subtotal) + '</b> tot gratis verzending</span>';
        }
      }

      // header-spiegel: badge + totaal + aria-label
      document.querySelectorAll('[data-cart-count]').forEach(function(b){ b.textContent = items; });
      document.querySelectorAll('[data-cart-total]').forEach(function(t){ t.innerHTML = v15euro(subtotal); });
      triggers.forEach(function(t){ t.setAttribute('aria-label', 'Winkelwagen openen, ' + items + (items === 1 ? ' artikel' : ' artikelen')); });
    }

    // qty +/- en verwijderen (event-delegated)
    cart.addEventListener('click', function(e){
      var line = e.target.closest('[data-line]');
      if (!line) return;
      if (e.target.closest('[data-mc-inc]')){
        line.setAttribute('data-qty', (parseInt(line.getAttribute('data-qty'),10) || 0) + 1);
        recalc();
      } else if (e.target.closest('[data-mc-dec]')){
        var q = (parseInt(line.getAttribute('data-qty'),10) || 1) - 1;
        if (q < 1) q = 1;
        line.setAttribute('data-qty', q);
        recalc();
      } else if (e.target.closest('[data-mc-remove]')){
        line.parentNode.removeChild(line);
        recalc();
      }
    });

    function focusables(){
      return cart.querySelectorAll('a[href], button:not([disabled]), input, [tabindex]:not([tabindex="-1"])');
    }
    function open(){
      lastFocus = document.activeElement;
      cart.hidden = false; scrim.hidden = false;
      // pin scroll (sticky-veilige fix: zie body.cart-open CSS)
      document.body.classList.add('cart-open');
      requestAnimationFrame(function(){ cart.classList.add('is-open'); scrim.classList.add('is-open'); });
      cart.setAttribute('aria-hidden','false');
      triggers.forEach(function(t){ t.setAttribute('aria-expanded','true'); });
      if (closeBtn) closeBtn.focus();
    }
    function close(){
      cart.classList.remove('is-open'); scrim.classList.remove('is-open');
      cart.setAttribute('aria-hidden','true');
      triggers.forEach(function(t){ t.setAttribute('aria-expanded','false'); });
      document.body.classList.remove('cart-open');
      var delay = V15_REDUCED ? 0 : 220;
      setTimeout(function(){ if (!cart.classList.contains('is-open')){ cart.hidden = true; scrim.hidden = true; } }, delay);
      if (lastFocus && typeof lastFocus.focus === 'function') lastFocus.focus();
    }

    triggers.forEach(function(t){
      t.addEventListener('click', function(e){ e.preventDefault(); open(); });
    });
    if (closeBtn) closeBtn.addEventListener('click', close);
    scrim.addEventListener('click', close);
    document.addEventListener('keydown', function(e){
      if ((e.key === 'Escape' || e.key === 'Esc') && cart.classList.contains('is-open')) close();
    });
    // focus-trap
    cart.addEventListener('keydown', function(e){
      if (e.key !== 'Tab') return;
      var f = focusables(); if (!f.length) return;
      var first = f[0], last = f[f.length-1];
      if (e.shiftKey && document.activeElement === first){ e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last){ e.preventDefault(); first.focus(); }
    });

    recalc(); // sync header/subtotaal met de seed bij laden
  })();

  /* (desktop mega-menu JS verwijderd op de categoriepagina's om de nav simpel te houden — zie decisions.md) */
</script>

<!-- V7: roterend merk in de hero-kop (odometer). Valt terug op statisch "machine" bij reduced-motion. -->
<script>
(function vroll(){
  var BRANDS = ["Bernina","Brother","Pfaff","Janome","Juki","Husqvarna","Singer","Bernette","Babylock","Lewenstein","machine"];
  var root = document.getElementById('roll');
  if(!root) return;
  var reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
  // breedte vastzetten op het langste woord zodat de regel niet verspringt
  root.style.minWidth = Math.max.apply(null, BRANDS.map(function(b){return b.length;})) * 0.62 + 'ch';
  var col = document.createElement('span');
  col.className = 'roll-col';
  var list = BRANDS.concat(BRANDS[0]); // kloon eerste voor naadloze loop
  list.forEach(function(b){ var it=document.createElement('span'); it.className='roll-item'; it.textContent=b; col.appendChild(it); });
  root.appendChild(col);
  var i = 0;
  function step(){
    i++;
    col.classList.add('move');
    col.style.transform = 'translateY(-' + (i*1.2) + 'em)';
    if(reduce){ col.classList.remove('move'); }
  }
  col.addEventListener('transitionend', function(){
    if(i >= BRANDS.length){            // op de kloon beland → stil terug naar 0
      col.classList.remove('move');
      i = 0; col.style.transform = 'translateY(0)';
    }
  });
  setInterval(step, 3200);
})();
</script>

<!-- Categoriepagina-interacties: filtergroep-inklap, 'toon meer', mobiele filter-drawer, SEO lees-meer,
     Omnibus-tooltip-tap (touch/toetsenbord). Eenvoudige class-toggles — conform de rust-eis (audience.md). -->
<script>
  (function(){
    // 1) filtergroep in-/uitklappen (chevron roteert; aria-expanded volgt)
    document.querySelectorAll('.fgroup > .f-toggle').forEach(function(btn){
      btn.addEventListener('click', function(){
        var g = btn.closest('.fgroup');
        var collapsed = g.classList.toggle('collapsed');
        btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
      });
    });

    // 2) 'Toon meer/minder' binnen een filtergroep
    document.querySelectorAll('.fgroup .f-more').forEach(function(btn){
      btn.addEventListener('click', function(){
        var extra = btn.parentElement.querySelector('.fopt-extra');
        if (!extra) return;
        var hidden = extra.hasAttribute('hidden');
        if (hidden) { extra.removeAttribute('hidden'); btn.textContent = 'Toon minder −'; }
        else { extra.setAttribute('hidden',''); btn.textContent = 'Toon meer +'; }
      });
    });

    // 3) mobiele filter-drawer (globaal — wordt via inline onclick aangeroepen)
    var filters = document.getElementById('filters');
    window.openFilters = function(){ filters.classList.add('open'); document.body.classList.add('filters-open'); var b=document.querySelector('.filter-bar .btn-filter'); if(b)b.setAttribute('aria-expanded','true'); };
    window.closeFilters = function(){ filters.classList.remove('open'); document.body.classList.remove('filters-open'); var b=document.querySelector('.filter-bar .btn-filter'); if(b)b.setAttribute('aria-expanded','false'); };
    document.addEventListener('keydown', function(e){ if(e.key==='Escape' && filters.classList.contains('open')) window.closeFilters(); });

    // 4) SEO-tekst 'Lees meer / Lees minder'
    var seoBody = document.getElementById('seoBody');
    var seoBtn  = document.getElementById('seoToggle');
    if (seoBody && seoBtn){
      seoBtn.addEventListener('click', function(){
        var open = seoBody.classList.toggle('open');
        seoBtn.textContent = open ? 'Lees minder' : 'Lees meer';
        seoBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
      });
    }

    // 5) Omnibus-prijstooltip: hover werkt via CSS; voor touch/toetsenbord togglen we aria-expanded op klik.
    //    Buiten-klik en Escape sluiten de open tooltip weer.
    var openOmni = null;
    document.querySelectorAll('.omni').forEach(function(btn){
      btn.addEventListener('click', function(e){
        e.preventDefault();
        var isOpen = btn.getAttribute('aria-expanded') === 'true';
        if (openOmni && openOmni !== btn) openOmni.setAttribute('aria-expanded','false');
        btn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
        openOmni = isOpen ? null : btn;
      });
    });
    document.addEventListener('click', function(e){
      if (openOmni && !openOmni.contains(e.target)) { openOmni.setAttribute('aria-expanded','false'); openOmni = null; }
    });
    document.addEventListener('keydown', function(e){
      if (e.key==='Escape' && openOmni) { openOmni.setAttribute('aria-expanded','false'); openOmni.blur(); openOmni = null; }
    });
  })();
</script>

<script>
  /* ---------- Prijs: dual-handle range-slider (€ vanaf / tot, thumbs + inputs gesynct) ---------- */
  (function(){
    document.querySelectorAll('[data-price-range]').forEach(function(root){
      var MIN = parseInt(root.getAttribute('data-min'), 10);
      var MAX = parseInt(root.getAttribute('data-max'), 10);
      var slider   = root.querySelector('.fp-slider');
      var fill     = root.querySelector('.fp-fill');
      var thumbLo  = root.querySelector('.fp-thumb-min');
      var thumbHi  = root.querySelector('.fp-thumb-max');
      var inFrom   = root.querySelector('.fp-from');
      var inTo     = root.querySelector('.fp-to');
      var outMin   = root.querySelector('.fp-out-min');
      var outMax   = root.querySelector('.fp-out-max');
      if (!slider || !thumbLo || !thumbHi) return;

      var lo = MIN, hi = MAX;
      var STEP = Math.max(1, Math.round((MAX - MIN) / 200)); // ~200 stappen langs de baan

      function fmt(n){ return '€ ' + n.toLocaleString('nl-NL'); }
      function clamp(v, a, b){ return Math.min(b, Math.max(a, v)); }
      function pct(v){ return ((v - MIN) / (MAX - MIN)) * 100; }

      function render(){
        var pLo = pct(lo), pHi = pct(hi);
        thumbLo.style.left = pLo + '%';
        thumbHi.style.left = pHi + '%';
        fill.style.left  = pLo + '%';
        fill.style.width = (pHi - pLo) + '%';
        thumbLo.setAttribute('aria-valuenow', lo);
        thumbHi.setAttribute('aria-valuenow', hi);
        thumbLo.setAttribute('aria-valuetext', fmt(lo));
        thumbHi.setAttribute('aria-valuetext', fmt(hi));
        thumbLo.setAttribute('aria-valuemax', hi);
        thumbHi.setAttribute('aria-valuemin', lo);
        if (document.activeElement !== inFrom) inFrom.value = lo;
        if (document.activeElement !== inTo)   inTo.value   = hi;
        if (outMin) outMin.textContent = fmt(lo);
        if (outMax) outMax.textContent = fmt(hi);
      }

      function setLo(v){ lo = clamp(Math.round(v), MIN, hi); render(); }
      function setHi(v){ hi = clamp(Math.round(v), lo, MAX); render(); }

      function valueFromClientX(clientX){
        var r = slider.getBoundingClientRect();
        var ratio = clamp((clientX - r.left) / r.width, 0, 1);
        return MIN + ratio * (MAX - MIN);
      }

      // --- pointer-drag (muis + touch via pointer events) ---
      function startDrag(thumb, isLo){
        return function(e){
          e.preventDefault();
          thumb.focus();
          if (thumb.setPointerCapture && e.pointerId != null){ try{ thumb.setPointerCapture(e.pointerId); }catch(_){} }
          function move(ev){
            var v = valueFromClientX(ev.clientX);
            if (isLo) setLo(v); else setHi(v);
          }
          function up(){
            window.removeEventListener('pointermove', move);
            window.removeEventListener('pointerup', up);
          }
          window.addEventListener('pointermove', move);
          window.addEventListener('pointerup', up);
        };
      }
      thumbLo.addEventListener('pointerdown', startDrag(thumbLo, true));
      thumbHi.addEventListener('pointerdown', startDrag(thumbHi, false));

      // klik op de baan verplaatst de dichtstbijzijnde thumb
      slider.addEventListener('pointerdown', function(e){
        if (e.target === thumbLo || e.target === thumbHi) return;
        var v = valueFromClientX(e.clientX);
        if (Math.abs(v - lo) <= Math.abs(v - hi)) { setLo(v); thumbLo.focus(); }
        else { setHi(v); thumbHi.focus(); }
      });

      // --- toetsenbord ---
      function keyHandler(isLo){
        return function(e){
          var cur = isLo ? lo : hi, big = Math.max(STEP * 10, Math.round((MAX - MIN) / 10)), nv = cur;
          switch(e.key){
            case 'ArrowLeft': case 'ArrowDown': nv = cur - STEP; break;
            case 'ArrowRight': case 'ArrowUp':  nv = cur + STEP; break;
            case 'PageDown': nv = cur - big; break;
            case 'PageUp':   nv = cur + big; break;
            case 'Home': nv = isLo ? MIN : lo; break;
            case 'End':  nv = isLo ? hi : MAX; break;
            default: return;
          }
          e.preventDefault();
          if (isLo) setLo(nv); else setHi(nv);
        };
      }
      thumbLo.addEventListener('keydown', keyHandler(true));
      thumbHi.addEventListener('keydown', keyHandler(false));

      // --- number-inputs sturen de thumbs ---
      function commitFrom(){ var v = parseInt(inFrom.value, 10); if (isNaN(v)) v = MIN; setLo(v); }
      function commitTo(){   var v = parseInt(inTo.value, 10);   if (isNaN(v)) v = MAX; setHi(v); }
      inFrom.addEventListener('input', commitFrom);
      inTo.addEventListener('input', commitTo);
      inFrom.addEventListener('change', function(){ commitFrom(); inFrom.value = lo; });
      inTo.addEventListener('change', function(){ commitTo(); inTo.value = hi; });

      render();
    });
  })();
</script>

<script>
  /* ---------- CATEGORIEËN-boom: vanilla JS drill-down (getrouw aan de live category-sidebar-navigation) ----------
     Data = verbatim van https://www.huissteden.nl/accessoires-onderdelen (2026-06-23, playwright-cli):
     9 level-2 categorieën; 3 daarvan hebben level-3 kinderen (Voor de Naaimachine / Voor de Borduurmachine /
     Voor de Lock- Covermachine). De overige 6 zijn kale links. Klik op een ouder → het paneel schuift naar het
     level-3 paneel met "← <ouder>" (terug) + "Alle <ouder>" + de kinderen; back schuift terug. Toetsenbord:
     items zijn echte <button>/<a>, Escape gaat terug naar level-2. Sub-pagina's bestaan niet in de mockup →
     alle hrefs wijzen naar category.html. */
  (function(){
    var mount = document.getElementById('cattree');
    if (!mount) return;

    var HREF = 'category-machines.html';
    // Machines-boom = vlak (live category-sidebar-navigation van huissteden.nl/machines toont
    // de 10 subcategorieën als directe kale links, zonder uitklap-niveau). De drill-down-machinerie
    // hieronder blijft intact maar wordt niet gebruikt zolang geen item kinderen heeft.
    var DATA = [
      { label:'Naaimachines' },
      { label:'Borduurmachines' },
      { label:'Quiltmachines' },
      { label:'Lockmachines' },
      { label:'Coverlock machines' },
      { label:'Rechtstikmachines' },
      { label:'Kindernaaimachines' },
      { label:'Snijplotters' },
      { label:'Strijken' },
      { label:'Occasion / Showmodel' }
    ];

    var SVG_NS = 'http://www.w3.org/2000/svg';
    function arrowRight(){
      var s = document.createElementNS(SVG_NS,'svg');
      s.setAttribute('class','ct-arrow'); s.setAttribute('viewBox','0 0 24 24'); s.setAttribute('fill','none');
      s.setAttribute('stroke-width','2.2'); s.setAttribute('stroke-linecap','round'); s.setAttribute('stroke-linejoin','round');
      s.setAttribute('aria-hidden','true');
      var p = document.createElementNS(SVG_NS,'path'); p.setAttribute('d','M9 6l6 6-6 6'); s.appendChild(p);
      return s;
    }
    function arrowLeft(){
      var s = document.createElementNS(SVG_NS,'svg');
      s.setAttribute('viewBox','0 0 24 24'); s.setAttribute('fill','none');
      s.setAttribute('stroke-width','2.2'); s.setAttribute('stroke-linecap','round'); s.setAttribute('stroke-linejoin','round');
      s.setAttribute('aria-hidden','true');
      var p = document.createElementNS(SVG_NS,'path'); p.setAttribute('d','M15 6l-6 6 6 6'); s.appendChild(p);
      return s;
    }

    // root-kop
    var root = document.createElement('span');
    root.className = 'ct-root';
    root.textContent = 'Machines';
    mount.appendChild(root);

    // viewport + rail met twee panels (level-2 + level-3)
    var viewport = document.createElement('div'); viewport.className = 'ct-viewport';
    var rail = document.createElement('div'); rail.className = 'ct-rail';
    var p2 = document.createElement('div'); p2.className = 'ct-panel'; p2.id = 'ct-p2';
    var p3 = document.createElement('div'); p3.className = 'ct-panel'; p3.id = 'ct-p3';
    p3.setAttribute('aria-hidden','true');
    rail.appendChild(p2); rail.appendChild(p3);
    viewport.appendChild(rail); mount.appendChild(viewport);

    // ---- level-2 paneel opbouwen
    DATA.forEach(function(cat){
      if (cat.children && cat.children.length){
        var btn = document.createElement('button');
        btn.type = 'button'; btn.className = 'ct-item';
        btn.setAttribute('aria-expanded','false');
        var lbl = document.createElement('span'); lbl.className = 'ct-lbl'; lbl.textContent = cat.label;
        btn.appendChild(lbl); btn.appendChild(arrowRight());
        btn.addEventListener('click', function(){ openSub(cat, btn); });
        p2.appendChild(btn);
      } else {
        var a = document.createElement('a');
        a.className = 'ct-item'; a.href = HREF;
        var s = document.createElement('span'); s.className = 'ct-lbl'; s.textContent = cat.label;
        a.appendChild(s);
        p2.appendChild(a);
      }
    });

    // ---- level-3 paneel (her)opbouwen voor een ouder
    var lastTrigger = null;
    function openSub(cat, trigger){
      p3.innerHTML = '';
      lastTrigger = trigger || null;

      // "← <ouder>" terug-rij
      var back = document.createElement('button');
      back.type = 'button'; back.className = 'ct-back';
      back.appendChild(arrowLeft());
      var bl = document.createElement('span'); bl.textContent = cat.label; back.appendChild(bl);
      back.addEventListener('click', closeSub);
      p3.appendChild(back);

      // "Alle <ouder>" snelkoppeling
      var all = document.createElement('a');
      all.className = 'ct-all'; all.href = HREF; all.textContent = 'Alle ' + cat.label;
      p3.appendChild(all);

      // kinderen (level-3) als kale links
      cat.children.forEach(function(name){
        var a = document.createElement('a');
        a.className = 'ct-item'; a.href = HREF;
        var s = document.createElement('span'); s.className = 'ct-lbl'; s.textContent = name;
        a.appendChild(s);
        p3.appendChild(a);
      });

      if (trigger) trigger.setAttribute('aria-expanded','true');
      p2.setAttribute('aria-hidden','true');
      p3.setAttribute('aria-hidden','false');
      mount.classList.add('is-sub');
      // focus naar de terug-rij voor toetsenbordgebruikers (preventScroll: geen sprong op desktop)
      back.focus({preventScroll:true});
    }
    function closeSub(){
      mount.classList.remove('is-sub');
      p2.setAttribute('aria-hidden','false');
      p3.setAttribute('aria-hidden','true');
      if (lastTrigger){ lastTrigger.setAttribute('aria-expanded','false'); lastTrigger.focus({preventScroll:true}); lastTrigger = null; }
    }
    // Escape gaat één niveau terug (alleen als we in een subpaneel zitten)
    mount.addEventListener('keydown', function(e){
      if (e.key === 'Escape' && mount.classList.contains('is-sub')){ e.stopPropagation(); closeSub(); }
    });
  })();
</script>

<script>
/* Land- / store-switcher: opent modal, onthoudt keuze, sluit op backdrop/Esc */
(function countrySwitcher(){
  var btn = document.getElementById('ctryBtn');
  var modal = document.getElementById('ctryModal');
  if(!btn || !modal) return;
  var flagEl = btn.querySelector('.flag');
  var codeEl = btn.querySelector('.ctry-code');
  var opts = Array.prototype.slice.call(modal.querySelectorAll('.ctry-opt'));
  var lastFocus = null;

  function open(){
    lastFocus = document.activeElement;
    modal.hidden = false;
    btn.setAttribute('aria-expanded','true');
    var active = modal.querySelector('.ctry-opt.is-active') || opts[0];
    if(active) active.focus();
    document.addEventListener('keydown', onKey);
  }
  function close(){
    modal.hidden = true;
    btn.setAttribute('aria-expanded','false');
    document.removeEventListener('keydown', onKey);
    if(lastFocus && lastFocus.focus) lastFocus.focus();
  }
  function onKey(e){ if(e.key === 'Escape'){ e.preventDefault(); close(); } }

  function choose(opt){
    opts.forEach(function(o){ o.classList.toggle('is-active', o === opt); });
    var src = opt.querySelector('.flag');
    /* kopieer de vlag-SVG naar de topbar; hernoem clip-id's zodat ze uniek blijven */
    flagEl.innerHTML = src ? src.innerHTML.replace(/uk-clip-m/g, 'uk-clip-tb') : '';
    codeEl.textContent = opt.dataset.code;
    btn.setAttribute('aria-label', 'Land en winkel wijzigen — nu ' + opt.dataset.label);
    close();
  }

  btn.addEventListener('click', open);
  modal.querySelectorAll('[data-ctry-close]').forEach(function(el){ el.addEventListener('click', close); });
  opts.forEach(function(opt){ opt.addEventListener('click', function(){ choose(opt); }); });
})();
</script>

</body>
</html>