/* Lettertypen staan op onze eigen host, niet bij Google. Dat scheelt een
   verzoek naar een derde partij en een DNS-lookup voordat er tekst staat.
   De bestanden zijn de variabele woff2's die Google zelf uitlevert, gesplitst
   in latin en latin-ext; de site heeft geen cyrillisch of Vietnamees nodig.
   Op een trage verbinding komt Montserrat (38 kB) ondanks de preload pas na
   de eerste weergave binnen. "Montserrat fallback" is Arial, per gewicht
   geschaald naar de breedte van Montserrat (gemeten op de tekst van home,
   29 september 2026), zodat de wissel het menu niet meer opschuift. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/montserrat-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: Montserrat;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/montserrat-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: "Montserrat fallback";
  font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 110%;
  ascent-override: 88.2%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat fallback";
  font-weight: 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 111.7%;
  ascent-override: 86.8%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 107.2%;
  ascent-override: 90.5%;
  descent-override: 23.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 109.1%;
  ascent-override: 88.9%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-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: Oswald;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-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;
}

:root {
      --blue: #367def;
      --blue-2: #5b97f5;
      --orange: #ff8900;
      --pink: #f42958;
      --ink: #fff;
      --ink-2: #111;
      --muted: rgba(255,255,255,.66);
      --line: rgba(255,255,255,.12);
      --fog: #1a1a1a;
      --max: 1200px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      font-family: Montserrat, "Montserrat fallback", Arial, Helvetica, sans-serif;
      color: var(--ink);
      background: #000;
      line-height: 1.55;
      overflow-x: hidden;
      padding-bottom: env(safe-area-inset-bottom);
    }
    img { height: auto; }
    button, a.btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    img { max-width: 100%; display: block; }
    a { color: inherit; }
    /* Een knop erft standaard geen tekstkleur; op de zwarte site werd dat zwart op zwart. */
    button { font-family: inherit; color: inherit; }
    .wrap { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }
    .display {
      font-family: Oswald, Arial, sans-serif;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      line-height: 1.02;
    }
    .eyebrow {
      margin: 1em 0;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--blue);
    }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      border: 0; cursor: pointer; text-decoration: none;
      font-weight: 700; border-radius: 999px; padding: 15px 26px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-blue { background: var(--blue); color: #fff; box-shadow: 0 10px 28px rgba(54,125,239,.35); }
    .btn-orange { background: var(--orange); color: #fff; box-shadow: 0 10px 28px rgba(255,137,0,.35); }
    .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28); }
    .btn-ink { background: #fff; color: #111; }

    header.site {
      position: sticky; top: 0; z-index: 50;
      background: rgba(17,17,17,.78);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 20px; }
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
    .brand img { width: 38px; height: 38px; }
    .brand span { font-family: Oswald, sans-serif; letter-spacing: .16em; font-size: 17px; }
    .nav-links { display: flex; gap: 26px; list-style: none; color: #fff; font-size: 15px; font-weight: 500; }
    .nav-links a { text-decoration: none; }
    .nav-links a:hover { color: var(--blue-2); }
    .nav-links a.current { color: var(--blue-2); }
    .crumb {
      color: rgba(255,255,255,.38);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .02em;
      padding: 4px 0 8px;
    }
    .crumb a { color: rgba(255,255,255,.55); text-decoration: none; }
    .crumb a:hover { color: #fff; }
    .crumb .sep { margin: 0 6px; opacity: .5; }
    .crumb .here { color: rgba(255,255,255,.7); }
    .nav-cta { padding: 10px 18px; font-size: 13px; }
    .nav-end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .nav-cart { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #fff; transition: border-color .18s ease, color .18s ease; }
    .nav-cart:hover, .nav-cart:focus-visible { border-color: var(--blue); color: var(--blue-2); }
    .nav-toggle {
      display: none;
      width: 40px;
      height: 40px;
      border: 0;
      background: transparent;
      padding: 9px 8px;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
    }
    .nav-toggle span {
      display: block;
      height: 2px;
      width: 100%;
      background: #fff;
      border-radius: 1px;
      transition: transform .2s ease, opacity .2s ease;
    }
    header.site.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    header.site.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
    header.site.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .lang-only { display: flex; list-style: none; margin: 0; padding: 0; }
    .lang-flag {
      display: block;
      width: 16px;
      height: 12px;
      flex-shrink: 0;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.2);
    }
    .lang-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      padding: 6px 11px 6px 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      cursor: pointer;
    }
    .lang-menu { right: 0; left: auto; min-width: 220px; }
    .lang-opt {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      text-align: left;
      background: none;
      border: 0;
      color: #fff;
      padding: 10px 16px;
      font-size: 13px;
      cursor: pointer;
    }
    .lang-opt:hover { background: rgba(54,125,239,.18); }
    .lang-opt.on { color: var(--blue-2); }

    .hero {
      position: relative;
      overflow: hidden;
      color: #fff;
      background: #0d0d0d;
    }
    .hero::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(900px 480px at 80% 20%, rgba(54,125,239,.28), transparent 58%),
        radial-gradient(700px 420px at 8% 90%, rgba(255,137,0,.12), transparent 50%),
        #0d0d0d;
      pointer-events: none;
    }
    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: center;
      padding: 72px 0 64px;
    }
    .hero h1.display, .hero h2.display { font-size: clamp(46px, 7vw, 84px); margin: 14px 0 18px; }
    .hero h1.display i, .hero h2.display i {
      font-style: normal;
      color: #fff;
    }
    [data-page="home"] .hero h1.display { font-size: clamp(40px, 4.6vw, 56px); }
    [data-page="home"] .hero-grid { padding-top: 48px; }
    [data-page="home"] .hero .lead { margin-bottom: 22px; }
    .hero h1.display sup { font-size: .42em; line-height: 1; vertical-align: top; margin-left: .04em; }
    .hero .lead { font-size: 18px; color: rgba(255,255,255,.74); max-width: 500px; margin-bottom: 30px; }
    .hero-uses {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 26px;
    }
    .hero-uses a {
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 14px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
    }
    .hero-uses a:hover {
      background: #fff;
      color: #111;
      border-color: #fff;
    }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
    .text-link {
      color: rgba(255,255,255,.7);
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
    }
    .text-link:hover { color: #fff; }
    .hero-stats { display: flex; gap: 28px; margin-top: 40px; }
    .hero-stats strong { display: block; font-size: 20px; }
    .hero-stats span { font-size: 12px; color: rgba(255,255,255,.55); font-weight: 600; }

    .works-bar {
      background: #0d0d0d;
      color: #fff;
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 22px 0 26px;
    }
    .works-bar .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px 40px;
      flex-wrap: wrap;
    }
    .works-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--blue-2);
    }
    .works-bar ul {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 26px;
      list-style: none;
      color: rgba(255,255,255,.82);
    }
    .works-bar li { display: flex; }
    .works-bar svg { width: 24px; height: 24px; fill: currentColor; }
    .hero .works-bar { background: none; border-top: 0; padding: 28px 0 0; }
    .hero .works-bar .wrap { width: auto; margin: 0; flex-direction: column; align-items: flex-start; gap: 14px; }
    .hero .works-bar ul { gap: 8px 20px; }

    .photo-frame {
      position: relative;
      height: 560px;
    }
    .photo-frame .shot {
      position: absolute;
      border-radius: 22px;
      object-fit: cover;
      box-shadow: 0 30px 70px rgba(54,125,239,.28), 0 16px 40px rgba(0,0,0,.45);
    }
    .photo-frame .shot.a {
      width: 100%; height: 100%;
      right: 0; top: 0;
    }
    /* De grote foto op de home is een link naar de keuzehulp. */
    .photo-frame > a { position: absolute; inset: 0; display: block; border-radius: 22px; }
    .photo-frame.product .shot {
      border-radius: 0;
      box-shadow: none;
      object-fit: contain;
      background: transparent;
      filter: drop-shadow(0 28px 36px rgba(0,0,0,.45));
    }
    .photo-frame .shot.b {
      width: 48%; height: 38%;
      left: 0; bottom: 8%;
      border: 4px solid #0d0d0d;
    }
    .orbit {
      position: relative;
      height: 560px;
    }
    .ring {
      position: absolute; inset: 8% 10%;
      border: 1px solid rgba(54,125,239,.28);
      border-radius: 50%;
      animation: spin 22s linear infinite;
    }
    .ring:nth-child(2) { inset: 18% 20%; border-color: rgba(255,137,0,.18); animation-duration: 30s; animation-direction: reverse; }
    .glow {
      position: absolute; width: 280px; height: 280px; border-radius: 50%;
      left: 50%; top: 46%; transform: translate(-50%,-50%);
      background: radial-gradient(circle, rgba(54,125,239,.45), transparent 68%);
      filter: blur(8px);
      animation: pulse 4s ease-in-out infinite;
    }
    .orbit img.main {
      position: absolute; width: 78%; left: 11%; top: 6%;
      mix-blend-mode: lighten;
      animation: float 6s ease-in-out infinite;
    }
    .chip {
      position: absolute;
      background: rgba(255,255,255,.96);
      color: #111;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
    }
    .chip.a { left: 0; top: 22%; }
    .chip.b { right: 0; bottom: 18%; }

    @keyframes float { 50% { transform: translateY(-12px); } }
    @keyframes pulse { 50% { opacity: .55; transform: translate(-50%,-50%) scale(1.08); } }
    @keyframes spin { to { transform: rotate(360deg); } }

    section { padding: 92px 0; scroll-margin-top: 88px; }
    #sets { scroll-margin-top: 84px; }
    .section-head { max-width: 640px; margin-bottom: 44px; }
    .section-head h2 { font-size: clamp(34px, 4.4vw, 52px); margin-top: 10px; }

    .why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .why article {
      background: var(--fog);
      border-radius: 18px;
      overflow: hidden;
    }
    .why article img {
      width: 100%;
      height: 168px;
      object-fit: cover;
    }
    .why article .pad { padding: 22px 22px 24px; }
    .why h3 { margin: 10px 0 8px; font-size: 18px; }
    .why p a { color: var(--blue-2); }
    .why p a:hover { text-decoration: underline; }
    .why p { color: var(--muted); font-size: 14.5px; }
    .led { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); }

    .sets { background: #0f0f0f; color: #fff; }
    .sets .eyebrow { color: var(--blue-2); }
    .sets .section-head p { color: rgba(255,255,255,.62); margin-top: 12px; }
    #waarom .section-head p { color: var(--muted); margin-top: 12px; }
    .set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

    .set-card {
      background: #161616;
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 22px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .set-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
    .set-card.selected {
      border-color: rgba(255,255,255,.22);
    }
    .set-card.deal {
      z-index: 1;
    }
    .price .was {
      display: block;
      font-family: Montserrat, "Montserrat fallback", sans-serif;
      font-size: 15px;
      color: rgba(255,255,255,.4);
      text-decoration: line-through;
      letter-spacing: 0;
      font-weight: 600;
    }
    .price .save {
      display: inline-block;
      margin-top: 4px;
      background: var(--orange);
      color: #fff;
      font-family: Montserrat, "Montserrat fallback", sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      border-radius: 999px;
      padding: 3px 8px;
    }

    .stage {
      position: relative;
      background: #111;
      padding: 0;
    }
    .stage .life {
      display: block;
      width: 100%;
      height: 118px;
      object-fit: cover;
    }
    .stage .pack-wrap {
      overflow: hidden;
      aspect-ratio: 1 / 1;
      background: #f6f6f6;
    }
    .stage .pack {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .chosen-visual {
      border-radius: 16px;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      background: #f6f6f6;
      margin-bottom: 14px;
    }
    .chosen-visual img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .stage .badge-free {
      position: absolute; top: 14px; right: 14px;
      background: rgba(0,0,0,.55);
      color: #fff;
      backdrop-filter: blur(10px);
      font-size: 11px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase;
      border-radius: 999px; padding: 6px 11px;
      z-index: 2;
    }
    .need-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 28px;
    }
    .need-pills button {
      border: 1px solid rgba(255,255,255,.16);
      background: transparent;
      color: rgba(255,255,255,.78);
      border-radius: 999px;
      padding: 10px 18px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
    }
    .need-pills button.on {
      background: #fff;
      color: #111;
      border-color: #fff;
    }
    .set-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
    }
    .set-actions .linkish {
      background: none;
      border: 0;
      color: rgba(255,255,255,.5);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
    }
    .set-actions .linkish:hover { color: #fff; }
    .match-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .match-card {
      background: #161616;
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 20px;
      overflow: hidden;
      text-decoration: none;
      color: #fff;
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, border-color .2s ease;
    }
    .match-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.16); }
    .match-card img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: contain;
      object-position: center;
      background: #f6f6f6;
    }
    .match-card .body { padding: 18px 20px 20px; }
    .match-card .tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      margin-bottom: 4px;
    }
    .match-card h3 { font-size: 26px; }
    .match-card p { color: rgba(255,255,255,.55); font-size: 14px; margin: 4px 0 14px; }
    .match-card strong {
      display: block;
      font-family: Oswald, sans-serif;
      font-size: 26px;
      margin-bottom: 10px;
    }
    .match-card .go { font-weight: 700; font-size: 14px; color: var(--blue-2); }
    .match-card strong small { font-family: Montserrat, "Montserrat fallback", sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.45); margin-left: 4px; }
    .match-card strong .ex-vat, .cat-card strong .ex-vat { display: block; font-family: Montserrat, "Montserrat fallback", sans-serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); margin-top: 2px; }
    .total-ex { text-align: right; font-size: 13px; color: rgba(255,255,255,.55); margin-top: 2px; }
    .btn-wide { display: flex; width: 100%; margin: 14px 0 22px; }
    /* Keuzeflow op sets.html (js/picker.js) */
    .pk-box { margin-top: 8px; }
    .pk-step { margin-bottom: 30px; scroll-margin-top: 120px; }
    .pk-step .q { font-size: 24px; }
    .pk-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 14px 0 8px; }
    .pk-tabs { display: flex; gap: 6px; margin: 4px 0 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .pk-tabs button {
      background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
      color: rgba(255,255,255,.55); font-weight: 700; font-size: 15px; padding: 10px 14px; cursor: pointer;
    }
    .pk-tabs button:hover { color: #fff; }
    .pk-tabs button.on { color: #fff; border-bottom-color: var(--blue); }
    .pk-series { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .pk-serie {
      background: #111; border: 2px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden;
      padding: 0; text-align: left; cursor: pointer; color: #fff; display: flex; flex-direction: column;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .pk-serie:hover { border-color: rgba(54,125,239,.5); }
    .pk-serie.on { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(54,125,239,.14); }
    .pk-serie img { width: 100%; aspect-ratio: 5 / 4; object-fit: contain; padding: 12px; box-sizing: border-box; background: #f6f6f6; display: block; }
    .pk-serie-body { display: block; padding: 14px 16px 16px; }
    .pk-serie b { display: block; font-family: Oswald, sans-serif; font-size: 24px; letter-spacing: .04em; }
    .pk-serie-body > span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.4; }
    .pk-serie em { display: block; font-style: normal; font-weight: 700; font-size: 13px; color: var(--blue-2); margin-top: 8px; }
    .pk-sizes { grid-template-columns: repeat(4, 1fr); }
    .pk-variants { grid-template-columns: repeat(2, 1fr); }
    .pk-variants button.off { opacity: .45; cursor: default; }
    .pk-variants .pk-price { display: block; font-family: Oswald, sans-serif; font-size: 22px; margin-top: 8px; }
    .pk-summary { position: sticky; top: 120px; align-self: start; }
    .pk-sum-img { width: 100%; aspect-ratio: 5 / 4; object-fit: contain; padding: 8px; box-sizing: border-box; border-radius: 12px; background: #f6f6f6; margin-bottom: 12px; }
    .pk-box .extra .thumb { background: #f6f6f6; }
    .pk-box .extra .thumb img { mix-blend-mode: normal; padding: 4px; box-sizing: border-box; }
    .pk-bar { display: none; }
    .sets-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: end; margin-bottom: 36px; }
    .sets-kop .section-head { margin-bottom: 0; }
    .sets-kop-foto { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; display: block; }
    @media (max-width: 860px) {
      .sets-kop { grid-template-columns: minmax(0, 1fr); gap: 20px; }
      .sets-kop-foto { aspect-ratio: 16 / 9; }
    }
    .pk-maten { position: relative; }
    .pk-maten-track {
      display: grid; grid-auto-flow: column; gap: 16px;
      grid-auto-columns: calc((100% - 32px) / 3);
      overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
      scrollbar-width: none; padding: 4px 2px;
    }
    .pk-maten-track::-webkit-scrollbar { display: none; }
    .pk-maat-kaart {
      scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px;
      background: #161616; border: 1px solid rgba(255,255,255,.06); border-radius: 20px;
      padding: 26px 24px 22px; color: #fff; text-decoration: none;
      transition: transform .2s ease, border-color .2s ease;
    }
    .pk-maat-kaart:hover, .pk-maat-kaart:focus-visible { transform: translateY(-4px); border-color: rgba(54,125,239,.55); outline: none; }
    .pk-maat-n { font-family: Oswald, sans-serif; font-size: 64px; line-height: 1; font-weight: 600; }
    .pk-maat-p { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); }
    .pk-maat-h { font-size: 14px; color: rgba(255,255,255,.55); }
    .pk-maat-kaart strong { font-family: Oswald, sans-serif; font-size: 24px; margin-top: 14px; }
    .pk-maat-kaart .go { font-weight: 700; font-size: 14px; color: var(--blue-2); margin-top: auto; padding-top: 10px; }
    .pk-maat-meer { background: #10151f; }
    .pk-chev {
      position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
      width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
      background: #222; color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
      box-shadow: 0 6px 18px rgba(0,0,0,.4);
    }
    .pk-chev-l { left: -22px; }
    .pk-chev-r { right: -22px; }
    .pk-chev:disabled { opacity: 0; pointer-events: none; }
    .pk-chev:hover { background: #2e2e2e; }
    @media (max-width: 720px) {
      .pk-maten-track { grid-auto-columns: calc((100% - 16px) / 2.2); }
      .pk-chev-l { left: -8px; }
      .pk-chev-r { right: -8px; }
    }
    .pk-maat .pk-strip { display: flex; align-items: center; justify-content: center; gap: 4%; padding: 22px 16px; background: #f6f6f6; aspect-ratio: 16 / 9; box-sizing: border-box; }
    .pk-maat .pk-strip img { width: 17%; height: auto; aspect-ratio: auto; object-fit: contain; mix-blend-mode: multiply; }
    .pk-serie.off { opacity: .45; cursor: default; }
    .pk-variants .pk-start { display: inline-block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-2); margin-bottom: 4px; }
    .pk-start-sum { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-2); }
    @media (max-width: 900px) {
      .pk-series, .pk-variants { grid-template-columns: 1fr 1fr; }
      .pk-sizes { grid-template-columns: repeat(3, 1fr); }
      .pk-summary { position: static; }
      /* Vaste balk onderin: totaal en sprong naar de bestelknop, die op een
         telefoon anders ver onder de stappen staat. */
      .pk-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #111; color: #fff; box-shadow: 0 -8px 24px rgba(0,0,0,.25);
      }
      .pk-bar b { font-family: Oswald, sans-serif; font-size: 20px; margin-left: 6px; }
      .pk-bar .btn { padding: 10px 16px; white-space: nowrap; }
      body.has-pk-bar { padding-bottom: 72px; }
      body.has-pk-bar .wa-float { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    }
    @media (max-width: 520px) {
      .pk-series { grid-template-columns: 1fr; }
      .pk-serie img { aspect-ratio: 2 / 1; }
      .pk-variants { grid-template-columns: 1fr; }
      .pk-box .extra { grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; }
      .pk-box .extra .thumb { width: 48px; height: 48px; }
      .pk-box .extra .price-tag { grid-column: 1; text-align: left; }
      .pk-box .extra .ctrl { grid-column: 2; }
    }
    .stage .hero-prod {
      display: block;
      width: auto;
      height: 188px;
      margin: 8px auto 6px;
      object-fit: contain;
      mix-blend-mode: lighten;
    }
    .kit {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 10px 0 14px;
    }
    .kit.four { grid-template-columns: repeat(4, 1fr); }
    .kit figure {
      margin: 0;
      background: #141414;
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 12px;
      padding: 8px 6px 10px;
      text-align: center;
    }
    .kit img {
      height: 52px;
      width: 100%;
      object-fit: contain;
      mix-blend-mode: lighten;
    }
    .kit figcaption {
      margin-top: 6px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .02em;
      color: rgba(255,255,255,.62);
      line-height: 1.25;
    }

    .set-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
    .set-body h3 { font-size: 30px; }
    .set-body .sub { color: rgba(255,255,255,.55); font-size: 14px; margin: 4px 0 14px; }
    .set-body ul { list-style: none; font-size: 14px; margin-bottom: 18px; color: rgba(255,255,255,.82); }
    .set-body li { padding: 5px 0 5px 16px; position: relative; }
    .set-body li::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: var(--blue); position: absolute; left: 0; top: 12px;
    }
    .set-body li.gift::before { background: var(--orange); }
    .price-row { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
    .price { font-family: Oswald, sans-serif; font-size: 34px; }
    .price small { display: block; font-family: Montserrat, "Montserrat fallback", sans-serif; font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .06em; }

    .cfg-lead { margin-top: 12px; color: var(--muted); }
    .opts-label {
      margin: 14px 0 2px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .opts-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin: 14px 0 2px;
      padding: 8px 0;
      background: none;
      border: 0;
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: left;
    }
    .opts-toggle:hover { color: var(--ink); }
    .opts-toggle::after {
      content: "";
      width: 7px;
      height: 7px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      margin-right: 4px;
    }
    .opts-custom.open .opts-toggle::after {
      transform: rotate(-135deg);
      margin-top: 6px;
    }
    .opts-custom-body { display: none; }
    .opts-custom.open .opts-custom-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .match-card.selected { border-color: rgba(255,255,255,.28); }
    .config { background: #000; }
    .config-box {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 22px;
      background: var(--fog);
      border-radius: 24px;
      padding: 26px;
    }
    .q { font-size: 28px; margin-bottom: 8px; }
    .help { color: var(--muted); margin-bottom: 18px; font-size: 14.5px; }
    .pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .pick button {
      background: #111; border: 2px solid rgba(255,255,255,.08); border-radius: 16px;
      padding: 16px 12px; text-align: left; cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .pick button:hover { border-color: rgba(54,125,239,.5); }
    .pick button.on { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(54,125,239,.14); }
    .pick b { display: block; font-family: Oswald, sans-serif; font-size: 22px; letter-spacing: .04em; }
    .pick span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
    .chosen {
      display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
      margin-bottom: 18px;
    }
    .chosen a { color: var(--blue); font-weight: 700; font-size: 14px; text-decoration: none; }
    .opts { display: flex; flex-direction: column; gap: 10px; }
    .extra {
      background: #111; border-radius: 16px;
      padding: 12px 14px;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) 7.2rem auto;
      align-items: center;
      column-gap: 12px;
      border: 2px solid transparent;
    }
    .extra.on { border-color: var(--blue); }
    .extra .thumb {
      width: 64px; height: 64px;
      background: #000;
      border-radius: 12px;
      overflow: hidden;
    }
    .extra .thumb img {
      width: 100%; height: 100%;
      object-fit: contain;
      mix-blend-mode: lighten;
    }
    #rowSet .thumb { background: #f6f6f6; }
    #rowSet .thumb img { mix-blend-mode: normal; }
    #row-logo .thumb {
      background: var(--blue);
      position: relative;
    }
    #row-logo .thumb img { display: none; }
    #row-logo .thumb::after {
      content: "";
      position: absolute;
      inset: 12px;
      background: #fff;
      -webkit-mask: url("../assets/logo-mark.png") center / contain no-repeat;
      mask: url("../assets/logo-mark.png") center / contain no-repeat;
    }
    #row-bulk .thumb img { mix-blend-mode: normal; padding: 6px; }
    #row-bulk .thumb { background: #f6f6f6; }
    .extra .copy { min-width: 0; }
    .extra .copy strong { display: block; }
    .extra .copy span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
    .extra .price-tag {
      font-weight: 700; font-size: 13px; color: var(--ink);
      white-space: nowrap; text-align: right;
    }
    .extra .price-tag.inc { color: var(--blue); }
    .extra .ctrl { justify-self: end; }
    .stepper { display: flex; align-items: center; gap: 10px; }
    .stepper button {
      width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
      background: #222; color: #fff; cursor: pointer; font-size: 20px; line-height: 1;
    }
    .stepper strong { min-width: 2ch; text-align: center; }
    .switch {
      width: 48px; height: 28px; border-radius: 99px; border: 0; cursor: pointer; background: #3a3a3a; position: relative;
    }
    .switch::after {
      content: ""; width: 22px; height: 22px; border-radius: 50%; background: #fff;
      position: absolute; top: 3px; left: 3px; transition: transform .15s ease;
    }
    .switch.on { background: var(--blue); }
    .switch.on::after { transform: translateX(20px); }
    .switch:disabled { opacity: .7; cursor: default; }

    .summary {
      background: #000;
      border: 1px solid rgba(255,255,255,.08);
      color: #fff;
      border-radius: 20px;
      padding: 24px;
      display: flex; flex-direction: column;
    }
    .summary h3 { font-size: 26px; margin: 4px 0 6px; }
    .summary .hint { color: rgba(255,255,255,.55); font-size: 13px; margin-bottom: 16px; }
    .summary ul { list-style: none; font-size: 14px; }
    .summary li {
      display: flex; justify-content: space-between; gap: 10px;
      padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .total { margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
    .total b { font-family: Oswald, sans-serif; font-size: 36px; }
    .summary .btn { width: 100%; margin-top: 16px; }
    .fine { margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.4); }
    .sum-vis { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
    .sum-vis figure {
      margin: 0; width: 58px; text-align: center;
    }
    .sum-vis .pic {
      width: 58px; height: 58px;
      background: #000;
      border-radius: 10px;
      overflow: hidden;
    }
    .sum-vis img {
      width: 100%; height: 100%;
      object-fit: contain;
      mix-blend-mode: lighten;
    }
    .sum-vis figcaption {
      margin-top: 4px;
      font-size: 10px;
      color: rgba(255,255,255,.55);
      line-height: 1.2;
    }

    .how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    .how-wrap .how { grid-template-columns: 1fr 1fr; }
    .how article { border-top: 3px solid var(--blue); padding-top: 14px; }
    .how .n { font-family: Oswald, sans-serif; color: #fff; font-size: 28px; }
    .how p { color: var(--muted); font-size: 14.5px; margin-top: 8px; }

    .cta {
      background: #1a1a1a;
      color: #fff; text-align: center;
    }
    .cta h2 { font-size: clamp(32px, 4vw, 48px); margin: 10px 0 12px; }
    .cta p { max-width: 540px; margin: 0 auto 22px; color: rgba(255,255,255,.88); }
    .btn-wa { background: #25d366; color: #fff; box-shadow: 0 10px 28px rgba(37,211,102,.35); }
    .btn-wa img { width: 20px; height: 20px; display: block; }
    .wa-float {
      position: fixed;
      right: 20px;
      left: auto;
      bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      z-index: 61;
      width: 56px; height: 56px; border-radius: 50%;
      background: #25d366;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      box-shadow: 0 10px 28px rgba(37,211,102,.4);
    }
    .wa-float img { width: 28px; height: 28px; display: block; }

    .trust {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 36px;
    }
    .trust article {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 14px 16px;
    }
    .trust strong { display: block; font-size: 14px; margin-bottom: 4px; }
    .trust span { font-size: 12px; color: rgba(255,255,255,.58); }

    .reassure {
      display: flex; flex-wrap: wrap; gap: 10px 18px;
      margin-top: 16px;
      font-size: 13px;
      color: var(--muted);
    }
    .reassure b { color: var(--ink); font-weight: 700; }

    .scenes {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      grid-template-rows: 180px 180px;
      gap: 12px;
    }
    .scenes img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 16px;
    }
    .scenes .wide { grid-row: 1 / span 2; }

    .how-wrap {
      display: block;
    }
    .how-photo {
      border-radius: 20px;
      width: 100%;
      height: 420px;
      object-fit: cover;
    }

    .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .faq details {
      background: var(--fog);
      border-radius: 16px;
      padding: 18px 20px;
    }
    .faq summary {
      cursor: pointer;
      font-weight: 700;
      list-style: none;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq details p { color: var(--muted); font-size: 14.5px; margin-top: 10px; }

    .modal-card { max-width: 500px; }
    .modal-card ul { list-style: none; margin: 0 0 18px; font-size: 14px; }
    .modal-card li { padding: 6px 0 6px 18px; position: relative; }
    .modal-card li::before {
      content: ""; width: 7px; height: 7px; border-radius: 50%;
      background: var(--blue); position: absolute; left: 0; top: 11px;
    }
    .modal-actions { display: flex; flex-direction: column; gap: 10px; }
    .modal-actions .btn { width: 100%; }
    .modal-side { text-align: center; font-size: 13px; color: var(--muted); }
    .modal-side a { color: var(--blue); font-weight: 700; text-decoration: none; }

    footer { background: #0d0d0d; color: rgba(255,255,255,.55); padding: 32px 0; font-size: 13px; }
    .foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    footer a { color: #fff; text-decoration: none; }
    footer a:hover { color: var(--blue-2); }

    .modal {
      position: fixed; inset: 0; background: rgba(0,0,0,.7);
      display: none; align-items: center; justify-content: center; z-index: 80; padding: 20px;
    }
    .modal.open { display: flex; }
    .modal-card { background: #1a1a1a; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 28px; max-width: 460px; width: 100%; }
    .modal-card h3 { font-size: 26px; margin-bottom: 8px; }
    .modal-card p { color: var(--muted); margin-bottom: 18px; }

    .buybar {
      position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(120%);
      background: #111; color: #fff; border-radius: 999px;
      display: flex; align-items: center; gap: 16px;
      padding: 10px 10px 10px 20px;
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      z-index: 60;
      transition: transform .28s ease;
    }
    .buybar.show { transform: translateX(-50%) translateY(0); }
    .buybar b { font-family: Oswald, sans-serif; letter-spacing: .04em; }

    @media (max-width: 960px) {
      .wrap { width: min(var(--max), calc(100% - 28px)); }
      .nav { min-height: 60px; gap: 10px; }
      .brand span { font-size: 13px; letter-spacing: .1em; }
      .brand img { width: 32px; height: 32px; flex-shrink: 0; }
      .nav-toggle { display: flex; }
      .nav-end .lang-only {
        display: flex;
        position: static;
        inset: auto;
        background: transparent;
        flex-direction: row;
        padding: 0;
        overflow: visible;
        border: 0;
      }
      .nav-end .lang-only > li { border: 0; }
      .nav-cta { padding: 10px 12px; font-size: 12px; white-space: nowrap; }
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 48;
        background: #111;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 20px 28px;
        overflow-y: auto;
        max-height: min(78vh, calc(100dvh - 100%));
        border-bottom: 1px solid rgba(255,255,255,.08);
      }
      header.site.menu-open .nav-links:not(.lang-only) { display: flex; }
      .nav-links:not(.lang-only) > li { border-bottom: 1px solid rgba(255,255,255,.08); }
      .nav-links:not(.lang-only) > li > a {
        display: block;
        padding: 14px 0;
        font-size: 16px;
      }
      .nav-links:not(.lang-only) .has-sub > a { color: rgba(255,255,255,.45); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 6px; padding-top: 16px; pointer-events: none; }
      .nav-links:not(.lang-only) .has-sub .subnav {
        display: block;
        position: static;
        min-width: 0;
        padding: 0 0 10px;
        border: 0;
        background: transparent;
        border-radius: 0;
      }
      .nav-links:not(.lang-only) .has-sub .subnav a { padding: 10px 0; font-size: 16px; }
      .nav-end { position: relative; }
      .nav-end .lang-only .has-sub { position: static; }
      .nav-end .lang-only .subnav {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: auto;
        min-width: 200px;
        max-width: calc(100vw - 16px);
      }
      .nav-end .lang-only .has-sub:hover .subnav,
      .nav-end .lang-only .has-sub:focus-within .subnav { display: block; }
      body.nav-lock { overflow: hidden; }

      .hero { min-height: auto; }
      .hero-grid, .set-grid, .why, .how, .config-box, .pick, .trust, .faq, .how-wrap, .match-grid {
        grid-template-columns: 1fr;
      }
      .hero-grid { padding: 36px 0 28px; gap: 22px; }
      .hero h1.display, .hero h2.display { font-size: clamp(34px, 11vw, 48px); }
      [data-page="home"] .hero h1.display { font-size: clamp(30px, 9.4vw, 44px); }
      .hero .lead { font-size: 16px; margin-bottom: 20px; }
      .hero-actions { flex-direction: column; }
      .hero-actions .btn { width: 100%; min-height: 48px; }
      .hero-stats { flex-wrap: wrap; gap: 16px 20px; margin-top: 24px; }
      .hero-stats strong { font-size: 16px; }
      .works-bar { padding: 18px 0 20px; }
      .works-bar ul { gap: 8px 18px; }
      .works-bar svg { width: 20px; height: 20px; }

      .photo-frame { height: 240px; }
      .photo-frame .shot.a { width: 100%; height: 100%; right: 0; top: 0; }
      .photo-frame .shot.b,
      .photo-frame .chip { display: none; }

      section { padding: 56px 0; }
      .section-head { margin-bottom: 28px; }
      .section-head h2 { font-size: clamp(28px, 8vw, 38px); }

      .why article img { height: 180px; }

      .scenes {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 160px 120px 120px;
      }
      .scenes .wide { grid-column: 1 / -1; grid-row: auto; }

      .stage .life { height: 88px; }
      .kit.four { grid-template-columns: repeat(2, 1fr); }
      .price-row { flex-direction: column; align-items: stretch; gap: 14px; }
      .price-row .btn { width: 100%; min-height: 48px; }
      .set-actions { align-items: stretch; }
      .set-actions .linkish { text-align: center; }

      .config-box { padding: 18px; border-radius: 18px; }
      .q { font-size: 22px; }
      .pick button { min-height: 72px; }
      .extra { grid-template-columns: 52px minmax(0, 1fr) 4.8rem auto; }
      .extra .thumb { width: 52px; height: 52px; }
      .chosen { flex-direction: column; align-items: flex-start; }
      .set-card.deal { transform: none; }
      .wa-float {
        right: 16px;
        left: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      }
      body.buybar-on .wa-float {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
      }
      .switch { flex-shrink: 0; width: 52px; height: 32px; }
      .switch::after { width: 24px; height: 24px; }
      .switch.on::after { transform: translateX(20px); }

      .how-wrap .how { grid-template-columns: 1fr; }
      .how-photo { height: 220px; }

      .faq details { padding: 16px; }
      .faq summary { min-height: 44px; padding-right: 8px; }

      .cta { padding: 56px 0; }
      .cta .btn { width: 100%; max-width: 360px; min-height: 48px; }

      .buybar {
        left: 0; right: 0; bottom: 0;
        width: 100%;
        transform: translateY(110%);
        border-radius: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        justify-content: space-between;
        gap: 10px;
      }
      .buybar.show { transform: translateY(0); }
      .buybar .btn { padding: 12px 16px; min-height: 44px; flex-shrink: 0; }
      body.buybar-on { padding-bottom: 72px; }

      .modal { padding: 12px; align-items: flex-end; }
      .modal-card {
        max-width: none;
        border-radius: 20px 20px 0 0;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
      }

      .foot { flex-direction: column; text-align: center; }
    }

    @media (max-width: 400px) {
      .kit figcaption { font-size: 9px; }
    }

    @media (hover: none) {
      .btn:hover, .set-card:hover, .set-card.deal:hover { transform: none; }
    }

.nav-links { align-items: center; }
@media (max-width: 960px) {
  .nav-links:not(.lang-only) { align-items: stretch; text-align: left; }
  .nav-end { position: relative; }
  .nav-end .lang-only .has-sub { position: static; }
  .nav-end .lang-only .lang-menu {
    left: auto;
    right: 0;
    min-width: 200px;
    max-width: calc(100vw - 16px);
  }
}
.nav-links .has-sub { position: relative; }
.nav-links .has-sub > a { cursor: pointer; }
.subnav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 10px 0;
  background: #111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  list-style: none;
  z-index: 20;
}
.nav-links .has-sub:hover .subnav,
.nav-links .has-sub:focus-within .subnav { display: block; }
.subnav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  color: #fff;
  font-size: 13px;
}
.subnav a:hover { background: rgba(54,125,239,.18); color: #fff; }
.subnav a.current { color: var(--blue-2); }
.subnav .soon {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.subnav a.live .soon { color: var(--orange); }

/* Onder Voor wie: een lijn tussen de toepassingen en Alle complete sets en Keuzehulp. */
.subnav .subnav-los { border-top: 1px solid rgba(255,255,255,.12); margin-top: 6px; padding-top: 6px; }

.aud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.aud-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: #141414;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .2s ease, border-color .2s ease;
}
.aud-card:hover { transform: translateY(-6px); border-color: rgba(54,125,239,.45); }
.aud-card .pic {
  height: 168px;
  background: #0b0b0b center / cover no-repeat;
}
.aud-card .body { padding: 18px; flex: 1; }
.aud-card h3 { font-size: 20px; margin-bottom: 6px; }
.aud-card p { color: rgba(255,255,255,.6); font-size: 14px; }
.aud-card .soon-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
}
.shop-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.shop-row a {
  background: var(--fog);
  border-radius: 16px;
  padding: 22px;
  text-decoration: none;
}
.shop-row h3 { font-size: 18px; margin-bottom: 6px; }
.shop-row p { color: var(--muted); font-size: 14px; }

.stub {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 20px;
  background: #0d0d0d;
  color: #fff;
}
.stub h1 { margin: 12px 0 16px; }
.stub p { max-width: 480px; margin: 0 auto 24px; color: rgba(255,255,255,.7); }

.foot-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.foot-cols h4 {
  color: #fff;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.foot-cols a { display: block; padding: 4px 0; color: rgba(255,255,255,.65); }
.foot-cols a:hover { color: #fff; }

@media (max-width: 960px) {
  .aud-grid, .shop-row { grid-template-columns: 1fr 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .aud-grid, .shop-row, .foot-cols { grid-template-columns: 1fr; }
}

.shorts-sec { background: #0d0d0d; color: #fff; }
.shorts-sec .eyebrow { color: var(--blue-2); }
.shorts-sec .section-head p { color: rgba(255,255,255,.62); }
.shorts-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 16px;
  -webkit-overflow-scrolling: touch;
}
.shorts-scroll::-webkit-scrollbar { height: 6px; }
.shorts-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 99px; }
.short {
  position: relative;
  flex: 0 0 220px;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  scroll-snap-align: start;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.short iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.shorts-more {
  margin-top: 8px;
  font-size: 14px;
}
.shorts-more a { color: #fff; font-weight: 700; }
/* In de spotlight: foto's van klanten onder de shorts, groot in een venster (js/galerij.js). */
/* flow-root: zonder padding boven zou de marge van de eyebrow door de sectie heen zakken. */
.spot-sec { display: flow-root; background: #0d0d0d; color: #fff; padding-top: 0; }
.spot-sec .eyebrow { color: var(--blue-2); }
.spot-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spot-grid a { display: block; border-radius: 12px; overflow: hidden; background: #111; }
.spot-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.spot-grid a:hover img { transform: scale(1.03); }
.spot-grid a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.spot-dlg {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 56px 80px; border: 0;
  background: rgba(0,0,0,.92); color: #fff;
}
.spot-dlg[open] { display: flex; align-items: center; justify-content: center; }
.spot-dlg::backdrop { background: rgba(0,0,0,.6); }
.spot-dlg figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.spot-dlg img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; border-radius: 12px; }
.spot-dlg figcaption { max-width: 720px; font-size: 14px; text-align: center; color: rgba(255,255,255,.72); }
.spot-knop {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(17,17,17,.7);
  font-size: 28px; line-height: 1; color: #fff; cursor: pointer;
}
.spot-knop:hover { background: var(--blue); border-color: var(--blue); }
.spot-sluit { top: 16px; right: 16px; }
.spot-vorige, .spot-volgende { top: 50%; transform: translateY(-50%); }
.spot-vorige { left: 16px; }
.spot-volgende { right: 16px; }
@media (max-width: 640px) {
  .spot-grid { gap: 8px; }
  .spot-grid a { border-radius: 8px; }
  .spot-dlg { padding: 64px 12px 84px; }
  .spot-vorige, .spot-volgende { top: auto; bottom: 20px; transform: none; }
  .spot-vorige { left: calc(50% - 60px); }
  .spot-volgende { right: calc(50% - 60px); }
}
@media (max-width: 960px) {
  .short { flex-basis: 180px; }
}
.sets-also {
  margin: 32px 0 12px;
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: 15px;
  font-weight: 600;
}
.sets-uses {
  justify-content: flex-start;
  margin: 0 0 18px;
}
.sets-uses a {
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.sets-uses a:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.sets-also a { color: var(--blue-2); text-decoration: none; }
.sets-also a:hover { text-decoration: underline; }
.catalog-grid { grid-template-columns: repeat(3, 1fr); }
.catalog-grid .match-card img { aspect-ratio: 5 / 4; }
/* Overzicht van alle complete sets en de productpagina's (js/catalogus.js),
   op wit onder een zwarte kop. Bovenaan een balk die bij het scrollen blijft
   staan (aantal koptelefoons, eigenschappen), op /sets daaronder een
   vergelijking van de vijf koptelefoons, en dan de sets per serie met een
   kop die zegt waarom je die kiest. Op een telefoon schuiven de keuzes en
   de vergelijking opzij en staat de foto links naast de tekst. */
/* Van de kop naar de witte lijst dezelfde afstand als op /koptelefoons. */
.page-hero + #producten:has(#catalogus-root) { padding-top: 0; }
.page-hero:has(+ #producten) { padding-bottom: 28px; }
.page-hero + #producten #catalogus-root { margin-top: 0; }
.sets:has(#catalogus-root) { padding-bottom: 0; }
/* Op /sets en /koptelefoons begint de pagina met het overzicht: een lage kop. */
[data-page="audience"] .sets:has(#catalogus-root) { padding-top: 52px; }
[data-page="audience"] .sets:has(#catalogus-root) .section-head { margin-bottom: 28px; }
#catalogus-root { --cat-line: #e7e7ea; --cat-muted: #71717a; --cat-soft: #f5f5f7; --cat-tint: #eaf1fe; margin-top: 8px; padding: 12px 0 72px; color: #111; background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
#catalogus-root:empty, #catalogus-root[aria-busy="true"] { min-height: 100vh; }
.cat-wait { color: #52525b; }
#catalogus-root :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* De balk. Met keuzes erin plakt hij onder de sitekop; het wit en de lijn
   lopen dan over de volle breedte (schaduw, geen extra breedte). */
.cat-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 0; margin-bottom: 28px; background: #fff; box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax var(--cat-line); clip-path: inset(0 -100vmax -1px); }
.cat-bar-vast { position: sticky; top: var(--cat-top, 104px); z-index: 20; }
.cat-count { margin: 0; font-size: 15px; font-weight: 700; color: #111; }
/* Raad voor wie tussen twee maten zit, direct onder de filterbalk */
.cat-tip { margin: -14px 0 24px; font-size: 14px; line-height: 1.5; color: #555; }
.cat-tip span { display: block; }
.cat-tip .cat-levertijd { color: #111; }
.cat-tip a, .cat-tip .cat-tip-a { color: var(--blue); font-weight: 600; }
.cat-tip .cat-tip-a, .cat-tip .cat-tip-prijs { display: inline; }
.cat-tip .cat-tip-wacht { visibility: hidden; }
.cat-rij { display: contents; }
.cat-maten, .cat-modellen { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cat-maten b, .cat-modellen b { margin-right: 4px; font-size: 12px; font-weight: 700; color: var(--cat-muted); white-space: nowrap; }
/* Aantallen en koptelefoons: één zachte strook met de keuzes erin. */
.cat-seg { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border-radius: 999px; background: #f4f4f5; }
.cat-seg .cat-chip { padding: 6px 12px; background: transparent; }
.cat-seg .cat-chip:hover:not([disabled]):not(.on) { background: #fff; }
.cat-seg-kop { align-self: center; padding: 0 6px 0 10px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cat-muted); }
.cat-modellen .cat-seg + .cat-seg { margin-left: 4px; }
.cat-maten .cat-chip { min-width: 40px; justify-content: center; padding: 6px 9px; }
/* Bij sets geen getallen op de knoppen: het aantal sets staat vooraan. */
.cat-sets .cat-chip span,
.cat-maten .cat-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cat-rij .cat-chip { flex-shrink: 0; white-space: nowrap; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
/* Bij sets: de koptelefoons op een eigen regel, met de knop naar de
   vergelijking erachter. */
.cat-breuk { flex-basis: 100%; height: 0; margin-top: -4px; }
/* De knop naar de vergelijking: zoals de knoppen in de vergelijking zelf,
   wit met een grijze rand, rechts op de regel van de koptelefoons. */
.cat-vgl { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 15px; border: 1px solid #d4d4d8; border-radius: 999px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; color: #111; white-space: nowrap; transition: border-color .15s ease, color .15s ease; }
.cat-vgl svg { width: 16px; height: 16px; flex-shrink: 0; }
.cat-vgl:hover { border-color: var(--blue); color: var(--blue); }
.cat-vgl-kort { display: none; }
.cat-sets .cat-reset { margin-left: auto; }
.cat-reset + .cat-vgl { margin-left: 14px; }
.cat-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: #f4f4f5; color: #27272a; border: 0;
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cat-chip span { font-size: 11px; font-weight: 700; color: var(--cat-muted); }
.cat-chip:hover:not([disabled]):not(.on) { background: #e9e9ec; }
.cat-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cat-chip.on span { color: rgba(255,255,255,.85); }
.cat-chip[disabled] { opacity: .4; cursor: default; }
.cat-reset { padding: 0; background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--blue); }
.cat-reset:hover { text-decoration: underline; }
.cat-main { scroll-margin-top: calc(var(--cat-top, 104px) + var(--cat-bar, 64px) + 12px); }

/* Vergelijking van de koptelefoons: een tabel met de kenmerken één keer
   links en de series als kolommen, het topmodel lichtblauw en een gekozen
   serie iets donkerder. Op smalle schermen schuift de tabel opzij en blijft
   de kolom met kenmerken staan. */
.cat-v { margin-bottom: 48px; }
.cat-v-intro { max-width: 680px; }
.cat-v-intro h2 { margin: 0 0 8px; font-family: Oswald, sans-serif; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: #111; }
.cat-v-intro p { margin: 0; font-size: 15px; color: #52525b; }
.cat-vt-wrap { margin-top: 8px; padding-top: 14px; overflow-x: auto; }
.cat-vt { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cat-vt th, .cat-vt td { padding: 10px 12px; border-bottom: 1px solid #efeff1; text-align: left; vertical-align: middle; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: #18181b; }
.cat-vt-hoek, .cat-vt tbody th { width: 150px; }
.cat-vt tbody th { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cat-muted); background: #fff; }
.cat-vt thead th { position: relative; padding: 18px 8px 12px; text-align: center; }
.cat-vt thead img { width: auto; height: 58px; margin: 0 auto 6px; object-fit: contain; }
.cat-vt thead b { display: block; font-family: Oswald, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: #111; }
.cat-vt thead small { display: inline-block; margin-top: 6px; }
.cat-vt thead small { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--cat-line); background: #fff; font-family: Montserrat, "Montserrat fallback", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--cat-muted); }
.cat-vt .top { background: var(--cat-tint); }
.cat-vt .gekozen { background: #d6e5fd; }
.cat-vt [data-kies] { cursor: pointer; transition: background .15s ease; }
.cat-vt th.hover, .cat-vt td.hover { background: var(--cat-soft); }
.cat-vt .top.hover { background: #dfeafd; }
.cat-vt .gekozen.hover { background: #cddffc; }
.cat-vt td.hover .cat-v-knop { border-color: var(--blue); color: var(--blue); }
.cat-vt thead th.top, .cat-vt thead th.gekozen, .cat-vt thead th.hover { border-radius: 14px 14px 0 0; }
.cat-vt thead .cat-vt-hoek, .cat-vt-knoppen td { border-bottom-color: transparent; }
.cat-vt-knoppen td { padding: 12px 8px 14px; }
.cat-vt-knoppen td.top, .cat-vt-knoppen td.gekozen, .cat-vt-knoppen td.hover { border-radius: 0 0 14px 14px; }
.cat-vt thead .cat-v-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); }
.cat-v-badge { padding: 4px 11px; border-radius: 999px; background: var(--blue); color: #fff; font-family: Montserrat, "Montserrat fallback", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.cat-v-bereik { display: flex; align-items: center; gap: 10px; }
.cat-v-meter { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: #e4e4e7; }
.cat-v-meter i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.cat-v-bereik b { flex: 0 0 auto; }
.cat-v-nee { color: #a1a1aa; }
.cat-vt .btn { width: 100%; padding: 9px 8px; font-size: 13px; box-shadow: none; }
.cat-vt .btn:hover { transform: none; }
.cat-v-knop { background: #fff; color: #111; border: 1px solid #d4d4d8; }
.cat-v-knop:hover { border-color: var(--blue); color: var(--blue); }
.cat-v-geen { display: block; text-align: center; font-size: 13px; color: var(--cat-muted); }
.cat-v-alle { margin: 12px 0 0; font-size: 13px; color: var(--cat-muted); }
/* Zenders onder de vergelijking: welke zender zit in welke set */
.cat-v-zenders { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e4e4e7; }
.cat-v-zenders h3 { margin: 0 0 4px; font-size: 15px; }
.cat-v-zenders p { margin: 0 0 8px; font-size: 13px; color: var(--cat-muted); }
.cat-v-zenders ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.45; }
@media (max-width: 560px) { .cat-v-zenders ul { grid-template-columns: 1fr; } }

/* Kaarten */
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (min-width: 1101px) {
  .cat-sets .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}
.cat-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cat-line); border-radius: 16px; overflow: hidden; scroll-margin-top: 200px; transition: border-color .2s ease, box-shadow .2s ease; }
.cat-card:hover { border-color: #d4d4d8; box-shadow: 0 12px 32px rgba(17,17,17,.08); }
.cat-card.hl { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(54,125,239,.18); }
.cat-img { position: relative; display: block; background: var(--cat-soft); overflow: hidden; }
.cat-img .cat-v-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.cat-img img { width: 100%; aspect-ratio: 5 / 4; object-fit: contain; padding: 14px; transition: transform .3s ease; }
.cat-card:hover .cat-img img { transform: scale(1.03); }
.cat-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.cat-card h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.25; font-weight: 700; }
.cat-card.cat-los h3 { font-size: 15px; line-height: 1.35; }
.cat-card h3 a { color: #111; text-decoration: none; }
.cat-card h3 a:hover { color: var(--blue); }
.cat-meta { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cat-muted); }
.cat-specs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; font-size: 13px; color: #3f3f46; }
.cat-specs li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; line-height: 1.35; }
.cat-specs svg { margin-top: 1px; color: var(--cat-muted); }
.cat-bt { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--cat-tint); color: #1f5fcc; font-style: normal; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.cat-koop { margin-top: auto; }
.cat-price { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.cat-price b { font-family: Oswald, sans-serif; font-size: 25px; letter-spacing: .02em; color: #111; }
.cat-price s { font-size: 14px; color: #a1a1aa; }
.cat-price span { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--cat-muted); }
.cat-price .cat-pk { font-size: 12.5px; font-weight: 600; color: #3f3f46; }
.cat-noot { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: #3f3f46; }
.cat-actions .kassa-form { display: contents; }
.cat-actions .btn { width: 100%; gap: 8px; padding: 11px 14px; font-size: 13.5px; box-shadow: none; }
.cat-actions .btn:hover { transform: none; background: #2a6ad6; }
.cat-card .cat-actions .btn:not([disabled]) { background: var(--cat-tint); color: #1f5fcc; }
.cat-card .cat-actions .btn:not([disabled]):hover { background: var(--blue); color: #fff; }
.cat-actions .btn[disabled] { opacity: .5; cursor: default; background: #a1a1aa; }
.cat-groep + .cat-groep { margin-top: 44px; }
.cat-groep-kop { scroll-margin-top: calc(var(--cat-top, 80px) + var(--cat-bar, 0px) + 16px); display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; font-family: Oswald, sans-serif; font-size: 24px; letter-spacing: .05em; text-transform: uppercase; color: #111; }
.cat-groep-kop span { font-family: Montserrat, "Montserrat fallback", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #a1a1aa; }
.cat-card { cursor: pointer; }
.cat-card .cat-actions { cursor: auto; }

/* Details van een set in een venster op de eigen pagina: foto's links, de
   rest rechts; op een telefoon over het hele scherm, alles onder elkaar. */
html:has(.cat-dlg[open]) { overflow: hidden; }
/* margin: auto zet het venster in het midden; de reset bovenaan de site zet marges op 0. */
.cat-dlg { margin: auto; --cat-line: #e7e7ea; --cat-muted: #71717a; --cat-soft: #f5f5f7; --cat-tint: #eaf1fe; width: min(1040px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 20px; background: #fff; color: #111; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
.cat-dlg::backdrop { background: rgba(10,10,12,.6); backdrop-filter: blur(3px); }
.cat-dlg-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-height: calc(100dvh - 48px); }
/* Het setvenster heeft een vaste hoogte: de omschrijving komt pas na het
   openen uit Shopify en is vrijwel altijd hoger dan het scherm. Zonder vaste
   hoogte opende het venster klein en groeide het daarna, en omdat het in het
   midden staat verschoof het dan naar boven. De kolommen scrollen zelf. */
.cat-dlg:not(.cat-dlg-vgl) { height: calc(100dvh - 48px); }
.cat-dlg:not(.cat-dlg-vgl) .cat-dlg-in { height: 100%; }
.cat-dlg-fotos { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--cat-soft); overflow: auto; }
.cat-dlg-foto { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 14px; background: #fff; }
.cat-dlg-duims { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-dlg-duims button { width: 64px; height: 64px; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: #fff; cursor: pointer; }
.cat-dlg-duims button.on, .cat-dlg-duims button:hover { border-color: var(--blue); }
.cat-dlg-duims img { width: 100%; height: 100%; object-fit: contain; }
.cat-dlg-duims-laden .cat-skeleton-line { flex: 0 0 64px; height: 64px; border-radius: 10px; }
.cat-dlg-info { padding: 30px 30px 26px; overflow: auto; }
.cat-dlg-info h2 { margin: 2px 44px 16px 0; font-size: 22px; line-height: 1.3; font-weight: 700; }
.cat-dlg-info .cat-koop { margin-top: 0; }
.cat-dlg-info .cat-actions .btn { width: 100%; }
.cat-dlg-sluit { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border: 1px solid var(--cat-line); border-radius: 999px; background: #fff; color: #111; font-size: 24px; line-height: 1; cursor: pointer; }
.cat-dlg-sluit:hover { border-color: #111; }
.cat-dlg-tekst { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cat-line); font-size: 14px; line-height: 1.6; color: #3f3f46; }
/* Uitvoeringen van dezelfde set in het venster. */
.cat-opties { margin: 0 0 18px; }
.cat-opties ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cat-optie { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 10px 12px; border: 1px solid var(--cat-line); border-radius: 12px; background: #fff; color: #3f3f46; font: inherit; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cat-optie:hover { border-color: #d4d4d8; background: var(--cat-soft); }
.cat-optie.on { border-color: var(--blue); background: var(--cat-tint); cursor: default; }
.cat-optie-wat b { font-weight: 700; color: #1f5fcc; }
.cat-optie-prijs { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; font-weight: 700; color: #111; }
.cat-optie-prijs small { font-size: 11.5px; font-weight: 600; color: var(--cat-muted); }
.cat-opties h3, .cat-dlg-tekst h3 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cat-muted); }
.cat-dlg-tekst p { margin: 0 0 10px; }
.cat-dlg-tekst ul, .cat-dlg-tekst ol { margin: 6px 0 12px; padding-left: 20px; }
.cat-dlg-tekst li { margin: 3px 0; }
.cat-dlg-tekst h1, .cat-dlg-tekst h2, .cat-dlg-tekst h4 { margin: 16px 0 6px; font-size: 15px; color: #111; }
.cat-dlg-tekst a { color: var(--blue); }
.cat-dlg-laden { display: grid; gap: 10px; }
.cat-dlg :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cat-dlg-vgl .cat-dlg-in { --pad: 30px; display: block; padding: var(--pad); overflow: auto; }
.cat-dlg-vgl .cat-v { margin: 0; }
.cat-dlg-vgl .cat-v-intro { padding-right: 48px; }
@media (max-width: 760px) {
  .cat-dlg { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .cat-dlg-in { display: block; max-height: 100dvh; height: 100%; overflow: auto; }
  .cat-dlg-fotos { overflow: visible; padding: 16px; }
  .cat-dlg-foto { max-height: 46vh; }
  .cat-dlg-info { overflow: visible; padding: 20px 18px 28px; }
  .cat-dlg-sluit { position: fixed; top: 12px; right: 12px; }
  .cat-dlg-vgl .cat-dlg-in { --pad: 18px; }
}
@media (max-width: 860px) {
  .cat-dlg-vgl .cat-vt-wrap { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
}

@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Smal scherm: de tabel loopt tot de rand en schuift opzij; de kolom met
   kenmerken blijft staan. */
@media (max-width: 860px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cat-vt-wrap { margin: 8px calc(50% - 50vw) 0; }
  .cat-vt { min-width: 744px; }
  .cat-vt-hoek, .cat-vt tbody th { position: sticky; left: 0; z-index: 2; width: 104px; padding-left: 14px; background: #fff; box-shadow: 1px 0 0 #efeff1; }
  /* Het label Meest gekozen steekt boven de tabel uit, in de 14px ruimte
     van .cat-vt-wrap; de hoekcel dekt die strook ook af, anders zweeft het
     label over de vaste kolom als de tabel opzij schuift. */
  .cat-vt thead .cat-vt-hoek { box-shadow: 1px 0 0 #efeff1, 0 -14px 0 #fff; }
  .cat-vt tbody th { font-size: 10px; letter-spacing: .06em; }
  .cat-v-alle { margin-top: 10px; }
}
/* Telefoon: de keuzes in één rij die opzij schuift, één kaart per regel
   met de foto links. */
@media (max-width: 560px) {
  .cat-bar { gap: 8px 12px; padding: 10px 0; margin-bottom: 20px; }
  .cat-tip { margin: -8px 0 18px; font-size: 13px; }
  .cat-rij { order: 5; flex: 1 0 100%; display: flex; align-items: center; gap: 8px; overflow-x: auto; margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%) 2px; scrollbar-width: none; }
  .cat-rij::-webkit-scrollbar { display: none; }
  .cat-maten, .cat-modellen, .cat-chips { display: contents; }
  .cat-maten b, .cat-modellen b { margin-right: 0; }
  .cat-breuk { display: none; }
  .cat-reset { margin-left: auto; }
  .cat-vgl { padding: 6px 12px; }
  .cat-reset + .cat-vgl { margin-left: 12px; }
  .cat-bar-filter .cat-vgl-lang { display: none; }
  .cat-bar-filter .cat-vgl-kort { display: inline; }
  .cat-v { margin-bottom: 40px; }
  .cat-vt th, .cat-vt td { font-size: 13px; }
  .cat-vt thead img { height: 48px; }
  .cat-vt thead b { font-size: 19px; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cat-card { flex-direction: row; }
  .cat-img { flex: 0 0 104px; align-self: flex-start; margin: 12px 0 12px 12px; border-radius: 12px; }
  .cat-img img { aspect-ratio: 1; padding: 6px; }
  .cat-card:hover .cat-img img { transform: none; }
  .cat-body { padding: 12px 14px 14px; }
  .cat-card h3 { font-size: 17px; margin-bottom: 8px; }
  .cat-card.cat-los h3 { font-size: 14px; }
  .cat-specs { font-size: 12.5px; gap: 5px; margin-bottom: 12px; }
  .cat-price { margin-bottom: 10px; }
  .cat-price b { font-size: 21px; }
  .cat-actions .btn { padding: 10px 12px; font-size: 13px; }
  .cat-groep-kop { font-size: 20px; }
}

/* Rustige plaatsaanduidingen zolang de productgegevens nog laden. */
.cat-skeleton-card { display: flex; flex-direction: column; border: 1px solid #f0f0f2; border-radius: 16px; overflow: hidden; }
.cat-skeleton-image { aspect-ratio: 5 / 4; background: #f6f6f7; }
.cat-skeleton-body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 16px; }
.cat-skeleton-line, .cat-skeleton-action { background: #eeeef0; border-radius: 6px; animation: cat-skeleton-pulse 2.4s ease-in-out infinite; }
.cat-skeleton-line { height: 10px; width: 88%; }
.cat-skeleton-line:nth-child(2) { width: 65%; }
.cat-skeleton-short { width: 38%; height: 16px; margin-block: 8px; }
.cat-skeleton-action { width: 100%; height: 40px; border-radius: 999px; }
.cat-skeleton-count { width: 72px; height: 17px; }
/* De balk in de laadweergave van de sets heeft de opbouw van de echte balk;
   tekst en pictogram zijn onzichtbaar, knoppen en stroken grijze vlakken. */
.cat-skeleton .cat-bar { pointer-events: none; }
.cat-skeleton .cat-bar :is(p, b, span, i) { color: transparent; }
.cat-skeleton .cat-vgl svg { visibility: hidden; }
.cat-skeleton .cat-count, .cat-skeleton .cat-bar b, .cat-skeleton .cat-seg, .cat-skeleton .cat-chips .cat-chip, .cat-skeleton .cat-reset, .cat-skeleton .cat-vgl { border-color: transparent; background: #eeeef0; animation: cat-skeleton-pulse 2.4s ease-in-out infinite; }
.cat-skeleton .cat-count, .cat-skeleton .cat-bar b, .cat-skeleton .cat-reset { border-radius: 6px; }
.cat-skeleton .cat-rij { overflow: hidden; }
.cat-skeleton .cat-groep-kop { width: fit-content; border-radius: 6px; background: #eeeef0; animation: cat-skeleton-pulse 2.4s ease-in-out infinite; }
.cat-skeleton .cat-groep-kop, .cat-skeleton .cat-groep-kop span { color: transparent; }
/* Knoppen hebben line-height normal; de nagebootste knoppen erven anders
   de hogere regelhoogte van de pagina. */
.cat-skeleton .cat-vgl, .cat-skeleton .cat-reset { line-height: normal; }
@keyframes cat-skeleton-pulse { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
  .cat-skeleton-line, .cat-skeleton-action, .cat-skeleton .cat-bar *, .cat-skeleton .cat-groep-kop { animation: none; }
}
@media (max-width: 560px) {
  .cat-skeleton-card { flex-direction: row; }
  .cat-skeleton-image { flex: 0 0 104px; align-self: flex-start; margin: 12px 0 12px 12px; border-radius: 12px; aspect-ratio: 1; }
  .cat-skeleton-body { padding: 12px 14px 14px; }
}
.set-paths {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 14px;
  margin: 28px 0 22px;
}
.set-path {
  background: #161616;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px 20px;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.set-path p {
  color: rgba(255,255,255,.55);
  font-size: 13.5px;
  margin: 6px 0 14px;
  flex: 1;
}
.set-path > span {
  font-weight: 700;
  font-size: 14px;
  color: var(--blue-2);
}
.set-path-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.set-path-actions button {
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.set-path-actions button:hover,
.set-path-actions button.on {
  background: #fff;
  color: #111;
  border-color: #fff;
}
@media (max-width: 960px) {
  .catalog-grid { grid-template-columns: 1fr 1fr; }
  .set-paths { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .catalog-grid { grid-template-columns: 1fr; }
}

/* Sinds 27 september 2026 dezelfde kop als Complete sets en Koptelefoons: de
   paginanaam op één regel, de korte zin erboven. Geldt ook voor de kop van /over. */
.page-hero { padding: 52px 0 36px; color: #fff; background: #0f0f0f; }
.page-hero h1.display, .page-hero h2.display, [data-section="over"] .hero h1.display { font-size: 32px; margin: 0; }
.page-hero .lead, [data-section="over"] .hero .lead { color: rgba(255,255,255,.62); max-width: 640px; margin-top: 12px; font-size: inherit; text-wrap: balance; }
.page-hero .eyebrow, [data-section="over"] .hero .eyebrow { color: rgba(255,255,255,.62); }
[data-section="over"] .hero { padding: 52px 0; }
[data-section="over"] .hero-grid { padding: 0; }
[data-section="over"] .hero .eyebrow { margin-top: 0; }
/* De grote foto blijft; de tekst staat er verticaal in het midden naast.
   De drie feiten staan in gelijke kolommen. */
@media (min-width: 961px) {
  [data-section="over"] .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 24px; }
  [data-section="over"] .hero-stats > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  [data-section="over"] .hero-stats strong { font-size: 17px; line-height: 1.3; }
  [data-section="over"] .hero-stats span { line-height: 1.45; }
}
.prose { max-width: 760px; }
.prose h2 { font-family: Oswald, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; margin: 34px 0 10px; font-size: 28px; }
.prose h3 { margin: 22px 0 8px; font-size: 17px; }
.prose p, .prose li { color: var(--muted); margin-bottom: 12px; }
.prose ul { padding-left: 18px; margin-bottom: 16px; }
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; align-items: stretch; }
.contact-card {
  background: var(--fog);
  border-radius: 20px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
}
.contact-card strong { display: block; margin-bottom: 8px; font-size: 18px; }
.contact-card p { color: var(--muted); margin: 0 0 10px; }
.contact-card .btn { margin-top: auto; align-self: flex-start; max-width: 100%; }
@media (max-width: 960px) {
  .contact-card .btn { width: 100%; }
  .contact-card .btn-ink { font-size: 13px; word-break: break-all; }
}
.contact-card-wa { background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.28); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -6px 8px; padding: 0 6px 8px; }
.spec-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; margin: 8px 0 20px; }
.spec-table th, .spec-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Landingspagina's: tekst onder een kop buiten de setsblokken, en de vijf koptelefoons naast elkaar. */
.section-head .display + p { margin-top: 12px; color: var(--muted); }
[data-section="silent-disco"] .section-head .display, [data-section="rondleidingssysteem"] .section-head .display { text-wrap: balance; }
@media (min-width: 961px) {
  [data-section="silent-disco"] .hero-stats > div, [data-section="rondleidingssysteem"] .hero-stats > div { flex: 1 1 0; min-width: 0; }
}
.lp-modellen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lp-model { display: flex; flex-direction: column; background: var(--fog); border-radius: 18px; overflow: hidden; }
.lp-model-foto { position: relative; display: flex; align-items: center; justify-content: center; height: 190px; padding: 18px; background: #f2f2f3; }
.lp-model-foto img { width: auto; height: 100%; object-fit: contain; }
.lp-model-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lp-model-tekst { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.lp-model h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-family: Oswald, sans-serif; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }
.lp-model h3 small { font-family: Montserrat, "Montserrat fallback", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--blue-2); }
.lp-model dl { margin: 0 0 16px; font-size: 13.5px; }
.lp-model dt { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lp-model dt:first-child { margin-top: 0; }
.lp-model dd { margin: 2px 0 0; }
.lp-model-link { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.lp-model-link::after { content: "\2192"; margin-left: 6px; }
.lp-model-link:hover { text-decoration: underline; }
@media (max-width: 1100px) { .lp-modellen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .lp-modellen { grid-template-columns: 1fr; }
  .lp-model { flex-direction: row; }
  .lp-model-foto { width: 38%; height: auto; min-height: 200px; flex: none; }
}
.news-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #1a1a1a;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  min-height: 0;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.4);
}
.news-thumb {
  aspect-ratio: 16 / 10;
  background: #111;
  overflow: hidden;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-thumb.empty { background: linear-gradient(135deg, #1a1a1a, #367def); }
.news-pad { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.news-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.news-card h3 { font-size: 20px; margin-bottom: 8px; line-height: 1.15; }
.news-card p { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.news-more {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
}
.news-card.feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
}
.news-card.feature .news-thumb { aspect-ratio: 16 / 10; min-height: 0; height: auto; max-height: 340px; }
.news-card.feature .news-pad { padding: 28px 32px; justify-content: center; }
.news-card.feature h3 { font-size: clamp(26px, 3vw, 36px); }
.news-article-sec { padding: 36px 0 72px; }
.news-article { max-width: 780px; }
.news-back,
.news-end .text-link {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--blue);
}
.news-end .text-link { margin-bottom: 0; }
.news-back:hover,
.news-end .text-link:hover { color: var(--ink); }
.news-article h1 { font-size: clamp(32px, 5vw, 52px); margin: 6px 0 22px; overflow-wrap: anywhere; }
/* Video's uit WordPress hebben een vaste width; op een telefoon liepen ze uit het scherm. */
.news-article video { max-width: 100%; height: auto; }
.news-hero {
  width: 100%;
  max-height: 320px;
  border-radius: 20px;
  margin: 0 0 28px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #111;
}
.news-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (max-width: 960px) {
  .contact-grid, .news-grid { grid-template-columns: 1fr; }
  .news-card.feature { grid-template-columns: 1fr; }
  .news-card.feature .news-thumb { min-height: 0; max-height: 220px; }
}
.faq-sec { padding: 40px 0 72px; }
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}
.faq-group { margin-bottom: 36px; }
.faq-group .eyebrow { margin-bottom: 8px; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  padding: 18px 0;
  line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-n {
  font-family: Oswald, Arial, sans-serif;
  color: var(--blue);
  letter-spacing: .06em;
  font-size: 16px;
  width: 2ch;
  flex-shrink: 0;
}
.faq-plus {
  position: relative;
  width: 22px;
  height: 22px;
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  background: var(--blue);
  border-radius: 1px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.faq-plus::before { width: 10px; height: 1.5px; }
.faq-plus::after { width: 1.5px; height: 10px; transition: transform .2s ease, opacity .2s ease; }
.faq-item[open] .faq-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item[open] summary { color: var(--ink); }
.faq-item p {
  color: var(--muted);
  font-size: 14.5px;
  padding: 0 0 18px 38px;
  max-width: 56ch;
}
.faq-dots {
  display: flex;
  gap: 8px;
  padding: 0 0 18px 38px;
}
.faq-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.faq-dots .c-blue { background: #367def; }
.faq-dots .c-red { background: #f42958; }
.faq-dots .c-green { background: #1f9d55; }
.faq-visual {
  margin: 0;
  position: sticky;
  top: 92px;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
}
.faq-visual img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.faq-visual figcaption {
  padding: 14px 16px 16px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  background: #111;
}
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .faq-aside { order: -1; }
  .faq-visual { position: static; }
  .faq-visual img { aspect-ratio: 16 / 10; max-height: 220px; }
  .faq-item p { padding-left: 0; }
  .faq-dots { padding-left: 0; }
}

/* Toestemmingsbanner voor Microsoft Clarity. Verschijnt alleen als
   js/clarity.js een project-ID heeft en er nog geen keuze is gemaakt. */
/* Compact kaartje linksonder (sinds 30 september 2026), zodat het de pagina
   niet in de weg zit. Weigeren en accepteren blijven even groot. */
.consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  width: 360px;
  max-width: calc(100% - 32px);
  background: #1a1a1a;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.consent-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.consent-link { color: var(--blue); }
.consent-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.consent-btn {
  padding: 8px 16px;
  font-size: 13px;
}
/* Weigeren moet net zo vindbaar zijn als accepteren. */
.consent-no {
  background: rgba(255,255,255,.12);
  color: #fff;
}
@media (max-width: 520px) {
  .consent { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; padding: 12px 14px; }
  .consent-actions { justify-content: stretch; }
  .consent-btn { flex: 1; }
}

/* Keuzehulp is de knop in de menubalk (sinds 22 september 2026); het vonkje
   ervoor onderscheidt hem van een winkelknop */
.nav-cta .nav-kh-spark { font-size: 12px; line-height: 1; margin-right: 6px; }

/* Telefoon: alleen het logo, en de knop in de balk mag over twee regels,
   zodat lange vertalingen (Guida alla scelta) niet over het logo schuiven */
@media (max-width: 520px) {
  .brand span { display: none; }
  .nav-end { gap: 8px; flex-shrink: 1; min-width: 0; }
  .nav-end > * { flex-shrink: 0; }
  .nav-end > .nav-cta { flex-shrink: 1; min-width: 0; min-height: 40px; padding: 6px 12px; white-space: normal; line-height: 1.15; text-align: center; }
  .nav-cta .nav-kh-spark { margin-right: 0; }
}
@media (max-width: 380px) {
  .nav-cta .nav-kh-spark, .lang-btn span { display: none; }
}

/* 404: stil kanaal, kies een ander kanaal */
.nf-path {
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 0;
}
.nf-path code {
  font-size: inherit;
  color: rgba(255,255,255,.85);
  word-break: break-all;
}
.nf-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px 0 20px;
  max-width: 1000px;
}
@media (max-width: 960px) {
  .nf-channels {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .nf-channels {
    grid-template-columns: 1fr;
  }
}
.nf-ch {
  background: var(--fog);
  border-radius: 20px;
  padding: 20px 20px 18px;
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color .18s, transform .18s;
}
.nf-ch:hover {
  border-color: var(--led);
  transform: translateY(-2px);
}
.nf-ch:focus-visible {
  border-color: var(--led);
}
.nf-led {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 12px var(--led);
}
.nf-ch-num {
  display: inline-block;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.nf-ch strong {
  font-size: 17px;
  display: block;
  margin-top: 10px;
}
.nf-ch small {
  font-size: 13px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
  line-height: 1.4;
}

/* Lineup van de koptelefoons op de home (vraag van Johan, 22 september 2026):
   de vijf series van de keuzeflow, klein en naast elkaar, in de tekstkolom van
   de hero onder de doelgroepen. Uitsnedes met doorzichtige achtergrond, los op
   het donker, alle even hoog op een gezamenlijke onderlijn; een zachte gloed
   houdt de zwarte modellen leesbaar. */
[data-page="home"] .hero-actions { margin-bottom: 22px; }
/* Twee knoppen naast elkaar: complete sets (ongeveer 60%) en keuzehulp (40%). */
[data-page="home"] .hero-actions { flex-wrap: nowrap; align-items: stretch; }
@media (max-width: 960px) {
  [data-page="home"] .hero-actions { flex-direction: row; align-items: stretch; gap: 10px; }
  [data-page="home"] .hero-actions .btn { width: auto; flex: 3 1 0; min-width: 0; padding-inline: 14px; text-align: center; line-height: 1.25; }
  [data-page="home"] .hero-actions .hero-kh { flex: 2 1 0; }
}
.lineup { position: relative; margin: 26px 0 0; }
.lineup-row {
  display: flex; justify-content: flex-start; align-items: flex-end;
  gap: 28px;
}
.lineup-row a {
  display: flex; flex-direction: column; align-items: center;
  width: 88px; text-decoration: none; color: #fff; text-align: center;
}
.lineup-row .tile {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 72px;
}
.lineup-row .tile::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 8%; bottom: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.09), transparent);
  pointer-events: none;
}
.lineup-row img {
  position: relative; display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
  transition: transform .15s ease;
}
.lineup-row a:hover img { transform: translateY(-3px); }
/* Subtiel label Meest gekozen boven de FD-Pro, dezelfde woorden als in Vergelijk de koptelefoons. */
.lineup-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 2px 7px; border: 1px solid rgba(91,151,245,.55); border-radius: 999px; background: rgba(54,125,239,.16); color: #8db5f8; font-size: 9px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.lineup-row strong { font-family: Oswald, sans-serif; font-size: 12px; letter-spacing: .05em; margin-top: 8px; }
.lineup-row small { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.45); margin-top: 1px; white-space: nowrap; }
/* Home: de series staan in een eigen band tussen de doelgroepen en Waarom. */
.lineup-band { padding: 0; }
.lineup-band .lineup { margin: 0; padding-top: 12px; }
.lineup-band .lineup-row { justify-content: center; }
@media (max-width: 960px) {
  .lineup { margin-top: 22px; }
  /* Zeven koptelefoons: op een smal scherm vier en drie onder elkaar. */
  .lineup-row { gap: 16px 6px; flex-wrap: wrap; }
  .lineup-row a { width: calc((100% - 18px) / 4); min-width: 0; }
  .lineup-row .tile { height: 44px; }
  .lineup-row strong { font-size: 11px; letter-spacing: .02em; margin-top: 6px; }
  .lineup-row small { font-size: 9px; margin-left: -10px; margin-right: -10px; }
}

/* Menu-items met een uitklapmenu (Voor wie, Over) krijgen een klein pijltje,
   zodat ze zich onderscheiden van gewone links. Alleen op desktop: in het
   mobiele menu is zo'n item al een groepskop boven zijn regels. */
@media (min-width: 961px) {
  .nav-links:not(.lang-only) > .has-sub > a { padding-right: 14px; position: relative; }
  .nav-links:not(.lang-only) > .has-sub > a::after {
    content: ""; position: absolute; right: 0; top: 50%;
    width: 6px; height: 6px; margin-top: -5px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); opacity: .55;
    transition: transform .18s ease, opacity .18s ease, margin-top .18s ease;
  }
  .nav-links:not(.lang-only) > .has-sub:hover > a::after,
  .nav-links:not(.lang-only) > .has-sub:focus-within > a::after { transform: rotate(225deg); margin-top: -1px; opacity: 1; }
}

/* Home: de hero dichter onder het menu. De tekstkolom is sinds de lineup
   eronder staat lang genoeg; de 92 pixels sectieruimte plus 48 pixels
   gridruimte erboven maakten een gat van 154 pixels tussen menu en kop. */
[data-page="home"] .hero { padding: 36px 0 44px; }
[data-page="home"] .hero-grid { padding-top: 16px; padding-bottom: 20px; }
@media (max-width: 960px) {
  [data-page="home"] .hero { padding: 20px 0 28px; }
  [data-page="home"] .hero-grid { padding-top: 12px; padding-bottom: 12px; }
}

/* Het menu heeft sinds 24 september 2026 negen items (Koptelefoons,
   Accessoires en Zenders erbij). Op desktop blijft alles op één regel:
   geen afbreking binnen een item, en bij minder breedte kleinere
   tussenruimtes, daarna alleen het logo zonder de merknaam ernaast. */
@media (min-width: 961px) {
  .nav-links a { white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1360px) {
  .nav { gap: 14px; }
  .nav-links { gap: 18px; font-size: 15px; }
  .nav-end { gap: 10px; }
}
@media (min-width: 961px) and (max-width: 1200px) {
  .brand span { display: none; }
  .nav-links { gap: 12px; }
  .nav-cta { padding: 10px 14px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .nav-links { gap: 12px; font-size: 14px; }
  .nav-cta .nav-kh-spark { display: none; }
}