/* ============================================================
   QUINT AUDIO — Website stylesheet (static export)
   Eén CSS-bestand: design-tokens + @font-face + alle componenten.
   Klaar voor migratie naar WordPress / Elementor.
   ============================================================ */

/* ---------- Brand typeface (self-hosted) ---------- */
@font-face {
  font-family: "Arial Rounded MT";
  src: url("fonts/Arial_Rounded_MT_Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Rounded MT";
  src: url("fonts/Arial_Rounded_MT.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Rounded MT";
  src: url("fonts/Arial_Rounded_MT.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Rounded MT";
  src: url("fonts/Arial_Rounded_Bold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Rounded MT";
  src: url("fonts/Arial_Rounded_Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arial Rounded MT";
  src: url("fonts/Arial_Rounded_MT_ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --quint-navy:   #0E1030;
  --quint-orange: #FF5D05;
  --quint-white:  #ffffff;

  /* Navy scale */
  --navy-900: #0A0C24;
  --navy-800: #0E1030;
  --navy-700: #1A1D3A;
  --navy-600: #2A2E4D;

  /* Orange scale */
  --orange-700: #D94D00;
  --orange-600: #FF5D05;
  --orange-300: #FFB088;
  --orange-050: #FFF0E8;

  /* Ink / neutrals */
  --ink:    #0E1030;
  --ink-2:  #4A4D62;
  --ink-3:  #8B8E9D;

  /* Surfaces */
  --bg:        #ffffff;
  --bg-alt:    #F5F5F3;
  --bg-alt-2:  #ECECEA;
  --placeholder: #D9D9D6;

  /* Lines */
  --line:    #ECECEA;
  --line-2:  #D8D8D3;
  --line-3:  #D2D2D2;

  /* Type */
  --font-display: "Arial Rounded MT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:    "Arial Rounded MT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "Arial Rounded MT", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Radius */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Spacing */
  --gutter: clamp(20px, 5vw, 60px);   /* horizontale sectiepadding — krimpt mee op mobiel */
  --site-maxw: 1320px;   /* breedte van de gecentreerde content-kolom (== SiteContainer in React) */
  --site-gutter: clamp(16px, 4vw, 24px);   /* zijmarge: ~16px op telefoon → 24px op breed scherm */
  /* zijpadding die de inhoud op --site-maxw centreert terwijl de achtergrond full-bleed blijft */
  --site-pad: max(var(--site-gutter), calc((100% - var(--site-maxw)) / 2));

  /* Elevation */
  --shadow-card:  0 12px 28px rgba(14,16,48,0.10);
  --shadow-pop:   0 12px 28px rgba(0,0,0,0.12);
  --shadow-modal: 0 32px 80px rgba(0,0,0,0.40);
  --shadow-tray:  0 -8px 24px rgba(0,0,0,0.18);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body {
  font-family: var(--font-sans);
  color: var(--quint-navy);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-sans); }

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* Eyebrow */
.q-eyebrow {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quint-orange); font-weight: 700;
}
.q-eyebrow--muted {
  color: var(--ink-2); letter-spacing: 0.04em; font-weight: 500; text-transform: none;
}

/* Buttons */
.qbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius);
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.qbtn:hover { transform: translateY(-1px); }
.qbtn--pill { border-radius: var(--radius-pill); }
.qbtn--navy   { background: var(--quint-navy);  color: #fff; border-color: var(--quint-navy); }
.qbtn--orange { background: var(--quint-orange); color: #fff; border-color: var(--quint-orange); }
.qbtn--ghost  { background: #fff; color: var(--quint-navy); border-color: var(--line-3); }
.qbtn--ghost-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.qbtn--link {
  background: transparent; color: var(--quint-navy); border: 0;
  text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; border-radius: 0;
}
.qbtn--link:hover { transform: none; }

/* Image placeholder */
.q-ph {
  background: var(--placeholder);
  border-radius: var(--radius); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: #8b8e95;
  aspect-ratio: 4 / 3;
}
.q-ph--dark { background: var(--navy-700); color: #7d8099; }
.q-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Page container */
.q-wrap { max-width: 1320px; margin: 0 auto; }

/* ============================================================
   NAVBAR
   ============================================================ */
.q-nav { background: var(--quint-navy); color: #fff; position: relative; z-index: 500; }
.q-nav-bar {
  height: 80px; padding-left: var(--site-pad); padding-right: var(--site-pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 40px;
}
.q-nav-left  { display: flex; gap: 56px; font-size: 16px; font-weight: 500; grid-column: 2; grid-row: 1; justify-self: center; }
.q-nav-logo  { display: flex; justify-content: flex-start; cursor: pointer; grid-column: 1; grid-row: 1; }
.q-nav-logo img { width: 144px; height: 76px; object-fit: contain; }
.q-nav-right { display: flex; justify-content: flex-end; gap: 40px; font-size: 16px; font-weight: 500; grid-column: 3; grid-row: 1; }
.q-nav-right a { text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.q-nav-item {
  color: rgba(255,255,255,0.92); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
}
.q-nav-item .qnav-label {
  text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-decoration-color .14s;
}
.q-nav-item:hover .qnav-label,
.q-nav-item.is-open .qnav-label { text-decoration-color: var(--quint-orange); }
.q-nav-caret { font-size: 10px; transition: transform .18s; }
.q-nav-item.is-open .q-nav-caret { transform: rotate(180deg); }

.q-nav-hair { height: 2px; background: var(--quint-orange); }

/* Mega-menu dropdown band */
.q-nav-drop {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-alt-2);
  border-bottom: 1px solid var(--line-2); box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  overflow: hidden; max-height: 0; opacity: 0; pointer-events: none;
  transition: max-height .22s ease, opacity .18s ease; z-index: 50;
}
.q-nav-drop.is-open { max-height: 320px; opacity: 1; pointer-events: auto; }
.q-nav-drop-inner {
  max-width: 1320px; margin: 0 auto; padding: 32px var(--gutter);
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.q-nav-drop-group { display: none; }
.q-nav-drop-group.is-active { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.qd-card { display: flex; flex-direction: column; gap: 12px; width: 160px; cursor: pointer; }
.qd-card[data-static] { cursor: default; }
.qd-thumb { height: 110px; background: #8a8a8a; border-radius: 2px; transition: background .12s; }
.qd-card:hover .qd-thumb { background: #7d7d7d; }
.qd-label { text-align: center; font-weight: 700; font-size: 15px; color: var(--quint-navy); letter-spacing: -0.01em; }

/* ---------- Mobile nav: hamburger + slide-down drawer ---------- */
.q-nav-burger {
  display: none; position: absolute; right: var(--site-pad); top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 8px 0 8px 8px; background: transparent; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; justify-content: center; z-index: 60;
}
.q-nav-burger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: #fff; transition: transform .22s ease, opacity .18s ease; }
.q-nav.is-mobile-open .q-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.q-nav.is-mobile-open .q-nav-burger span:nth-child(2) { opacity: 0; }
.q-nav.is-mobile-open .q-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.q-nav-mobile {
  display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--quint-navy);
  overflow-y: auto; max-height: 0; opacity: 0; pointer-events: none;
  transition: max-height .28s ease, opacity .2s ease; z-index: 50;
}
.q-nav.is-mobile-open .q-nav-mobile { max-height: 80vh; opacity: 1; pointer-events: auto; border-bottom: 2px solid var(--quint-orange); }
.q-nav-mobile-inner { padding: 8px var(--site-pad) 28px; }
.q-nav-mrow {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-family: var(--font-sans); font-size: 20px; font-weight: 600;
  padding: 18px 0; cursor: pointer; text-align: left;
}
.q-nav-mrow a { color: #fff; text-decoration: none; font: inherit; }
.q-nav-mrow-caret { font-size: 13px; color: var(--quint-orange); transition: transform .18s; }
.q-nav-mrow.is-open .q-nav-mrow-caret { transform: rotate(180deg); }
.q-nav-msub { overflow: hidden; max-height: 0; transition: max-height .24s ease; }
.q-nav-mrow.is-open + .q-nav-msub { max-height: 320px; }
.q-nav-msub a { display: block; width: 100%; color: rgba(255,255,255,0.8); font-size: 16px; padding: 12px 0 12px 16px; cursor: pointer; }
.q-nav-mobile-cta { display: flex; gap: 12px; margin-top: 24px; }
.q-nav-mobile-cta .qbtn { flex: 1; justify-content: center; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.q-crumb {
  background: var(--quint-navy); color: #fff;
  padding: 14px var(--site-pad);
  font-size: 14px; display: flex; align-items: center; gap: 14px;
}
.q-crumb a { color: rgba(255,255,255,0.65); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 4px; cursor: pointer; }
.q-crumb .is-current { color: #fff; font-weight: 700; }
.q-crumb-sep { color: rgba(255,255,255,0.4); font-size: 11px; }

/* ============================================================
   FOOTER
   ============================================================ */
.q-footer {
  background: var(--quint-navy); color: #fff;
  padding: 48px var(--site-pad) 28px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 48px; row-gap: 28px;
}
.q-footer > a { grid-column: 1; }
.q-footer-logo { width: 144px; height: 76px; object-fit: contain; cursor: pointer; }
.q-footer-links { display: flex; gap: 40px; font-size: 15px; grid-column: 2; justify-self: center; }
.q-footer-links a { opacity: 0.92; cursor: pointer; }
.q-footer-rule { width: 100%; height: 1px; background: rgba(255,255,255,0.18); grid-column: 1 / -1; }
.q-footer-legal { width: 100%; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.6); grid-column: 1 / -1; }
.q-footer-legal-right { display: flex; gap: 24px; }

/* ============================================================
   HOMEPAGE
   ============================================================ */
.home-hero {
  height: min(88vh, 820px); background: var(--placeholder); position: relative;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 48px);
}
.home-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.home-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,36,0.25) 0%, rgba(10,12,36,0) 40%, rgba(10,12,36,0.65) 100%);
}
.home-hero-title {
  position: relative; z-index: 2; margin: 0; text-align: center; color: #fff;
  font-size: clamp(44px, 9vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}
.home-hero-cap {
  position: absolute; color: #9a9da5; font-size: 13px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.home-play {
  position: relative; z-index: 2; width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.home-play-tri {
  width: 0; height: 0; border-left: 18px solid var(--quint-navy);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px;
}

.home-copy { padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 48px) clamp(72px, 10vw, 120px); text-align: center; }
.home-copy h1 { font-size: clamp(40px, 9vw, 80px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0 auto; max-width: 900px; }
.home-copy p { font-size: 16px; color: var(--ink-2); max-width: 560px; margin: 28px auto 0; line-height: 1.5; }
.home-cta { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }

.home-foundation { padding: 0 clamp(20px, 5vw, 48px) clamp(64px, 8vw, 96px); text-align: center; }
.home-foundation h2 { font-size: clamp(34px, 7vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 18px auto 0; max-width: 760px; }
.home-foundation > p { font-size: 16px; color: var(--ink-2); max-width: 580px; margin: 24px auto 0; line-height: 1.5; }
.home-features { margin: 64px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1120px; text-align: left; }
.home-features .q-ph { margin-bottom: 24px; }
.home-features h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.home-features p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.home-foundation-cta { margin-top: 56px; }

.home-clients { padding: 56px clamp(20px, 5vw, 48px) 96px; display: flex; justify-content: center; gap: clamp(28px, 6vw, 64px); align-items: center; flex-wrap: wrap; }
.home-client {
  width: 80px; height: 80px; background: var(--placeholder); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; color: #8b8e95; font-size: 10px;
  font-family: var(--font-mono); text-align: center; padding: 8px; opacity: 0.85;
}

/* Video modal */
.q-modal {
  position: fixed; inset: 0; background: rgba(14,16,48,0.85); z-index: 100;
  display: none; align-items: center; justify-content: center;
}
.q-modal.is-open { display: flex; }
.q-modal-player { width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); background: #000; display: block; object-fit: cover; }
.q-modal-video {
  width: 80vw; max-width: 1100px; aspect-ratio: 16/9; background: #11142a; border-radius: var(--radius-lg); overflow: hidden;
  color: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; position: relative;
}
.q-modal-close {
  position: absolute; top: -40px; right: 0; color: #fff; cursor: pointer;
  font-size: 24px; background: transparent; border: 0;
}

/* ============================================================
   CATALOG
   ============================================================ */
.cat { background: var(--bg-alt); }
.cat-hero { background: #fff; padding: 72px var(--site-pad) 48px; text-align: center; }
.cat-hero h1 { margin: 14px 0 18px; font-size: clamp(48px, 12vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; color: var(--quint-navy); }
.cat-hero p { font-size: 20px; line-height: 1.4; color: #444; max-width: 640px; margin: 0 auto; }
.cat-hero-toggle { margin-top: 32px; display: inline-flex; gap: 8px; }

.cat-filterbar {
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 20px var(--site-pad); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.cat-filterbar-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; font-weight: 700; margin-right: 4px; }
.cat-filterbar-spacer { flex: 1; }
.cat-count { font-size: 13px; color: #666; }
.cat-sort { display: inline-flex; align-items: center; gap: 6px; }
.cat-sort span { font-size: 13px; color: #888; }
.cat-sort select {
  border: 1px solid var(--line-3); border-radius: var(--radius); padding: 8px 10px;
  font-family: var(--font-sans); font-size: 13px; color: var(--quint-navy); background: #fff; cursor: pointer;
}
.cat-sort select:focus { outline: 2px solid var(--orange-300); }
.cat-clear-all { background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--quint-orange); padding: 6px 4px; text-decoration: underline; text-underline-offset: 4px; }

/* Filter dropdown */
.filter-dd { position: relative; }
.filter-dd-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius);
  background: #fff; color: var(--quint-navy); border: 1px solid var(--line-3);
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; cursor: pointer;
}
.filter-dd.has-count .filter-dd-btn { background: var(--quint-navy); color: #fff; border-color: var(--quint-navy); }
.filter-dd-count { background: var(--quint-orange); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 700; display: none; }
.filter-dd.has-count .filter-dd-count { display: inline-block; }
.filter-dd-caret { font-size: 10px; transition: transform .18s; }
.filter-dd.is-open .filter-dd-caret { transform: rotate(180deg); }
.filter-dd-menu {
  position: absolute; top: 100%; left: 0; margin-top: 6px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: 12px; z-index: 30; min-width: 200px; display: none;
}
.filter-dd.is-open .filter-dd-menu { display: block; }
.filter-dd-menu label { display: flex; align-items: center; gap: 10px; padding: 8px 6px; cursor: pointer; font-size: 13px; color: var(--quint-navy); }
.filter-dd-menu input { accent-color: var(--quint-orange); }
.filter-dd-clear { margin-top: 6px; font-size: 12px; color: var(--quint-orange); background: none; border: 0; cursor: pointer; font-weight: 600; padding: 6px 6px 0; display: none; }
.filter-dd.has-count .filter-dd-clear { display: inline-block; }

/* Grid + cards */
.cat-grid-wrap { padding: 40px var(--site-pad) 100px; background: var(--bg-alt); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.cat-empty { padding: 80px; text-align: center; background: #fff; border: 1px dashed var(--line-3); border-radius: var(--radius-lg); display: none; }
.cat-empty-title { font-size: 24px; font-weight: 800; color: var(--quint-navy); margin-bottom: 8px; }
.cat-empty-sub { color: #666; margin-bottom: 18px; }

.cat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .16s, transform .16s;
}
.cat-card.is-clickable { cursor: pointer; }
.cat-card.is-clickable:hover { box-shadow: 0 12px 28px rgba(14,16,48,0.10); transform: translateY(-2px); }
.cat-card-media {
  aspect-ratio: 4 / 3; background: #f5f5f3; border-bottom: 1px solid var(--line);
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cat-card-media img { width: 88%; height: 88%; object-fit: contain; }
/* Electronics: product photos mogen kadervullend zijn */
.cat[data-category="electronics"] .cat-card-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-card-media-label { font-family: var(--font-mono); font-size: 11px; color: #bcbcbc; }
.cat-card-new {
  position: absolute; top: 14px; left: 14px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--quint-orange); padding: 4px 8px; border-radius: 2px; font-weight: 700;
}
.cat-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.cat-card-top { display: flex; justify-content: space-between; align-items: center; }
.cat-card-compare { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #666; cursor: pointer; user-select: none; }
.cat-card-check {
  width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid #b8b8b8; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; font-weight: 800;
}
.cat-card.in-compare .cat-card-check { border-color: var(--quint-orange); background: var(--quint-orange); }
.cat-card.in-compare .cat-card-check::after { content: "✓"; }
.cat-card-name { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--quint-navy); }
.cat-card-desc { font-size: 13px; color: #555; margin-top: -2px; }
.cat-card hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0 4px; }
.cat-card-specs { display: flex; flex-direction: column; gap: 9px; font-family: var(--font-mono); font-size: 11px; }
.cat-card-spec { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.cat-card-spec dt { color: #999; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; flex: 0 0 auto; margin: 0; }
.cat-card-spec dd { color: var(--quint-navy); font-weight: 600; text-align: right; margin: 0; }

/* ============================================================
   PRODUCT PAGE (T24)
   ============================================================ */
.prod { background: var(--bg-alt); color: var(--quint-navy); }
.prod-hero { background: #fff; padding: 64px var(--gutter) 0; position: relative; }
.prod-hero-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.prod-hero-copy { padding-bottom: 64px; }
.prod-hero-copy h1 { margin: 14px 0 18px; font-size: clamp(72px, 16vw, 144px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.92; color: var(--quint-navy); }
.prod-hero-copy .tagline { font-size: 22px; line-height: 1.35; margin: 0; max-width: 520px; color: #222; }
.prod-hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.prod-compare-box {
  width: 18px; height: 18px; border-radius: 3px; border: 1.5px solid var(--quint-navy); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 700;
}
.prod-compare-btn.in-compare .prod-compare-box { border-color: #fff; background: var(--quint-orange); }
.prod-compare-btn.in-compare .prod-compare-box::after { content: "✓"; }

/* Spec strip */
.prod-strip {
  max-width: 1320px; margin: 64px auto 0; transform: translateY(50%);
  background: var(--quint-navy); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 28px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; position: relative; z-index: 10;
}
.prod-strip-cell { padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.18); }
.prod-strip-cell:first-child { padding-left: 0; border-left: 0; }
.prod-strip-num { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.prod-strip-lbl { font-size: 11px; color: var(--quint-orange); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.prod-strip-gap { height: 120px; background: var(--bg-alt); }

/* Compare: spec-groep koppen + productfoto’s */
.compare-row-group { grid-column: 1 / -1; padding: 22px 16px 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--quint-orange); border-top: 1px solid var(--line); }
.compare-col-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Carousel */
.carousel { position: relative; display: flex; flex-direction: column; gap: 16px; align-items: center; min-height: 560px; }
.carousel-stage { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.carousel-stage img { max-width: 85%; max-height: 520px; object-fit: contain; filter: drop-shadow(0 24px 60px rgba(0,0,0,0.35)); }
.carousel-arrow {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.9);
  border: 1px solid var(--line-3); color: var(--quint-navy); font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  position: absolute; top: 50%; transform: translateY(-50%);
}
.carousel-arrow.prev { left: 12px; }
.carousel-arrow.next { right: 12px; }
.carousel-counter {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: #fff;
  background: rgba(0,0,0,0.35); padding: 4px 10px; border-radius: 999px;
}
.carousel-thumbs { display: flex; gap: 10px; }
.carousel-thumb { width: 70px; height: 70px; padding: 0; background: #fff; border: 1px solid #e2e2e0; border-radius: var(--radius); cursor: pointer; overflow: hidden; opacity: 0.7; }
.carousel-thumb.is-active { border: 2px solid var(--quint-orange); opacity: 1; }
.carousel-thumb img { width: 100%; height: 100%; object-fit: contain; }
.carousel-stage img { cursor: zoom-in; }

/* Carousel lightbox */
.carousel-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(14,16,48,0.85);
}
.carousel-lightbox[hidden] { display: none !important; }
.carousel-lightbox.is-open { display: flex; }
.carousel-lightbox-img {
  max-width: 88vw; max-height: 88vh; object-fit: contain; cursor: zoom-out;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.45));
}
.carousel-lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: 1px solid var(--line-3);
  color: var(--quint-navy); font-size: 24px; line-height: 1; cursor: pointer;
}
.carousel-lightbox .carousel-arrow.prev { left: 28px; }
.carousel-lightbox .carousel-arrow.next { right: 28px; }

/* Description */
.prod-desc { padding: 40px var(--gutter) 64px; max-width: 1100px; margin: 0 auto; }
.prod-desc h2 { font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -0.03em; margin: 14px 0 28px; line-height: 1.05; color: var(--quint-navy); text-wrap: pretty; }
.prod-desc-cols { column-count: 2; column-gap: 48px; font-size: 16px; line-height: 1.6; color: #343434; }
.prod-desc-cols p { margin: 0 0 1em; }

/* Applications */
.prod-apps { padding: 56px var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.prod-apps h2 { font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 28px; }
.prod-apps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.prod-app { display: flex; flex-direction: column; gap: 12px; }
/* Application-afbeeldingen altijd vierkant (bijgesneden, niet uitgerekt) */
.prod-app > img, .prod-app > .q-ph { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
.prod-app-label { font-size: 15px; font-weight: 700; color: var(--quint-navy); }

/* Specs */
.prod-specs { padding: 64px var(--gutter); background: #fff; }
.prod-specs-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 320px 1fr; gap: 64px; }
.prod-specs-intro h2 { font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 18px; line-height: 1.05; }
.prod-specs-intro p { font-size: 14px; color: #555; margin: 0 0 24px; line-height: 1.5; }
.prod-specs-actions { display: flex; flex-direction: column; gap: 8px; }
.prod-spec-block { margin-bottom: 40px; }
.prod-spec-block h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--quint-navy); letter-spacing: -0.01em; }
.prod-spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prod-spec-table tr { border-top: 1px solid var(--line); }
.prod-spec-table td { padding: 14px 0; }
.prod-spec-table td:first-child { color: #666; width: 40%; }
.prod-spec-table td:last-child { color: var(--quint-navy); font-weight: 600; font-family: var(--font-mono); font-size: 13px; }

/* Pairings */
.prod-pairings { padding: 0 var(--gutter) 80px; background: #fff; }
.prod-pairings-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pair-card { padding: 36px; border-radius: var(--radius); }
.pair-card--navy { background: var(--quint-navy); color: #fff; }
.pair-card--light { background: var(--bg-alt); border: 1px solid var(--line); }
.pair-card h3 { font-size: 32px; font-weight: 800; margin: 10px 0 24px; letter-spacing: -0.02em; }
.pair-card--navy h3 { color: #fff; }
.pair-card--light h3 { color: var(--quint-navy); }
.pair-rows { display: flex; flex-direction: column; gap: 12px; }
.pair-card--full { grid-column: 1 / -1; }
.pair-rows--split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.pair-row { border-radius: var(--radius); padding: 16px; display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; align-items: center; }
.pair-row--navy { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); }
.pair-row--light { background: #fff; border: 1px solid var(--line); }
.pair-row-name { font-size: 20px; font-weight: 800; }
.pair-row--light .pair-row-name { color: var(--quint-navy); }
.pair-row-desc { font-size: 13px; margin-top: 2px; }
.pair-row--navy .pair-row-desc { color: rgba(255,255,255,0.7); }
.pair-row--light .pair-row-desc { color: #444; }
.pair-row-manual { font-size: 13px; color: var(--quint-orange); font-weight: 700; }
a.pair-row { text-decoration: none; color: inherit; }
.pair-row--link { cursor: pointer; transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.pair-row--link:hover { transform: translateY(-2px); }
.pair-row--navy.pair-row--link:hover { background: rgba(255,255,255,0.10); }
.pair-row--zoom { cursor: zoom-in; }
.pair-row--light.pair-row--zoom:hover { box-shadow: 0 12px 28px rgba(14,16,48,0.10); }

/* Generieke afbeeldings-lightbox */
.img-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(14,16,48,0.85);
}
.img-lightbox.is-open { display: flex; }
.img-lightbox-img {
  max-width: 88vw; max-height: 88vh; object-fit: contain;
  background: #fff; padding: 24px; border-radius: 6px;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.45));
}
.img-lightbox-close {
  position: absolute; top: 24px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: 1px solid var(--line-3);
  color: var(--quint-navy); font-size: 24px; line-height: 1; cursor: pointer;
}

/* Downloads */
.prod-downloads { padding: 40px var(--gutter) 80px; background: #fff; border-top: 1px solid var(--line); }
.prod-downloads-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.prod-downloads-head h2 { font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 0; }
.prod-downloads-meta { font-size: 13px; color: #666; }
.dl-row { padding: 18px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 60px 1fr auto auto auto; gap: 24px; align-items: center; }
.dl-row:last-child { border-bottom: 1px solid var(--line); }
.dl-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--quint-orange); font-family: var(--font-mono); }
.dl-label { font-size: 16px; color: var(--quint-navy); font-weight: 600; }
.dl-size { font-size: 13px; color: #666; }

/* ============================================================
   COMPARE TRAY + MODAL
   ============================================================ */
.compare-tray {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--quint-navy); color: #fff;
  border-top: 2px solid var(--quint-orange); padding: 14px 24px;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  z-index: 900; box-shadow: var(--shadow-tray);
}
.compare-tray.is-visible { display: flex; }
.compare-tray-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.compare-tray-count { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--quint-orange); font-weight: 700; }
.compare-tray-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.compare-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 13px; font-weight: 600; }
.compare-chip button { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: 0; cursor: pointer; font-size: 13px; line-height: 1; }
.compare-tray-right { display: flex; gap: 8px; align-items: center; }
.compare-tray-clear { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.25); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; font-size: 13px; cursor: pointer; }
.compare-tray-open { background: var(--quint-orange); color: #fff; border: 0; padding: 10px 22px; border-radius: var(--radius); font-weight: 700; font-size: 14px; cursor: pointer; }
.compare-tray-open:disabled { background: rgba(255,93,5,0.4); cursor: not-allowed; }

.compare-modal {
  position: fixed; inset: 0; background: rgba(14,16,48,0.55); backdrop-filter: blur(4px); z-index: 1000;
  display: none; justify-content: center; align-items: flex-start; padding: 40px 24px; overflow: auto;
}
.compare-modal.is-open { display: flex; }
.compare-modal-card { background: #fff; width: 100%; max-width: 1320px; border-radius: 8px; box-shadow: var(--shadow-modal); overflow: hidden; }
.compare-modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 28px 36px 24px; }
.compare-modal-head h2 { margin: 8px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -0.025em; color: var(--quint-navy); }
.compare-modal-actions { display: flex; gap: 12px; align-items: center; }
.compare-print { display: inline-flex; align-items: center; gap: 8px; background: var(--quint-orange); color: #fff; border: 0; padding: 11px 18px; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 700; font-size: 14px; cursor: pointer; }
.compare-clear-all { background: #fff; color: var(--quint-navy); border: 1px solid var(--line-3); padding: 11px 18px; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 600; font-size: 14px; cursor: pointer; }
.compare-modal-close { width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid var(--line-3); background: #fff; font-size: 20px; cursor: pointer; color: var(--quint-navy); }
.compare-modal-scroll { overflow-x: auto; padding: 0 36px 8px; }
.compare-table { display: grid; min-width: 760px; border-top: 1px solid var(--line); }
.compare-corner { border-bottom: 1px solid var(--line); }

.compare-col-head { padding: 24px 22px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.compare-col-img { height: 150px; background: #F3F3F1; border: 1px solid var(--line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: #B4B4B0; font-family: var(--font-mono); font-size: 12px; margin-bottom: 18px; }
.compare-col-name { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; color: var(--quint-navy); margin: 6px 0; }
.compare-col-sub { font-size: 14px; color: #6B6B68; margin-bottom: 16px; }
.compare-col-remove { margin-top: auto; padding: 11px 12px; font-size: 13px; background: #fff; color: var(--quint-navy); border: 1px solid var(--line-3); border-radius: var(--radius); cursor: pointer; font-weight: 600; font-family: var(--font-sans); }

.compare-col-empty { padding: 24px 22px; border-left: 1px dashed var(--line-3); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 280px; }
.compare-add-plus { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-3); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #BDBDBA; margin-bottom: 14px; }
.compare-add-label { font-size: 14px; color: #9A9A96; max-width: 130px; }

.compare-row-label { padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 14px; color: #3A3A38; display: flex; align-items: center; gap: 8px; }
.compare-diff-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--quint-orange); }
.compare-cell { padding: 18px 22px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5; color: var(--quint-navy); }
.compare-cell.is-empty { color: #C4C4C0; }
.compare-row-label.alt, .compare-cell.alt { background: #FAFAF8; }

.compare-addmore { padding: 26px 36px 32px; }
.compare-addmore-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.compare-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); background: #fff; border: 1px solid #E2E2DF; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--quint-navy); cursor: pointer; }
.compare-pill:hover:not(:disabled) { border-color: var(--quint-orange); }
.compare-pill:disabled { cursor: not-allowed; opacity: 0.45; }
.compare-pill-plus { color: var(--quint-orange); font-weight: 700; }
.compare-pill-series { color: #9A9A96; font-weight: 500; }
.compare-pill-more { display: inline-flex; align-items: center; padding: 9px 16px; font-size: 13.5px; color: #9A9A96; font-weight: 500; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .prod-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .prod-specs-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .prod-pairings-grid { grid-template-columns: minmax(0, 1fr); }
  .pair-rows--split { grid-template-columns: minmax(0, 1fr); }
  .prod-apps-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-strip { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
}

/* Navbar collapses into a hamburger drawer below 900px */
@media (max-width: 900px) {
  .q-nav-left, .q-nav-right { display: none; }
  .q-nav-burger { display: flex; }
  .q-nav-mobile { display: block; }
  .q-nav-bar { height: 64px; }
  .q-nav-logo img { width: 104px; height: 52px; }
}

@media (max-width: 860px) {
  .prod-hero-copy { padding-bottom: 24px; }
  .prod-strip { transform: none; margin-top: 28px; }
  .prod-strip-gap { height: 32px; }
  .prod-desc-cols { column-count: 1; }
  .home-features { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 620px) {
  .prod-apps-grid { grid-template-columns: 1fr; }
  .prod-strip { grid-template-columns: repeat(2, 1fr); }
  /* Downloads rows wrap: kind on its own line, label + button below */
  .dl-row { grid-template-columns: 1fr auto auto; row-gap: 4px; column-gap: 14px; }
  .dl-kind { grid-column: 1 / -1; }
  /* Pairing item rows: smaller thumbnail column so everything fits a phone */
  .pair-card { padding: 24px; }
  .pair-row { grid-template-columns: 108px minmax(0, 1fr) auto; gap: 12px; }
}

/* Product 3D viewer + Photos/3D toggle */
[data-view-panel][hidden] { display: none !important; }
.prod-3d { position: relative; width: 100%; aspect-ratio: 4/3; background: transparent; border: 0; border-radius: 6px; overflow: hidden; }
.prod-3d model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; outline: none; border: 0; }
.prod-3d-badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--quint-navy); background: rgba(255,255,255,0.85); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(6px); }
.prod-3d-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--quint-orange); }
.prod-3d-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: #8B8E9D; background: rgba(255,255,255,0.8); border-radius: 999px; padding: 5px 14px; pointer-events: none; transition: opacity 0.3s; }
.prod-3d:hover .prod-3d-hint { opacity: 0; }
.prod-view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--line-3); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.prod-view-toggle button { font-family: var(--font-sans); font-size: 12px; font-weight: 600; padding: 8px 18px; border: 0; background: #fff; color: var(--quint-navy); cursor: pointer; transition: background 0.14s, color 0.14s; }
.prod-view-toggle button.is-active { background: var(--quint-navy); color: #fff; }

.prod-specs-3d { margin-top: 120px; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.prod-specs-3d model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; outline: none; border: 0; }

/* Catalog search */
.cat-search { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-3); border-radius: 999px; padding: 8px 16px; background: #fff; }
.cat-search input { border: 0; outline: 0; font-family: var(--font-sans); font-size: 13px; color: var(--quint-navy); width: 150px; background: transparent; }

/* Sort pill */
.cat-sort select { -webkit-appearance: none; appearance: none; border: 1px solid var(--line-3); border-radius: 999px; padding: 8px 34px 8px 16px; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27%230E1030%27 stroke-width=%271.5%27 fill=%27none%27/%3E%3C/svg%3E") no-repeat right 14px center; font-family: var(--font-sans); font-size: 13px; color: var(--quint-navy); cursor: pointer; }

/* Compare — print / PDF */
@media print {
  body.q-compare-print > *:not(.compare-modal) { display: none !important; }
  body.q-compare-print .compare-modal { display: block !important; position: static !important; background: #fff !important; padding: 0 !important; backdrop-filter: none !important; }
  body.q-compare-print .compare-modal-card { box-shadow: none !important; border-radius: 0 !important; width: 100% !important; max-width: none !important; max-height: none !important; }
  body.q-compare-print .compare-modal-scroll { max-height: none !important; overflow: visible !important; }
  body.q-compare-print .compare-modal-actions, body.q-compare-print .compare-addmore, body.q-compare-print .compare-col-remove { display: none !important; }
  body.q-compare-print .compare-col-empty, body.q-compare-print .compare-cell.is-empty, body.q-compare-print .compare-corner + .compare-col-empty { display: none !important; }
  body.q-compare-print .compare-row-group { border-top-color: #ccc; }
  body.q-compare-print .compare-table { border: 0; }
}

/* ============================================================
   CATALOGUS — serie-koppen met whitepaper-link
   (alleen zichtbaar wanneer er op Series gesorteerd is)
   ============================================================ */
.cat-series-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; padding: 26px 2px 2px; min-height: 0; }
.cat-grid > .cat-series-head:first-child { padding-top: 2px; }
.cat-series-name { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--quint-orange); }
.cat-series-wp { font-size: 13px; font-weight: 700; color: var(--quint-navy); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cat-series-wp:hover { color: var(--quint-orange); }

/* ============================================================
   PRODUCT — 3D-view zonder kader: het canvas vult de volledige
   hero (full-bleed); tekst en knoppen zweven over het model.
   De klasse .is-3d wordt door het Photos/3D-toggle-script gezet.
   ============================================================ */
/* De canvas blijft paginabreed (geen kader bij ver inzoomen), maar het model
   staat op de oude plek: de viewer is 150% breed zodat het middelpunt op ~75%
   van de pagina valt (de oude rechterkolom). Scroll-zoom werkt alleen bóven
   het product zelf (JS zet disable-zoom aan/uit); ernaast scrolt de pagina. */
.prod-hero.is-3d .carousel { position: static; }
.prod-hero.is-3d .prod-3d { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; overflow: hidden; z-index: 1; }
/* Breedte = 100% + 660px (de halve content-kolom van 1320px): het middelpunt
   van het canvas valt dan precies op het midden van de rechterkolom, op elk
   schermformaat — niet te ver naar rechts op brede schermen. */
.prod-hero.is-3d .prod-3d model-viewer { position: absolute; top: 0; left: 0; width: calc(100% + min(660px, 50%)); height: 100%; }
@media (max-width: 1100px) {
  .prod-hero.is-3d .prod-3d model-viewer { width: 100%; }
}
.prod-hero.is-3d .prod-hero-copy { position: relative; z-index: 2; pointer-events: none; }
.prod-hero.is-3d .prod-hero-copy a,
.prod-hero.is-3d .prod-hero-copy button { pointer-events: auto; }
.prod-hero.is-3d .prod-view-toggle { position: relative; z-index: 3; }
.prod-hero.is-3d .prod-3d-hint { bottom: 24px; }

/* ============================================================
   DARK MODE — quint.js zet data-theme="dark" op <html> en
   plaatst de toggle-knop in de navbar (naast "Find a dealer").
   ============================================================ */
.q-theme-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; flex: 0 0 auto; align-self: center; transition: border-color .15s, background .15s; }
.q-nav-right { align-items: center; }
.q-theme-btn:hover { border-color: var(--quint-orange); }
.q-nav-mobile-cta .q-theme-btn { width: 48px; height: 48px; flex: 0 0 48px; font-size: 17px; }

[data-theme="dark"] {
  color-scheme: dark;
  /* navy wordt de tekstkleur; chrome-oppervlakken krijgen expliciet navy terug */
  --quint-navy: #F1F1F3;
  --bg: #0E0E10; --bg-alt: #131315; --bg-alt-2: #1C1C1F;
  --line: #26262B; --line-2: #2E2E34; --line-3: #3B3B42;
  --placeholder: #232327;
  --ink: #F1F1F3; --ink-2: #C0C0C7; --ink-3: #8F8F97;
  --body: #C0C0C7; --meta: #8F8F97;
  --shadow-card: 0 12px 28px rgba(0,0,0,0.5);
  --shadow-pop: 0 12px 28px rgba(0,0,0,0.55);
}
html[data-theme="dark"], [data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* Chrome blijft navy */
[data-theme="dark"] .q-nav, [data-theme="dark"] .q-nav-mobile,
[data-theme="dark"] .q-crumb, [data-theme="dark"] .q-footer,
[data-theme="dark"] .compare-tray, [data-theme="dark"] .prod-strip,
[data-theme="dark"] .pair-card--navy { background: var(--navy-800); }
[data-theme="dark"] .q-nav, [data-theme="dark"] .q-footer { box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
[data-theme="dark"] .prod-strip { box-shadow: 0 12px 32px rgba(0,0,0,0.5); border: 1px solid var(--line); }
[data-theme="dark"] .pair-card--navy, [data-theme="dark"] .compare-tray { border: 1px solid var(--line); }
[data-theme="dark"] .compare-tray { border-top: 2px solid var(--quint-orange); }

/* Witte secties → donker */
[data-theme="dark"] .cat-hero, [data-theme="dark"] .cat-filterbar,
[data-theme="dark"] .prod-hero, [data-theme="dark"] .prod-apps,
[data-theme="dark"] .prod-specs, [data-theme="dark"] .prod-pairings,
[data-theme="dark"] .prod-downloads { background: var(--bg); }

/* Witte kaarten / panelen → donkere panelen */
[data-theme="dark"] .cat-card, [data-theme="dark"] .cat-empty,
[data-theme="dark"] .res-card, [data-theme="dark"] .pre-group,
[data-theme="dark"] .pre-group-head, [data-theme="dark"] .man-list,
[data-theme="dark"] .sw-card, [data-theme="dark"] .pair-row--light,
[data-theme="dark"] .about-founder, [data-theme="dark"] .dealer-list,
[data-theme="dark"] .dealer-row, [data-theme="dark"] .contact-form { background: var(--bg-alt-2); }
[data-theme="dark"] .res-file:hover, [data-theme="dark"] .pre-group-head:hover,
[data-theme="dark"] .man-row:hover, [data-theme="dark"] .dealer-row:hover { background: #242429; }

/* Inputs, pills en ghost-knoppen */
[data-theme="dark"] .qbtn--ghost, [data-theme="dark"] .filter-dd-btn,
[data-theme="dark"] .cat-search, [data-theme="dark"] .res-search,
[data-theme="dark"] .compare-clear-all, [data-theme="dark"] .compare-modal-close,
[data-theme="dark"] .compare-col-remove, [data-theme="dark"] .compare-pill { background: var(--bg-alt-2); color: var(--ink); border-color: var(--line-3); }
[data-theme="dark"] .contact-field input, [data-theme="dark"] .contact-field textarea { background: var(--bg-alt); color: var(--ink); border-color: var(--line-3); }
[data-theme="dark"] .contact-field input:focus, [data-theme="dark"] .contact-field textarea:focus { border-color: var(--ink); }
[data-theme="dark"] .filter-dd-menu { background: var(--bg-alt-2); border-color: var(--line-3); }
[data-theme="dark"] .filter-dd.has-count .filter-dd-btn { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }
[data-theme="dark"] .cat-sort select { background: var(--bg-alt-2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27%23E9EAF4%27 stroke-width=%271.5%27 fill=%27none%27/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); border-color: var(--line-3); }

/* Primaire (navy) knoppen worden licht op donker */
[data-theme="dark"] .qbtn--navy { background: var(--ink); color: var(--navy-800); border-color: var(--ink); }
[data-theme="dark"] .prod-view-toggle button { background: var(--bg-alt-2); color: var(--ink); }
[data-theme="dark"] .prod-view-toggle button.is-active { background: var(--ink); color: var(--navy-800); }
[data-theme="dark"] .prod-view-toggle { border-color: var(--line-3); }

/* Hardcoded grijstinten → leesbaar op donker */
[data-theme="dark"] .cat-hero p, [data-theme="dark"] .prod-hero-copy .tagline,
[data-theme="dark"] .prod-desc-cols, [data-theme="dark"] .cat-card-desc,
[data-theme="dark"] .sw-desc, [data-theme="dark"] .man-title,
[data-theme="dark"] .res-file-cfg, [data-theme="dark"] .prod-specs-intro p,
[data-theme="dark"] .prod-spec-table td:first-child,
[data-theme="dark"] .pair-row--light .pair-row-desc, [data-theme="dark"] .compare-row-label,
[data-theme="dark"] .cat-empty-sub, [data-theme="dark"] .prod-downloads-meta,
[data-theme="dark"] .dl-size, [data-theme="dark"] .compare-col-sub,
[data-theme="dark"] .cat-card-compare, [data-theme="dark"] .about-sec p,
[data-theme="dark"] .home-copy p, [data-theme="dark"] .home-features p,
[data-theme="dark"] .home-foundation > p { color: var(--ink-2); }
[data-theme="dark"] .cat-filterbar-label, [data-theme="dark"] .cat-count,
[data-theme="dark"] .cat-sort span, [data-theme="dark"] .cat-card-spec dt,
[data-theme="dark"] .man-group-head, [data-theme="dark"] .pre-group-meta,
[data-theme="dark"] .res-card-meta, [data-theme="dark"] .res-card-type,
[data-theme="dark"] .man-lang, [data-theme="dark"] .sw-meta-row dt,
[data-theme="dark"] .res-file-date { color: var(--ink-3); }
[data-theme="dark"] .cat-card-check { background: transparent; border-color: #55555E; }
[data-theme="dark"] .man-dl-btn:hover { background: rgba(255,93,5,0.12); }

/* Fototegels, galerij-pijltjes en miniaturen gaan mee met de donkere achtergrond
   (productrenders zijn transparante PNG's) */
[data-theme="dark"] .cat-card-media, [data-theme="dark"] .sw-media,
[data-theme="dark"] .compare-col-img { background: var(--bg-alt-2); }
[data-theme="dark"] .carousel-thumb { background: var(--bg-alt-2); border-color: var(--line-3); }
[data-theme="dark"] .carousel-thumb.is-active { border-color: var(--quint-orange); }
[data-theme="dark"] .carousel-arrow,
[data-theme="dark"] .carousel-lightbox-close,
[data-theme="dark"] .img-lightbox-close { background: rgba(38,38,42,0.92); border-color: var(--line-3); color: var(--ink); }

/* Compare-modal */
[data-theme="dark"] .compare-modal-card { background: var(--bg-alt-2); }
[data-theme="dark"] .compare-row-label.alt, [data-theme="dark"] .compare-cell.alt { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .compare-cell.is-empty { color: #55555C; }
[data-theme="dark"] .compare-pill-series, [data-theme="dark"] .compare-add-label, [data-theme="dark"] .compare-pill-more { color: var(--ink-3); }

/* Homepage details */
[data-theme="dark"] .home-play { background: rgba(233,234,244,0.9); }
[data-theme="dark"] .home-play-tri { border-left-color: var(--navy-800); }
[data-theme="dark"] .prod-3d-hint { background: rgba(14,16,48,0.75); color: #A9ACC0; }
[data-theme="dark"] .q-theme-btn { border-color: rgba(255,255,255,0.35); }

/* Specificaties op de productpagina in het merkletter­type (Arial Rounded) */