/* ═══════════════════════════════════════════════════════════
     LETTERTYPES — op onze eigen server
     ══════════════════════════════════════════════════════════
     Stonden eerst bij Google. Dat kostte twee extra verbindingen
     (fonts.googleapis.com voor de stylesheet, fonts.gstatic.com voor de
     bestanden) vóór er ook maar één letter in het juiste lettertype
     stond. Nu komen ze van hetzelfde adres als de rest van de site.

     Alleen latin en latin-ext: genoeg voor Nederlands, Engels, Duits en
     Frans. font-display: swap houdt de tekst meteen leesbaar in een
     systeemlettertype tot het echte binnen is.

     Bijwerken? Haal de css op bij fonts.googleapis.com, download de
     woff2-bestanden naar /assets/fonts/ en pas deze regels aan.
  ═══════════════════════════════════════════════════════════ */
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    --orange: #E8500A;
    --orange-dark: #C23E00;
    --orange-light: #FF6B2B;
    --white: #FFFFFF;
    --off-white: #F8F7F5;
    --light-gray: #F0EFED;
    --gray: #8A8A8A;
    --dark-gray: #2A2A2A;
    --black: #111111;
    --steel: #D4D4D4;
    --border: #E5E5E5;
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.14);
    --radius: 4px;
    --transition: all 0.22s ease;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  /* Bewuste "ingezoomde" look, wat mooier oogt dan de volle 100%.
     Alleen op desktop: op mobiel bestaat dat referentiepunt niet en
     zou dit de mobiele breakpoints door elkaar gooien. Op <body> i.p.v.
     <html>: zoom op het html-element zelf gaf in Safari een dun
     randje ruimte boven de sticky header, doordat de root-box daar
     anders schaalt dan de rest van de pagina. */
  @media (min-width: 769px) {
    /* Boven 1500px schermbreedte groeit de zoom mee (--maq-zoom wordt
       gezet door het schaalscript in de <head>, zie i18n.php), zodat een
       groot scherm dezelfde indeling laat zien als een gewone laptop —
       alleen groter. Tot 1500px blijft het de vaste 85%. */
    body { zoom: 85%; zoom: var(--maq-zoom, 0.85); }
  }

  /* ===== SCROLLBAR ===== */
  /* Firefox heeft geen ::-webkit-scrollbar-ondersteuning: alleen daar de
     standaard eigenschap gebruiken. Nieuwere Chromium-versies ondersteunen
     scrollbar-color óók, maar renderen een transparante track daarmee
     soms alsnog wit (browserbug) — daarom hier bewust uitgesloten zodat
     Chrome/Edge/Safari alleen op de ::-webkit-regels hieronder leunen. */
  @supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: var(--orange) transparent; scrollbar-width: auto; }
  }

  /* Chrome / Safari / Edge: oranje balkje, volledig doorzichtige achtergrond,
     "zwevend" losgemaakt van de rand via background-clip. Let op: de
     zichtbare dikte van het balkje = breedte hieronder min 2x de border. */
  ::-webkit-scrollbar { width: 14px; height: 14px; background: transparent; }
  ::-webkit-scrollbar-track { background: transparent; box-shadow: none; }
  ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background-color: var(--orange);
    border-radius: 8px;
    border: 1px solid transparent;
    background-clip: content-box;
  }
  @media (hover: hover) {

    ::-webkit-scrollbar-thumb:hover { background-color: var(--orange-dark); }

  }

  /* Korte pagina's (bv. het bevestigingsscherm van de checkout) vullen het
     scherm niet. Omdat html een eigen achtergrond heeft, kleurt de ruimte
     onder de pagina mee met de footer in plaats van wit te blijven.
     Dit raakt de opmaak van de pagina's zelf niet. */
  html { background: var(--black); }

  body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: var(--black);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* ===== HEADER ===== */
  header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
  }

  .header-top {
    background: var(--black);
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 8px 20px;
  }

  .header-top span { color: var(--orange); }

  .header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 90px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .logo-wrap img {
    height: 30px;
    width: auto;
    cursor: pointer;
  }

  nav { display: flex; align-items: center; gap: 6px; }

  nav a {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-gray);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius);
    transition: var(--transition);
    cursor: pointer;
  }

  nav a.active { color: var(--orange); background: rgba(232,80,10,0.06); }

  @media (hover: hover) {

    nav a:hover { color: var(--orange); background: rgba(232,80,10,0.06); }

  }

  /* ===== NAV DROPDOWN ===== */
  .nav-dropdown { position: relative; display: inline-flex; }
  .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 6px; }
  .nav-dd-caret { transition: transform 0.22s ease; margin-top: 1px; }
  .nav-dropdown.open .nav-dd-caret { transform: rotate(180deg); }

  @media (hover: hover) {

    .nav-dropdown:hover .nav-dd-caret { transform: rotate(180deg); }

  }
  .nav-dropdown.open .nav-dropdown-trigger { color: var(--orange); background: rgba(232,80,10,0.06); }

  @media (hover: hover) {

    .nav-dropdown:hover .nav-dropdown-trigger { color: var(--orange); background: rgba(232,80,10,0.06); }

  }

  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 1100;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  @media (hover: hover) {

    .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  }
  /* Onzichtbare brug zodat de muis van trigger naar menu kan zonder te sluiten */
  .nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
  }
  .nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--dark-gray);
    border-radius: var(--radius);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
  }
  @media (hover: hover) {

    .nav-dropdown-menu a:hover {
    color: var(--white);
    background: var(--orange);
  }

  }

  .header-actions { display: flex; align-items: center; gap: 16px; }

  .search-bar {
    display: flex;
    align-items: center;
    background: var(--light-gray);
    border-radius: 24px;
    padding: 6px 16px;
    gap: 8px;
    border: 2px solid transparent;
    transition: var(--transition);
  }

  .search-bar:focus-within { border-color: var(--orange); background: var(--white); }

  .search-bar input {
    border: none; background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px; outline: none; width: 160px; color: var(--black);
  }

  .search-bar svg { color: var(--gray); flex-shrink: 0; }

  .cart-btn {
    position: relative;
    background: var(--orange);
    color: var(--white);
    text-decoration: none;
    border: none;
    border-radius: 24px;
    padding: 9px 20px 9px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: var(--transition);
  }

  @media (hover: hover) {

    .cart-btn:hover { background: var(--orange-dark); transform: translateY(-1px); }

  }

  .cart-count {
    background: var(--white);
    color: var(--orange);
    border-radius: 50%;
    width: 20px; height: 20px;
    font-size: 12px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }

  .mobile-menu-btn {
    display: none;
    background: none; border: none; cursor: pointer;
    padding: 6px; color: var(--black);
  }

  /* ===== PAGES ===== */
  .page { display: none; animation: fadeIn 0.3s ease; }
  .page.active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ===== HERO ===== */
  .hero {
    position: relative;
    background: var(--black);
    min-height: 580px;
    display: flex; align-items: center;
    overflow: hidden;
  }

  /* Achtergrond foto-slider met Ken Burns (in/uit zoom) + fade */
  .hero-slider {
    position: absolute; inset: 0;
    z-index: 0; overflow: hidden;
    background: var(--black);
  }
  .hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
    will-change: opacity, transform;
  }
  .hero-slide.active { opacity: 1; }

  /* De hero-foto's. Acht liggende op desktop, acht eigen staande op de
     telefoon: liggende foto's verliezen op een smal scherm te
     veel van de zijkanten.

     Alleen de eerste is meteen nodig — dat is het grootste element in
     beeld en dus bepalend voor hoe snel de pagina "geladen" voelt. De
     rest krijgt zijn foto pas als de pagina klaar is (maquett.js zet dan
     de klasse hero-rest op <body>). */
  .hero-slide-1 { background-image: url("/assets/productfoto's/foto1-web.webp"); }
  body.hero-rest .hero-slide-2 { background-image: url("/assets/productfoto's/DSC02648-web.webp"); }
  body.hero-rest .hero-slide-3 { background-image: url("/assets/productfoto's/DSC00009-web.webp"); }
  body.hero-rest .hero-slide-4 { background-image: url("/assets/productfoto's/Naamloos-1-web.webp"); }
  body.hero-rest .hero-slide-5 { background-image: url("/assets/productfoto's/DSC02710-web.webp"); }
  body.hero-rest .hero-slide-6 { background-image: url("/assets/productfoto's/DSC02264-web.webp"); }
  body.hero-rest .hero-slide-7 { background-image: url("/assets/productfoto's/DSC02182-web.webp"); }
  body.hero-rest .hero-slide-8 { background-image: url("/assets/productfoto's/DSC01394-web.webp"); }

  @media (max-width: 768px) {
    /* DSC02921 opent op de telefoon; DSC02649 schuift naar zijn plek. */
    .hero-slide-1 { background-image: url("/assets/productfoto's/DSC02921-web.webp"); }
    body.hero-rest .hero-slide-2 { background-image: url("/assets/productfoto's/DSC09881-web.webp"); }
    body.hero-rest .hero-slide-3 { background-image: url("/assets/productfoto's/DSC09751-web.webp"); }
    body.hero-rest .hero-slide-4 { background-image: url("/assets/productfoto's/DSC00131-web.webp"); }
    body.hero-rest .hero-slide-5 { background-image: url("/assets/productfoto's/DSC09786-web.webp"); }
    body.hero-rest .hero-slide-6 { background-image: url("/assets/productfoto's/DSC02649-web.webp"); }
    body.hero-rest .hero-slide-7 { background-image: url("/assets/productfoto's/DSC02181-web.webp"); }
    body.hero-rest .hero-slide-8 { background-image: url("/assets/productfoto's/DSC02132-web.webp"); }
  }
  .hero-slide.zoom-in.active,
  .hero-slide.zoom-in.is-leaving  { animation: heroZoomIn  7.6s ease-out forwards; }
  .hero-slide.zoom-out.active,
  .hero-slide.zoom-out.is-leaving { animation: heroZoomOut 7.6s ease-out forwards; }
  @keyframes heroZoomIn  { from { transform: scale(1);    } to { transform: scale(1.18); } }
  @keyframes heroZoomOut { from { transform: scale(1.18); } to { transform: scale(1);    } }

  /* Donkere overlay over de foto's zodat tekst leesbaar blijft */
  .hero-bg {
    position: absolute; inset: 0; z-index: 1;
    /* Bewust lichter dan voorheen (was .82/.55/.72): de foto's kwamen
       daardoor donker en dof over. De kop blijft leesbaar door de
       tekstschaduw hieronder, niet door de foto te verduisteren. */
    background: linear-gradient(105deg, rgba(10,10,10,0.58) 0%, rgba(17,17,17,0.34) 45%, rgba(42,26,10,0.48) 100%);
  }

  .hero-grid {
    position: absolute; inset: 0;
    background-image: 
      linear-gradient(rgba(232,80,10,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232,80,10,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
  }

  .hero-accent {
    position: absolute; right: -60px; top: -80px;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(232,80,10,0.12) 0%, transparent 65%);
    pointer-events: none;
  }

  .hero-content {
    position: relative; z-index: 2;
    max-width: 1400px; margin: 0 auto;
    padding: 160px 40px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  }

  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(232,80,10,0.15);
    border: 1px solid rgba(232,80,10,0.4);
    border-radius: 100px;
    padding: 4px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--orange-light);
    margin-bottom: 20px;
  }

  .hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

  .hero h1 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: clamp(48px, 6vw, 80px);
    line-height: 0.95; letter-spacing: -0.01em;
    color: var(--white); margin-bottom: 24px;
    /* Zit op de letters, niet over de foto — zo kan de overlay licht
       blijven zonder dat de kop wegvalt op een lichte foto. */
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  }

  .hero h1 em { color: var(--orange); font-style: normal; }

  .hero-sub {
    color: rgba(255,255,255,0.6);
    font-size: 17px; font-weight: 300;
    max-width: 440px; margin-bottom: 36px;
    line-height: 1.7;
  }

  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

  .btn-primary {
    background: var(--orange);
    color: var(--white);
    border: none; border-radius: var(--radius);
    padding: 14px 28px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 16px;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
  }

  @media (hover: hover) {

    .btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); }

  }

  .btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: var(--radius);
    padding: 12px 28px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600; font-size: 16px;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
    display: inline-flex; align-items: center; gap: 8px;
  }

  @media (hover: hover) {

    .btn-secondary:hover { border-color: var(--orange); color: var(--orange); }

  }

  .hero-stats {
    display: flex; gap: 32px; margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .hero-stat-num {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 32px; color: var(--orange);
    line-height: 1;
  }

  .hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 2px; }

  .hero-visual {
    display: flex; flex-direction: column; gap: 12px;
    align-items: flex-end;
  }

  .hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

  .hero-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: var(--transition);
  }

  @media (hover: hover) {

    .hero-card:hover { background: rgba(232,80,10,0.12); border-color: rgba(232,80,10,0.4); transform: translateY(-2px); }

  }

  /* Categorie nog niet beschikbaar in de shop: niet-klikbaar, geen hover-effect */
  .hero-card.soon { cursor: default; }
  @media (hover: hover) {

    .hero-card.soon:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); transform: none; }

  }
  .hero-card-sub.soon-label { color: rgba(255,255,255,0.3); font-style: italic; }

  .hero-card-icon {
    width: 40px; height: 40px;
    background: var(--orange);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    font-size: 20px;
  }

  .hero-card-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 16px; letter-spacing: 0.04em;
    color: var(--white); text-transform: uppercase;
  }

  .hero-card-sub { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 4px; }

  /* ===== TRUST BAR ===== */
  .trust-bar {
    background: var(--orange);
    padding: 14px 40px;
    /* De volgende USP staat rechts buiten beeld te wachten. Zonder deze
       clipping maakt hij de pagina breder dan het scherm en kun je op
       mobiel opzij scrollen. */
    overflow: hidden;
  }

  /* Roterende USP-balk: één item zichtbaar, schuift van rechts naar
     binnen, blijft ~5s gecentreerd staan, schuift dan naar links weg
     terwijl het volgende van rechts in komt (zoals Coolblue). */
  .trust-bar-inner {
    max-width: 1400px; margin: 0 auto;
    position: relative;
    height: 24px;
  }

  .trust-item {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: var(--white);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1), opacity 0.6s ease;
  }
  .trust-item.active { transform: translateX(0); opacity: 1; }
  .trust-item.prev { transform: translateX(-100%); opacity: 0; }

  /* ── Betaallogo's naast "Veilig betalen" ─────────
     Elk logo krijgt hetzelfde vak; object-fit houdt de verhouding
     intact, zodat een breed logo (Bancontact) en een smal logo
     (PayPal) toch even groot ogen. */
  .betaal-logos {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: 10px; vertical-align: middle;
  }
  .betaal-logos img {
    height: 22px; width: 36px;
    object-fit: contain;
    display: block;
    /* De aangeleverde logo's hebben een witte/gekleurde achtergrond;
       een klein wit vlak met afronding maakt dat rustiger. */
    background: #fff;
    border-radius: 3px;
    padding: 2px 3px;
    box-sizing: border-box;
  }
  /* iDEAL heeft een gele huisstijlachtergrond in plaats van wit */
  .betaal-logos img[src*="betaal-ideal"] { background: #fef38d; }

  /* Zelfde inzoom als bij de betaalmethode-keuze in de checkout: de bron-PNG's
     van Bancontact, Google Pay en Apple Pay hebben ~25% witruimte boven en
     onder, waardoor ze in hetzelfde vak kleiner ogen dan iDEAL en PayPal.
     Padding eraf + object-fit:cover vult het vak; het vak zelf blijft
     even groot, zodat de logorij op één lijn blijft. */
  .betaal-logos img[src*="betaal-bancontact"],
  .betaal-logos img[src*="betaal-googlepay"],
  .betaal-logos img[src*="betaal-applepay"] {
    padding: 0;
    object-fit: cover;
    object-position: center;
  }

  .trust-item svg { flex: none; opacity: 0.8; }

  /* Het mobiele menu hoort hier, in het kritieke deel: staat het pas
     verderop in de stylesheet, dan is het bij het laden heel even een wit
     vlak over de pagina — en zie je het daarna naar rechts wegschuiven.
     De volledige opmaak staat verderop bij MOBILE NAV. */
  .mobile-nav { transform: translateX(100%); visibility: hidden; }

  /* ===== SECTIONS ===== */
  section { padding: 80px 40px; }

  .section-inner { max-width: 1400px; margin: 0 auto; }

  .section-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 10px;
  }

  .section-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1; letter-spacing: -0.01em;
    color: var(--black); margin-bottom: 14px;
  }

  .section-sub {
    color: var(--gray); font-size: 16px; font-weight: 300;
    max-width: 500px; line-height: 1.7;
  }

  .section-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 44px; gap: 20px; flex-wrap: wrap;
  }

  /* ===== CATEGORY GRID ===== */
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .cat-card {
    position: relative;
    background: var(--light-gray);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    aspect-ratio: 4/3;
    display: flex; align-items: flex-end;
  }

  @media (hover: hover) {

    .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

  }
  @media (hover: hover) {

    .cat-card:hover .cat-card-bg { transform: scale(1.04); }

  }

  .cat-card-bg {
    position: absolute; inset: 0;
    transition: transform 0.4s ease;
    display: flex; align-items: center; justify-content: center;
    font-size: 80px;
    background: var(--light-gray);
  }

  .cat-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 55%);
  }

  .cat-card-info {
    position: relative; z-index: 2;
    padding: 20px;
    color: var(--white);
  }

  .cat-card-info h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em;
  }

  .cat-card-info p { font-size: 13px; opacity: 0.75; margin-top: 3px; }

  .cat-badge {
    position: absolute; top: 14px; right: 14px;
    background: var(--orange); color: var(--white);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
    padding: 3px 10px; border-radius: 100px;
    text-transform: uppercase;
  }

  /* ===== PRODUCT GRID ===== */
  .shop-layout { display: block; }

  .filters-sidebar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px;
    position: sticky; top: 100px;
  }

  .filter-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center;
  }

  .filter-group { margin-bottom: 24px; }

  .filter-group-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gray); margin-bottom: 12px;
  }

  .filter-option {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    cursor: pointer; font-size: 14px;
    transition: var(--transition);
    border-bottom: 1px solid var(--light-gray);
  }

  .filter-option:last-child { border-bottom: none; }
  @media (hover: hover) {

    .filter-option:hover { color: var(--orange); }

  }
  .filter-option.active { color: var(--orange); font-weight: 600; }

  .filter-option input[type="checkbox"] { accent-color: var(--orange); width: 16px; height: 16px; cursor: pointer; }

  .filter-count { color: var(--gray); font-size: 12px; margin-left: auto; }

  .shop-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
  }

  .result-count { font-size: 14px; color: var(--gray); }
  .result-count strong { color: var(--black); }

  .sort-select {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 14px;
    font-family: 'Inter', sans-serif; font-size: 14px;
    outline: none; cursor: pointer; background: var(--white);
    color: var(--dark-gray);
  }

  .sort-select:focus { border-color: var(--orange); }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  /* Shop: producten gegroepeerd per categorie */
  .shop-cat + .shop-cat {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
  }
  .shop-cat-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
    color: var(--black); margin-bottom: 20px; text-transform: capitalize;
  }
  .shop-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .product-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    display: flex; flex-direction: column;
  }

  @media (hover: hover) {

    .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--orange);
  }

  }

  @media (hover: hover) {

    .product-card:hover .product-img-overlay { opacity: 1; }

  }

  .product-img-wrap {
    position: relative;
    aspect-ratio: 1;
    background: var(--light-gray);
    overflow: hidden;
  }

  .product-img-wrap .emoji { font-size: 64px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

  .product-img-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: var(--transition);
    gap: 10px;
  }

  .overlay-btn {
    background: var(--white);
    color: var(--black);
    border: none; border-radius: var(--radius);
    padding: 10px 16px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
  }

  .overlay-btn.primary { background: var(--orange); color: var(--white); }

  @media (hover: hover) {

    .overlay-btn:hover { background: var(--orange); color: var(--white); }

  }

  .product-badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--orange); color: var(--white);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px; border-radius: 3px;
  }

  .product-badge.new {
    background: #ff004d;
    border-radius: 100px;
    padding: 4px 12px;
    box-shadow: 0 2px 8px rgba(255,0,77,0.35);
  }

  .product-info { padding: 16px; flex: 1; display: flex; flex-direction: column; }

  .product-cat {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gray); margin-bottom: 6px;
  }

  .product-name {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 16px; line-height: 1.2;
    margin-bottom: 8px; flex: 1;
  }

  .product-meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--gray); margin-bottom: 12px; }

  .product-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

  .product-price {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 20px; color: var(--orange);
  }

  .product-price.range { font-size: 16px; }
  .product-price .price-was { font-size: 13px; color: var(--gray); text-decoration: line-through; display: block; line-height: 1; margin-bottom: 1px; font-weight: 600; }
  .product-price .price-vanaf { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); display: block; line-height: 1; margin-bottom: 1px; }
  .product-badge.sale { background: var(--orange); }

  .add-to-cart {
    background: var(--black);
    color: var(--white); border: none; border-radius: var(--radius);
    padding: 8px 14px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; gap: 6px;
  }

  @media (hover: hover) {

    .add-to-cart:hover { background: var(--orange); }

  }

  /* ============================================================ */
  /* SHOP – gecentreerde categorie-filter + zwevende producttegels */
  /* ============================================================ */
  /* Op de shop-pagina scrollt de hoofd-header weg; de filterbalk wordt de mini-header */
  body.shop-page header { position: static; }

  .shop-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }

  .shop-head-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -0.02em; color: var(--black); text-transform: capitalize;
  }
  .shop-head-title sup {
    font-size: 0.4em; font-weight: 600; color: var(--gray);
    vertical-align: super; margin-left: 4px;
  }
  .shop-head-sub { margin-top: 10px; font-size: 15px; color: var(--gray); }

  .shop-filterbar {
    position: sticky; top: 0; z-index: 900;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 40px; min-height: 44px; padding: 16px 0;
  }
  /* volle-breedte witte achtergrond zodat de balk een mini-header wordt bij scrollen.
     Bewust géén 100vw/50vw-rekensom: dat meet de fysieke viewport en klopt
     niet meer precies bij de site-brede 85%-zoom (zie body {zoom} hierboven),
     wat een balk opleverde die niet tot de rand liep. In plaats daarvan een
     ruime vaste overhang naar beide kanten — body heeft overflow-x:hidden,
     dus dat kan nooit een horizontale scrollbalk veroorzaken, en dekt zo
     altijd tot de rand, ongeacht viewportbreedte of zoom. */
  .shop-filterbar::before {
    content: ''; position: absolute; top: 0; z-index: -1;
    left: -1000px; right: -1000px; height: 100%;
    background: var(--white);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  /* rand + schaduw alleen als de balk daadwerkelijk vastplakt */
  .shop-filterbar.stuck::before {
    border-bottom-color: var(--border);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  }

  .shop-pills {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    max-width: 80%;
  }

  .shop-pill {
    border: 1px solid var(--border); background: var(--white);
    border-radius: 100px; padding: 9px 18px;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 14px;
    color: var(--dark-gray); cursor: pointer; white-space: nowrap;
    transition: var(--transition);
  }
  @media (hover: hover) {

    .shop-pill:hover { border-color: var(--black); color: var(--black); }

  }
  .shop-pill.active {
    background: var(--black); border-color: var(--black); color: var(--white);
  }

  .shop-sort { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 60; }

  .shop-sort-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 14px;
    color: var(--orange); padding: 6px 2px;
  }
  .shop-sort-btn svg { transition: var(--transition); }
  .shop-sort.open .shop-sort-btn svg { transform: rotate(180deg); }

  .shop-sort-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    min-width: 200px; padding: 6px; display: none;
  }
  .shop-sort.open .shop-sort-menu { display: block; }

  .shop-sort-menu button {
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--dark-gray);
    padding: 10px 12px; border-radius: var(--radius); transition: var(--transition);
  }
  @media (hover: hover) {

    .shop-sort-menu button:hover { background: var(--light-gray); }

  }
  .shop-sort-menu button.active { background: var(--light-gray); font-weight: 600; color: var(--black); }

  .shop-tile-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 24px;
  }

  /* Zwevende producttegel (geen card) */
  .shop-tile { cursor: pointer; text-align: center; }

  .shop-tile-img {
    position: relative; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; overflow: visible;
  }
  .shop-tile-img img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.3s ease;
  }
  .shop-tile-img .emoji { font-size: 72px; }
  @media (hover: hover) {

    .shop-tile:hover .shop-tile-img img { transform: scale(1.04); }

  }

  /* Hover-paneel: max 6 variant-chips + zwart plusje (desktop) */
  .shop-tile-hover {
    position: absolute; left: 50%; bottom: -6px; transform: translate(-50%, 8px);
    width: 88%; z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease;
  }
  @media (hover: hover) {

    .shop-tile:hover .shop-tile-hover { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

  }
  .shop-tile-variants {
    background: var(--white); border: 1px solid var(--border);
    box-shadow: var(--shadow); border-radius: 10px;
    padding: 10px; width: 100%;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  }
  .shop-tile-variant {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: var(--dark-gray); background: var(--light-gray);
    border-radius: 4px; padding: 3px 8px; white-space: nowrap;
    transition: var(--transition);
  }
  @media (hover: hover) {

    .shop-tile-variant:hover { background: var(--orange); color: var(--white); }

  }
  .shop-tile-more {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
    color: var(--gray); align-self: center; padding: 3px 4px;
  }
  .shop-tile-add {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--black); color: var(--white); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow); transition: var(--transition);
  }
  @media (hover: hover) {

    .shop-tile-add:hover { background: var(--orange); transform: scale(1.08); }

  }

  .shop-tile-badge {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    background: var(--orange); color: var(--white);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 3px;
  }
  .shop-tile-badge.new {
    background: #ff004d;
    border-radius: 100px;
    font-size: 13px;
    padding: 6px 15px;
  }

  .shop-tile-name {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 16px;
    line-height: 1.3; color: var(--black); margin-bottom: 4px;
  }
  .shop-tile-meta {
    font-size: 14px; color: var(--gray);
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .shop-tile-price { text-align: center; }
  /* "1 stuks" hoort bij elkaar te blijven staan */
  .tile-stuks { white-space: nowrap; }

  /* Ronde +-knop: opent de variantkiezer */
  .shop-tile-plus {
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--white);
    color: var(--black);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .shop-tile-plus:hover { background: var(--orange); border-color: var(--orange); color: var(--white); transform: scale(1.06); }

  }
  .shop-tile-plus:active { transform: scale(0.94); }
  /* Desktop (muis): hover-paneel met chips + zwart plusje; meta-plusje verbergen. */
  @media (hover: hover) {
    .shop-tile-meta .shop-tile-plus { display: none; }
  }
  /* Touch/mobiel: geen hover-paneel, wel het meta-plusje (prijs links, + rechts). */
  @media (hover: none) {
    .shop-tile-hover { display: none; }
    .shop-tile-meta { justify-content: space-between; }
    .shop-tile-price { text-align: left; }
  }
  .shop-tile-meta .tile-price { color: var(--black); font-weight: 600; }
  .shop-tile-meta .tile-price .was {
    color: var(--gray); text-decoration: line-through; font-weight: 500; margin-right: 5px;
  }
  .shop-tile-meta .tile-price .now { color: var(--orange); }
  .shop-tile-meta .sep { margin: 0 7px; color: var(--steel); }

  /* ===== VARIANT-KIEZER MODAL ===== */
  .vp-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(17,17,17,0.5);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
  }
  .vp-overlay.open { display: flex; }
  .vp-card {
    position: relative;
    width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
    background: var(--white); border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    padding: 24px;
    animation: vpIn 0.22s ease;
  }
  @keyframes vpIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .vp-close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    border: none; background: var(--light-gray); color: var(--dark-gray);
    font-size: 22px; line-height: 1; cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .vp-close:hover { background: var(--border); color: var(--black); }

  }
  .vp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-right: 32px; }
  .vp-img {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px;
    background: var(--off-white); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .vp-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .vp-emoji { font-size: 32px; }
  .vp-title {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 18px;
    line-height: 1.25; color: var(--black);
  }
  .vp-label {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 12px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray);
    margin: 14px 0 8px;
  }
  .vp-lengte { display: flex; flex-wrap: wrap; gap: 8px; }
  .vp-lengte-btn {
    flex: 1 1 auto; min-width: 90px;
    border: 1px solid var(--border); background: var(--white); color: var(--dark-gray);
    border-radius: var(--radius); padding: 9px 12px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .vp-lengte-btn:hover { border-color: var(--dark-gray); }

  }
  .vp-lengte-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }
  .vp-rijen { display: flex; flex-direction: column; gap: 6px; }
  .vp-rij {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: 1px solid var(--border); background: var(--white);
    border-radius: var(--radius); padding: 10px 12px;
    cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .vp-rij:hover { border-color: var(--dark-gray); }

  }
  .vp-rij.active { border-color: var(--orange); background: rgba(232,80,10,0.05); }
  .vp-rij-sku { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; color: var(--black); }
  .vp-rij-maat { flex: 1; font-size: 12px; color: var(--gray); }
  .vp-rij-prijs { font-weight: 700; font-size: 14px; color: var(--black); }
  .vp-varianten { display: flex; flex-wrap: wrap; gap: 8px; }
  .vp-variant-btn {
    border: 1px solid var(--border); background: var(--white); color: var(--dark-gray);
    border-radius: var(--radius); padding: 8px 14px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .vp-variant-btn:hover { border-color: var(--dark-gray); }

  }
  .vp-variant-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }
  .vp-leeg, .vp-laden { color: var(--gray); font-size: 14px; padding: 10px 0; }
  .vp-add {
    width: 100%; margin-top: 20px;
    background: var(--orange); color: var(--white); border: none;
    border-radius: var(--radius); padding: 15px;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 15px;
    letter-spacing: 0.04em; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .vp-add:hover { background: var(--orange-dark); }

  }

  @media (max-width: 768px) {
    .vp-overlay { align-items: flex-end; padding: 0; }
    .vp-card {
      max-width: 100%; max-height: 90vh;
      border-radius: 16px 16px 0 0; padding: 22px 18px 28px;
      animation: vpUp 0.26s ease;
    }
    @keyframes vpUp { from { transform: translateY(100%); } to { transform: none; } }
  }

  /* ===== WINKELMAND-ZIJBALK (drawer) ===== */
  .cart-drawer-overlay {
    position: fixed; inset: 0; z-index: 2100;
    background: rgba(17,17,17,0.42);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex; justify-content: flex-end;
  }
  .cart-drawer-overlay.open { opacity: 1; visibility: visible; }
  .cart-drawer {
    position: relative;
    width: 420px; max-width: 92vw; height: 100%;
    background: var(--white);
    box-shadow: -12px 0 48px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22,0.61,0.36,1);
  }
  .cart-drawer-overlay.open .cart-drawer { transform: translateX(0); }
  .cart-drawer-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
  }
  .cart-drawer-titel {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 16px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--black);
  }
  .cart-drawer-close {
    width: 34px; height: 34px; border-radius: 50%;
    border: none; background: var(--light-gray); color: var(--dark-gray);
    font-size: 22px; line-height: 1; cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .cart-drawer-close:hover { background: var(--border); color: var(--black); }

  }
  /* Kolom-flex zodat "Aanbevolen producten" onderaan kan blijven hangen,
     tegen de gratis-verzendbalk aan, in plaats van vastgeplakt onder het
     laatste product in de mand. Zit de mand vol, dan is er geen vrije
     ruimte meer en schuift het blok gewoon mee omlaag. */
  .cart-drawer-body {
    flex: 1 1 auto; overflow-y: auto; padding: 8px 24px 24px;
    display: flex; flex-direction: column;
  }
  .cart-drawer-body > .cart-rec { margin-top: auto; padding-top: 28px; }

  .cart-drawer-leeg { text-align: center; padding: 40px 0 28px; color: var(--gray); }
  .cart-drawer-leeg-icon { font-size: 40px; margin-bottom: 10px; }
  .cart-drawer-leeg p { font-size: 15px; margin-bottom: 16px; }
  .cart-drawer-shop {
    background: var(--black); color: var(--white); border: none;
    border-radius: var(--radius); padding: 12px 22px;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 14px;
    cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .cart-drawer-shop:hover { background: var(--orange); }

  }

  .cart-drawer-items { display: flex; flex-direction: column; }
  .cart-drawer-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px 0; border-bottom: 1px solid var(--border);
  }
  .cart-drawer-thumb {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--radius);
    background: var(--off-white); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer; font-size: 26px;
  }
  .cart-drawer-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cart-drawer-info { flex: 1 1 auto; min-width: 0; }
  .cart-drawer-naam {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 14px;
    line-height: 1.3; color: var(--black); cursor: pointer;
  }
  @media (hover: hover) {

    .cart-drawer-naam:hover { color: var(--orange); }

  }
  .cart-drawer-variant {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--gray);
    margin-top: 2px;
  }
  .cart-drawer-onder {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px;
  }
  .cart-drawer-qty {
    display: flex; align-items: center;
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  }
  .cart-drawer-qty button {
    width: 28px; height: 28px; border: none; background: var(--white);
    color: var(--dark-gray); font-size: 16px; line-height: 1; cursor: pointer;
    transition: var(--transition);
  }
  @media (hover: hover) {

    .cart-drawer-qty button:hover { background: var(--light-gray); }

  }
  .cart-drawer-qty span {
    min-width: 30px; text-align: center; font-size: 13px; font-weight: 600;
  }
  .cart-drawer-prijs { font-weight: 700; font-size: 15px; color: var(--black); }
  .cart-drawer-verwijder {
    flex: 0 0 auto; border: none; background: none; color: var(--gray);
    cursor: pointer; padding: 4px; transition: var(--transition);
  }
  @media (hover: hover) {

    .cart-drawer-verwijder:hover { color: var(--orange); }

  }

  .cart-drawer-foot {
    flex: 0 0 auto; padding: 18px 24px 22px;
    border-top: 1px solid var(--border); background: var(--white);
  }
  .cart-drawer-foot:empty { display: none; }
  .cart-drawer-sub {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 15px;
  }
  .cart-drawer-sub-val { font-weight: 800; font-size: 20px; }
  .cart-drawer-verzend { font-size: 12px; color: var(--gray); margin: 4px 0 14px; }
  .cart-drawer-afrekenen {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--orange); color: var(--white); border: none;
    border-radius: var(--radius); padding: 15px;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 15px;
    letter-spacing: 0.04em; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .cart-drawer-afrekenen:hover { background: var(--orange-dark); }

  }

  /* ── Voortgangsbalk gratis verzending ────────────────────────
     Staat in de voet van het mandje én in het overzicht op de
     winkelwagenpagina. Het busje links van de baan geeft even gas
     zodra de drempel gehaald is. */
  /* Eén balk per land, onder elkaar; de hoogste drempel staat
     bovenaan (België, Duitsland), Nederland onderaan. Drie balken
     onder elkaar, dus de tussenruimte krap houden. */
  .gv-groep { display: flex; flex-direction: column; gap: 11px; margin: 0 0 14px; }
  .cart-summary .gv-groep { margin: 2px 0 18px; }
  .gv { margin: 0; }

  .gv-rij { display: flex; align-items: center; gap: 10px; }

  .gv-auto {
    flex: 0 0 auto; display: flex; color: var(--gray);
    transition: color 0.35s ease;
  }

  .gv-baan {
    position: relative; flex: 1 1 auto; height: 7px;
    background: var(--light-gray); border-radius: 99px;
    overflow: hidden;
  }

  .gv-vul {
    display: block; height: 100%; width: 0;
    background: var(--orange); border-radius: 99px;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.4s ease;
  }

  /* Op een getinte achtergrond valt de lege baan weg tegen het vlak
     (het overzicht op de winkelwagenpagina is exact --light-gray):
     daar een tint donkerder, zodat je ziet hoever je nog moet. */
  .cart-summary .gv-baan,
  .co-extra-box .gv-baan { background: #E2E0DC; }

  .gv-tekst { margin: 7px 0 0; font-size: 12.5px; color: var(--gray); line-height: 1.5; }
  .gv-tekst strong { color: var(--dark-gray); font-weight: 700; }

  /* Drempel gehaald: alles naar groen */
  .gv-gehaald .gv-auto         { color: #00A86B; }
  .gv-gehaald .gv-vul          { background: #00A86B; }
  .gv-gehaald .gv-tekst strong { color: #00A86B; }

  @keyframes gvRijden {
    0%   { transform: translateX(0) rotate(0); }
    14%  { transform: translateX(-3px) rotate(-5deg); }
    46%  { transform: translateX(8px) rotate(4deg); }
    70%  { transform: translateX(-2px) rotate(-2deg); }
    100% { transform: translateX(0) rotate(0); }
  }
  @keyframes gvGlans {
    from { transform: translateX(-110%); }
    to   { transform: translateX(260%); }
  }

  .gv-vier .gv-auto { animation: gvRijden 0.9s cubic-bezier(0.34, 1.4, 0.5, 1); }
  .gv-vier .gv-baan::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
    animation: gvGlans 0.85s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .gv-vul { transition: none; }
    .gv-vier .gv-auto { animation: none; }
    .gv-vier .gv-baan::after { display: none; }
  }

  /* Aanbevolen producten (carousel) */
  .cart-rec { margin-top: 24px; }
  .cart-rec-kop {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 13px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-gray);
    margin-bottom: 12px;
  }
  .cart-rec-wrap { position: relative; }
  .cart-rec-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    /* Verticale marge zodat de hover-schaduw niet abrupt afgesneden wordt:
       overflow-x:auto knipt (per spec) ook de y-as mee. */
    padding: 12px 0 18px;
  }
  .cart-rec-track::-webkit-scrollbar { display: none; }
  .cart-rec-track { scrollbar-width: none; }
  .cart-rec-card {
    flex: 0 0 132px; scroll-snap-align: start;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--white); overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column; transition: var(--transition);
  }
  @media (hover: hover) {

    .cart-rec-card:hover { box-shadow: var(--shadow); border-color: var(--steel); }

  }
  .cart-rec-thumb {
    aspect-ratio: 1/1; background: var(--off-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; overflow: hidden;
  }
  .cart-rec-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cart-rec-naam {
    font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--black);
    padding: 8px 10px 0; min-height: 40px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cart-rec-onder {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px 10px; margin-top: auto;
  }
  .cart-rec-prijs {
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; color: var(--black);
  }
  .cart-rec-add {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--white); color: var(--black);
    font-size: 18px; line-height: 1; cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .cart-rec-add:hover { background: var(--orange); color: var(--white); border-color: var(--orange); }

  }
  .cart-rec-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--white); color: var(--dark-gray);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow); transition: var(--transition);
  }
  @media (hover: hover) {

    .cart-rec-arrow:hover { background: var(--black); color: var(--white); border-color: var(--black); }

  }
  .cart-rec-prev { left: -6px; }
  .cart-rec-next { right: -6px; }
  .cart-rec-wrap.has-more .cart-rec-arrow { display: flex; }

  @media (max-width: 768px) {
    .cart-drawer { width: 100%; max-width: 100%; }
    .cart-rec-arrow { display: none !important; }
  }

  @media (max-width: 1024px) { .shop-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 768px) {
    .shop-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .shop-sort { position: relative; transform: none; margin-top: 14px; }
    /* Filterbalk niet meer als plakkende mini-header op mobiel */
    .shop-filterbar { position: static; flex-direction: column; gap: 8px; }
    .shop-filterbar::before { display: none; }
    .shop-pills { max-width: 100%; }
  }
  @media (max-width: 480px) { .shop-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ===== PRODUCT DETAIL ===== */
  .product-detail { max-width: 1400px; margin: 0 auto; padding: 60px 40px; }

  .breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--gray);
    margin-bottom: 40px;
  }

  .breadcrumb a { color: var(--gray); text-decoration: none; cursor: pointer; }
  @media (hover: hover) {

    .breadcrumb a:hover { color: var(--orange); }

  }
  .breadcrumb .sep { color: var(--border); }
  .breadcrumb .current { color: var(--black); font-weight: 500; }

  .detail-grid { display: grid; grid-template-columns: 520px 1fr; gap: 56px; align-items: start; }
  /* Zonder min-width:0 krimpt een grid-kolom niet onder zijn breedste
     inhoud. De materialentabel duwde daardoor de hele rechterkolom
     (tekst, knoppen, USP's) buiten het scherm op mobiel. */
  .detail-grid > * { min-width: 0; }

  .detail-images { display: flex; flex-direction: column; }

  .detail-main-img {
    width: 100%;
    aspect-ratio: 1;
    background: var(--white);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 120px;
    margin-bottom: 14px; overflow: hidden;
  }

  /* Foto vult het hele kader. object-fit: contain houdt de verhouding
     intact, dus er wordt niets van de productfoto afgesneden. */
  .detail-main-img img {
    width: 100%; height: 100%;
    object-fit: contain;
  }

  .detail-thumbs { display: flex; gap: 10px; }

  .detail-thumb {
    width: 70px; height: 70px;
    border-radius: 4px; border: 2px solid transparent;
    background: var(--light-gray);
    cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; justify-content: center; font-size: 28px;
  }

  .detail-thumb.active { border-color: var(--orange); }

  @media (hover: hover) {

    .detail-thumb:hover { border-color: var(--orange); }

  }

  /* Op de productpagina is de miniatuur een <button>: standaardopmaak van
     een knop weghalen en de foto het vakje laten vullen. */
  button.detail-thumb { padding: 0; overflow: hidden; }
  .detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .detail-thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

  /* Bij veel foto's schuift de rij mee in plaats van de kolom te verbreden. */
  .detail-thumbs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .detail-thumbs::-webkit-scrollbar { display: none; }
  .detail-thumb { flex: 0 0 auto; }

  .detail-info {}

  .detail-cat {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--orange); margin-bottom: 10px;
  }

  .detail-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 40px; line-height: 1.05;
    margin-bottom: 8px;
  }

  .detail-sku { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--gray); margin-bottom: 20px; }

  .detail-price-wrap { margin-bottom: 28px; }

  .detail-price {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 36px; color: var(--orange);
    line-height: 1;
  }

  .detail-price-note { font-size: 13px; color: var(--gray); margin-top: 4px; }

  .detail-desc { font-size: 15px; line-height: 1.75; color: var(--dark-gray); margin-bottom: 28px; }

  .variant-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 10px;
  }

  .variant-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

  .variant-btn {
    border: 2px solid var(--border);
    background: var(--white); border-radius: var(--radius);
    padding: 8px 16px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600; font-size: 14px;
    cursor: pointer; transition: var(--transition);
  }

  .variant-btn.active { border-color: var(--orange); color: var(--orange); background: rgba(232,80,10,0.05); }

  @media (hover: hover) {

    .variant-btn:hover { border-color: var(--orange); color: var(--orange); background: rgba(232,80,10,0.05); }

  }

  /* ── Lengte toggle (LARGE/SMALL) ─────────────── */
  .lengte-toggle { display: flex; gap: 0; margin-bottom: 18px; border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; width: fit-content; }
  .lengte-btn-sub { display:block; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; opacity:.75; margin-top:2px; }
  .lengte-btn {
    padding: 9px 22px; border: none; background: var(--white); cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 14px;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-gray);
    transition: var(--transition); border-right: 2px solid var(--border);
  }
  .lengte-btn:last-child { border-right: none; }
  .lengte-btn.active { background: var(--orange); color: var(--white); }
  @media (hover: hover) {

    .lengte-btn:not(.active):hover { background: var(--light-gray); }

  }

  /* ── Variant tabel ────────────────────────────── */
  .variant-tabel { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
  .variant-tabel th { padding: 9px 12px; background: var(--light-gray); text-align: left; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray); font-weight: 700; white-space: nowrap; }
  .variant-tabel td { padding: 9px 12px; border-top: 1px solid var(--border); color: var(--black); }
  .var-row { cursor: pointer; transition: background 0.15s; }
  @media (hover: hover) {

    .var-row:hover { background: rgba(232,80,10,0.04); }

  }
  .var-row.active { background: rgba(232,80,10,0.08); }
  .var-sku { font-family: 'IBM Plex Mono', monospace; }
  .var-row.active .var-sku { color: var(--orange); font-weight: 700; }
  .variant-loading { padding: 20px 0; color: var(--gray); font-size: 14px; }

  /* ── Lange variantenlijst: eigen scrollgebied ──────
     Vanaf 9 maten krijgt de tabel een vaste hoogte, zodat de
     winkelwagenknop en de USP's eronder in beeld blijven. Rand en
     afronding verhuizen naar de wrapper — anders scrollen die mee. */
  .variant-tabel-wrap.is-scroll {
    /* Hoogte is bewust krap: zo blijven het "Geselecteerd"-blok én de
       winkelwagenknop eronder in beeld, zonder te hoeven scrollen.
       Eén getal om bij te stellen als de knop toch net wegvalt. */
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 20px;
    /* Subtiele schaduw onderin als hint dat er meer is */
    background:
      linear-gradient(var(--white) 30%, rgba(255,255,255,0)) top / 100% 24px no-repeat,
      linear-gradient(rgba(255,255,255,0), var(--white) 70%) bottom / 100% 24px no-repeat,
      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.10), rgba(0,0,0,0)) bottom / 100% 10px no-repeat;
    background-attachment: local, local, scroll;
  }
  .variant-tabel-wrap.is-scroll .variant-tabel {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    overflow: visible;          /* anders werkt de plakkende kop niet */
  }
  /* Kolomkoppen blijven staan tijdens het scrollen */
  .variant-tabel-wrap.is-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--border);
  }

  .variant-telling {
    float: right;
    font-weight: 400;
    color: var(--gray);
    text-transform: none;
    letter-spacing: 0;
  }

  .qty-add {
    display: flex; gap: 12px; align-items: center; margin-bottom: 20px;
  }

  .qty-control {
    display: flex; align-items: center;
    border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden;
  }

  .qty-btn {
    background: var(--light-gray); border: none;
    /* Expliciete kleur: zonder deze regel kleurt iOS Safari de − en +
       blauw, als een systeemknop. */
    color: var(--orange);
    width: 40px; height: 48px;
    font-size: 18px; cursor: pointer; transition: var(--transition);
    font-weight: 600;
  }

  @media (hover: hover) {

    .qty-btn:hover { background: var(--orange); color: var(--white); }

  }

  .qty-input {
    width: 56px; border: none; outline: none;
    text-align: center; font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 18px; height: 48px;
    -moz-appearance: textfield; appearance: textfield;
  }

  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }

  .btn-add-detail {
    flex: 1; background: var(--orange); color: var(--white);
    border: none; border-radius: var(--radius);
    padding: 0 20px; height: 48px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; transition: var(--transition); white-space: nowrap;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }

  @media (hover: hover) {

    .btn-add-detail:hover { background: var(--orange-dark); transform: translateY(-2px); }

  }

  .detail-features {
    border-top: 1px solid var(--border);
    padding-top: 24px; margin-top: 8px;
    display: flex; flex-direction: column; gap: 12px;
  }

  .detail-feature {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; color: var(--dark-gray);
    flex-wrap: wrap;   /* logo's mogen op een tweede regel bij weinig ruimte */
  }

  .detail-feature svg { color: var(--orange); flex-shrink: 0; }
  /* De rij heeft gap:12px en de vlag zelf nog eens 6px marge; samen te
     veel lucht tussen "…in NL" en het vlaggetje. Die marge halen we er
     hier weer af, zodat het er strak tegenaan staat. */
  .detail-feature .maq-vlag { margin-left: -6px; }
  /* Op de productpagina staat de tekst links; de logo's sluiten
     er direct op aan in plaats van op de regel eronder. */
  .detail-feature .betaal-logos { margin-left: 2px; gap: 8px; }
  /* Op de productpagina is meer ruimte dan in de trust-bar, dus de
     logo's mogen daar een maat groter. */
  .detail-feature .betaal-logos img {
    height: 30px; width: 48px;
    padding: 3px 4px;
    border-radius: 4px;
  }

  /* ===== CART ===== */
  .cart-layout { max-width: 1100px; margin: 0 auto; padding: 60px 40px; }

  .cart-layout h1, .cart-layout .pagina-kop {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 42px; margin-bottom: 40px;
  }

  .cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }

  .cart-items {}

  .cart-item {
    display: grid; grid-template-columns: 80px 1fr auto;
    gap: 20px; align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    animation: fadeIn 0.3s ease;
  }

  .cart-item-img {
    width: 80px; height: 80px;
    background: var(--light-gray); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; border: 1px solid var(--border);
  }

  .cart-item-name {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 18px;
  }

  .cart-item-variant { font-size: 13px; color: var(--gray); margin-top: 2px; }

  .cart-item-price { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 16px; color: var(--orange); margin-top: 8px; }

  .cart-item-actions { display: flex; align-items: center; gap: 16px; flex-direction: column; align-items: flex-end; }

  .cart-qty {
    display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  }

  .cart-qty-btn {
    background: var(--light-gray); border: none;
    color: var(--orange);            /* anders blauw op iOS, zie .qty-btn */
    width: 32px; height: 32px; cursor: pointer; font-size: 16px; font-weight: 600;
    transition: var(--transition);
  }

  @media (hover: hover) {

    .cart-qty-btn:hover { background: var(--orange); color: var(--white); }

  }

  .cart-qty-num {
    width: 40px; text-align: center;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 15px;
    border: none; outline: none;
    -moz-appearance: textfield; appearance: textfield;
  }

  .cart-qty-num::-webkit-outer-spin-button,
  .cart-qty-num::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }

  .cart-item-total { font-family: 'IBM Plex Sans', sans-serif; font-weight: 800; font-size: 20px; }

  .remove-btn {
    background: none; border: none; cursor: pointer;
    color: var(--gray); font-size: 13px; text-decoration: underline;
    transition: var(--transition);
  }

  @media (hover: hover) {

    .remove-btn:hover { color: #e00; }

  }

  .cart-summary {
    background: var(--light-gray);
    border-radius: 8px; padding: 28px;
    position: sticky; top: 100px;
  }

  .cart-summary h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 22px; margin-bottom: 20px;
  }

  .summary-row {
    display: flex; justify-content: space-between;
    padding: 10px 0; font-size: 15px;
    border-bottom: 1px solid var(--border);
  }

  .summary-row:last-of-type { border-bottom: none; }

  .summary-row.total {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 22px;
    padding-top: 16px; margin-top: 4px;
    border-top: 2px solid var(--black);
  }

  .summary-row.total .val { color: var(--orange); }

  .checkout-btn {
    width: 100%;
    background: var(--orange); color: var(--white);
    border: none; border-radius: var(--radius);
    padding: 16px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em;
    cursor: pointer; transition: var(--transition);
    margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px;
  }

  @media (hover: hover) {

    .checkout-btn:hover { background: var(--orange-dark); transform: translateY(-2px); }

  }

  .secure-note {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; color: var(--gray); margin-top: 12px;
    text-align: center;
  }
  .secure-note svg { color: var(--orange); flex-shrink: 0; }

  .empty-cart { text-align: center; padding: 80px 20px; }
  .empty-cart .icon { font-size: 64px; margin-bottom: 16px; }
  .empty-cart h3 { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 28px; margin-bottom: 8px; }
  .empty-cart p { color: var(--gray); margin-bottom: 24px; }

  /* ===== CHECKOUT ===== */
  .checkout-layout { max-width: 1000px; margin: 0 auto; padding: 60px 40px; }

  /* Verzendopties */
  .shipping-options { display: flex; flex-direction: column; gap: 10px; }
  .shipping-option {
    display: flex; align-items: center; gap: 14px;
    border: 2px solid var(--border); border-radius: 6px;
    padding: 14px 16px; cursor: pointer; transition: var(--transition);
    background: var(--white);
  }
  @media (hover: hover) {

    .shipping-option:hover { border-color: var(--orange); background: rgba(232,80,10,0.03); }

  }
  .shipping-option.active { border-color: var(--orange); background: rgba(232,80,10,0.06); }
  .shipping-option input[type=radio] { accent-color: var(--orange); width: 18px; height: 18px; flex-shrink: 0; }
  .shipping-option-info { flex: 1; }
  .shipping-option-naam { font-weight: 600; font-size: 14px; color: var(--black); }
  .shipping-option-levertijd { font-size: 12px; color: var(--gray); margin-top: 2px; }
  .shipping-option-prijs { font-family: 'IBM Plex Sans', sans-serif; font-weight: 800; font-size: 16px; color: var(--orange); }

  /* Info-tooltip links van de prijs bij een verzendmethode met extra info
     (ingesteld in het beheer). Puur CSS: hover/focus toont het blokje. */
  .shipping-info { position: relative; display: inline-flex; flex-shrink: 0; }
  .shipping-info-icon {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--gray); color: var(--gray); background: none;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 11px;
    line-height: 1; display: flex; align-items: center; justify-content: center;
    cursor: help; padding: 0; transition: var(--transition);
  }
  .shipping-info-icon:focus-visible {
    border-color: var(--orange); color: var(--orange); outline: none;
  }

  @media (hover: hover) {

    .shipping-info-icon:hover {
    border-color: var(--orange); color: var(--orange); outline: none;
  }

  }
  .shipping-info-tip {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content; max-width: 240px;
    background: var(--black); color: var(--white);
    font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left;
    border-radius: 6px; padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
  }
  .shipping-info-tip::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--black);
  }
  .shipping-info-tip a { color: var(--orange-light, #FFB088); display: block; margin-top: 6px; font-weight: 600; text-decoration: underline; }
  /* .open wordt door een tik gezet (maqInfoTip in maquett.js). Op een
     telefoon bestaat hover niet, en Safari geeft een knop bij een tik ook
     geen focus — zonder deze klasse blijft de tekst daar dus onbereikbaar. */
  .shipping-info:focus-within .shipping-info-tip,
  .shipping-info.open .shipping-info-tip {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  @media (hover: hover) {

    .shipping-info:hover .shipping-info-tip {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  }
  /* Op smalle schermen kan de bubble anders buiten beeld vallen. */
  @media (max-width: 480px) {
    .shipping-info-tip { left: auto; right: -8px; transform: translateY(4px); max-width: 200px; }
    .shipping-info-tip::after { left: auto; right: 14px; transform: none; }
    .shipping-info:focus-within .shipping-info-tip,
    .shipping-info.open .shipping-info-tip { transform: translateY(0); }
    @media (hover: hover) {
      .shipping-info:hover .shipping-info-tip { transform: translateY(0); }
    }
  }
  .shipping-loading { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 14px; padding: 12px 0; }
  .shipping-loading::before { content: ''; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--orange); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
  .shipping-hint { color: var(--gray); font-size: 14px; padding: 12px 0; }
  .shipping-fallback-note { font-size: 12px; color: var(--gray); margin-top: 8px; padding: 6px 10px; background: rgba(0,0,0,0.04); border-radius: 4px; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .checkout-layout h1, .checkout-layout .pagina-kop {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 42px; margin-bottom: 40px;
  }

  .checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; }

  .checkout-section {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 8px; padding: 28px; margin-bottom: 20px;
  }

  .checkout-section-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 2px solid var(--orange);
    display: flex; align-items: center; gap: 10px;
  }

  .checkout-section-title .num {
    /* flex: 0 0 — anders knijpt een lange titel (stap 5) het rondje tot
       een ovaal. letter-spacing: 0 — de 0.06em van de titel telt anders
       als witruimte áchter het cijfer, waardoor het links van het midden
       staat. line-height: 1 houdt het ook verticaal in het midden. */
    flex: 0 0 28px; width: 28px; height: 28px;
    background: var(--orange); color: var(--white);
    border-radius: 50%;
    font-size: 14px; font-weight: 800; letter-spacing: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }

  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-row.full { grid-template-columns: 1fr; }

  .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

  .form-group label {
    font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--dark-gray);
  }

  .form-group input, .form-group select {
    border: 2px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px;
    font-family: 'Inter', sans-serif; font-size: 15px;
    outline: none; transition: var(--transition); background: var(--white);
    color: var(--black);
  }

  .form-group input:focus, .form-group select:focus { border-color: var(--orange); }
  .form-hint { font-size: 12px; color: var(--gray); line-height: 1.5; margin-top: 4px; }

  .payment-methods { display: flex; flex-direction: column; gap: 10px; }

  .payment-option {
    border: 2px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    cursor: pointer; transition: var(--transition);
    display: flex; align-items: center; gap: 14px;
    font-size: 15px; font-weight: 500;
  }

  .payment-option.active { border-color: var(--orange); background: rgba(232,80,10,0.04); }

  @media (hover: hover) {

    .payment-option:hover { border-color: var(--orange); }

  }

  .payment-icon {
    width: 40px; height: 28px;
    border-radius: 4px; background: var(--light-gray);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    overflow: hidden;
  }
  /* Echte betaallogo's i.p.v. emoji: elk logo krijgt hetzelfde vak,
     object-fit houdt de verhouding intact. */
  .payment-icon img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 3px 4px;
    box-sizing: border-box;
    display: block;
    background: #fff;
  }
  .payment-icon--ideal img { background: #fef38d; }
  /* Bancontact, Google Pay en Apple Pay hebben veel witruimte in het bronbestand,
     waardoor ze in hetzelfde vak kleiner ogen dan iDEAL/PayPal. Padding eraf en
     iets inzoomen; .payment-icon heeft overflow:hidden, dus het blijft netjes. */
  .payment-option[data-methode="bancontact"] .payment-icon img,
  .payment-option[data-methode="googlepay"]  .payment-icon img,
  .payment-option[data-methode="applepay"]   .payment-icon img {
    padding: 0;
    transform: scale(1.2);
  }
  /* Bancontact en Google Pay hebben nog meer marge in het bronbestand dan Apple Pay. */
  .payment-option[data-methode="bancontact"] .payment-icon img,
  .payment-option[data-methode="googlepay"]  .payment-icon img {
    transform: scale(1.35);
  }

  .order-summary-box { background: var(--off-white); border-radius: 8px; padding: 24px; position: sticky; top: 100px; }

  .order-summary-box h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 20px; margin-bottom: 20px;
  }

  .order-item { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }

  .order-item-img {
    width: 54px; height: 54px;
    background: var(--light-gray); border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; border: 1px solid var(--border);
    flex-shrink: 0;
  }

  .order-item-name { font-size: 14px; font-weight: 500; }
  .order-item-variant { font-size: 12px; color: var(--gray); }
  .order-item-price { font-weight: 700; margin-left: auto; white-space: nowrap; }

  .order-totals { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px; }

  .place-order-btn {
    width: 100%;
    background: var(--orange); color: var(--white);
    border: none; border-radius: var(--radius);
    padding: 16px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em;
    cursor: pointer; transition: var(--transition);
    margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px;
  }

  @media (hover: hover) {

    .place-order-btn:hover { background: var(--orange-dark); transform: translateY(-2px); }

  }

  /* ── Laatste stap van de checkout ────────────────────────────
     Staan in de linkerkolom, onder de stappen, en zijn dus vanzelf
     even breed als de stapblokken. Het besteloverzicht houdt zijn
     eigen kolom rechts. */
  .checkout-extra:empty { display: none; }
  .checkout-extra { margin-top: 24px; }

  /* Zelfde kader en binnenmarge als .checkout-section, maar getint:
     het hoort in de rij, maar is geen stap. */
  .co-extra-box {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px 28px 26px;
  }
  /* In dit blok zijn de balken de kop van het kaartje: iets meer lucht
     eronder, en de aanbevelingen sluiten er direct op aan. */
  .co-extra-box .gv-groep { margin: 0; }
  .co-extra-box .gv-groep + .cart-rec { margin-top: 22px; }
  .co-extra-box .cart-rec { margin-top: 0; }

  /* De track laten doorlopen tot de ware rand van het kaartje: zonder dit
     stopt hij bij de binnenmarge van .co-extra-box, waardoor het laatste
     zichtbare product halverwege afgekapt wordt mét een lelijk stuk lege
     ruimte erna. Marge terugzetten lost dat op, en geeft de hover-schaduw
     tegelijk de ruimte om niet abrupt af te snijden (overflow-x:auto
     knipt ook verticaal mee).

     BEWUST margin op het eerste/laatste kaartje, geen padding-left/right
     op de track zelf: padding aan de "rust-kant" (scrollLeft:0) van een
     horizontaal scrollend vak wordt door browsers niet altijd meteen
     getekend — pas na een keer scrollen (en soms weer terug-snappend
     verdwijnend) verscheen die ruimte dan. Margin op het kind-element
     heeft dat probleem niet. */
  .co-extra-box .cart-rec-wrap { margin: 0 -28px; }
  .co-extra-box .cart-rec-track { padding-left: 0; padding-right: 0; }
  .co-extra-box .cart-rec-track > .cart-rec-card:first-child { margin-left: 40px; }
  .co-extra-box .cart-rec-track > .cart-rec-card:last-child { margin-right: 40px; }
  /* Ook aanhouden als de carousel terugsnapt naar het begin; anders schuift
     het eerste kaartje na een keer scrollen alsnog tegen de rand. */
  .co-extra-box .cart-rec-track { scroll-padding-left: 40px; }
  .co-extra-box .cart-rec-prev { left: 22px; }
  .co-extra-box .cart-rec-next { right: 22px; }

  /* Zelfde verhaal in de winkelmandje-zijbalk (.cart-drawer-body heeft
     24px zijmarge i.p.v. 28px). Het eerste kaartje krijgt bewust méér dan
     die 24px (36px): een kaartje met eigen rand oogt bij exact dezelfde
     inspringing als platte tekst toch alsof het tegen de rand aan plakt. */
  .cart-drawer-body .cart-rec-wrap { margin: 0 -24px; }
  .cart-drawer-body .cart-rec-track { padding-left: 0; padding-right: 0; }
  .cart-drawer-body .cart-rec-track > .cart-rec-card:first-child { margin-left: 40px; }
  .cart-drawer-body .cart-rec-track > .cart-rec-card:last-child { margin-right: 40px; }
  /* Snapt de carousel terug naar het begin, dan die inspringing ook
     aanhouden — anders schuift het eerste kaartje alsnog tegen de rand. */
  .cart-drawer-body .cart-rec-track { scroll-padding-left: 40px; }
  .cart-drawer-body .cart-rec-prev { left: 28px; }
  .cart-drawer-body .cart-rec-next { right: 28px; }

  .checkout-afronden { margin-top: 24px; }

  .co-akkoord {
    font-size: 13px; color: var(--gray); line-height: 1.6;
    margin: 0 0 14px;
  }
  .co-akkoord a { color: var(--orange); text-decoration: underline; }
  @media (hover: hover) {

    .co-akkoord a:hover { color: var(--orange-dark); }

  }

  .checkout-afronden .place-order-btn { margin-top: 0; }

  /* ===== SUCCESS ===== */
  .success-page { text-align: center; padding: 100px 40px; max-width: 600px; margin: 0 auto; }
  .success-icon { font-size: 80px; margin-bottom: 24px; }
  .success-page h2 { font-family: 'IBM Plex Sans', sans-serif; font-weight: 800; font-size: 48px; margin-bottom: 12px; }
  .success-page p { font-size: 17px; color: var(--gray); line-height: 1.7; margin-bottom: 32px; }

  /* ===== FOOTER ===== */
  footer {
    background: var(--black);
    color: rgba(255,255,255,0.6);
    padding: 60px 40px 30px;
    margin-top: 80px;
  }

  .footer-inner { max-width: 1400px; margin: 0 auto; }

  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }

  .footer-logo { margin-bottom: 16px; }
  .footer-logo img { height: 40px; filter: brightness(0) invert(1); }

  .footer-about { font-size: 14px; line-height: 1.7; max-width: 260px; }

  .footer-contact { display: flex; flex-direction: column; gap: 10px; max-width: 260px; }

  .footer-contact-adres {
    font-size: 14px; line-height: 1.7;
    color: rgba(255,255,255,0.5);
    white-space: pre-line;
  }

  .footer-contact-item {
    font-size: 14px; color: rgba(255,255,255,0.5);
    text-decoration: none; transition: var(--transition);
  }

  @media (hover: hover) {

    .footer-contact-item:hover { color: var(--orange); }

  }

  .footer-col-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--white); margin-bottom: 16px;
  }

  .footer-link {
    display: block; font-size: 14px; color: rgba(255,255,255,0.5);
    text-decoration: none; margin-bottom: 10px;
    transition: var(--transition); cursor: pointer;
  }

  @media (hover: hover) {

    .footer-link:hover { color: var(--orange); }

  }

  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 28px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
    font-size: 13px;
  }

  .footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; }

  /* ===== LAND-DROPDOWN ===== */
  .land-wrap { position: relative; }

  .land-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
    display: none;
  }

  .land-dropdown.open { display: block; }

  .land-item {
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    color: var(--dark-gray);
    transition: background 0.15s;
  }

  .land-item.active { background: var(--off-white); color: var(--black); }

  @media (hover: hover) {

    .land-item:hover { background: var(--off-white); color: var(--black); }

  }

  .land-item.prioriteit { font-weight: 500; }

  .land-separator {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
  }

  /* ===== VELD-VALIDATIE ===== */
  .veld-fout {
    font-size: 12px;
    color: #C0392B;
    margin-top: 4px;
    display: none;
  }
  .veld-fout.zichtbaar { display: block; }
  .form-group input.fout { border-color: #C0392B; }
  .form-group input.goed { border-color: #27AE60; }

  /* ===== NOTIFICATION =====
     Bewust bovenin het midden i.p.v. rechtsonder: die hoek viel precies
     op/naast de afreken-knop en werd daardoor als hinderlijk ervaren. */
  .notification {
    position: fixed; top: 24px; left: 50%; z-index: 9999;
    background: var(--white); color: var(--black);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 13px 22px;
    font-size: 14.5px; font-weight: 600;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    display: none;
    max-width: calc(100vw - 32px);
    text-align: center;
  }

  .notification.show {
    display: flex; align-items: center; gap: 10px;
    transform: translateX(-50%);
    animation: slideDown 0.3s ease;
  }

  /* Klein oranje bolletje vooraan, als merkherkenbaar accent nu het
     linker oranje randje (paste niet meer op een pil-vorm) is vervallen. */
  .notification.show::before {
    content: ''; flex-shrink: 0;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--orange);
  }

  /* Op telefoon: iets compacter, maar zelfde bovenin-gecentreerde positie */
  @media (max-width: 768px) {
    .notification {
      top: 16px;
      max-width: calc(100vw - 24px);
      padding: 11px 18px;
      font-size: 13px;
    }
  }

  .notif-undo {
    background: none; border: none; cursor: pointer;
    color: var(--orange); font-family: inherit;
    font-size: 14px; font-weight: 700; text-decoration: underline;
    padding: 0 0 0 6px; white-space: nowrap;
  }

  @media (hover: hover) {

    .notif-undo:hover { color: var(--white); }

  }

  @keyframes slideDown { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

  /* ===== MOBILE NAV ===== */
  .mobile-nav {
    display: flex; position: fixed; inset: 0; z-index: 2000;
    background: var(--white);
    flex-direction: column;
    padding: 80px 30px 40px;
    gap: 8px;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22,0.61,0.36,1), visibility 0.32s;
  }

  .mobile-nav.open { transform: translateX(0); visibility: visible; }

  .mobile-nav-close {
    position: absolute; top: 18px; right: 18px;
    background: none; border: none; cursor: pointer;
    font-size: 24px; color: var(--black);
  }

  .mobile-nav a {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--black); text-decoration: none;
    padding: 12px 0; border-bottom: 1px solid var(--border);
    cursor: pointer;
  }

  @media (hover: hover) {

    .mobile-nav a:hover { color: var(--orange); }

  }

  /* ===== MOBILE NAV DROPDOWN ===== */
  .mobile-nav-group { display: flex; flex-direction: column; }
  .mobile-nav-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .mobile-sub-caret { flex: none; transition: transform 0.28s ease; }
  .mobile-nav-group.open .mobile-sub-caret { transform: rotate(180deg); color: var(--orange); }
  .mobile-nav-group.open > .mobile-nav-parent { color: var(--orange); }
  .mobile-nav-sub {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .mobile-nav-group.open .mobile-nav-sub { max-height: 260px; }
  .mobile-nav-sub a {
    font-size: 20px;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--dark-gray);
    padding: 10px 0 10px 18px;
    border-bottom: 1px solid var(--border);
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1024px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .shop-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filters-sidebar { position: static; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-images { max-width: 520px; }
    /* Eén kolom: de stappen staan nu in dezelfde kolom als het
       aanbevolen-blok en de betaalknop, dus zonder ingrijpen zou het
       besteloverzicht ná de betaalknop belanden. Met display:contents
       worden de kinderen van de linkerkolom losse rasteritems, zodat we
       het overzicht er weer tussen kunnen schuiven: stappen →
       aanbevolen → overzicht → akkoord + betalen. */
    .checkout-grid { display: flex; flex-direction: column; }
    .checkout-grid > div:first-child { display: contents; }
    .checkout-extra                  { order: 1; }
    .checkout-grid > div:last-child  { order: 2; }
    .checkout-afronden               { order: 3; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 768px) {
    /* Auto-hide header: verbergt bij scrollen omlaag, komt terug bij omhoog */
    header { position: sticky; top: 0; }
    header.nav-hidden { transform: translateY(-100%); }
    .header-main { padding: 0 16px; height: 68px; }
    .logo-wrap img { height: 24px; }
    nav { display: none; }
    .search-bar { display: none; }
    .mobile-menu-btn { display: flex; }
    .header-actions { gap: 6px; }
    /* Winkelwagen wordt een rond icoonknopje zonder tekst */
    .cart-label { display: none; }
    .cart-btn {
      padding: 0; gap: 0;
      width: 42px; height: 42px; border-radius: 50%;
      justify-content: center;
    }
    .cart-btn .cart-count {
      position: absolute; top: -3px; right: -3px;
      width: 18px; height: 18px; font-size: 11px;
      border: 2px solid var(--white);
    }
    section { padding: 50px 20px; }
    /* Hero flink langer: de USP-balk komt zo ~100px boven de onderkant
       van het scherm te staan. De achtergrondfoto's vullen de hero via
       position:absolute + background-size:cover en groeien dus vanzelf mee. */
    /* lvh = de schermhoogte zoals hij is wanneer de balken van de browser
       weg zijn geschoven — de grootste stand, en net als svh een vaste
       maat. Vandaar deze en niet het gewone vh: vh verandert mee zodra de
       adresbalk verschijnt of verdwijnt, en dan springt de hero tijdens
       het scrollen. Met lvh staat de hoogte vast én is de hero zo lang
       mogelijk. De vh-regel blijft als terugval staan voor oudere
       toestellen: die negeren de regel eronder gewoon.

       Die 100px eronder is de ruimte die overblijft voor de oranje
       USP-balk. Wil je de hero langer of korter, draai dan aan dat getal. */
    .hero { min-height: calc(100vh - 100px); }
    .hero { min-height: calc(100lvh - 100px); }
    /* Mobiel: geen donkere waas over de foto's. De hero-foto's zijn hier
       speciaal voor de telefoon uitgezocht en die wil je zien zoals ze
       zijn — de kleurlagen die op desktop voor contrast zorgen, gaan
       daarom uit. De kop houdt zijn leesbaarheid via de schaduw hieronder
       in plaats van via een filter over de foto. */
    .hero-bg,
    .hero-grid,
    .hero-accent { display: none; }
    /* Op een lager scherm moet er iets van de foto af. Dat gebeurt aan de
       BOVENkant: het onderwerp staat bij deze foto's onderin, dus die rand
       blijft heel. transform-origin hoort daar bij te passen, anders duwt
       de Ken Burns-zoom de onderkant alsnog uit beeld. */
    .hero-slide {
      background-position: center bottom;
      transform-origin: bottom center;
    }
    .hero h1,
    .hero-content .cs-subline { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
    .hero-content { grid-template-columns: 1fr; padding: 32px 20px 60px; gap: 40px; }
    .hero-visual { display: none; }
    /* Mobiel: subtekst + statistieken weglaten voor een strakkere hero */
    .hero-sub { display: none; }
    .hero-stats { display: none; }
    /* Mobiel: kop gecentreerd, knoppen gestapeld + gecentreerd,
       "Over Maquettshop" boven "Bekijk alle producten" */
    .hero-content > div { text-align: center; }
    .hero-actions {
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-top: 32px;
    }
    .hero-actions .btn-secondary { order: -1; }
    .hero-actions button {
      width: 100%;
      max-width: 340px;
      justify-content: center;
    }
    .cat-grid { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .shop-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cart-grid { grid-template-columns: 1fr; }
    .cart-layout { padding: 40px 20px; }
    .checkout-layout { padding: 40px 20px; }
    .product-detail { padding: 40px 20px; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    /* Mobiel: zelfde roterende balk, iets compacter */
    .trust-bar { padding: 14px 20px; }
    .trust-bar-inner { height: 20px; }
    .trust-item { font-size: 13px; }
    .betaal-logos img { height: 18px; width: 30px; }
    .betaal-logos { gap: 5px; margin-left: 7px; }
    /* Op de productpagina iets groter dan in de trust-bar, maar wel
       kleiner dan op desktop. Zelfde specificiteit als de regel
       hierboven, anders wint die desktopmaat op mobiel. */
    .detail-feature .betaal-logos img { height: 24px; width: 38px; padding: 2px 3px; }
    /* Kop en knop naast elkaar houden i.p.v. stapelen: de knop is klein
       genoeg om rechts van de titel te passen. */
    .section-header {
      flex-direction: row; align-items: flex-end;
      justify-content: space-between; gap: 14px; flex-wrap: nowrap;
    }
    /* Alleen het tekstblok mag krimpen. Alles wat daarna komt (knop of
       pijlnavigatie) houdt zijn maat — anders worden ronde knoppen ovaal. */
    .section-header > *:first-child { min-width: 0; }
    .section-header > *:not(:first-child) { flex: 0 0 auto; }
    .section-header .btn-primary {
      align-self: center;
      padding: 9px 14px; font-size: 12px; letter-spacing: .04em;
      white-space: nowrap;
    }
    .detail-grid { gap: 28px; }
    .detail-title { font-size: 32px; }
    .breadcrumb { flex-wrap: wrap; }
  }

  @media (max-width: 480px) {
    /* Header krap houden: op smalle toestellen (320-360px) liepen het
       logo, de taalkiezer, het winkelwagentje en de menuknop samen net
       buiten het scherm, waardoor je de pagina opzij kon schuiven. */
    .header-main { padding: 0 12px; }
    .header-actions { gap: 4px; }
    .logo-wrap img { height: 20px; }
    /* Iets specifieker dan de regel die i18n-frontend.js zelf injecteert,
       anders wint die (die stijl staat later in de <head>). */
    .maq-taalkiezer .maq-taalkiezer-knop { padding: 5px 7px; font-size: .72rem; gap: 4px; }

    /* Basis: compactere secties + koppen */
    section { padding: 40px 16px; }
    .section-title { font-size: 26px; }
    .section-sub { font-size: 15px; }
    .section-header { margin-bottom: 24px; }

    /* Hero */
    .hero h1 { font-size: 40px; }

    /* Trust bar – roterende balk. Elke USP blijft op één regel; past hij
       niet, dan wordt de tekst kleiner in plaats van dat hij afbreekt. */
    .trust-bar { padding: 12px 10px; }
    .trust-bar-inner { height: 20px; }
    .trust-item {
      /* gap in em: krimpt mee als maqUspPassend() het lettertype verkleint */
      font-size: clamp(9px, 3vw, 12px); gap: 0.5em;
      white-space: nowrap; text-align: center; line-height: 1.2;
      letter-spacing: 0.04em;
    }
    /* In em, zodat ze meekrimpen als maqUspPassend() het lettertype
       verkleint om een lange vertaling passend te krijgen. */
    .trust-item svg { width: 1.25em; height: 1.25em; }
    .trust-item .maq-vlag { width: 1.35em; height: 0.95em; margin-left: 0.35em; }

    /* Shop */
    .shop-head-title { font-size: 28px; }
    .shop-tile-grid { gap: 22px 12px; }
    .shop-tile-name { font-size: 14px; }
    .shop-tile-meta { font-size: 13px; justify-content: space-between; }
    .shop-tile-price { text-align: left; }
    /* Geen hover-animatie op telefoon: paneel weg, +-knop tonen, geen image-zoom */
    .shop-tile-hover { display: none; }
    .shop-tile-meta .shop-tile-plus { display: flex; }
    @media (hover: hover) {

      .shop-tile:hover .shop-tile-img img { transform: none; }

    }
    .product-grid { grid-template-columns: 1fr; }
    .shop-cat-grid { grid-template-columns: 1fr; }

    /* Layout-paddings compacter */
    .cart-layout, .checkout-layout, .product-detail { padding: 28px 16px; }
    .over-sectie { padding: 40px 16px; }

    /* Productdetail */
    .detail-main-img { min-width: 0; min-height: 0; }
    .detail-title { font-size: 26px; }
    .variant-tabel { font-size: 12px; }
    .variant-tabel th, .variant-tabel td { padding: 7px 8px; }
    /* Op een telefoon is 360px te veel van het scherm */
    .variant-tabel-wrap.is-scroll { max-height: 230px; }
    /* Toevoegen-knop links + hoeveelheid rechts op één lijn */
    .qty-add { gap: 10px; align-items: center; }
    .btn-add-detail { font-size: 13px; padding: 0 14px; height: 50px; white-space: normal; line-height: 1.15; }
    .btn-add-detail svg { display: none; }
    .qty-control { flex: 0 0 auto; }
    .qty-btn { width: 34px; height: 50px; font-size: 16px; }
    .qty-input { width: 42px; height: 50px; font-size: 16px; }

    /* Over ons – merklogo's onder elkaar */
    .merken-rij { gap: 24px; }

    /* Wizard "wat wil je bouwen" */
    .wb-title { font-size: 21px; }

    /* Categorie-banner */
    .cat-banner { min-height: 280px; }
    .cat-banner-inner { padding: 28px 16px; }

    /* Afwerking */
    .afw-body, .afw-item-reverse .afw-body { padding: 24px 16px; }

    /* Tips */
    .tips-cta { padding: 26px 18px; }

    /* Op maat */
    .opmaat-hero { height: 240px; }
    .opmaat-hero-titel { font-size: 34px; }
    .opmaat-hero-content { padding: 0 18px; }

    /* Mobiel menu iets kleiner */
    .mobile-nav a { font-size: 24px; }

    /* Footer */
    .footer-grid { gap: 32px; }
  }

  /* ===== FEATURED SECTION ===== */
  .featured-strip {
    background: linear-gradient(135deg, var(--black) 0%, #1c1005 100%);
    padding: 70px 40px;
  }

  .featured-strip .section-title { color: var(--white); }
  .featured-strip .section-sub { color: rgba(255,255,255,0.5); }
  .featured-strip .section-label { color: var(--orange-light); }

  /* ===== OVER MAQUETTSHOP ===== */
  .over-sectie {
    background: var(--off-white);
    padding: 70px 40px;
  }

  .over-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }

  /* Linkerkolom */
  .over-titel {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 900;
    font-size: 36px;
    color: var(--black);
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }

  .over-intro {
    font-size: 15px;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 480px;
  }

  .over-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .over-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .over-feature-icon {
    width: 48px;
    height: 48px;
    background: var(--orange);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
  }

  .over-feature-titel {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--black);
    margin-bottom: 4px;
  }

  .over-feature-tekst {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.6;
  }

  /* Rechterkolom — contactformulier */
  .over-contact-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
  }

  .over-contact-titel {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--black);
    margin-bottom: 8px;
  }

  .over-contact-sub {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 24px;
    line-height: 1.5;
  }

  .over-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .over-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .over-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-gray);
  }

  .over-form-group input,
  .over-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--black);
    background: var(--white);
    transition: border-color 0.15s;
    resize: none;
  }

  .over-form-group input:focus,
  .over-form-group textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(232, 80, 10, 0.10);
  }

  .over-submit {
    width: 100%;
    background: var(--orange);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    padding: 12px 20px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
  }

  @media (hover: hover) {

    .over-submit:hover {
    background: var(--orange-dark);
  }

  }

  .over-submit:disabled {
    background: var(--gray);
    cursor: not-allowed;
  }

  .over-form-status {
    font-size: 13px;
    line-height: 1.5;
    min-height: 20px;
  }

  .over-form-status.succes { color: #27AE60; }
  .over-form-status.fout   { color: #C0392B; }

  @media (max-width: 768px) {
    .over-grid { grid-template-columns: 1fr; gap: 40px; }
    .over-sectie { padding: 50px 20px; }
  }

  /* ===== OVER ONS PAGINA ===== */
  .about-intro-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 40px;
  }

  .about-page-titel {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 900;
    font-size: 42px;
    color: var(--black);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 20px;
  }

  .about-page-intro {
    font-size: 17px;
    color: var(--gray);
    line-height: 1.8;
    max-width: 640px;
    margin-bottom: 18px;
  }

  .about-page-intro:last-child { margin-bottom: 0; }

  /* Merken sectie */
  .merken-sectie {
    background: var(--off-white);
    padding: 56px 40px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .merken-titel {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--black);
    text-align: center;
    margin-bottom: 36px;
  }

  .merken-rij {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
  }

  .merk-logo {
    max-height: 60px;
    max-width: 160px;
    object-fit: contain;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  /* Deluxe-logo groter zodat het visueel gelijk oogt aan de andere merken.
     Op alt-tekst i.p.v. positie: Lifecolour staat tijdelijk in commentaar
     (zie over-ons.html), dus Deluxe's plek in de rij kan verschuiven. */
  .merken-rij .merk-logo[alt="Deluxe"] {
    max-height: 150px;
    max-width: 300px;
  }

  .merk-fallback {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--gray);
    letter-spacing: 0.04em;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  /* Fade-up animatie merklogo's — startstaat (onder + onzichtbaar) */
  .merk-logo,
  .merk-fallback {
    opacity: 0;
    transform: translateY(24px);
  }

  /* Zichtbaar zodra de sectie in beeld scrollt, met stagger */
  .merken-sectie.in-view .merk-logo,
  .merken-sectie.in-view .merk-fallback {
    opacity: 1;
    transform: translateY(0);
  }

  .merken-sectie.in-view .merk-logo:nth-of-type(1),
  .merken-sectie.in-view .merk-fallback:nth-of-type(1) { transition-delay: 0.05s; }
  .merken-sectie.in-view .merk-logo:nth-of-type(2),
  .merken-sectie.in-view .merk-fallback:nth-of-type(2) { transition-delay: 0.18s; }
  .merken-sectie.in-view .merk-logo:nth-of-type(3),
  .merken-sectie.in-view .merk-fallback:nth-of-type(3) { transition-delay: 0.31s; }

  /* FAQ sectie */
  .faq-sectie {
    padding: 72px 40px;
    max-width: 760px;
    margin: 0 auto;
  }

  .faq-titel {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: var(--black);
    margin-bottom: 32px;
  }

  .faq-item {
    border-bottom: 1px solid var(--border);
  }

  .faq-vraag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--black);
    gap: 16px;
    user-select: none;
  }

  @media (hover: hover) {

    .faq-vraag:hover { color: var(--orange); }

  }

  .faq-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--orange);
    transition: transform 0.2s ease;
  }

  .faq-item.open .faq-chevron { transform: rotate(180deg); }

  .faq-antwoord {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .faq-antwoord-inner {
    padding: 0 0 20px 0;
    font-size: 15px;
    color: var(--gray);
    line-height: 1.7;
  }

  .faq-link {
    color: var(--orange);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
  }

  @media (hover: hover) {

    .faq-link:hover { color: var(--orange-dark); text-decoration: underline; }

  }

  /* Contact sectie op over pagina */
  .about-contact-wrap {
    background: var(--off-white);
    padding: 72px 40px;
    border-top: 1px solid var(--border);
  }

  .about-contact-inner {
    max-width: 560px;
    margin: 0 auto;
  }

  @media (max-width: 768px) {
    .about-intro-wrap { padding: 50px 20px; }
    .about-page-titel { font-size: 34px; }
    .faq-sectie { padding: 50px 20px; }
    /* Mobiel: merklogo's onder elkaar */
    .merken-rij { flex-direction: column; gap: 30px; }
    .about-contact-wrap { padding: 50px 20px; }
  }

  /* ===== WAT WIL JE BOUWEN ===== */
  .wb-section {
    background: var(--off-white);
    border-top: 4px solid var(--orange);
  }

  .wb-card {
    width: 100%;
  }

  .wb-head { text-align: center; margin-bottom: 32px; }
  .wb-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: 24px; color: var(--black);
    margin-top: 6px;
  }
  .wb-sub { margin-top: 8px; font-size: 15px; color: var(--gray); }

  .wb-step { margin-top: 28px; }
  .wb-step-label {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
    letter-spacing: 0.02em; color: var(--dark-gray);
    margin-bottom: 14px;
  }

  .wb-hidden { display: none; }

  /* slide-in van onder */
  .wb-in { animation: wbSlideIn 0.2s ease-out; }
  @keyframes wbSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .wb-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
  }
  .wb-grid-2 { grid-template-columns: repeat(4, 1fr); }

  .wb-block {
    display: flex; flex-direction: column; align-items: flex-start;
    text-align: left; gap: 4px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 16px 14px; cursor: pointer;
    transition: var(--transition);
  }
  @media (hover: hover) {

    .wb-block:hover { border-color: var(--orange); box-shadow: var(--shadow); }

  }
  .wb-block.active {
    border-color: var(--orange);
    background: rgba(232, 80, 10, 0.06);
  }
  /* niet-geselecteerde opties dimmen licht */
  .wb-grid.wb-has-active .wb-block:not(.active) { opacity: 0.55; }
  @media (hover: hover) {

    .wb-grid.wb-has-active .wb-block:not(.active):hover { opacity: 1; }

  }

  .wb-block-icon {
    color: var(--orange); margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center;
  }
  .wb-block-icon svg { width: 26px; height: 26px; }
  .wb-block-naam {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600;
    font-size: 15px; color: var(--black);
  }
  .wb-block-sub { font-size: 12px; color: var(--gray); line-height: 1.4; }

  .wb-textarea {
    width: 100%; resize: vertical; min-height: 84px;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--black);
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    transition: var(--transition);
  }
  .wb-textarea:focus { outline: none; border-color: var(--orange); }

  .wb-submit {
    margin-top: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--orange); color: var(--white);
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 15px;
    border: none; border-radius: var(--radius);
    padding: 13px 24px; cursor: pointer;
    transition: var(--transition);
  }
  @media (hover: hover) {

    .wb-submit:hover { background: var(--orange-dark); }

  }

  .wb-result {
    margin-top: 18px;
    background: rgba(232, 80, 10, 0.06);
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    padding: 16px 18px;
    font-size: 14px; color: var(--dark-gray); line-height: 1.6;
  }

  @media (max-width: 1024px) {
    .wb-grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 768px) {
    .wb-grid, .wb-grid-2 { grid-template-columns: repeat(2, 1fr); }
  }

  /* ===== INSPIRATIE / PROJECTEN ===== */
  .proj-nav { display: flex; gap: 10px; align-self: flex-end; margin-bottom: 4px; }
  .proj-arrow {
    width: 42px; height: 42px; border-radius: 50%;
    /* Niet laten krimpen: in een krappe flexrij wordt een ronde knop
       anders ovaal. */
    flex: 0 0 42px;
    border: 1px solid var(--border); background: var(--white);
    color: var(--dark-gray);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .proj-arrow:hover { background: var(--light-gray); color: var(--black); border-color: var(--steel); }

  }
  .proj-arrow:active { transform: scale(0.94); }

  .proj-track {
    display: flex; gap: 24px;
    overflow-x: auto; scroll-behavior: smooth;
    /* volle breedte tot beide schermranden, eerste card blijft op contentbreedte */
    padding: 14px 0 14px calc(50vw - 50%);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .proj-track::-webkit-scrollbar { display: none; }
  /* wat ruimte na de laatste card zodat je iets doorscrolt */
  .proj-card:last-child { margin-right: 40px; }

  .proj-card {
    position: relative; flex: 0 0 30%;
    aspect-ratio: 4 / 5;
    border-radius: 12px; overflow: hidden;
    background-size: cover; background-position: center;
    cursor: pointer;
    transition: transform 0.25s ease;
  }
  @media (hover: hover) {

    .proj-card:hover { transform: translateY(-6px); }

  }
  /* De kaart is sinds de tips-carrousel een <a>; onderstreping en
     linkkleur horen daar niet. */
  a.proj-card { display: block; text-decoration: none; color: inherit; }

  .proj-card-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0) 68%);
  }

  .proj-card-info {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 26px 24px 24px; color: var(--white);
  }
  .proj-card-info h3 {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: 22px; letter-spacing: -0.01em; margin-bottom: 8px;
  }
  .proj-card-info p {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5;
    color: rgba(255,255,255,0.85);
  }

  @media (max-width: 1024px) {
    .proj-card { flex: 0 0 44%; }
  }
  @media (max-width: 768px) {
    .proj-card { flex: 0 0 78%; }
    .proj-card-info h3 { font-size: 20px; }
  }

  /* ===== CATEGORIE-BANNER (SCALED PROFILES) ===== */
  .cat-banner {
    position: relative;
    aspect-ratio: 4912 / 2000;
    background-color: var(--white);
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .cat-banner-photo {
    position: absolute; left: 50%; top: 28px; z-index: 1;
    width: 82%; aspect-ratio: 4912 / 2000;
    transform: translateX(-50%);
  }
  .cat-banner-profile {
    position: absolute;
    transform: translateY(-120px) scale(0.55);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease-out;
    will-change: transform, opacity;
  }
  .cat-banner-profile img {
    display: block; width: 100%; height: auto;
    pointer-events: none;
  }
  .cat-banner-profile:nth-child(1) { transition-delay: 0s; }
  .cat-banner-profile:nth-child(2) { transition-delay: 0.08s; }
  .cat-banner-profile:nth-child(3) { transition-delay: 0.16s; }
  .cat-banner-profile:nth-child(4) { transition-delay: 0.24s; }
  .cat-banner-profile:nth-child(5) { transition-delay: 0.32s; }
  .cat-banner-profile:nth-child(6) { transition-delay: 0.4s; }
  .cat-banner.in-view .cat-banner-profile {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .cat-banner-profile {
      transition: none;
      transform: none;
      opacity: 1;
    }
  }
  .cat-banner-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1400px; margin: 0 auto;
    padding: 56px 40px 56px 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  }
  .cat-banner-label {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600;
    font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 10px;
  }
  .cat-banner-title {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.02em;
    color: var(--black); line-height: 1.05;
  }
  .cat-banner-btn {
    align-self: flex-start; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
  }
  @media (max-width: 768px) {
    /* Op telefoon: volledige foto bovenaan, tekst + knop eronder op wit */
    .cat-banner {
      aspect-ratio: auto;
      min-height: 360px;
      background-size: contain;
      background-position: center top;
      display: block;
    }
    .cat-banner-photo {
      width: 100%; top: 12px;
    }
    .cat-banner-inner {
      position: absolute; left: 0; right: 0; bottom: 0;
      flex-direction: column; align-items: center; text-align: center;
      padding: 20px 18px 28px;
    }
    /* De desktopregel zet align-self op flex-start; die moet hier weg,
       anders blijft de knop links staan terwijl de rest gecentreerd is. */
    .cat-banner-btn {
      align-self: center;
      padding: 11px 20px; font-size: 13px; letter-spacing: .05em;
    }
  }

  /* ===== AFWERKING (VERF & LIJM) ===== */
  .afw-section {
    background: var(--off-white);
    padding: 72px 40px;
    overflow: hidden;
  }
  .afw-heading {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: clamp(34px, 4.5vw, 52px); letter-spacing: -0.02em;
    color: var(--black); line-height: 1; margin-bottom: 40px;
    text-align: center;
  }

  /* Nieuw 2026 – horizontale slider, edge-to-edge, snap per tegel */
  .nieuw-slider {
    --gap: 24px;
    --inset: max(40px, calc((100vw - 1400px) / 2));
    --cols: 4;
    --tile: calc((100vw - 2 * var(--inset) - (var(--cols) - 1) * var(--gap)) / var(--cols));
    position: relative;
  }
  .nieuw-track {
    display: flex; gap: var(--gap);
    overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--inset);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 8px var(--inset) 16px;
    scrollbar-width: none;
  }
  .nieuw-track::-webkit-scrollbar { display: none; }
  .nieuw-track .shop-tile {
    flex: 0 0 var(--tile);
    scroll-snap-align: start;
  }

  .nieuw-arrow {
    position: absolute; top: calc(8px + var(--tile) / 2);
    transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--white);
    color: var(--dark-gray);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5; box-shadow: var(--shadow);
    transition: background 0.22s ease, color 0.22s ease;
  }
  @media (hover: hover) {

    .nieuw-arrow:hover { background: var(--light-gray); color: var(--black); }

  }
  .nieuw-arrow:active { transform: translateY(-50%) scale(0.94); }
  .nieuw-arrow-left  { left: 6px; }
  .nieuw-arrow-right { right: 6px; }
  .nieuw-slider.has-more .nieuw-arrow { display: flex; }

  @media (max-width: 1024px) { .nieuw-slider { --cols: 3; } }
  @media (max-width: 768px)  { .nieuw-slider { --cols: 2; --gap: 16px; } }

  /* Reviews op de homepage – zelfde slider als Nieuw 2026, 4 per rij */
  .nieuw-track .review-tile {
    flex: 0 0 var(--tile);
    scroll-snap-align: start;
  }
  /* Reviewkaarten zijn lager dan producttegels: pijl netjes in het midden.
     De pijlen staan in de marge naast de kaarten (dezelfde berekening als
     de track gebruikt om de vensterrand te bereiken), zodat ze de
     reviewtekst en de naam niet overlappen. */
  .reviews-slider .nieuw-arrow { top: 50%; }
  /* 22px lucht tussen de vensterrand en de pijl; op smalle schermen
     minder, anders komen de pijlen te dicht op de kaarten. */
  .reviews-slider .nieuw-arrow-left  { left:  calc(50% - 50vw + 22px); }
  .reviews-slider .nieuw-arrow-right { right: calc(50% - 50vw + 22px); }

  @media (max-width: 768px) {
    .reviews-slider .nieuw-arrow-left  { left:  calc(50% - 50vw + 8px); }
    .reviews-slider .nieuw-arrow-right { right: calc(50% - 50vw + 8px); }
  }

  .review-tile {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px 20px;
  }
  .review-tile-sterren { display: flex; gap: 2px; color: var(--border); }
  .review-tile-sterren svg { width: 15px; height: 15px; display: block; }
  .review-tile-sterren .vol { color: var(--orange); }
  .review-tile-tekst {
    margin: 0; color: var(--dark-gray); font-size: 14.5px; line-height: 1.7;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
    overflow: hidden;
  }
  .review-tile-voet {
    margin-top: auto; display: flex; align-items: baseline;
    justify-content: space-between; gap: 10px;
  }
  .review-tile-naam {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600;
    font-size: 14px; color: var(--black);
  }
  .review-tile-datum { font-size: 12.5px; color: var(--gray); white-space: nowrap; }

  .review-tile-antwoord {
    padding: 12px 14px; background: var(--off-white);
    border-left: 3px solid var(--orange);
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .review-tile-antwoord-naam {
    display: block; margin-bottom: 4px;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 11.5px;
    color: var(--orange); text-transform: uppercase; letter-spacing: 0.06em;
  }
  .review-tile-antwoord-tekst {
    margin: 0; color: var(--dark-gray); font-size: 13.5px; line-height: 1.65;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
  }

  /* Reviews-CTA: zelfde balk-indeling als de op-maat-strip, maar oranje.
     Hergebruikt .opmaat-strip-inner / -titel / -tekst en .btn-outline-white. */
  .reviews-strip {
    background: var(--orange);
    padding: 48px 40px;
  }
  .reviews-strip .opmaat-strip-tekst { color: rgba(255,255,255,0.85); }
  @media (hover: hover) {

    .reviews-strip .btn-outline-white:hover {
    background: var(--white);
    color: var(--orange);
  }

  }

  .reviews-meer { text-align: center; margin-top: 32px; }
  .reviews-meer-btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: 12px 26px;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 15px;
    color: var(--black); text-decoration: none; transition: var(--transition);
  }
  @media (hover: hover) {

    .reviews-meer-btn:hover { border-color: var(--orange); color: var(--orange); }

  }

  /* Kleine uitnodiging onder de reviews. Bewust een tekstregel en geen
     knop: de opvallende oranje strip is voor als er nog niets staat. */
  .reviews-cta-klein {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 4px 10px;
    margin: 26px 0 0;
    font-family: 'Inter', sans-serif; font-size: 14.5px; color: var(--gray);
  }
  .reviews-cta-klein a {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600;
    color: var(--orange); text-decoration: none;
    border-bottom: 1.5px solid transparent; transition: var(--transition);
  }
  @media (hover: hover) {

    .reviews-cta-klein a:hover { border-bottom-color: var(--orange); }

  }
  .reviews-cta-klein svg { transition: transform .18s ease; }
  @media (hover: hover) {

    .reviews-cta-klein a:hover svg { transform: translateX(2px); }

  }

  .afw-item + .afw-item { margin-top: 0; }
  /* oranje splitslijn tussen verf- en lijmblok */
  .afw-item + .afw-item .afw-bar {
    border-top: 3px solid var(--orange);
  }

  /* grote kop bovenaan het witte gedeelte, boven de productnaam */
  .afw-tag {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: clamp(38px, 4.2vw, 50px); letter-spacing: -0.02em;
    color: var(--black); line-height: 1; margin: 0;
  }
  /* titel + beschrijving + knop vullen de rest en staan verticaal in het midden */
  .afw-content {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
  }

  /* het balkje zelf: volle schermbreedte, hoogte groeit mee.
     .afw-item staat buiten .section-inner maar nog wél binnen de
     72px/40px padding van .afw-section — die padding hier terug
     opheffen i.p.v. via 100vw. 100vw meet de fysieke viewport en telt
     bij een 85%-zoom (zie html {zoom} hierboven) niet meer exact op
     tegen de layout, wat een randje wit/grijs opleverde. Dit is puur
     ten opzichte van het eigen element en dus zoom-onafhankelijk. */
  .afw-bar {
    display: grid;
    grid-template-columns: 1fr minmax(420px, 50%);
    align-items: stretch;
    min-height: clamp(440px, 42vw, 680px);
    background: var(--white);
    border-radius: 0;
    overflow: hidden;
    width: calc(100% + 80px);
    margin-left: -40px;
    margin-right: -40px;
  }
  .afw-item-reverse .afw-bar {
    grid-template-columns: minmax(420px, 50%) 1fr;
  }

  /* tekst uitlijnen met het label / de contentrand */
  .afw-body {
    display: flex; flex-direction: column;
    padding: 64px 56px;
    padding-left: max(56px, calc((100vw - 1400px) / 2));
  }
  .afw-item-reverse .afw-body {
    text-align: right;
    padding-left: 56px;
    padding-right: max(56px, calc((100vw - 1400px) / 2));
  }

  .afw-naam {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.02em;
    color: var(--black); line-height: 1.05; margin-bottom: 18px;
  }
  .afw-row-inline {
    display: flex; align-items: center; gap: 20px;
  }
  .afw-item-reverse .afw-row-inline { justify-content: flex-end; }
  .afw-desc {
    font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.6;
    color: var(--dark-gray); margin: 0;
  }
  .afw-btn {
    flex-shrink: 0;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
    color: var(--white); background: var(--orange);
    border: none; border-radius: var(--radius);
    padding: 11px 20px; cursor: pointer;
    transition: var(--transition);
  }
  @media (hover: hover) {

    .afw-btn:hover { background: var(--orange-dark); }

  }

  .afw-media {
    background-size: cover; background-position: center;
    /* Was var(--black): dat was precies de kleur die door het
       subpixel-kiertje onder de video heen piepte tijdens scrollen.
       Wit valt tegen de witte kaart eromheen (.afw-bar) niet op, dus
       ook als er ooit weer een kiertje ontstaat is het onzichtbaar. */
    background-color: var(--white);
  }
  .afw-video {
    display: block;
    width: 100%; height: auto;
    aspect-ratio: 2856 / 1200;
    align-self: center;
    background: var(--white);
    /* Bewust 1,5% groter dan zijn eigen doos, i.p.v. object-fit:cover
       op de volle stretched hoogte (dat zoomde de video zichtbaar in).
       .afw-bar heeft overflow:hidden, dus het overschot wordt afgesneden
       — de zichtbare grootte blijft nagenoeg hetzelfde als voorheen. */
    transform: scale(1.015);
    /* Dit dekt het randje daadwerkelijk af, ongeacht de oorzaak: video's
       hebben in Safari/Chrome tijdens het scrollen een bekend probleem
       waarbij de GPU een dun donker randje tekent op de rand van de
       video-laag zelf (los van welke achtergrondkleur eronder staat —
       vandaar dat wit maken van .afw-media het niet oploste). Deze witte
       "inset" rand wordt binnen dezelfde doos bovenop dat randje getekend
       en verbergt het permanent, in elke browser. */
    box-shadow: inset 0 0 0 3px var(--white);
  }

  /* Verf-animatie: producten sliden vanaf links in beeld (fade + ease-out)
     en blijven daarna staan. Posities/formaat per foto via --x/--y/--w. */
  .afw-anim {
    position: relative;
    width: 100%; height: 100%;
    min-height: clamp(440px, 42vw, 680px);
    background: var(--white);
    overflow: hidden;
  }
  .afw-anim .aa {
    position: absolute;
    left: var(--x); top: var(--y);
    width: var(--w); height: auto;
    opacity: 0;
    transform: translate(calc(-50% - 220px), -50%);
    will-change: transform, opacity;
  }
  @keyframes aaIn {
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
  .afw-anim.play .aa {
    animation: aaIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .afw-anim .aa { opacity: 1; transform: translate(-50%, -50%); animation: none; }
  }

  @media (max-width: 768px) {
    .afw-section { padding: 48px 20px; }
    .afw-bar,
    .afw-item-reverse .afw-bar {
      grid-template-columns: 1fr;
      min-height: auto;
      /* .afw-section padding is hier 20px i.p.v. 40px */
      width: calc(100% + 40px);
      margin-left: -20px;
      margin-right: -20px;
    }
    .afw-media { min-height: 220px; order: 1; }
    .afw-body {
      order: 2; text-align: left;
      padding: 28px 20px;
    }
    .afw-item-reverse .afw-body {
      text-align: left;
      padding: 28px 20px;
    }
    .afw-row-inline,
    .afw-item-reverse .afw-row-inline {
      flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px;
    }
    .afw-tag,
    .afw-item-reverse .afw-tag { text-align: left; }
  }

  /* ===== TIPS & TRICKS ===== */
  .tips-hero {
    background: var(--off-white);
    border-bottom: 1px solid var(--border);
    padding: 72px 40px 56px;
  }
  .tips-hero-title {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.02em;
    color: var(--black); line-height: 1.02; margin: 14px 0 16px;
  }
  .tips-hero-sub {
    font-family: 'Inter', sans-serif; font-size: 18px; line-height: 1.6;
    color: var(--dark-gray); max-width: 620px;
  }

  .tips-section { padding: 56px 40px 80px; }

  /* Filterbalk */
  .tips-filter {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px;
  }
  .tips-chip {
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
    color: var(--dark-gray); background: var(--white);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 9px 18px; cursor: pointer; transition: var(--transition);
  }
  @media (hover: hover) {

    .tips-chip:hover { border-color: var(--steel); color: var(--black); }

  }
  .tips-chip.active {
    background: var(--black); color: var(--white); border-color: var(--black);
  }

  /* Gedeelde tag */
  .tips-tag {
    display: inline-block;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 600;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--orange);
  }
  .tips-readmore {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
    color: var(--orange);
    transition: var(--transition);
  }

  /* Uitgelichte tip */
  .tips-feature {
    position: relative;
    border-radius: 14px; overflow: hidden;
    min-height: 420px;
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end;
    margin-bottom: 48px; cursor: pointer;
    text-decoration: none; color: inherit;
  }
  .tips-feature-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%);
  }
  .tips-feature-body {
    position: relative; z-index: 2;
    padding: 44px 44px 40px; max-width: 640px; color: var(--white);
  }
  .tips-feature .tips-tag { color: #FFB27A; margin-bottom: 12px; }
  .tips-feature-title {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em;
    line-height: 1.08; margin-bottom: 14px;
  }
  .tips-feature-desc {
    font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6;
    color: rgba(255,255,255,0.85); margin-bottom: 20px;
  }
  .tips-feature .tips-readmore { color: var(--white); }
  @media (hover: hover) {

    .tips-feature:hover .tips-readmore { gap: 12px; }

  }

  /* Grid met tips */
  .tips-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  .tips-card {
    display: flex; flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    text-decoration: none; color: inherit;
  }
  @media (hover: hover) {

    .tips-card:hover {
    transform: translateY(-4px);
    border-color: var(--steel);
    box-shadow: var(--shadow-lg);
  }

  }
  .tips-card-media {
    aspect-ratio: 16 / 10;
    background-size: cover; background-position: center;
    background-color: var(--light-gray);
  }
  .tips-card-body {
    display: flex; flex-direction: column; gap: 10px;
    padding: 22px 22px 24px;
  }
  .tips-card-title {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: 19px; letter-spacing: -0.01em; line-height: 1.25;
    color: var(--black);
  }
  .tips-card-desc {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55;
    color: var(--gray); flex-grow: 1;
  }
  .tips-card .tips-readmore { margin-top: 4px; }
  @media (hover: hover) {

    .tips-card:hover .tips-readmore { gap: 11px; }

  }

  /* CTA */
  .tips-cta {
    margin-top: 56px;
    background: var(--black); color: var(--white);
    border-radius: 14px; padding: 44px 48px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
  }
  .tips-cta-title {
    font-family: 'IBM Plex Sans', sans-serif; font-weight: 700;
    font-size: 26px; letter-spacing: -0.01em; margin-bottom: 8px;
  }
  .tips-cta-sub {
    font-family: 'Inter', sans-serif; font-size: 15px;
    color: rgba(255,255,255,0.7);
  }

  @media (max-width: 1024px) {
    .tips-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .tips-hero { padding: 48px 20px 40px; }
    .tips-section { padding: 40px 20px 64px; }
    .tips-grid { grid-template-columns: 1fr; }
    .tips-feature-body { padding: 28px 24px 26px; }
    .tips-cta { padding: 32px 24px; }
  }

  /* ===== OP MAAT PAGINA ===== */
  .opmaat-hero {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: var(--black);
    display: flex;
    align-items: center;
  }
  .opmaat-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .opmaat-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.52);
  }
  .opmaat-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 80px;
    max-width: 760px;
  }
  .opmaat-hero-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 12px;
  }
  .opmaat-hero-titel {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 64px;
    color: var(--white);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }
  .opmaat-hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    max-width: 520px;
  }
  .opmaat-intro-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 40px 0;
    font-size: 16px;
    color: var(--gray);
    line-height: 1.8;
  }
  .opmaat-form-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 40px 80px;
  }
  .opmaat-form-wrap .over-form-group label small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--gray);
    margin-top: 2px;
  }
  .opmaat-form-wrap input[type="file"] {
    padding: 8px 0;
    border: none;
    font-size: 14px;
    color: var(--dark-gray);
    cursor: pointer;
  }

  /* ===== OP MAAT STRIP (shop pagina) ===== */
  .opmaat-strip {
    background: var(--black);
    padding: 48px 40px;
  }
  .opmaat-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .opmaat-strip-titel {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--white);
    margin-bottom: 8px;
  }
  .opmaat-strip-tekst {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    max-width: 500px;
  }
  .btn-outline-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 10px 24px;
    border-radius: var(--radius);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
  }
  @media (hover: hover) {

    .btn-outline-white:hover {
    background: var(--white);
    color: var(--black);
  }

  }

  /* ===== OP MAAT BANNER (homepage) ===== */
  .opmaat-banner {
    background: var(--off-white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 24px 40px;
  }
  .opmaat-banner-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .opmaat-banner-icon {
    font-size: 28px;
    flex-shrink: 0;
  }
  .opmaat-banner-tekst {
    flex: 1;
    font-size: 15px;
    color: var(--dark-gray);
    line-height: 1.5;
    min-width: 200px;
  }
  .opmaat-banner-tekst strong {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--black);
    margin-bottom: 2px;
  }

  @media (max-width: 768px) {
    .opmaat-hero { height: 280px; }
    .opmaat-hero-content { padding: 0 24px; }
    .opmaat-hero-titel { font-size: 44px; }
    .opmaat-strip-inner { flex-direction: column; align-items: flex-start; }
    .opmaat-banner-inner { flex-direction: column; align-items: flex-start; }
    .opmaat-intro-wrap { padding: 40px 20px 0; }
    .opmaat-form-wrap { padding: 32px 20px 60px; }
  }

/* ============================================================ */
/* WETTELIJK (voorwaarden / privacy / cookies / retour)         */
/* ============================================================ */
.legal-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 40px 90px;
}
.legal-head { margin-bottom: 34px; }
.legal-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.legal-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.05;
  color: var(--black);
  margin: 0 0 14px;
}
.legal-lead {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray);
  max-width: 640px;
  margin: 0;
}

/* Tabs */
.legal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}
.legal-tab {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--gray);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 6px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
@media (hover: hover) {

  .legal-tab:hover { color: var(--black); }
}
.legal-tab.active {
  color: var(--black);
  border-bottom-color: var(--orange);
}

/* Body: sidebar + content */
.legal-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}
.legal-sidebar { position: sticky; top: 100px; }
.legal-sidebar-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 14px;
}
.legal-sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-left: 2px solid var(--border);
}
.legal-sidebar-nav a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gray);
  padding: 6px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
@media (hover: hover) {

  .legal-sidebar-nav a:hover { color: var(--black); }
}
.legal-sidebar-nav a.active {
  color: var(--black);
  font-weight: 600;
  border-left-color: var(--orange);
  background: var(--off-white);
}

/* Content */
.legal-doc { display: none; }
.legal-doc.active { display: block; }
.legal-updated {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 30px;
}
.legal-section { scroll-margin-top: 100px; margin-bottom: 34px; }
.legal-section + .legal-section {
  border-top: 1px solid var(--border);
  padding-top: 34px;
}
.legal-section h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--black);
  margin: 0 0 14px;
}
.legal-section p {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--dark-gray);
  margin: 0 0 14px;
}
.legal-section ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.legal-section li {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--dark-gray);
  margin-bottom: 8px;
}
.legal-section a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 500;
}
@media (hover: hover) {

  .legal-section a:hover { text-decoration: underline; }
}

@media (max-width: 900px) {
  .legal-body { grid-template-columns: 1fr; gap: 0; }
  .legal-sidebar { display: none; }
}
@media (max-width: 768px) {
  .legal-wrap { padding: 36px 20px 64px; }
  .legal-title { font-size: 34px; }
  .legal-lead { font-size: 15px; }
  .legal-tabs { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal-tab { font-size: 14px; padding: 10px 4px; }
  .legal-section h2 { font-size: 19px; }
}

  /* ═══════════════════════════════════════════════════════════
     OPENINGSANIMATIE SHOPPAGINA
     Alles komt van boven naar beneden binnen — kop, ondertitel,
     filterbalk — en daarna volgen de producttegels elkaar op van
     links naar rechts, elk vanuit een stukje lager omhoog.

     De begintoestand staat BEWUST niet hier maar wordt door JS
     gezet. Zou .shop-tile hier op opacity: 0 staan en het script
     hapert, dan kijk je naar een lege winkel.
  ═══════════════════════════════════════════════════════════ */
  .maq-onthul {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
  }
  .maq-onthul-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* De filterbalk plakt vast bij het scrollen (position: sticky). Een
     transform maakt hem tot containing block en breekt dat, dus daar
     alleen de doorzichtigheid. */
  .shop-filterbar.maq-onthul { transform: none; will-change: opacity; }

  @media (prefers-reduced-motion: reduce) {
    .maq-onthul    { opacity: 1; transform: none; will-change: auto; }
    .maq-onthul-in { transition: none; }
  }

  /* ═══════════════════════════════════════════════════════════
     TABEL IN EEN PRODUCTBESCHRIJVING
     Het beheer zet er een <table> tussen; beschrijving-html.php
     bouwt die opnieuw op met de klasse .beschr-tabel.
  ═══════════════════════════════════════════════════════════ */
  .detail-desc .beschr-tekst { margin: 0 0 12px; }
  .detail-desc .beschr-tekst:last-child { margin-bottom: 0; }

  /* Het kader schuift, niet de tabel. Zet je de <table> zelf op
     display:block, dan zit de rand om een blok van 100% breed terwijl de
     rijen alleen hun eigen breedte pakken — de lijnen lopen dan door tot
     voorbij de laatste kolom. */
  .beschr-tabel-wrap {
    margin: 16px 0;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    -webkit-overflow-scrolling: touch;
    /* De site heeft een dikke oranje schuifbalk als huisstijl. Dat werkt
       voor de pagina, maar in een tabelletje van 200px hoog schreeuwt hij.
       Hier dus dun en grijs — wel zichtbaar, want anders weet je niet dat
       er nog kolommen naast staan. */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .beschr-tabel-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
  .beschr-tabel-wrap::-webkit-scrollbar-track { background: transparent; }
  .beschr-tabel-wrap::-webkit-scrollbar-thumb {
    background-color: #D8D8D8; border-radius: 4px; border: none;
  }
  @media (hover: hover) {

    .beschr-tabel-wrap::-webkit-scrollbar-thumb:hover { background-color: var(--gray); }

  }

  .beschr-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .beschr-tabel tr { border-bottom: 1px solid var(--border); }
  .beschr-tabel tr:last-child { border-bottom: none; }
  .beschr-tabel th,
  .beschr-tabel td {
    padding: 9px 14px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
  }
  .beschr-tabel th {
    font-weight: 600;
    background: #FAFAFA;
    border-bottom: 1px solid var(--border);
  }
  /* Zebrastrepen maken een maattabel een stuk makkelijker te lezen. */
  .beschr-tabel tr:nth-child(even) td { background: #FCFCFC; }
  /* Links in de tabel (bv. naar een lijmproduct) in merkoranje i.p.v. blauw */
  .beschr-tabel a { color: var(--orange); font-weight: 600; text-decoration-color: currentColor; }
  @media (hover: hover) {

    .beschr-tabel a:hover { color: var(--orange-dark); }

  }
  .beschr-tabel a:visited { color: var(--orange); }

  @media (max-width: 600px) {
    .beschr-tabel { font-size: 13px; }
    .beschr-tabel th,
    .beschr-tabel td { padding: 7px 10px; }
  }

/* ── Landvlaggen ────────────────────────────────────────────────
   Echte plaatjes in plaats van emoji: Windows heeft geen lettertype
   voor emoji-vlaggen en toonde daar simpelweg "NL" of "BE". */
.maq-vlag {
  width: 20px; height: 14px; object-fit: cover;
  vertical-align: -2px; margin-left: 6px; flex-shrink: 0;
}

/* ── Checkout stap 5: modelbouw-takken ─────────────────────────── */
.takken-hint { margin: -6px 0 12px; font-size: 13px; color: var(--dark-gray); }
.takken-lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.tak-optie { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.tak-optie input { margin: 3px 0 0; width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--orange); cursor: pointer; }
.tak-anders { grid-column: 1 / -1; border: 2px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font: inherit; font-size: 14px; }
.tak-anders:focus { outline: none; border-color: var(--orange); }
@media (max-width: 600px) { .takken-lijst { grid-template-columns: 1fr; } }