/* ═══════════════════════════════════════════════════
   TRALERT® KS1 Configurator — Stylesheet v2
   Donker · Rood · Professioneel B2B
   ═══════════════════════════════════════════════════ */

:root {
  --red:        #E63329;
  --red-dark:   #C02820;
  --red-hover:  #FF3D32;
  /* Losse RGB-componenten van --red, voor rgba(...)-transparanties (gloed,
     hover-vlakken, randen). Whitelabel.apply() rekent deze om zodra een partner
     een eigen hoofdkleur heeft — anders zouden die effecten rood blijven. */
  --red-rgb:    230,51,41;
  /* Lichtere variant van --red, voor tekst op een donker gekleurd vlak.
     Dit is --red 30% naar wit toe gemengd — dezelfde berekening die
     Whitelabel.apply() maakt als een partner alleen --red aanlevert. */
  --red-tint:   #EE7069;
  --bg:         #181818;
  --bg-card:    #222222;
  --bg-card-2:  #2A2A2A;
  --bg-input:   #2E2E2E;
  --border:     #383838;
  --border-2:   #444444;
  --text:       #F2F2F2;
  --text-muted: #8A8A8A;
  --text-dim:   #555;
  --white:      #FFFFFF;
  --success:    #22C55E;
  --green:      #22C55E;
  --warning:    #F59E0B;
  --error:      #EF4444;
  --info:       #3B82F6;

  /* Zone kleuren */
  --z1: #3B82F6;
  --z2: #F97316;
  --z3: #22C55E;
  --z4: #EF4444;
  --z5: #EAB308;
  --z6: #D946EF;

  --radius:    8px;
  --radius-lg: 14px;
  --shadow:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --trans:     0.18s ease;

  --header-h: 60px;
  --prog-h:   52px;
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body {
  font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #000;
  background-image: url('../img/bg-tralert.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────── */
.config-outer {
  display: flex;
  align-items: flex-start;
  max-width: 1500px;
  margin: 0 auto;
}
#app {
  flex: 0 1 960px;
  min-width: 0;
  max-width: 960px;
  padding: 0 28px 100px 28px;
  margin: 0 auto;
}

/* ── Header ─────────────────────────────────────── */
#site-header {
  height: var(--header-h);
  background: #111111;
  border-bottom: 2px solid var(--red);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 20px rgba(0,0,0,0.7);
}
.header-inner {
  max-width: 980px;
  margin: 0 auto;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  /* Basishoogte per schermformaat (--logo-h) maal de partnerfactor
     (--logo-scale, gezet door js/whitelabel.js). Zo blijft het logo van een
     partner op elk formaat in verhouding, ook op telefoon. */
  --logo-h: 36px;
  height: calc(var(--logo-h) * var(--logo-scale, 1));
  /* Vangnet voor een breed partnerlogo: zonder deze grens duwt zo'n logo de
     icoonknoppen uit de header op smalle schermen. object-fit:contain schaalt
     het dan netjes mee. Het TRALERT-logo is 140px breed en raakt dit niet. */
  max-width: min(42vw, 260px);
  width: auto;
  object-fit: contain;
}
.header-tagline {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding-left: 10px;
  border-left: 1px solid var(--border-2);
  line-height: 1.3;
}

/* ── Sets Control (in header) ────────────────────── */
.header-sets {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
}
.sets-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.sets-control {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sets-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--trans);
}
.sets-btn:hover { background: var(--red); border-color: var(--red); }
.sets-val {
  min-width: 28px;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  color: var(--red);
}

/* ── Progress Bar ────────────────────────────────── */
#progress-bar {
  background: #141414;
  border-bottom: 1px solid var(--border);
  display: none;
  position: sticky;
  top: var(--header-h);
  z-index: 190;
}
#progress-bar.visible { display: block; }
.progress-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 20px;
}
.progress-steps {
  display: flex;
  align-items: center;
  /* Passen alle stappen binnen de balk (weinig stappen, zoals de aanhanger-route),
     dan staan ze gecentreerd i.p.v. links onder het logo. `safe` zorgt dat bij
     overloop — de KS1-route met 12 stappen, of een smal scherm — links niets
     wegvalt; de balk begint dan gewoon weer bij de eerste stap. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}
.progress-steps::-webkit-scrollbar { display: none; }

.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 26px;
  cursor: default;
  opacity: 0.35;
  transition: opacity var(--trans);
  flex-shrink: 0;
}
.step-dot.active, .step-dot.done { opacity: 1; }
.step-dot.done { cursor: pointer; }
.step-dot.clickable { cursor: pointer; }
.step-dot.clickable:hover .step-dot-circle { border-color: var(--red); opacity: 0.85; }
.step-dot.skipped { opacity: 0.2; pointer-events: none; }

.step-dot-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--trans);
}
.step-dot.active .step-dot-circle {
  border-color: var(--red);
  color: var(--red);
  background: rgba(var(--red-rgb),0.12);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb),0.15);
}
.step-dot.done .step-dot-circle {
  background: var(--success);
  border-color: var(--success);
  color: var(--white);
  font-size: 12px;
}
.step-dot.prefilled .step-dot-circle {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.5);
  color: #86EFAC;
  font-size: 12px;
}
.step-dot.prefilled .step-dot-label { color: #86EFAC; opacity: 0.75; }
.step-dot.prefilled:hover .step-dot-circle { border-color: #4ADE80; background: rgba(34,197,94,0.2); }
.step-dot-label {
  font-size: 8px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  display: block;
}
.step-dot.active .step-dot-label { display: block; color: var(--text); font-weight: 600; }
.step-dot.done .step-dot-label { display: block; color: #86EFAC; font-weight: 500; }

.progress-connector {
  flex: 1;
  min-width: 6px;
  max-width: 48px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  margin-bottom: 12px;
  transition: background var(--trans);
}
.progress-connector.done { background: var(--success); }

/* ── Step notify badge (bouncing dot bij nieuwe opties) ─────────── */
@keyframes notify-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35%       { transform: translateY(-5px) scale(1.2); }
  55%       { transform: translateY(-2px) scale(1.05); }
}
@keyframes notify-ring {
  0%   { box-shadow: 0 0 0 0   rgba(var(--red-rgb),0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--red-rgb),0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--red-rgb),0); }
}
.step-dot-circle { position: relative; }
.step-notify-dot {
  position: absolute;
  top: -4px; right: -4px;
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--bg);
  animation: notify-bounce 1.6s ease-in-out infinite,
             notify-ring    1.6s ease-in-out infinite;
  z-index: 2;
}


/* ── Decoratieve cirkels ─────────────────────────── */
.circles-bg {
  position: fixed;
  top: -50px; right: -80px;
  width: 480px; height: 480px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
}
.circles-bg circle { fill: none; stroke: var(--white); }

/* ── Screen systeem ──────────────────────────────── */
.screen { display: none; padding-top: 44px; position: relative; z-index: 1; }
.screen.active { display: block; }

/* ── Hero / Startscherm ──────────────────────────── */
.hero-badge {
  display: inline-block;
  background: rgba(var(--red-rgb),0.12);
  color: var(--red-tint);
  border: 1px solid rgba(var(--red-rgb),0.3);
  border-radius: 100px;
  padding: 5px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 600;
  line-height: 1.06;
  margin-bottom: 20px;
  letter-spacing: -0.8px;
  text-align: left;
  color: #ffffff;
}
.hero h1 em { font-style: normal; color: var(--red); }
.hero p {
  color: rgba(255,255,255,0.72);
  font-size: 16px;
  max-width: 480px;
  margin: 0 0 44px;
  line-height: 1.65;
  text-align: left;
}

/* ── Hero — foto-achtergrond met donkere overlay ── */
.hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: 80px 64px;
  margin-bottom: 40px;
  background: #09090f url('../img/hero-experience.jpg') center center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
}
/* Donkere overlay + rode gloed links */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 90% at -5% 50%, rgba(var(--red-rgb),0.22) 0%, transparent 60%),
    linear-gradient(to right, rgba(9,9,15,0.82) 0%, rgba(9,9,15,0.65) 50%, rgba(9,9,15,0.45) 100%);
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(9,9,15,0.15) 0%, rgba(9,9,15,0.5) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Rode accentlijn boven (apart element) */
.hero-deco::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--red) 0%, rgba(var(--red-rgb),0.35) 45%, transparent 75%);
  z-index: 10;
}
/* Decoratief SVG rechts */
.hero-deco {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: 52%;
  height: 160%;
  z-index: 2;
  pointer-events: none;
}
.hero-deco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: 0.13;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 560px;
  text-align: left;
}

/* ── Hero CTA knoppen ────────────────────────────── */
.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-btn-primary,
.hero-btn-ghost {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--trans);
}
.hero-btn-primary {
  background: var(--red);
  border: 2px solid var(--red);
  color: #fff;
}
.hero-btn-primary:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--red-rgb),0.4);
}
.hero-btn-ghost {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.28);
  color: #ffffff;
}
.hero-btn-ghost:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}
.hero-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-btn-primary .hero-btn-icon { background: rgba(255,255,255,0.15); }
.hero-btn-ghost   .hero-btn-icon { background: rgba(255,255,255,0.07); }
.hero-btn-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.hero-btn-text strong { font-size: 15px; font-weight: 600; line-height: 1.2; }
.hero-btn-text small  { font-size: 12px; opacity: 0.65; line-height: 1; }

@media (max-width: 640px) {
  .hero { min-height: 340px; padding: 52px 28px 48px; }
  .hero h1 { font-size: clamp(26px, 7vw, 38px); }
  .hero p { font-size: 15px; }
  .hero-deco { display: none; }
  .hero-cta-row { flex-direction: column; }
  .hero-btn-primary,
  .hero-btn-ghost { width: 100%; }
}

/* ── Brochure card ───────────────────────────────── */
.video-section {
  max-width: 960px;
  margin: 28px auto 0;
}
.video-section-label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  text-align: center;
}
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
}
.video-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.brochure-row {
  max-width: 960px;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

/* ── Experience Centre sectie ────────────────────── */
.experience-section {
  max-width: 720px;
  margin: 24px auto 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.experience-header {
  padding: 24px 24px 20px;
}
.experience-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--red);
  margin-bottom: 6px;
}
.experience-header h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.experience-header p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }
.experience-link { display: inline-block; }
.experience-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 0 3px 3px;
}
.experience-photos img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
@media (max-width: 480px) {
  .experience-photos { grid-template-columns: repeat(2, 1fr); }
}
[data-theme="light"] .experience-section { background: #FAFAFA; border-color: #E0E0E0; }
.brochure-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all var(--trans);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
}
.brochure-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background var(--trans);
  z-index: 1;
}
.brochure-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow); }
.brochure-card:hover::before { background: var(--red); }
.brochure-thumb {
  width: 110px;
  flex-shrink: 0;
}
.brochure-thumb img { width: 100%; height: auto; display: block; }
.brochure-info { flex: 1; min-width: 0; padding-top: 2px; }
.brochure-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 5px; line-height: 1.3; }
.brochure-info p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.brochure-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--border-2);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--trans);
}
.brochure-card:hover .brochure-badge {
  border-color: var(--red);
  color: var(--red);
}

/* ── Kit card image ──────────────────────────────── */
.kit-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
  display: block;
  border-bottom: 1px solid var(--border);
  background: #1e1e1e;
}
.kit-body { padding: 20px 18px; }
.kit-card { padding: 0; text-align: left; overflow: hidden; }
.kit-inhoud {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.kit-inhoud-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.kit-inhoud ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kit-inhoud li {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}
.kit-inhoud li::before {
  content: '✓';
  color: var(--success);
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Summary improvements ────────────────────────── */
.summary-zone-header {
  padding: 8px 14px;
  margin: 16px 0 4px;
  border-radius: 6px;
}
.summary-item .summary-name { font-size: 17px; font-weight: 600; }
.summary-item .summary-sku { font-size: 14px; font-weight: 500; }
.summary-item { padding: 14px 0; }
.summary-qty { font-size: 18px; }

/* ── Zone diagram ────────────────────────────────── */
.zone-diagram {
  text-align: center;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.zone-diagram-label { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; letter-spacing: 0.3px; }
.zone-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; align-items: center; }
.zone-pill {
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}
.zone-pill.z1 { background: rgba(59,130,246,0.12); color: #60A5FA; border-color: rgba(59,130,246,0.25); }
.zone-pill.z2 { background: rgba(249,115,22,0.12); color: #FB923C; border-color: rgba(249,115,22,0.25); }
.zone-pill.z3 { background: rgba(34,197,94,0.12); color: #4ADE80; border-color: rgba(34,197,94,0.25); }
.zone-pill.z4 { background: rgba(239,68,68,0.12); color: #F87171; border-color: rgba(239,68,68,0.25); }
.zone-pill.z5 { background: rgba(234,179,8,0.12); color: #FACC15; border-color: rgba(234,179,8,0.25); }
.zone-pill.z6 { background: rgba(217,70,239,0.12); color: #E879F9; border-color: rgba(217,70,239,0.25); }
.zone-arrow { color: var(--text-dim); font-size: 14px; }

/* ── Kits grid ───────────────────────────────────── */
/* ── Kit list layout ─────────────────────────────── */
.kits-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.kit-list-item {
  display: flex;
  align-items: stretch;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
  overflow: hidden;
  position: relative;
}
.kit-list-item:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.kit-list-img-wrap {
  flex: 0 0 240px;
  position: relative;
  background: var(--bg-card-2);
  overflow: hidden;
}
.kit-list-img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: contain;
  padding: 10px;
  display: block;
  transition: transform 0.4s ease;
}
.kit-list-item:hover .kit-list-img { transform: scale(1.04); }
.kit-list-img-wrap.no-img { background: #1a1a1a; }
.kit-list-tier {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.kit-list-tier.pro {
  background: rgba(var(--red-rgb),0.15);
  border-color: rgba(var(--red-rgb),0.4);
  color: var(--red);
}
.kit-list-body {
  flex: 1;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.kit-list-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.kit-list-header h3 { font-size: 18px; font-weight: 600; margin: 0; }
.kit-list-sku { font-family: monospace; font-size: 12px; color: var(--red); flex-shrink: 0; }
.kit-list-body p { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.kit-list-cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 24px;
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--trans), transform var(--trans);
}
.kit-list-item:hover .kit-list-cta { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) {
  .kit-list-item { flex-direction: column; }
  .kit-list-img-wrap { flex: none; height: 180px; }
  .kit-list-img { min-height: 180px; }
  .kit-list-cta { display: none; }
}

/* legacy grid rules (kept for kit-card in JS-rendered detail screens) */
.kits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.kit-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  cursor: pointer;
  transition: all var(--trans);
  text-align: center;
}
.kit-card:hover { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-2px); }
.kit-tier {
  display: inline-block;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.kit-tier.pro { background: rgba(var(--red-rgb),0.12); border-color: rgba(var(--red-rgb),0.3); color: var(--red); }
.kit-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.kit-card .kit-sku { font-family: monospace; font-size: 11px; color: var(--red); margin-bottom: 10px; }
.kit-card p { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

/* ── Step header ─────────────────────────────────── */
.step-header { margin-bottom: 28px; }
.step-header h2 { font-size: clamp(20px, 3.5vw, 30px); font-weight: 500; margin-bottom: 8px; letter-spacing: -0.3px; }
.step-header p { color: var(--text-muted); font-size: 14px; max-width: 600px; line-height: 1.6; }
.step-intro-list { color: var(--text-muted); font-size: 14px; max-width: 600px; line-height: 1.6; margin: 8px 0 0; padding-left: 20px; list-style: disc; }
.step-intro-list li { margin-bottom: 4px; }
.step-intro-list strong { color: var(--text); }

/* ── Zone badge ──────────────────────────────────── */
.zone-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── Filters ─────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.filter-btn-group { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.filter-btn:hover { border-color: var(--red); color: var(--text); }
.filter-btn.active { background: rgba(var(--red-rgb),0.12); border-color: var(--red); color: var(--red-tint); font-weight: 600; }

/* ── Serie card grid ─────────────────────────────── */
.serie-card-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.serie-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.serie-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.serie-card.selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.serie-card.selected::after {
  content: '✓';
  position: absolute;
  top: 7px; right: 9px;
  width: 20px; height: 20px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serie-card-img {
  width: 100%;
  aspect-ratio: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.serie-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.serie-card-name {
  width: 100%;
  padding: 7px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}
.serie-card.soft-locked { opacity: 0.6; }
.serie-card.soft-locked:hover { border-color: var(--red); opacity: 0.85; }

/* ── Products grid ───────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.product-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  cursor: pointer;
  transition: all var(--trans);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.product-card:hover { border-color: var(--red); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.product-card.selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

/* Vinkje bij selected */
.product-card.selected::after {
  content: '✓';
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  line-height: 24px;
  text-align: center;
  z-index: 2;
}

/* Product afbeelding */
.product-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: #1E1E1E;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* KS1-2500 t/m KS1-2660: 90° draaien zodat kabel van boven naar beneden loopt
   Selector is bewust specifiek op KS1- prefix om valse matches (SF-2600 etc.) te voorkomen */
.product-img img[src*="KS1-2500" i],
.product-img img[src*="KS1-2550" i],
.product-img img[src*="KS1-2600" i]:not([src*="KS1-26000"]),
.product-img img[src*="KS1-2610" i],
.product-img img[src*="KS1-2650" i],
.product-img img[src*="KS1-2660" i],
.sch-img[src*="KS1-2500" i],
.sch-img[src*="KS1-2550" i],
.sch-img[src*="KS1-2600" i]:not([src*="KS1-26000"]),
.sch-img[src*="KS1-2610" i],
.sch-img[src*="KS1-2650" i],
.sch-img[src*="KS1-2660" i] {
  transform: rotate(90deg) !important;
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.3s ease;
}
.product-card:hover .product-img img { transform: scale(1.04); }
.product-card:hover .product-img img[src*="KS1-2500" i],
.product-card:hover .product-img img[src*="KS1-2550" i],
.product-card:hover .product-img img[src*="KS1-2600" i]:not([src*="KS1-26000"]),
.product-card:hover .product-img img[src*="KS1-2610" i],
.product-card:hover .product-img img[src*="KS1-2650" i],
.product-card:hover .product-img img[src*="KS1-2660" i] {
  transform: rotate(90deg) scale(1.04) !important;
}
.product-img .no-img {
  font-size: 40px;
  opacity: 0.15;
}

/* Product info */
.product-info {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.product-sku {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 11px;
  color: var(--red);
  font-weight: 500;
  letter-spacing: 0.3px;
}
.product-naam { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text); }
.product-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.product-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.product-tag {
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Fotogalerij-thumbnails (product met meerdere afbeeldingen, bv. connectionbox KS1-3100/3400) */
.product-thumbs { display: flex; gap: 6px; padding: 8px 10px 0; flex-wrap: wrap; }
.product-thumb {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-card); cursor: pointer; overflow: hidden;
  transition: border-color 0.15s ease;
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.product-thumb:hover { border-color: var(--border-2); }
.product-thumb.active { border-color: var(--red); }

/* "Waarop aan te sluiten" chips op de connectionbox-kaarten */
.connect-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin: 10px 0 5px; }
.connect-tag { color: var(--text); border-color: rgba(var(--red-rgb), 0.4); }

/* ── Qty control ─────────────────────────────────── */
.qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.qty-btn {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--trans);
  flex-shrink: 0;
}
.qty-btn:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.qty-val { min-width: 28px; text-align: center; font-weight: 600; font-size: 15px; }
.qty-label { font-size: 11px; color: var(--text-muted); }

/* ── Info boxes ──────────────────────────────────── */
.info-box {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  color: #93C5FD;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  line-height: 1.5;
}
.info-box.warning { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); color: #FCD34D; }
.info-box.success { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); color: #86EFAC; }
.info-box.error   { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.25);  color: #FCA5A5; }
.info-box-icon { flex-shrink: 0; font-size: 16px; }
.info-box-body { flex: 1; }

/* ── Auto-connector chip (inline in info-box) ─────── */
.auto-conn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 4px 10px 4px 6px;
  margin-left: 8px;
  font-size: 12px;
  vertical-align: middle;
}
.auto-conn-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 3px;
  background: #111;
}
.auto-conn-sku { font-weight: 600; color: var(--text); }
.auto-conn-qty { color: var(--text-muted); }

/* ── Section title ───────────────────────────────── */
.section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 30px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Subtype selector ────────────────────────────── */
.subtype-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 480px) { .subtype-selector { grid-template-columns: 1fr; } }

.subtype-btn {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  cursor: pointer;
  transition: all var(--trans);
  text-align: center;
}
.subtype-btn:hover { border-color: var(--red); }
.subtype-btn.active { border-color: var(--red); background: rgba(var(--red-rgb),0.07); }
.subtype-btn .icon { font-size: 30px; margin-bottom: 10px; display: block; }
.subtype-btn h4 { font-size: 16px; font-weight: 500; margin-bottom: 5px; }
.subtype-btn p { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* ── Soft-lock: klikbaar maar geblokkeerde optie ──── */
.subtype-btn.soft-locked {
  opacity: 0.55;
  position: relative;
  cursor: pointer;
}
.subtype-btn.soft-locked:hover {
  opacity: 0.85;
  border-color: var(--red);
}
.subtype-btn.soft-locked .soft-lock-icon {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 15px;
  line-height: 1;
}
.filter-btn.soft-locked {
  opacity: 0.55;
  cursor: pointer;
  position: relative;
}
.filter-btn.soft-locked:hover { opacity: 0.85; border-color: var(--red); }
.filter-btn.soft-locked::after { content: ' 🔒'; font-size: 11px; }
.product-card.soft-locked { cursor: pointer; position: relative; }
.product-card.soft-locked .soft-lock-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}
.product-card.soft-locked:hover { border-color: var(--red); }
.compat-modal-icon { font-size: 36px; margin-bottom: 10px; display: block; text-align: center; }

/* ── Autoselect card ─────────────────────────────── */
.autoselect-card {
  background: var(--bg-card);
  border: 2px solid var(--success);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.autoselect-icon { font-size: 32px; flex-shrink: 0; }
.autoselect-info h4 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.autoselect-info p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.autoselect-info .sku { font-family: monospace; color: var(--success); font-weight: 500; font-size: 15px; }

/* ── Navigation ──────────────────────────────────── */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--trans);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--red-rgb),0.35); }
.btn-secondary { background: transparent; color: var(--text-muted); border-color: var(--border-2); }
.btn-secondary:hover { color: var(--text); border-color: var(--text-muted); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { color: var(--text); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-lg { padding: 16px 36px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-sm { padding: 7px 14px; font-size: 12px; }

/* ── Summary / Overzicht ─────────────────────────── */
.summary-section { margin-bottom: 32px; }
.summary-section h3 {
  font-size: 15px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.summary-section h3::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.summary-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.summary-item:last-child { border-bottom: none; }
.summary-img {
  width: 54px; height: 44px; flex-shrink: 0;
  border-radius: 5px; overflow: hidden;
  background: #1e1e1e;
  display: flex; align-items: center; justify-content: center;
  margin-right: 12px;
}
.summary-img img { width: 100%; height: 100%; object-fit: contain; }
.summary-qty {
  min-width: 38px; height: 38px;
  background: rgba(var(--red-rgb),0.1);
  border: 1px solid rgba(var(--red-rgb),0.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: var(--red);
  flex-shrink: 0;
}
.summary-details { flex: 1; min-width: 0; }
.summary-name { font-size: 17px; font-weight: 600; line-height: 1.3; }
.summary-sku { font-family: monospace; font-size: 14px; font-weight: 500; color: var(--text-muted); margin-top: 3px; }

/* ── Validation ──────────────────────────────────── */
.validation-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.validation-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.validation-item.ok        { background: rgba(34,197,94,0.07);   color: #86EFAC; }
.validation-item.fout      { background: rgba(239,68,68,0.08);   color: #FCA5A5; }
.validation-item.waarschuwing { background: rgba(245,158,11,0.08); color: #FCD34D; }
.validation-item.suggestie { background: rgba(59,130,246,0.07);  color: #93C5FD; }
.validation-item.is-clickable {
  cursor: pointer;
  position: relative;
  padding-right: 30px;
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.validation-item.is-clickable::after {
  content: '›';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; font-weight: 700;
  opacity: .55;
  transition: transform .15s ease, opacity .15s ease;
}
.validation-item.is-clickable:hover {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.validation-item.is-clickable:hover::after { transform: translate(3px,-50%); opacity: .9; }
.validation-item.is-clickable:focus-visible {
  outline: 2px solid var(--red, #E63329);
  outline-offset: 2px;
}
[data-theme="light"] .validation-item.is-clickable:hover {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}

/* ── Download area ───────────────────────────────── */
.download-area {
  background: linear-gradient(135deg, #1E1212 0%, #1A1A1A 100%);
  border: 2px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
  margin-top: 32px;
  position: relative;
  overflow: hidden;
}
.download-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(var(--red-rgb),0.06), transparent 70%);
  pointer-events: none;
}
.download-area h3 { font-size: 22px; font-weight: 500; margin-bottom: 8px; }
.download-area p { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; line-height: 1.5; }
.dl-btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}
@media (max-width: 480px) {
  .dl-btn-row { flex-direction: column; }
}

/* ── Sets banner (in summary) ─────────────────────── */
.sets-banner {
  background: rgba(var(--red-rgb),0.07);
  border: 1px solid rgba(var(--red-rgb),0.2);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.sets-banner-label { font-size: 14px; font-weight: 600; flex: 1; }
.sets-banner-control { display: flex; align-items: center; gap: 8px; }
.sets-banner-val { font-size: 20px; font-weight: 600; color: var(--red); min-width: 32px; text-align: center; }

/* ── CSV preview ─────────────────────────────────── */
.csv-preview {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 14px;
  color: var(--text-muted);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.6;
  max-height: 240px;
  overflow-y: auto;
}

/* ── Toast ───────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.success { border-color: var(--success); color: var(--success); }
#toast.error   { border-color: var(--error);   color: var(--error);   }
#toast.info    { border-color: var(--info);     color: #93C5FD;        }

/* ── Back to top ─────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 24px;
  width: 42px; height: 42px;
  background: var(--red);
  border: none;
  border-radius: 50%;
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--red-rgb),0.4);
  opacity: 0;
  transition: opacity var(--trans);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
}
.back-to-top.visible { opacity: 1; }

/* ── Diagram Sidebar ─────────────────────────────── */
.diagram-panel {
  width: 400px;
  min-width: 400px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h) + var(--prog-h));
  max-height: calc(100vh - var(--header-h) - var(--prog-h));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 16px 20px;
  background: #111;
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.trailer-svg {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes zone-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; filter: brightness(1.35); }
}
.zone-active-anim {
  animation: zone-pulse 3s ease-in-out infinite;
}

/* ── Zone Tooltip ────────────────────────────────── */
.zone-tooltip {
  position: fixed;
  z-index: 9999;
  background: #1c1c1c;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 12px;
  pointer-events: none;
  min-width: 170px;
  max-width: 210px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.75);
  display: none;
}
.zone-tooltip img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
  filter: brightness(0.95);
}
.zone-tooltip .tt-sku {
  font-size: 10px;
  color: #666;
  letter-spacing: 0.5px;
  font-family: 'Titillium Web', monospace;
}
.zone-tooltip .tt-name {
  font-size: 12px;
  color: #ddd;
  margin-top: 3px;
  line-height: 1.35;
  font-weight: 600;
}
.zone-tooltip .tt-hint {
  font-size: 10px;
  color: #444;
  margin-top: 6px;
  font-style: italic;
}

@media (max-width: 900px) {
  .config-outer { flex-direction: column; }
  .diagram-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    position: relative;
    top: 0;
    max-height: 240px;          /* niet langer afknippen; scrollbaar mini-paneel */
    border-right: none;
    border-bottom: 1px solid #1e1e1e;
    padding: 12px 16px 14px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #app { padding: 0 16px 80px; }
}

/* ── Summary zone grouping ──────────────────────── */
.summary-zone-header {
  padding: 7px 12px;
  margin: 18px 0 6px;
  border-radius: 4px;
  line-height: 1.3;
}
.summary-zone-header:first-child { margin-top: 4px; }


/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 640px) {
  .products-grid { grid-template-columns: 1fr 1fr; }
  .step-nav { flex-direction: column-reverse; }
  .step-nav .btn { width: 100%; }
  .download-area { padding: 24px 18px; }
  .header-tagline { display: none; }
  .hero { padding: 40px 20px 36px; }
  #app { padding: 0 14px 80px 14px; }
}
@media (max-width: 400px) {
  .products-grid { grid-template-columns: 1fr; }
}

/* ── Kabelschema (diagram sidebar) ────────────────── */
.sch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

/* Zone block */
.sch-block {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-lg);
  border: 1px solid #333;
  background: #242424;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.sch-block.sch-idle { opacity: 0.50; }
.sch-block.sch-done { border-color: #333; }
.sch-block.sch-clickable { cursor: pointer; }
.sch-block.sch-clickable:hover {
  border-color: var(--red, #E63329);
  box-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.sch-block.sch-active {
  border-color: #555;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  animation: zone-pulse 3s ease-in-out infinite;
}
.sch-zone-pill {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 0 8px;
  flex-shrink: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  min-width: 28px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  border-radius: 13px 0 0 13px;
}
.sch-img-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 10px 8px;
}
.sch-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}
.sch-img-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  background: #1a1a1a;
  border: 1px dashed #333;
}
.sch-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sch-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  white-space: nowrap;
}
.sch-sku {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Titillium Web', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sch-sku.sch-empty {
  color: var(--text-dim);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
}
.sch-status {
  font-size: 14px;
  flex-shrink: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sch-status-done { color: var(--success); }
.sch-status-active { color: var(--text-dim); }

/* Connector line between zones */
.sch-connector {
  width: 0;
  height: 18px;
  border-left: 2px solid var(--border-2);
  margin: 0 0 0 27px; /* centreert op midden van zone pill (28px / 2 - 1px border) */
}

/* Y-fork (round lights only) — rendered as inline SVG */
.sch-yfork {
  display: block;
  width: 100%;
  height: 22px;
  padding: 0 2px;
  box-sizing: border-box;
}

/* Rear lights */
.sch-rear-header {
  padding: 4px 2px 6px;
}
.sch-rear-title {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.sch-rear-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.sch-rear-item {
  text-align: center;
  flex: 1;
  min-width: 80px;
}
.sch-rear-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.sch-rear-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: #181818;
  border: 1px dashed #2a2a2a;
  margin: 0 auto;
}
.sch-rear-placeholder.sch-rear-empty { background: var(--bg-card-2); border: 1px dashed var(--border-2); }
.sch-rear-placeholder.sch-rear-rond { border-radius: 50%; }
.sch-rear-label { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.sch-rear-sku { font-size: 11px; color: var(--text-dim); font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; margin: 0 auto; }
.sch-rear-qty { font-size: 12px; color: var(--success); font-weight: 600; margin-top: 2px; }
.sch-rear-functie .sch-rear-label { color: #F97316; }

/* Zone 6 grid */
.sch-z6-sep {
  border-top: 1px solid var(--border);
  margin: 10px 0 8px;
}
.sch-z6-section { padding: 0 2px; }
.sch-z6-section.auto-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 8px 6px;
  margin-top: 6px;
}
.sch-z6-title {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
}
.sch-z6-section.auto-section .sch-z6-title {
  color: #F97316;
}
.sch-z6-section.auto-section .sch-z6-cell .sch-z6-lbl {
  color: #F97316;
  opacity: 0.85;
}
.sch-z6-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sch-z6-cell { text-align: center; }
.sch-z6-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 4px;
  background: #111;
  display: block;
  margin: 0 auto;
  border: 1px solid #1e1e1e;
}
.sch-z6-lbl {
  font-size: 11px;
  color: #777;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.sch-z6-qty {
  font-size: 12px;
  color: var(--success);
  font-weight: 600;
}
/* Fallback box for Zone 6 items without a local product image */
.sch-z6-fallback {
  width: 58px;
  height: 58px;
  border-radius: 4px;
  background: #5B21B6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.5px;
  margin: 0 auto;
  border: 1px solid #3730A3;
}

/* ═══════════════════════════════════════════════════
   Expert Check — download-area trigger + nav link
   ═══════════════════════════════════════════════════ */
.expert-check-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.expert-check-divider {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.expert-nav-link {
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.8;
  padding: 6px 12px;
}
.expert-nav-link:hover {
  color: var(--text-muted);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   Expert Check Modal
   ═══════════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-overlay.open {
  display: flex;
}
.modal-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  position: relative;
}
.modal-panel-sm { max-width: 400px; }
.modal-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modal-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  box-sizing: border-box;
  transition: border-color var(--trans);
}
.modal-input:focus {
  outline: none;
  border-color: var(--red);
}
.modal-input::placeholder { color: var(--text-dim); }
.modal-panel::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(to right, var(--red), transparent 80%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 0;
}
.modal-badge {
  display: inline-block;
  background: rgba(var(--red-rgb), 0.12);
  color: var(--red-tint);
  border: 1px solid rgba(var(--red-rgb), 0.3);
  border-radius: 100px;
  padding: 3px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.modal-header-content h2 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.modal-header-content p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--trans);
}
.modal-close:hover {
  background: rgba(var(--red-rgb), 0.1);
  border-color: var(--red);
  color: var(--red);
}
.modal-form {
  padding: 18px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.modal-field .required { color: var(--red); }
.modal-field .optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}
.modal-field input,
.modal-field textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 13px;
  transition: border-color var(--trans);
  resize: vertical;
}
.modal-field input:focus,
.modal-field textarea:focus {
  outline: none;
  border-color: var(--red);
}
.modal-field input::placeholder,
.modal-field textarea::placeholder {
  color: var(--text-dim);
}
.modal-config-preview {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.modal-config-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 7px 12px 6px;
  border-bottom: 1px solid var(--border);
}
.modal-config-pre {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 12px;
  max-height: 130px;
  overflow-y: auto;
  white-space: pre;
  margin: 0;
}
.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}
@media (max-width: 640px) {
  .modal-overlay { padding: 10px; }
  .modal-header  { padding: 16px 16px 0; }
  .modal-form    { padding: 14px 16px 16px; gap: 12px; }
  .modal-actions .btn { flex: 1; }
}

/* ── Expert modal met galerij ────────────────────── */
.modal-panel-expert { max-width: 880px; overflow: hidden; }
.modal-panel-expert::before { border-radius: var(--radius-lg) 0 0 0; }
.expert-modal-inner { display: flex; max-height: 90vh; }
.expert-modal-form { flex: 1; min-width: 0; overflow-y: auto; }
.expert-modal-gallery {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  border-left: 1px solid var(--border);
}
.expert-modal-gallery img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
  min-height: 0;
}
@media (max-width: 740px) {
  .expert-modal-gallery { display: none; }
  .modal-panel-expert { max-width: 560px; }
}

/* ── Trailer Schematic ── */
/* ── 3D trailer viewer ─────────────────────────────────────────────────── */
.trailer-schematic {
  background: #0b1410;
  border: 1px solid #1a2a1a;
  border-radius: 10px;
  padding: 0 0 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

/* Callout label */
.schematic-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 0 14px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  line-height: 1.4;
}
.schematic-callout-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── 3D Reset view knop (rechtsboven overlay) ────── */
.trailer-schematic { position: relative; }
.trailer-3d-reset-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #333;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  transition: all 0.18s;
  backdrop-filter: blur(4px);
}
.trailer-3d-reset-btn:hover { border-color: #666; color: #ccc; background: rgba(0,0,0,0.75); }

/* ── 3D: licht aan/uit ──
   Naast de reset-knop. Zet de scène in schemer en laat alle gekozen
   verlichting branden. Aan-stand in amber: dat is licht, en het botst niet met
   het rood van het merk dat elders in de weergave de actieve zone aanwijst. */
.trailer-3d-licht-btn {
  position: absolute;
  top: 8px;
  right: 44px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #333;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  transition: all 0.18s;
  backdrop-filter: blur(4px);
}
.trailer-3d-licht-btn:hover { border-color: #666; color: #ccc; background: rgba(0,0,0,0.75); }
.trailer-3d-licht-btn.aan {
  border-color: #F0A64A;
  color: #FFD79A;
  background: rgba(240,166,74,0.16);
  box-shadow: 0 0 10px rgba(240,166,74,0.30);
}

/* ── 3D: carrosserie dicht ──
   Derde knop op dezelfde rij. Aan-stand in het grijs van de carrosserie zelf:
   dit gaat over de oplegger en niet over zijn verlichting. */
.trailer-3d-huls-btn {
  position: absolute;
  top: 8px;
  right: 80px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #333;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  transition: all 0.18s;
  backdrop-filter: blur(4px);
}
.trailer-3d-huls-btn:hover { border-color: #666; color: #ccc; background: rgba(0,0,0,0.75); }
.trailer-3d-huls-btn.aan {
  border-color: #9AA4B2;
  color: #E6EAF0;
  background: rgba(154,164,178,0.18);
}

/* ── 3D: vergroten + vastzetten (linksboven overlay) ──
   De reset-knop houdt rechtsboven; deze balk staat linksboven zodat ze elkaar
   niet in de weg zitten. */
.trailer-3d-tools {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.trailer-3d-tool {
  background: rgba(0,0,0,0.55);
  border: 1px solid #333;
  border-radius: 6px;
  color: #999;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 5px 9px;
  cursor: pointer;
  transition: all 0.18s;
  backdrop-filter: blur(4px);
}
.trailer-3d-tool:hover { border-color: #666; color: #eee; background: rgba(0,0,0,0.78); }
/* Lege plaatshouder in de stap wanneer de tekening links vastgezet staat. */
.trailer-3d-verplaatst { display: none; }

/* De 3D in het kabelschema-paneel: strakker tegen de rest aan dan in een stap. */
#panel-3d-host .trailer-schematic { margin-bottom: 14px; }

/* Schermvullende 3D — hergebruikt de balk van .dwg-zoom-overlay. */
.trailer-3d-overlay .trailer-3d-groot-vlak {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}
.trailer-3d-groot { margin: 0; }
.trailer-3d-groot .schematic-callout { padding-top: 8px; }
.dwg-zoom-actions button[data-sluit] {
  background: var(--red, #E63329); border-color: transparent; font-size: 13px;
}

/* ── Diagram PDF download knop ───────────────────── */
.sch-pdf-btn {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #555;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all var(--trans);
  line-height: 1.4;
}
.sch-pdf-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(var(--red-rgb),0.08);
}
.sch-pdf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Header rechts (save/load groep) ─────────────── */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hdr-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--trans);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: inherit;
  height: 32px;
}
.hdr-btn:hover {
  background: var(--bg-card-2);
  border-color: var(--border-2);
  color: var(--text);
}
.hdr-btn-save:hover { border-color: var(--success); color: var(--success); }
.hdr-btn-load:hover { border-color: var(--info); color: var(--info); }
.hdr-btn-reset:hover { border-color: var(--red); color: var(--red); }

/* ── CSV drop zone ────────────────────────────────── */
.csv-drop-zone {
  position: relative;
  border: 2px dashed var(--border-2);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--trans);
  background: var(--bg-card);
}
.csv-drop-zone:hover, .csv-drop-zone.drag-over {
  border-color: var(--red);
  background: rgba(var(--red-rgb),0.05);
}
.csv-drop-icon { font-size: 40px; margin-bottom: 10px; }
.csv-drop-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.csv-drop-sub { font-size: 12px; color: var(--text-muted); }

/* ── CSV import preview ───────────────────────────── */
.csv-preview-zone {
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.csv-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.csv-preview-row:last-child { border-bottom: none; }
.csv-preview-row.recognized { background: rgba(34,197,94,0.05); }
.csv-preview-row.unknown { background: rgba(239,68,68,0.05); }
.csv-preview-zone-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.csv-preview-sku { font-weight: 600; flex-shrink: 0; min-width: 130px; }
.csv-preview-naam { color: var(--text-muted); flex: 1; }
.csv-preview-qty { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.csv-preview-unknown { color: var(--red); font-style: italic; }

/* ── Autosave herstel banner ──────────────────────── */
.autosave-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(var(--red-rgb),0.08);
  border: 1px solid rgba(var(--red-rgb),0.25);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.autosave-banner-text { flex: 1; font-size: 13px; min-width: 180px; }
.autosave-banner-text strong { display: block; margin-bottom: 2px; }
.autosave-banner-text span { color: var(--text-muted); font-size: 12px; }
@media (max-width: 640px) {
  .hdr-btn { padding: 5px 8px; font-size: 10px; }
  .header-actions { gap: 4px; }
}

/* ── Start scherm — opgeslagen link ──────────────── */
.start-saved-row {
  text-align: center;
  padding: 4px 0 8px;
}

/* ── Opgeslagen configuraties modal ──────────────── */
.saved-configs-list {
  padding: 14px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow-y: auto;
}
.saved-config-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}
.saved-config-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--trans);
}
.saved-config-item:hover { border-color: var(--border-2); }
.saved-config-info { flex: 1; min-width: 0; }
.saved-config-date {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.saved-config-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-config-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sc-rename-input {
  background: var(--bg-input);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 3px 8px;
  width: 100%;
  outline: none;
}
.btn-sm {
  padding: 5px 12px !important;
  font-size: 12px !important;
}

/* ── Hulp sectie (onderaan elke stap) ────────────── */
.help-section {
  margin-top: 36px;
  padding: 20px 22px;
  background: #111;
  border: 1px solid var(--border);
  border-top: 2px solid #2a2a2a;
  border-radius: var(--radius-lg);
}
.help-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.help-section-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.help-section-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.help-card {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--trans);
  text-align: left;
  font-family: inherit;
  color: var(--text);
}
.help-card:hover {
  border-color: var(--red);
  background: rgba(var(--red-rgb),0.05);
}
.help-card-icon { font-size: 20px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.help-card-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.help-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 560px) {
  .help-section-cards { flex-direction: column; }
  .help-card { min-width: unset; }
}

/* ── Collapsible section (overige modellen dropdown) ── */
.collapsible-section {
  border: 1px solid var(--border-2);
  border-radius: 8px;
  overflow: hidden;
}
.collapsible-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg-card);
  user-select: none;
  transition: background 0.15s;
}
.collapsible-header:hover { background: var(--bg-input); }
.collapsible-header.has-selection { border-left: 3px solid var(--green); }
.collapsible-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
}
.collapsible-badge {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 2px 10px;
  flex-shrink: 0;
}
.collapsible-badge.selected {
  color: var(--green);
  border-color: var(--green);
  background: rgba(34, 197, 94, 0.08);
}
.collapsible-chevron {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.collapsible-body {
  padding: 12px 16px 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.overig-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.overig-serie-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--trans);
  min-width: 64px;
}
.overig-serie-btn:hover { border-color: var(--red); color: var(--text); }
.overig-serie-btn.active { background: rgba(var(--red-rgb),0.12); border-color: var(--red); color: var(--red-tint); font-weight: 600; }
.overig-serie-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}
.overig-serie-alle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

/* ── Prikkabel serie-selector (grotere tiles, step-mark) ────────── */
.prik-serie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.prik-serie-tile {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px 6px 8px;
  cursor: pointer;
  text-align: center;
  transition: all var(--trans);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.prik-serie-tile:hover { border-color: var(--red); }
.prik-serie-tile.active {
  border-color: var(--red);
  background: rgba(var(--red-rgb),0.08);
}
.prik-serie-tile img {
  width: 64px;
  height: 50px;
  object-fit: contain;
  border-radius: 5px;
  display: block;
}
.prik-serie-tile-alle {
  width: 64px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
}
.prik-serie-tile-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.prik-serie-tile.active .prik-serie-tile-name { color: var(--red); }
.prik-qty-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.prik-qty-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.prik-qty-total {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
.prik-selection-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--red-rgb),0.08);
  border: 1px solid rgba(var(--red-rgb),0.25);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE (data-theme="light")
   ═══════════════════════════════════════════════════ */

/* ── Variabelen ──────────────────────────────────── */
[data-theme="light"] {
  --bg:         #F2F2F2;
  --bg-card:    #FFFFFF;
  --bg-card-2:  #EBEBEB;
  --bg-input:   #E4E4E4;
  --border:     #D0D0D0;
  --border-2:   #BBBBBB;
  --text:       #1A1A1A;
  --text-muted: #555555;
  --text-dim:   #909090;
  --shadow:     0 8px 32px rgba(0,0,0,0.10);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07);
}

/* ── Body & achtergrond ──────────────────────────── */
[data-theme="light"] body {
  background-color: #F2F2F2;
  background-image:
    radial-gradient(ellipse 70% 65% at 50% 40%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.60) 50%, transparent 75%),
    url('../img/bg-tralert-light.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
[data-theme="light"] .circles-bg circle { stroke: #C0C0C0; }
[data-theme="light"] .circles-bg { opacity: 0.04; }

/* ── Header ──────────────────────────────────────── */
[data-theme="light"] #site-header {
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .header-tagline { color: var(--text-muted); }

/* ── Progress bar ────────────────────────────────── */
[data-theme="light"] #progress-bar { background: #ECECEC; }
[data-theme="light"] .step-dot-circle {
  background: var(--bg-card);
}
[data-theme="light"] .step-notify-dot { border-color: #ECECEC; }
[data-theme="light"] .step-dot.done .step-dot-label  { color: #16A34A; }
[data-theme="light"] .step-dot.prefilled .step-dot-label { color: #16A34A; }
[data-theme="light"] .step-dot.prefilled .step-dot-circle {
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.5);
  color: #16A34A;
}

/* ── Hero ────────────────────────────────────────── */
[data-theme="light"] .hero {
  background: #09090f url('../img/hero-experience.jpg') center center / cover no-repeat;
  border-color: #DCDCE0;
  box-shadow: 0 24px 64px rgba(0,0,0,0.20);
}
[data-theme="light"] .hero::before {
  background:
    radial-gradient(ellipse 60% 90% at -5% 50%, rgba(var(--red-rgb),0.18) 0%, transparent 60%),
    linear-gradient(to right, rgba(9,9,15,0.80) 0%, rgba(9,9,15,0.60) 50%, rgba(9,9,15,0.40) 100%);
}
[data-theme="light"] .hero h1 { color: #ffffff; }
[data-theme="light"] .hero p  { color: rgba(255,255,255,0.72); }
[data-theme="light"] .hero-deco img { opacity: 0.10; }
[data-theme="light"] .hero-btn-ghost .hero-btn-icon { background: rgba(255,255,255,0.12); }
/* De hero blijft in beide thema's een donkere foto, dus de badge houdt hier
   gewoon --red-tint. Elders in de lichte modus staat datzelfde rode label op
   een wit vlak — daar is de lichte tint te bleek; zie de regel hieronder. */

/* ── Rode labels op lichte vlakken ───────────────── */
[data-theme="light"] .filter-btn.active,
[data-theme="light"] .overig-serie-btn.active,
[data-theme="light"] .modal-badge { color: var(--red-dark); }

/* ── Cards & producten ───────────────────────────── */
[data-theme="light"] .product-img { background: #EFEFEF; }
[data-theme="light"] .summary-img { background: #EFEFEF; }
[data-theme="light"] .kit-list-img-wrap { background: #E0E0E0; }
[data-theme="light"] .kit-list-img-wrap.no-img { background: #EBEBEB; }
[data-theme="light"] .kit-list-img { filter: brightness(1); }
[data-theme="light"] .kit-list-tier {
  background: rgba(255,255,255,0.85);
  border-color: #C8C8C8;
  color: #555;
}
[data-theme="light"] .kit-list-tier.pro {
  background: rgba(var(--red-rgb),0.08);
  border-color: rgba(var(--red-rgb),0.35);
  color: var(--red);
}
[data-theme="light"] .brochure-thumb { background: #EBEBEB; }
[data-theme="light"] .video-wrap { background: #E0E0E0; }

/* ── Download area ───────────────────────────────── */
[data-theme="light"] .download-area {
  background: linear-gradient(135deg, #FDF0EF 0%, #F8F8F8 100%);
}

/* ── Help sectie ─────────────────────────────────── */
[data-theme="light"] .help-section {
  background: #F8F8F8;
  border-top-color: #D0D0D0;
}

/* ── Diagram sidebar ─────────────────────────────── */
[data-theme="light"] .diagram-panel {
  background: #F8F8F8;
  border-right-color: #D8D8D8;
  scrollbar-color: #C0C0C0 transparent;
}
@media (max-width: 900px) {
  [data-theme="light"] .diagram-panel { border-bottom-color: #D8D8D8; }
}

[data-theme="light"] .sch-header { color: #AAAAAA; }
[data-theme="light"] .sch-block {
  background: #FFFFFF;
  border-color: #E0E0E0;
  border-left-color: #BBBBBB;
  box-shadow: none;
}
[data-theme="light"] .sch-block.sch-active {
  background: rgba(0,0,0,0.02);
  border-color: #C8C8C8;
}
[data-theme="light"] .sch-label { color: #999; }
[data-theme="light"] .sch-sku { color: #1A1A1A; }
[data-theme="light"] .sch-sku.sch-empty { color: #D0D0D0; }
[data-theme="light"] .sch-status-active { color: #BBBBBB; }
[data-theme="light"] .sch-connector { border-left-color: #D0D0D0; }
[data-theme="light"] .sch-img-placeholder {
  background: #EFEFEF;
  border-color: #D0D0D0;
}
[data-theme="light"] .sch-rear-title { color: #AAAAAA; }
[data-theme="light"] .sch-rear-label { color: #AAAAAA; }
[data-theme="light"] .sch-rear-sku { color: #555; }
[data-theme="light"] .sch-rear-item img { border-color: #E0E0E0; }
[data-theme="light"] .sch-rear-placeholder {
  background: #EFEFEF;
  border-color: #D0D0D0;
}
[data-theme="light"] .sch-rear-placeholder.sch-rear-empty {
  background: #F5F5F5;
  border-color: #E8E8E8;
}
[data-theme="light"] .sch-z6-sep { border-top-color: #E8E8E8; }
[data-theme="light"] .sch-z6-title { color: #AAAAAA; }
[data-theme="light"] .sch-z6-img {
  background: #F4F4F4;
  border-color: #E0E0E0;
}
[data-theme="light"] .sch-z6-lbl { color: #999; }
[data-theme="light"] .sch-pdf-btn {
  border-color: #D0D0D0;
  color: #999;
}
[data-theme="light"] .sch-pdf-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ── Zone tooltip ────────────────────────────────── */
[data-theme="light"] .zone-tooltip {
  background: #FFFFFF;
  border-color: #D0D0D0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}
[data-theme="light"] .zone-tooltip .tt-sku { color: #AAAAAA; }
[data-theme="light"] .zone-tooltip .tt-name { color: #1A1A1A; }
[data-theme="light"] .zone-tooltip .tt-hint { color: #CCCCCC; }

/* ── Trailer schematic ───────────────────────────── */
[data-theme="light"] .trailer-schematic {
  background: #EFF6F1;
  border-color: #C8E0D0;
}

/* ── Zone pills (startscherm) ────────────────────── */
[data-theme="light"] .zone-pill.z1 { background: rgba(59,130,246,0.10); color: #2563EB; border-color: rgba(59,130,246,0.30); }
[data-theme="light"] .zone-pill.z2 { background: rgba(249,115,22,0.10); color: #D97706; border-color: rgba(249,115,22,0.30); }
[data-theme="light"] .zone-pill.z3 { background: rgba(34,197,94,0.10);  color: #16A34A; border-color: rgba(34,197,94,0.30); }
[data-theme="light"] .zone-pill.z4 { background: rgba(239,68,68,0.10);  color: #DC2626; border-color: rgba(239,68,68,0.30); }
[data-theme="light"] .zone-pill.z5 { background: rgba(234,179,8,0.10);  color: #CA8A04; border-color: rgba(234,179,8,0.30); }
[data-theme="light"] .zone-pill.z6 { background: rgba(217,70,239,0.10); color: #9333EA; border-color: rgba(217,70,239,0.30); }
[data-theme="light"] .zone-arrow { color: var(--text-dim); }

/* ── Validatie items ─────────────────────────────── */
[data-theme="light"] .validation-item.ok        { background: rgba(34,197,94,0.08);  color: #15803D; }
[data-theme="light"] .validation-item.fout      { background: rgba(239,68,68,0.08);  color: #B91C1C; }
[data-theme="light"] .validation-item.waarschuwing { background: rgba(245,158,11,0.10); color: #B45309; }
[data-theme="light"] .validation-item.suggestie { background: rgba(59,130,246,0.08); color: #1D4ED8; }

/* ── Info boxes ──────────────────────────────────── */
[data-theme="light"] .info-box        { background: rgba(59,130,246,0.07);  color: #1D4ED8; }
[data-theme="light"] .info-box.warning { background: rgba(245,158,11,0.08); color: #B45309; }
[data-theme="light"] .info-box.success { background: rgba(34,197,94,0.08);  color: #15803D; }
[data-theme="light"] .info-box.error   { background: rgba(239,68,68,0.08);  color: #B91C1C; }

/* ── Scrollbar ───────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #C8C8C8; }

/* ── Logo swap ───────────────────────────────────── */
[data-theme="light"] .logo-img {
  content: url('../img/logo-light.png');
}

/* ── Header left (logo + home) ───────────────────── */
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Home knop ───────────────────────────────────── */
.home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--trans);
  flex-shrink: 0;
  margin-left: 8px;
  padding: 0;
}
.home-btn svg { display: block; }
.home-btn:hover { background: var(--bg-card-2); border-color: var(--border-2); color: var(--text); }

/* ── Website terug knop ──────────────────────────── */
.website-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--trans);
  flex-shrink: 0;
  text-decoration: none;
}
.website-btn:hover { background: var(--bg-card-2); border-color: var(--red); color: var(--red); }

/* ── Theme toggle knop ───────────────────────────── */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  cursor: pointer;
  transition: all var(--trans);
  flex-shrink: 0;
  line-height: 1;
}
.theme-toggle-btn:hover {
  background: var(--bg-card-2);
  border-color: var(--border-2);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════
   KIT DETAIL PAGINA (.kd-*)
   ═══════════════════════════════════════════════════ */

.kd-wrap {
  padding-top: 32px;
  padding-bottom: 80px;
}

/* Terug-knop */
.kd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 24px;
  transition: color var(--trans);
}
.kd-back-btn:hover { color: var(--text); }

/* Hero header */
.kd-hero {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.kd-hero-media {
  width: 560px;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kd-hero-thumbs { padding: 0; }
.kd-hero-img-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card-2);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-hero-img-wrap.kd-no-img::after {
  content: '📷';
  font-size: 40px;
  opacity: 0.2;
}
.kd-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.kd-tier-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}
.kd-hero-body {
  flex: 1;
  min-width: 280px;
}
.kd-sku {
  font-family: monospace;
  font-size: 12px;
  color: var(--red);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.kd-naam {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.2;
}
.kd-omschrijving {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.kd-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kd-feature {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
}

/* Secties */
.kd-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.kd-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 16px;
}

/* Inbegrepen verlichting (stuklijst) */
.kd-inhoud-count {
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
}
.kd-inhoud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.kd-inhoud-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color var(--trans);
}
.kd-inhoud-item:hover { border-color: var(--red); }
.kd-inhoud-img-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-inhoud-img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.kd-inhoud-img-wrap.kd-inhoud-no-img .kd-inhoud-img { display: none; }
.kd-inhoud-no-img {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--bg-card-2), var(--bg-card-2) 6px, var(--border) 6px, var(--border) 7px);
}
.kd-inhoud-qty {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}
.kd-inhoud-body { flex: 1; min-width: 0; }
.kd-inhoud-naam {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.3;
}
.kd-inhoud-sku {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-dim);
}
[data-theme="light"] .kd-inhoud-item { background: #F7F7F7; border-color: #E4E4E4; }
[data-theme="light"] .kd-inhoud-naam { color: #1A1A1A; }
[data-theme="light"] .kd-inhoud-sku { color: #999; }

/* Achterlichten compatibiliteit */
.kd-achterlicht-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}
.kd-achterlicht-icon {
  color: var(--red);
  font-size: 12px;
}
.kd-achterlicht-info {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.kd-voorbeelden {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kd-voorbeeld {
  font-size: 11px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 10px;
  color: var(--text-muted);
  font-family: monospace;
}

/* Addons */
.kd-addons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kd-addon {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.kd-addon-required {
  border-left: 3px solid var(--red);
}
.kd-addon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.kd-addon-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.kd-addon-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--red);
  background: rgba(var(--red-rgb),0.12);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.kd-addon-badge.kd-addon-opt {
  color: var(--text-muted);
  background: var(--bg-card);
}
.kd-addon-tekst {
  font-size: 12px;
  color: var(--text-muted);
}

/* Download CTA card */
.kd-cta-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.kd-cta-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kd-cta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.kd-cta-sets {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kd-cta-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  min-width: 28px;
  text-align: center;
}
.kd-cta-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.kd-cta-hint {
  font-size: 11px;
  color: var(--text-dim);
}

/* Responsive */
@media (max-width: 600px) {
  .kd-hero { padding: 18px; gap: 16px; }
  .kd-hero-media { width: 100%; }
  .kd-hero-img-wrap { width: 100%; aspect-ratio: 16/9; }
  .kd-naam { font-size: 20px; }
  .kd-section { padding: 16px; }
  .kd-cta-card { flex-direction: column; align-items: stretch; }
  .kd-cta-right { align-items: stretch; }
  .kd-cta-right .btn { width: 100%; justify-content: center; }
}

/* ── Light mode overrides — kit detail ──────────────── */
[data-theme="light"] .kd-hero { background: #FFFFFF; border-color: #E0E0E0; }
[data-theme="light"] .kd-hero-img-wrap { background: #F0F0F0; }
[data-theme="light"] .kd-feature { background: #F0F0F0; border-color: #D8D8D8; color: #666; }
[data-theme="light"] .kd-section { background: #FFFFFF; border-color: #E0E0E0; }
[data-theme="light"] .kd-achterlicht-info { color: #555; }
[data-theme="light"] .kd-voorbeeld { background: #F0F0F0; border-color: #D8D8D8; color: #555; }
[data-theme="light"] .kd-addon { background: #F7F7F7; border-color: #E4E4E4; }
[data-theme="light"] .kd-addon-tekst { color: #666; }
[data-theme="light"] .kd-addon-badge.kd-addon-opt { background: #EFEFEF; color: #888; }
[data-theme="light"] .kd-cta-card { background: #FFFFFF; border-color: #E0E0E0; }
[data-theme="light"] .kd-cta-hint { color: #AAAAAA; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBIELE OPTIMALISATIE v2 — touch, 3D-framing & responsive verfijning
   Alles staat binnen media queries of touch/:active/:focus-visible-paden,
   zodat desktop-layout, whitelabel, thema-toggle en CSV-export intact blijven.
   Geordend breed → smal (narrowste query wint bij gelijke specificiteit).
   ═══════════════════════════════════════════════════════════════════════ */

/* 3D-canvas: verticaal pagina-scrollen blijft werken (pan-y); één-vinger
   horizontaal draait, twee-vinger pinch zoomt. Voorkomt vastlopende scroll. */
.trailer-3d-canvas {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  display: block;
  width: 100%;        /* robuust passend op elk pixel-ratio (anders DPR-afhankelijk) */
  height: auto;
}

/* Tap-feedback — touch kent geen :hover. Zelfde rood als hover, beide thema's. */
.product-card:active,
.serie-card:active,
.kit-list-item:active,
.brochure-card:active,
.subtype-btn:active { border-color: var(--red); box-shadow: var(--shadow-sm); }
.filter-btn:active { border-color: var(--red); color: var(--text); }
.home-btn, .website-btn, .theme-toggle-btn,
.sets-btn, .qty-btn, .hdr-btn, .btn,
.product-card, .serie-card, .kit-list-item, .filter-btn {
  -webkit-tap-highlight-color: rgba(var(--red-rgb),0.22);
}
@media (hover: none) and (pointer: coarse) {
  .product-card:focus-visible,
  .serie-card:focus-visible,
  .kit-list-item:focus-visible { outline: 2px solid rgba(var(--red-rgb),0.45); outline-offset: 1px; }
}

/* iOS Safari: background-attachment:fixed geeft scroll-jank op mobiel */
@media (max-width: 768px) {
  body,
  [data-theme="light"] body { background-attachment: scroll; }
}

@media (max-width: 640px) {
  .home-btn { display: none; }            /* logo dient al als home-knop */
  /* Stap-nav: alle knoppen volledige breedte (ook de rechter knoppen-groep) */
  .step-nav { align-items: stretch; }
  .step-nav > div { width: 100%; display: flex; flex-direction: column; gap: 10px; }
  .hero-btn-primary,
  .hero-btn-ghost { padding: 16px 18px; min-height: 56px; }
  .hero-btn-icon { width: 34px; height: 34px; }
  #toast {
    white-space: normal;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    font-size: 12px;
    bottom: 20px;
    line-height: 1.35;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* ── Header: compacter + grotere touch-targets ── */
  .header-inner { padding: 0 12px; gap: 8px; }
  .header-left { gap: 4px; }
  .home-btn,
  .website-btn { display: none; }         /* logo = home; website-link weinig nut in iframe */
  .header-right { gap: 6px; }
  .theme-toggle-btn { width: 42px; height: 42px; }
  .hdr-btn { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; }
  .hdr-btn .hdr-txt { display: none; }    /* actieknoppen icon-only op mobiel */
  .hdr-btn .hdr-ico { font-size: 16px; line-height: 1; }
  .header-actions { gap: 6px; }
  .header-sets { padding: 4px 8px; gap: 6px; }
  .sets-label { font-size: 10px; white-space: nowrap; }
  .sets-btn { width: 32px; height: 32px; font-size: 16px; }
  .sets-val { font-size: 14px; min-width: 18px; }

  /* ── Progress bar ── */
  .progress-inner { padding: 8px 12px; }
  .step-dot { min-width: 20px; }
  .step-dot-circle { width: 22px; height: 22px; font-size: 9px; }
  .step-dot-label { font-size: 7px; line-height: 1; }
  .progress-connector { min-width: 3px; max-width: 22px; }

  /* ── 3D-viewer + kabelschema-paneel ── */
  .diagram-panel { max-height: 220px; padding: 10px 12px 12px; }
  .schematic-callout { font-size: 11px; padding: 0 10px; gap: 6px; }
  .schematic-callout-dot { width: 7px; height: 7px; }

  /* ── Product grid + kaarten ── */
  .products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .product-img { aspect-ratio: 1; }
  .product-info { padding: 12px 12px 10px; gap: 5px; }
  .product-sku { font-size: 10px; }
  .product-naam { font-size: 12px; }
  .product-desc { font-size: 11px; }
  .qty-control { gap: 10px; padding-top: 10px; margin-top: 8px; }
  .qty-btn { width: 40px; height: 40px; font-size: 20px; }
  .qty-val { font-size: 16px; }

  /* ── Selectors / filters / koppen ── */
  .subtype-selector { gap: 12px; }
  .subtype-btn { padding: 16px 14px; }
  .subtype-btn .icon { font-size: 26px; margin-bottom: 8px; }
  .subtype-btn h4 { font-size: 14px; }
  .subtype-btn p { font-size: 11px; }
  .filter-btn-group { gap: 6px; }
  .filter-btn { padding: 8px 12px; font-size: 12px; }
  .step-header { margin-bottom: 18px; }
  .step-header p { font-size: 13px; }
  .section-title { margin: 22px 0 12px; }

  /* ── Stap-navigatie: volledige breedte, ruime targets ── */
  .step-nav { gap: 8px; margin-top: 28px; padding-top: 16px; }
  .step-nav .btn { min-height: 48px; padding: 14px 16px; font-size: 15px; }

  /* ── Startscherm: brochure / zone-pills / experience ── */
  .brochure-row { grid-template-columns: 1fr; gap: 10px; }
  .brochure-card { gap: 14px; padding: 16px; }
  .brochure-thumb { width: 92px; }
  .zone-pills { gap: 4px; }
  .zone-pill { padding: 4px 10px; font-size: 11px; }
  .zone-arrow { font-size: 12px; }
  .experience-header { padding: 18px; }

  /* ── Kits ── */
  .kit-list-img-wrap { height: 150px; }
  .kit-list-img { min-height: 150px; }
  .kit-list-body { padding: 16px; gap: 6px; }
  .kit-list-header h3 { font-size: 16px; }
  .kit-list-body p { font-size: 13px; }

  /* ── Modals ── */
  .modal-overlay { padding: 12px; }
  .modal-panel-sm { max-width: 100%; }
  .modal-close { width: 44px; height: 44px; }
  .modal-header-content h2 { font-size: 17px; }
  .modal-header-content p { font-size: 12px; }
  .modal-field input,
  .modal-field textarea,
  .modal-input { font-size: 16px; min-height: 44px; }   /* 16px = geen iOS focus-zoom */
  .expert-modal-inner { flex-direction: column; }
  .modal-panel-expert { max-width: 100%; }

  /* ── Download / CSV-import ── */
  .download-area { padding: 20px 16px; }
  .download-area h3 { font-size: 18px; }
  .download-area p { font-size: 13px; }
  .csv-drop-zone { padding: 20px 16px; }
  .csv-drop-icon { font-size: 32px; }
  .csv-drop-title { font-size: 13px; }

  /* ── Diversen ── */
  .back-to-top { width: 44px; height: 44px; right: 14px; bottom: 78px; }
  .serie-card { width: 110px; }
}

@media (max-width: 360px) {
  html { font-size: 14px; }
  #app { padding: 0 10px 60px; }

  /* Header nog compacter */
  .header-inner { padding: 0 10px; gap: 6px; }
  .header-right { gap: 4px; }
  .logo-img { --logo-h: 30px; }
  .theme-toggle-btn { width: 36px; height: 36px; }
  .hdr-btn { width: 36px; height: 36px; }
  .hdr-btn .hdr-ico { font-size: 15px; }
  .header-actions { gap: 4px; }
  .header-sets { padding: 4px 6px; gap: 4px; }
  .sets-label { display: none; }          /* harde ruimte-eis op 360px */
  .sets-btn { width: 28px; height: 28px; font-size: 14px; }
  .sets-val { font-size: 13px; }

  /* Progress: alleen bolletjes */
  .step-dot-label { display: none; }
  .step-dot-circle { width: 20px; height: 20px; border-width: 1.5px; }
  .progress-connector { max-width: 16px; }

  /* Hero */
  .hero { padding: 28px 16px 24px; min-height: 300px; }
  .hero h1 { font-size: clamp(20px, 7vw, 28px); }
  .hero p { font-size: 14px; margin-bottom: 28px; }

  /* Producten: terug naar 1 kolom */
  .products-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Kits / video */
  .kit-list-img-wrap { height: 130px; }
  .kit-list-img { min-height: 130px; }
  .kit-list-body { padding: 14px; }
  .video-section-label { font-size: 10px; }

  /* Diagram-paneel nog iets compacter */
  .diagram-panel { max-height: 200px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBIELE OPTIMALISATIE v3 — responsive audit fixes (2026-06)
   Gegroepeerd per breakpoint; staat bewust achteraan zodat deze
   regels eerdere, conflicterende queries overschrijven.
   ═══════════════════════════════════════════════════════════════ */

/* GLB 3D-viewer mag verticaal pagina-scrollen niet kapen op touch */
.glb-canvas { touch-action: pan-y; }

/* .filter-row (werklampen modus-selector) had geen styling */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* qty-control hergebruikt in horizontale prik-qty-bar: geen losse bovenrand/offset */
.prik-qty-bar .qty-control { border-top: none; padding-top: 0; margin-top: 0; }

/* Klikbare kabelschema-blokken: positioneringscontext voor de touch-hint (::after) */
.sch-block.sch-clickable { position: relative; }

/* Diverse cosmetica (niet breakpoint-gebonden) */
.summary-img { margin-right: 0; }
.kd-inhoud-naam, .kd-inhoud-sku { overflow-wrap: anywhere; }
.csv-preview-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Extra tap-highlight targets */
.modal-close, .sch-pdf-btn, .step-dot.clickable, .sch-block.sch-clickable,
.hdr-btn-reset { -webkit-tap-highlight-color: rgba(var(--red-rgb),0.22); }

/* ── Layout-omklap: #app moet de volle breedte spannen (≤900) ── */
@media (max-width: 900px) {
  .config-outer { align-items: stretch; }
  #app { width: 100%; max-width: 100%; flex: 1 1 auto; min-width: 0; }
}

/* ── Telefoon t/m grote telefoon/landscape (≤768): touch-targets & iOS focus-zoom ── */
@media (max-width: 768px) {
  /* font-size 16px voorkomt iOS-zoom bij focus; min-height 44px = touch-richtlijn */
  .modal-field input, .modal-field textarea, .modal-input, .sc-rename-input,
  #custom-kabel-input, #pdf-naam-input { font-size: 16px; min-height: 44px; }
  .modal-close { width: 44px; height: 44px; font-size: 20px; }
  .qty-btn { width: 40px; height: 40px; font-size: 20px; }
  .qty-val { font-size: 16px; }
  /* .sets-btn bewust NIET vergroot: de header is ruimte-kritisch en houdt de
     compacte 32px (≤480) / 28px (≤360) maten aan; sets is een secundaire control. */
  .filter-btn { min-height: 40px; }
  .saved-config-actions .btn-sm { min-width: 40px; min-height: 40px; padding: 8px 10px !important; }
  /* PDF-knop kabelschema groter aanraakbaar (was ~20px hoog) */
  .sch-pdf-btn { padding: 9px 14px; font-size: 11px; min-height: 40px; line-height: 1; }
  .sch-header { padding-bottom: 10px; }
  /* Progress-dots ruimere hit-area zonder de cirkel te vergroten */
  .step-dot { min-height: 40px; justify-content: center; padding: 6px 2px; }
  /* Op telefoon tonen we de per-stap 3D (visuele "waar ben ik") en verbergen we de
     redundante Kabelschema-sidebar — anders staan er twee trailer/onderdelen-panelen
     boven elke stap en moet je te ver scrollen. De Kabelschema-lijst + PDF blijft
     beschikbaar op het overzicht (laatste stap) en op desktop. !important is nodig
     omdat showScreen() display:block inline zet. */
  #diagram-panel.diagram-panel { display: none !important; }
  /* Per-stap 3D: compactere onder-marge op telefoon (desktop = 20px) */
  #app .trailer-3d-wrap { margin-bottom: 14px; }
  /* Zone-blokken compacter op telefoon: kleinere afbeelding + strakkere padding,
     anders nemen ze (desktop-sidebar-proporties) te veel verticale ruimte bovenaan elke stap. */
  .sch-header { margin-bottom: 10px; padding-bottom: 8px; }
  .sch-img, .sch-img-placeholder { width: 44px; height: 44px; }
  .sch-img-wrap { padding: 6px; }
  .sch-info { padding: 8px 8px; }
  .sch-zone-pill { min-width: 22px; font-size: 10px; }
  .sch-label { font-size: 9px; margin-bottom: 2px; }
}

/* ── ≤640: 7-8px progress-labels weg; alleen de actieve stap benoemen ──
   :not(.active) is nodig om de basisregel `.step-dot.done .step-dot-label{display:block}`
   (gelijke specificiteit) via bronvolgorde te verslaan — anders lekken done-labels. */
@media (max-width: 640px) {
  .step-dot:not(.active) .step-dot-label { display: none; }
  .step-dot.active .step-dot-label { display: block; font-size: 11px; }

  /* Productkaarten als HORIZONTALE lijstitems op telefoon: kleine afbeelding
     links, tekst rechts. Voorkomt de enorme felwitte afbeeldingsboxen die de
     donkere UI domineerden (de kern van "niet in verhouding op mobiel"). */
  .products-grid { grid-template-columns: 1fr; gap: 10px; }
  .product-card { flex-direction: row; align-items: stretch; flex-wrap: wrap; }
  .product-img {
    order: 1;
    width: 112px; min-width: 112px; flex-shrink: 0;
    aspect-ratio: auto; height: auto;
    border-bottom: none; border-right: 1px solid var(--border);
  }
  .product-img img { padding: 8px; }
  .product-info { order: 2; padding: 11px 13px; justify-content: center; flex: 1; min-width: 0; }
  /* Foto-thumbnails: op telefoon één nette, horizontaal scrolbare strip ONDER de
     afbeelding+tekst — niet als rommelig blokje tussen afbeelding en tekst in
     (de kaart is hier een horizontale rij). */
  .product-thumbs {
    order: 3; flex-basis: 100%; width: 100%; min-width: 0; max-width: 100%;
    flex-wrap: nowrap; overflow-x: auto;
    padding: 8px 12px; border-top: 1px solid var(--border);
    scrollbar-width: none;
  }
  .product-thumbs::-webkit-scrollbar { display: none; }
  .product-thumb { flex: 0 0 40px; width: 40px; height: 40px; }
  .product-card.selected::after { top: 6px; right: 6px; width: 20px; height: 20px; font-size: 11px; line-height: 20px; }
  /* Kit-detail hero: kolom-stack i.p.v. uitgerekte 16/9-crop */
  .kd-hero { flex-direction: column; }
  .kd-hero-body { min-width: 0; }
  .kd-hero-media { width: 100%; }
  .kd-hero-img-wrap { width: 100%; aspect-ratio: 3 / 2; max-height: 220px; }
  .kd-hero-img { object-fit: contain; }
  /* Kit-detail CTA-kaart op dezelfde breedte omklappen als de rest */
  .kd-cta-card { flex-direction: column; align-items: stretch; }
  .kd-cta-right .btn, .kd-cta-card .btn-lg { width: 100%; }
}

/* ── Zone-pills: losse pijlen (orphans) verbergen (≤560) ── */
@media (max-width: 560px) {
  .zone-arrow { display: none; }
}

/* ── ≤480: download-CTA volle breedte, summary-badge & schema-orphans ── */
@media (max-width: 480px) {
  /* Config-header compacter zodat logo + 4 icoonknoppen + sets-stepper binnen
     ~361px passen (iPhone 375/390, de meeste Android 360-430). Anders overflowt
     de header en blaast de layout-viewport op. */
  .header-inner { padding: 0 8px; gap: 6px; }
  .header-left { gap: 4px; }
  .logo-img { --logo-h: 26px; }
  .header-right { gap: 5px; }
  .theme-toggle-btn { width: 34px; height: 34px; }
  .hdr-btn { width: 32px; height: 32px; }
  .header-actions { gap: 4px; }
  .header-sets { padding: 3px 5px; gap: 3px; }
  .sets-label { display: none; }   /* "Sets"-tekst weg: ruimte-eis op 361-480px */
  .sets-btn { width: 28px; height: 28px; }
  .sets-val { font-size: 13px; min-width: 14px; }

  .download-area .btn-lg { width: 100%; }
  .summary-name span { white-space: nowrap; display: inline-block; margin: 2px 0 0 6px; }
  .sch-rear-item { flex: 0 1 80px; }
  .saved-config-item { flex-wrap: wrap; }
  .csv-preview-row { flex-wrap: wrap; }
  .csv-preview-sku { min-width: 0; }
}

/* ── Smalle telefoons (≤420): 1-koloms producten + brochure-card netjes ── */
@media (max-width: 420px) {
  .products-grid { grid-template-columns: 1fr; }
  .brochure-card { flex-wrap: wrap; }
  .brochure-thumb { width: 72px; }
  .brochure-badge { white-space: normal; flex-basis: 100%; justify-content: center; margin-top: 4px; }
  .brochure-info p { display: none; }
}

/* ── ≤360: header compacter zodat logo + acties + sets binnen 320px passen ── */
@media (max-width: 360px) {
  .header-inner { min-width: 0; padding: 0 5px; gap: 4px; }
  .header-right { min-width: 0; gap: 3px; }
  .header-actions { gap: 3px; }
  .logo-img { --logo-h: 24px; }
  .theme-toggle-btn { width: 30px; height: 30px; }
  .hdr-btn { width: 30px; height: 30px; }
  .header-sets { padding: 2px 4px; gap: 2px; }
  .sets-btn { width: 24px; height: 24px; }
  .sets-val { font-size: 12px; min-width: 12px; }
}

/* ── Touch-apparaten: affordances die normaal op hover leunen ── */
@media (hover: none) and (pointer: coarse) {
  .kit-list-cta { opacity: 1; transform: none; }
  .sch-block.sch-clickable:active { border-color: var(--red); box-shadow: 0 2px 14px rgba(0,0,0,0.55); }
  .modal-close:active, .sch-pdf-btn:active { border-color: var(--red); }
  /* Body-scroll-lock alleen op touch (voorkomt scroll-bleed; desktop-scrollbar
     verspringt dan niet). */
  body.modal-open { overflow: hidden; }
  /* Blijvende klik-hint op de schemablokken (touch kent geen hover) */
  .sch-block.sch-clickable::after {
    content: "\21AA"; position: absolute; top: 6px; right: 8px;
    font-size: 11px; color: var(--text-dim, #888); opacity: 0.55; pointer-events: none;
  }
}

/* ── Landscape / lage hoogte: minder sticky-chrome, compactere 3D ── */
@media (max-height: 480px) and (orientation: landscape) {
  .diagram-panel { max-height: 150px; }
  .step-dot-label { display: none; }
  #app .trailer-3d-wrap { display: none; }
  .glb-viewer-wrap { height: 200px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HAMBURGER-MENU + INKLAPBAAR KABELSCHEMA (iPad/tablet-optimalisatie)
   Desktop (>900): acties blijven inline (display:contents), geen hamburger,
   geen inklap-knop. ≤900: acties in dropdown achter ☰; kabelschema inklapbaar
   met chevron. Lost de header-overflow op die op iPad de viewport opblies.
   ═══════════════════════════════════════════════════════════════════════ */

/* Acties (Opnieuw/Opslaan/Mijn configs) staan ALTIJD achter een ☰-menu — ook op
   desktop. Houdt de header rustig ongeacht breedte of lengte van de klantnaam.
   De ≤900-blokken hieronder overschrijven dit met grotere touch-maten. */
.hdr-menu { display: flex; position: relative; align-items: center; }
.hdr-menu-btn { display: none; }
.hdr-menu.has-actions .hdr-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-muted); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.hdr-menu.has-actions .hdr-menu-btn:hover { border-color: var(--red); color: var(--red); }
.hdr-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: none; flex-direction: column; gap: 6px;
  min-width: 210px; padding: 8px; z-index: 60;
  background: var(--bg-card, #1a1a1a); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}
.hdr-menu.open .hdr-menu-panel { display: flex; }
.hdr-menu-panel .header-actions { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.hdr-menu-panel .hdr-btn {
  width: 100%; height: auto; min-height: 40px; padding: 9px 14px;
  justify-content: flex-start; gap: 10px; font-size: 13px;
}
.hdr-menu-panel .hdr-btn .hdr-txt { display: inline; }
.hdr-menu-panel .hdr-btn .hdr-ico { font-size: 16px; }
.sch-header-btns { display: flex; align-items: center; gap: 8px; }
.sch-collapse-btn { display: none; }   /* desktop: sidebar staat altijd open */

@media (max-width: 900px) {
  /* ── Hamburger-menu ── */
  .hdr-menu { display: flex; position: relative; align-items: center; }
  .hdr-menu-btn { display: none; }
  .hdr-menu.has-actions .hdr-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    background: var(--bg-input); border: 1px solid var(--border-2);
    border-radius: 8px; color: var(--text); cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .hdr-menu.has-actions .hdr-menu-btn:active { border-color: var(--red); color: var(--red); }
  .hdr-menu-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    display: none; flex-direction: column; gap: 6px;
    min-width: 200px; padding: 8px; z-index: 60;
    background: var(--bg-card, #1a1a1a); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,0.6);
  }
  .hdr-menu.open .hdr-menu-panel { display: flex; }
  .hdr-menu-panel .header-actions { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .hdr-menu-panel .hdr-btn {
    width: 100%; height: auto; min-height: 46px; padding: 11px 14px;
    justify-content: flex-start; gap: 12px; font-size: 14px;
  }
  .hdr-menu-panel .hdr-btn .hdr-txt { display: inline; }   /* menu-items mét tekst */
  .hdr-menu-panel .hdr-btn .hdr-ico { font-size: 17px; }

  /* ── Inklapbaar kabelschema ── */
  .sch-collapse-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; flex-shrink: 0;
    background: var(--bg-input); border: 1px solid var(--border-2);
    border-radius: 6px; color: var(--text-muted); cursor: pointer;
    transition: border-color .15s;
  }
  .sch-collapse-btn:active { border-color: var(--red); }
  .sch-collapse-btn svg { transition: transform .2s ease; }
  .sch-collapse-btn:not(.collapsed) svg { transform: rotate(180deg); }  /* uitgeklapt = pijl omhoog */
  .sch-title { cursor: pointer; }
  .diagram-panel.is-collapsed { max-height: 54px; overflow: hidden; padding-bottom: 0; }
}

/* ── Montagetekening op het overzicht — witte "papier-preview" (zoals de PDF) ── */
.summary-dwg { margin: 8px 0 24px; position: relative; }
.dwg-zoom-open {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--red, #E63329); color: #fff; border: none; border-radius: 8px;
  padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.dwg-zoom-open:hover { filter: brightness(1.08); }

/* Schermvullende vergroot-weergave van de montagetekening */
.dwg-zoom-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(18,18,18,0.94); display: flex; flex-direction: column;
}
.dwg-zoom-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #1c1c1c; color: #fff; flex-shrink: 0;
}
.dwg-zoom-title { font-size: 14px; font-weight: 600; }
.dwg-zoom-actions { display: flex; gap: 8px; }
.dwg-zoom-actions button {
  min-width: 40px; height: 36px; padding: 0 12px;
  background: #2f2f2f; color: #fff; border: 1px solid #444; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.dwg-zoom-actions button:hover { background: #3d3d3d; }
.dwg-zoom-actions button[data-z="close"] { background: var(--red, #E63329); border-color: transparent; font-size: 13px; }
.dwg-zoom-scroll { flex: 1; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
.dwg-zoom-canvas { min-width: 100%; min-height: 100%; display: flex; align-items: flex-start; justify-content: center; }
.dwg-zoom-canvas .dwg-svg { background: #fff; border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,0.5); max-width: none; height: auto; }
.summary-dwg .dwg {
  background: #fff; border: 1px solid #e3e3e3; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 4px 18px rgba(0,0,0,0.28);
}
.summary-dwg .dwg-title { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 12px; }
.summary-dwg .dwg-svg { display: block; width: 100%; max-width: 470px; height: auto; margin: 0 auto 14px; }
.summary-dwg .dwg-legend {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px;
}
.summary-dwg .dg-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #222; }
.summary-dwg .dg-n {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; color: #fff;
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.summary-dwg .dg-name { font-weight: 600; }
.summary-dwg .dg-sku { color: #888; font-family: monospace; font-size: 10px; margin-left: auto; padding-left: 8px; }
.summary-dwg .dwg-note { font-size: 10px; color: #999; margin-top: 10px; font-style: italic; }
/* Montagetekening binnen de kit-detailpagina — geen extra buitenmarge (kd-section regelt spacing) */
.kd-dwg { margin: 0; }

/* Vaste montagetekening (officiële kabelboom-afbeelding per kit) — witte kaart, klik om te vergroten */
.kd-montage-wrap {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  text-align: center;
}
.kd-montage-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: filter 0.15s ease;
}
.kd-montage-img:hover { filter: brightness(0.97); }
/* Afbeelding in de zoom-lightbox (openImageZoom) */
.dwg-zoom-img { display: block; max-width: none; background: #fff; }

/* ── Montage-uitleg op het overzicht — inklapbare stappenkaart (zelfde papier-stijl als de tekening) ── */
.summary-mu {
  margin: 0 0 24px;
  background: #fff; border: 1px solid #e3e3e3; border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28); overflow: hidden;
}
.mu-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px;
}
.mu-summary::-webkit-details-marker { display: none; }
.mu-summary-title { font-size: 14px; font-weight: 600; color: #111; }
.mu-summary-chevron { color: var(--red, #E63329); font-size: 14px; transition: transform .2s ease; }
.summary-mu[open] .mu-summary-chevron { transform: rotate(180deg); }
.mu-body { padding: 4px 18px 18px; }
.mu-phase { margin-bottom: 15px; }
.mu-phase:last-of-type { margin-bottom: 0; }
.mu-ph-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: #0f3a4a;
  text-transform: uppercase; letter-spacing: .4px;
  padding-left: 9px; border-left: 3px solid var(--red, #E63329); margin-bottom: 9px;
}
.mu-ph-ico { font-size: 13px; }
.mu-steps { margin: 0; padding-left: 30px; list-style: decimal; }
.mu-step { font-size: 13px; line-height: 1.55; color: #333; margin-bottom: 8px; padding-left: 4px; }
.mu-step::marker { color: var(--red, #E63329); font-weight: 700; }
.mu-code {
  display: inline-block; font-family: monospace; font-size: 11px; font-weight: 700;
  color: var(--red, #E63329); background: rgba(var(--red-rgb),0.08);
  border: 1px solid rgba(var(--red-rgb),0.22); border-radius: 4px;
  padding: 1px 6px; margin-right: 7px; vertical-align: 1px;
}
.mu-note { font-size: 11px; color: #999; margin-top: 12px; font-style: italic; }
@media (max-width: 480px) {
  .mu-summary { padding: 13px 14px; }
  .mu-body { padding: 4px 14px 15px; }
  .mu-steps { padding-left: 24px; }
  .mu-step { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════
   WHITELABEL — decoratieve achtergrond
   ═══════════════════════════════════════════════════
   De achtergrondillustratie (bg-tralert.svg) heeft TRALERT-rood ingebakken en
   trekt dus niet mee met de partnerkleur. In partnermodus verhuist hij naar een
   aparte laag achter de content, zodat we hem kunnen verdraaien naar de kleur
   van de partner (--brand-hue-rotate wordt gezet door js/whitelabel.js).

   Bewust alleen onder body.partner-mode: zonder ?partner= verandert er niets aan
   de normale TRALERT-weergave. */
body.partner-mode { background-image: none; }
body.partner-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('../img/bg-tralert.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: hue-rotate(var(--brand-hue-rotate, 0deg));
}
/* Lichte modus heeft twee lagen: de witte waas hoort bóven de illustratie te
   liggen, dus staan ze allebei in dezelfde ::before (eerste laag = bovenste).
   Wit is kleurloos, dus de hue-rotate raakt de waas niet. */
[data-theme="light"] body.partner-mode::before {
  background-image:
    radial-gradient(ellipse 70% 65% at 50% 40%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.60) 50%, transparent 75%),
    url('../img/bg-tralert-light.svg');
}