/* ================================================================
   style.css — AED-Fix.nl Hoofdstijlblad
   Mobile-first, volledig responsive
   Breakpoints: 480px | 640px | 768px | 1024px | 1280px
   ================================================================ */

/* ── CSS VARIABELEN ─────────────────────────────────────────── */
:root {
  --kleur-primair:    #1e3a5f;
  --kleur-donker:     #0f1f3d;
  --kleur-accent:     #c8202d;
  --kleur-accent-h:   #a81824;
  --kleur-licht:      #f4f6f9;
  --kleur-wit:        #ffffff;
  --kleur-tekst:      #1a1a2e;
  --kleur-grijs:      #6b7280;
  --kleur-grijs-l:    #e5e7eb;
  --kleur-border:     #d1d5db;
  --kleur-windows:    #0078d4;

  --radius-s:  6px;
  --radius-m:  10px;
  --radius-l:  16px;
  --radius-xl: 24px;

  --schaduw-s: 0 1px 4px rgba(0,0,0,0.08);
  --schaduw-m: 0 4px 16px rgba(0,0,0,0.10);
  --schaduw-l: 0 8px 32px rgba(0,0,0,0.13);

  --max-breedte: 1280px;
  --container-padding: 16px;

  --font-hoofd: 'Inter', sans-serif;

  --topbar-hoogte:  40px;
  --header-hoogte:  64px;
  --subnav-hoogte:  44px;
  --nav-totaal:     148px;
}

/* ── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { font-family: var(--font-hoofd); color: var(--kleur-tekst); background: var(--kleur-wit); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ── CONTAINER ──────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-breedte); margin: 0 auto; padding: 0 var(--container-padding); }

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar { background: var(--kleur-donker); height: var(--topbar-hoogte); display: flex; align-items: center; position: sticky; top: 0; z-index: 200; }
.topbar-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 11px; color: rgba(255,255,255,0.75); }
.topbar-inner span { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.topbar-inner span + span::before { content: '·'; margin-right: 8px; opacity: 0.4; }

/* ── HEADER ─────────────────────────────────────────────────── */
.header { background: var(--kleur-wit); border-bottom: 1px solid var(--kleur-grijs-l); position: sticky; top: var(--topbar-hoogte); z-index: 190; box-shadow: var(--schaduw-s); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-hoogte); gap: 12px; }
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-img { height: 36px; width: auto; }
.nav { display: none; align-items: center; gap: 4px; }
.nav a { font-size: 14px; font-weight: 600; color: var(--kleur-tekst); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-s); transition: background 0.15s, color 0.15s; white-space: nowrap; }
.nav a:hover, .nav a.actief { background: var(--kleur-licht); color: var(--kleur-accent); }
.winkelwagen-btn { display: flex; align-items: center; gap: 6px; background: var(--kleur-accent); color: var(--kleur-wit); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-m); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background 0.15s; position: relative; }
.winkelwagen-btn:hover { background: var(--kleur-accent-h); text-decoration: none; color: var(--kleur-wit); }
.wagen-badge { position: absolute; top: -6px; right: -6px; background: var(--kleur-donker); color: #fff; font-size: 10px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; border-radius: var(--radius-s); transition: background 0.15s; }
.nav-toggle:hover { background: var(--kleur-licht); }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--kleur-tekst); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobiel { display: none; position: fixed; top: calc(var(--topbar-hoogte) + var(--header-hoogte)); left: 0; right: 0; bottom: 0; background: var(--kleur-wit); z-index: 180; overflow-y: auto; padding: 16px; flex-direction: column; gap: 4px; border-top: 2px solid var(--kleur-accent); }
.nav-mobiel.open { display: flex; }
.nav-mobiel a { display: block; font-size: 16px; font-weight: 600; color: var(--kleur-tekst); text-decoration: none; padding: 14px 16px; border-radius: var(--radius-m); transition: background 0.15s; }
.nav-mobiel a:hover { background: var(--kleur-licht); color: var(--kleur-accent); }
.nav-mobiel .nav-mobiel-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kleur-grijs); padding: 16px 16px 6px; margin-top: 8px; border-top: 1px solid var(--kleur-grijs-l); }

/* ── SUBNAV ─────────────────────────────────────────────────── */
.subnav { background: var(--kleur-licht); border-bottom: 1px solid var(--kleur-grijs-l); position: sticky; top: calc(var(--topbar-hoogte) + var(--header-hoogte)); z-index: 170; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav-inner { display: flex; align-items: center; gap: 4px; height: var(--subnav-hoogte); white-space: nowrap; padding: 0 var(--container-padding); }
.subnav-inner a { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--kleur-grijs); text-decoration: none; padding: 5px 12px; border-radius: 20px; white-space: nowrap; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.subnav-inner a:hover { background: var(--kleur-grijs-l); color: var(--kleur-primair); }
.subnav-inner a.actief { background: var(--kleur-primair); color: var(--kleur-wit); }

/* ── HERO ───────────────────────────────────────────────────── */
.hero2-visual { flex-shrink: 0; width: 100%; }
.hero2 { background: linear-gradient(135deg, var(--kleur-donker) 0%, #1a3a6e 60%, var(--kleur-donker) 100%); position: relative; overflow: hidden; padding: 40px 0; }
.hero2::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(30,90,180,0.18) 0%, transparent 70%); pointer-events: none; }
.hero2-bg { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 61px); pointer-events: none; }
.hero2-inner { position: relative; display: flex; flex-direction: column; gap: 32px; }
.hero2-tekst { flex: 1; }
.hero2-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
.hero2-tekst h1 { font-size: clamp(26px, 5vw, 52px); font-weight: 900; color: var(--kleur-wit); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; }
.hero2-tekst h1 em { font-style: normal; color: #60a5fa; }
.hero2-tekst p { font-size: clamp(14px, 2vw, 17px); color: rgba(255,255,255,0.72); line-height: 1.65; max-width: 520px; margin-bottom: 24px; }
.hero2-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.h2-btn-primair { display: inline-flex; align-items: center; background: var(--kleur-accent); color: var(--kleur-wit); font-size: 15px; font-weight: 800; padding: 14px 28px; border-radius: var(--radius-m); text-decoration: none; transition: background 0.15s, transform 0.15s; white-space: nowrap; }
.h2-btn-primair:hover { background: var(--kleur-accent-h); transform: translateY(-1px); text-decoration: none; color: #fff; }
.h2-btn-sec { display: inline-flex; align-items: center; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: var(--kleur-wit); font-size: 14px; font-weight: 700; padding: 14px 22px; border-radius: var(--radius-m); text-decoration: none; transition: background 0.15s; white-space: nowrap; }
.h2-btn-sec:hover { background: rgba(255,255,255,0.18); text-decoration: none; color: #fff; }
.hero2-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: rgba(255,255,255,0.65); }
.hero2-trust span { display: flex; align-items: center; gap: 5px; }
.hero2-kaart-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: #fff; padding: 3px 10px; border-radius: 20px; margin-bottom: 10px; }
.hero2-kaart-naam { font-size: clamp(16px, 2.5vw, 22px); font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.25; transition: color 0.15s; }
.hero2-kaart-specs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.hero2-kaart-specs div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.7); }
.hero2-kaart-specs span { min-width: 70px; }
.hero2-kaart-specs strong { color: #fff; font-weight: 700; }
.hero2-kaart-prijs { font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.hero2-kaart-prijs strong { display: block; font-size: clamp(26px, 4vw, 38px); font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }

/* ── USP STRIP ──────────────────────────────────────────────── */
.usp-strip { background: var(--kleur-wit); border-bottom: 1px solid var(--kleur-grijs-l); padding: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; }
.usp-strip::-webkit-scrollbar { display: none; }
.usp-strip-inner { display: flex; align-items: stretch; min-height: 64px; flex-wrap: nowrap; min-width: max-content; }
.usp-s-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; flex-shrink: 0; white-space: nowrap; }
.usp-s-item > div { display: flex; flex-direction: column; line-height: 1.3; }
.usp-s-item strong { font-size: 13px; font-weight: 700; color: var(--kleur-tekst); white-space: nowrap; }
.usp-s-item span { font-size: 11px; color: var(--kleur-grijs); white-space: nowrap; }
.usp-s-icon { font-size: 20px; flex-shrink: 0; }
.usp-strip-divider { width: 1px; background: var(--kleur-grijs-l); align-self: stretch; flex-shrink: 0; }

/* ── USP BALK ───────────────────────────────────────────────── */
.usp-balk { background: var(--kleur-primair); padding: 28px 0; }
.usp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.usp-item { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.9); }
.usp-item > span { font-size: 24px; flex-shrink: 0; }
.usp-item > div { display: flex; flex-direction: column; gap: 2px; }
.usp-item strong { font-size: 13px; font-weight: 700; color: #fff; }
.usp-item span:last-child { font-size: 12px; color: rgba(255,255,255,0.65); }

/* ── SECTIE ALGEMEEN ────────────────────────────────────────── */
.sectie-kop { text-align: center; margin-bottom: 32px; }
.sectie-kop h2 { font-size: clamp(22px, 4vw, 34px); font-weight: 800; color: var(--kleur-tekst); letter-spacing: -0.02em; margin-bottom: 8px; }
.sectie-kop p { font-size: 15px; color: var(--kleur-grijs); max-width: 520px; margin: 0 auto; }
.sectie-kop-flex { text-align: left; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.sectie-alle-link { font-size: 13px; font-weight: 700; color: var(--kleur-accent); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.sectie-alle-link:hover { text-decoration: underline; }

/* ── GRADE SECTIE ───────────────────────────────────────────── */
.grade-sectie { background: var(--kleur-licht); padding: 48px 0; }
.grade-s-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.grade-s-item { display: flex; align-items: center; gap: 20px; background: var(--kleur-wit); border-radius: var(--radius-l); padding: 20px 24px; border: 2px solid var(--kleur-grijs-l); transition: border-color 0.2s, box-shadow 0.2s; }
.grade-s-item:hover { border-color: var(--kleur-primair); box-shadow: var(--schaduw-m); }
.grade-s-letter { font-size: 36px; font-weight: 900; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: -0.03em; }
.grade-s-aplus .grade-s-letter { background: #f3e8ff; color: #7c3aed; }
.grade-s-a     .grade-s-letter { background: #dcfce7; color: #16a34a; }
.grade-s-b     .grade-s-letter { background: #dbeafe; color: #2563eb; }
.grade-s-info strong { font-size: 15px; font-weight: 700; color: var(--kleur-tekst); display: block; margin-bottom: 4px; }
.grade-s-info p { font-size: 13px; color: var(--kleur-grijs); line-height: 1.5; margin: 0; }

/* ── PRODUCTEN SECTIE ───────────────────────────────────────── */
.producten-sectie { padding: 48px 0; background: var(--kleur-wit); }
.pk-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.leeg-melding { text-align: center; padding: 48px 16px; color: var(--kleur-grijs); font-size: 15px; }

/* ── PRODUCT KAART ──────────────────────────────────────────── */
.pk { background: #fff; border-radius: 14px; border: 1px solid #e8eaed; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; }
.pk:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.10); transform: translateY(-3px); }
.pk-foto-container { position: relative; background: #f8f9fa; border-bottom: 1px solid #f0f1f3; overflow: hidden; height: 200px; border-radius: 0; flex-shrink: 0; }
.pk-foto-link { display: block; width: 100%; height: 100%; text-decoration: none; }
.pk-foto-link img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 16px; transition: transform 0.2s; display: block; }
.pk:hover .pk-foto-link img { transform: scale(1.05); }
.pk-badge-voorraad, .pk-badge-laag { position: absolute; z-index: 2; left: 10px; }
.pk-badge-voorraad { top: 10px; display: inline-block; background: #16a34a; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.6; }
.pk-badge-laag { top: 36px; display: inline-block; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; line-height: 1.6; }
.pk-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 9px; }
.pk-grade-rij { display: flex; align-items: center; gap: 7px; }
.pk-grade-badge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.pk-grade-a { background: #dcfce7; color: #16a34a; }
.pk-grade-b { background: #dbeafe; color: #2563eb; }
.pk-grade-c { background: #f3f4f6; color: #6b7280; }
.pk-grade-omschr { font-size: 11px; color: #999; font-weight: 500; }
.pk-naam { font-size: 15px; font-weight: 700; color: #0f1923; text-decoration: none; line-height: 1.3; display: block; }
.pk-naam:hover { color: #c0392b; }
.pk-versie { font-size: 12px; font-weight: 500; color: #aaa; }
.pk-specs { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pk-specs li { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: #444; line-height: 1.4; }
.pk-specs li svg { flex-shrink: 0; margin-top: 1px; }
.pk-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #f0f1f3; margin-top: 4px; }
.pk-prijs-blok { display: flex; flex-direction: column; }
.pk-prijs { font-size: 21px; font-weight: 900; color: #8b0000; letter-spacing: -0.5px; line-height: 1; }
.pk-excl { font-size: 11px; color: #bbb; margin-top: 2px; }
.pk-btn { display: inline-flex; align-items: center; justify-content: center; background: #8b0000; color: #fff; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: background 0.15s; flex-shrink: 0; }
.pk-btn:hover { background: #c0392b; }

/* ── WAAROM SECTIE ──────────────────────────────────────────── */
.waarom-sectie { background: var(--kleur-licht); padding: 48px 0; }
.waarom-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.waarom-item { background: var(--kleur-wit); border-radius: var(--radius-l); padding: 24px; border: 1px solid var(--kleur-grijs-l); transition: box-shadow 0.2s, transform 0.2s; }
.waarom-item:hover { box-shadow: var(--schaduw-m); transform: translateY(-2px); }
.waarom-icon { font-size: 28px; margin-bottom: 12px; line-height: 1; }
.waarom-item h3 { font-size: 16px; font-weight: 700; color: var(--kleur-tekst); margin-bottom: 8px; letter-spacing: -0.01em; }
.waarom-item p { font-size: 13px; color: var(--kleur-grijs); line-height: 1.65; margin: 0; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer { background: var(--kleur-donker); color: rgba(255,255,255,0.8); }
.footer-top-border { height: 3px; background: linear-gradient(90deg, var(--kleur-accent) 0%, #1e6fc5 50%, var(--kleur-accent) 100%); }
.footer-inner { padding: 40px 0 0; }
.footer-top { display: flex; flex-direction: column; gap: 36px; padding-bottom: 36px; }
.footer-logo-link { text-decoration: none; }
.footer-logo { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.03em; }
.footer-logo-nl { color: #60a5fa; }
.footer-logo-lijn { height: 2px; width: 40px; background: var(--kleur-accent); margin: 10px 0 14px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 20px; max-width: 340px; }
.footer-keurmerken { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.keurmerk-item { display: flex; align-items: center; gap: 10px; }
.keurmerk-icon-wrap { font-size: 18px; width: 32px; height: 32px; background: rgba(255,255,255,0.06); border-radius: var(--radius-s); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.keurmerk-tekst strong { display: block; font-size: 12px; font-weight: 700; color: #fff; line-height: 1.3; }
.keurmerk-tekst span { font-size: 11px; color: rgba(255,255,255,0.5); }
.footer-badges-sectie { display: flex; flex-direction: column; gap: 14px; }
.footer-badge-groep { display: flex; flex-direction: column; gap: 8px; }
.footer-label-klein { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.footer-logo-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo-badge span { font-size: 9px; color: rgba(255,255,255,0.4); text-align: center; }
.footer-nav-midden { display: flex; flex-direction: column; gap: 28px; }
.footer-nav-col h4, .footer-nav-rechts h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 12px; }
.footer-nav-col ul, .footer-nav-rechts ul { display: flex; flex-direction: column; gap: 8px; }
.footer-nav-col ul li a, .footer-nav-rechts ul li a { font-size: 13px; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.15s; }
.footer-nav-col ul li a:hover, .footer-nav-rechts ul li a:hover { color: #fff; }
.footer-nav-rechts ul { margin-bottom: 20px; }
.footer-openingstijden { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.footer-openingstijden strong { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
.footer-openingstijden span { font-size: 13px; color: rgba(255,255,255,0.75); }
.footer-contact-snel { display: flex; flex-direction: column; gap: 6px; }
.footer-contact-snel a { font-size: 13px; color: #60a5fa; text-decoration: none; transition: color 0.15s; }
.footer-contact-snel a:hover { color: #93c5fd; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; font-size: 12px; color: rgba(255,255,255,0.35); }
.footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ── SCROLL TOP ─────────────────────────────────────────────── */
.scroll-top { position: fixed; bottom: 24px; right: 20px; width: 44px; height: 44px; background: var(--kleur-primair); color: #fff; border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: var(--schaduw-m); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 999; cursor: pointer; }
.scroll-top.zichtbaar { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover { background: var(--kleur-accent); }

/* ── HERO SLIDER ────────────────────────────────────────────── */
.hero-slider { position: relative; }
.hero-slide { display: none; cursor: pointer; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-l); padding: 24px; backdrop-filter: blur(4px); }
.hero-slide.actief { display: block; }
.hero-slide:hover .hero2-kaart-naam { color: #60a5fa; }
.hero-kaart-da-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--kleur-accent); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 4px; margin-bottom: 10px; }
.hero-slide-btn { display: inline-block; margin-top: 14px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: var(--radius-s); text-decoration: none; transition: background 0.15s; }
.hero-slide-btn:hover { background: rgba(255,255,255,0.22); text-decoration: none; color: #fff; }
.hero-dots { display: flex; gap: 7px; margin-top: 18px; justify-content: center; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.hero-dot.actief { background: #fff; transform: scale(1.35); }

/* ── DAGAANBIEDING ──────────────────────────────────────────── */
.da-sectie { background: linear-gradient(135deg, #0f1f3d 0%, #1a3460 50%, #0f1f3d 100%); padding: 48px 0; position: relative; overflow: hidden; }
.da-sectie::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 80px); pointer-events: none; }
.da-inner { position: relative; }
.da-badge-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.da-fire { font-size: 22px; }
.da-badge { background: var(--kleur-accent); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.15em; padding: 4px 12px; border-radius: 4px; }
.da-geldig { font-size: 13px; color: rgba(255,255,255,0.55); }
.da-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.da-foto-wrap { position: relative; }
.da-foto { width: 100%; max-height: 220px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)); }
.da-geen-foto { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 64px; opacity: 0.3; }
.da-grade-badge { position: absolute; top: 10px; left: 10px; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.05em; }
.da-naam { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.2; }
.da-specs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.da-specs div { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.8); }
.da-specs strong { color: #fff; }
.da-prijs-wrap { margin-bottom: 16px; }
.da-prijs { font-size: 34px; font-weight: 900; color: #fff; line-height: 1; }
.da-excl { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.da-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.da-btn-bekijk { padding: 12px 22px; border-radius: var(--radius-s); background: #fff; color: #1e3a5f; font-size: 14px; font-weight: 800; text-decoration: none; transition: background 0.15s; }
.da-btn-bekijk:hover { background: #e2e8f0; text-decoration: none; }
.da-btn-wagen { padding: 12px 22px; border-radius: var(--radius-s); background: var(--kleur-accent); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; transition: background 0.15s; }
.da-btn-wagen:hover { background: var(--kleur-accent-h); text-decoration: none; color: #fff; }
.da-voorraad-waarschuwing { margin-top: 12px; font-size: 12px; color: #fbbf24; font-weight: 600; }
.da-tg-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 12px; text-align: center; }
.da-tg-blokken { display: flex; align-items: center; justify-content: center; gap: 6px; }
.da-tg-blok { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 14px 10px; text-align: center; min-width: 52px; }
.da-tg-blok span { display: block; font-size: 28px; font-weight: 900; color: #fbbf24; font-family: monospace; line-height: 1; }
.da-tg-blok small { display: block; font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 4px; letter-spacing: 0.08em; }
.da-tg-sep { font-size: 26px; font-weight: 900; color: #fbbf24; margin-bottom: 16px; }
.da-tg-sub { font-size: 11px; color: rgba(255,255,255,0.35); text-align: center; margin-top: 12px; }
.da-admin-wrap, .da-admin-kop, .da-admin-sub, .da-melding, .da-tabel { display: none; }

/* ── BTN SYSTEEM ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-hoofd); font-size: 14px; font-weight: 700; padding: 11px 22px; border-radius: var(--radius-m); border: none; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.15s; white-space: nowrap; line-height: 1; }
.btn:hover { text-decoration: none; }
.btn-primair { background: var(--kleur-primair); color: #fff; }
.btn-primair:hover { background: #162e4d; color: #fff; }
.btn-rood { background: var(--kleur-accent); color: #fff; }
.btn-rood:hover { background: var(--kleur-accent-h); color: #fff; }
.btn-sec { background: var(--kleur-licht); color: var(--kleur-tekst); border: 1px solid var(--kleur-grijs-l); }
.btn-sec:hover { background: var(--kleur-grijs-l); }
.btn-lg { font-size: 15px; padding: 14px 28px; }
.btn-sm { font-size: 12px; padding: 8px 14px; }
.btn-vol { width: 100%; }

/* ── ALERT SYSTEEM ──────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--radius-m); font-size: 14px; line-height: 1.5; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert-fout { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.alert-succes { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
.alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.alert-waarschuwing { background: #fff8f0; border: 1px solid #fed7aa; color: #92400e; font-size: 12px; }

/* ── FORM ELEMENTEN ─────────────────────────────────────────── */
.form-groep { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-groep label { font-size: 13px; font-weight: 600; color: var(--kleur-tekst); }
.form-groep input, .form-groep select, .form-groep textarea { width: 100%; padding: 10px 14px; font-family: var(--font-hoofd); font-size: 14px; border: 1.5px solid var(--kleur-border); border-radius: var(--radius-s); background: var(--kleur-wit); color: var(--kleur-tekst); transition: border-color 0.15s, box-shadow 0.15s; }
.form-groep input:focus, .form-groep select:focus, .form-groep textarea:focus { outline: none; border-color: var(--kleur-primair); box-shadow: 0 0 0 3px rgba(30,58,95,0.1); }
.form-rij { display: grid; grid-template-columns: 1fr; gap: 0; }
.kaart { background: var(--kleur-wit); border: 1px solid var(--kleur-grijs-l); border-radius: var(--radius-l); padding: 24px; margin-bottom: 20px; }
.kaart h2 { font-size: 16px; font-weight: 700; color: var(--kleur-primair); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--kleur-grijs-l); }

/* ── CHECKOUT ───────────────────────────────────────────────── */
.checkout-hoofd { padding: 32px 0 64px; }
.checkout-titel { font-size: 24px; font-weight: 800; color: var(--kleur-tekst); margin-bottom: 28px; letter-spacing: -0.02em; }
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.betaal-opties { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.betaal-optie { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 2px solid var(--kleur-grijs-l); border-radius: var(--radius-m); cursor: pointer; font-size: 14px; font-weight: 600; transition: border-color 0.15s, background 0.15s; flex: 1; min-width: 140px; }
.betaal-optie input[type="radio"] { display: none; }
.betaal-optie:hover { border-color: var(--kleur-primair); background: var(--kleur-licht); }
.betaal-optie.actief { border-color: var(--kleur-primair); background: #eff4fb; }
.betaal-optie-icon { font-size: 22px; }

/* ── WINKELWAGEN ────────────────────────────────────────────── */
.wagen-totaal { background: var(--kleur-licht); border: 1px solid var(--kleur-grijs-l); border-radius: var(--radius-l); padding: 24px; position: sticky; top: calc(var(--nav-totaal) + 16px); }
.wagen-totaal-titel { font-size: 16px; font-weight: 700; color: var(--kleur-primair); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kleur-grijs-l); }
.wagen-item-rij { padding: 10px 0; border-bottom: 1px solid var(--kleur-grijs-l); font-size: 13px; }
.wagen-item-hoofd { display: flex; justify-content: space-between; margin-bottom: 4px; }
.wagen-item-naam { font-weight: 600; }
.wagen-item-prijs { font-weight: 700; }
.wagen-item-extra { display: flex; justify-content: space-between; font-size: 12px; color: var(--kleur-grijs); padding-left: 10px; margin-top: 2px; }
.wagen-item-upgrade { display: flex; justify-content: space-between; font-size: 12px; color: #2563eb; padding-left: 10px; margin-top: 2px; }
.wagen-totaal-scheiding { border: none; border-top: 1px solid var(--kleur-border); margin: 12px 0; }
.wagen-totaal-rij { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--kleur-tekst); padding: 4px 0; }
.wagen-totaal-rij.totaal { font-size: 17px; font-weight: 800; color: var(--kleur-primair); padding-top: 8px; margin-top: 4px; border-top: 2px solid var(--kleur-primair); }
.wagen-prijs-gratis { color: #16a34a; font-weight: 600; }
.wagen-betaal-logos { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wagen-betaal-logos img { height: 24px; }
.wagen-betaal-tekst { font-size: 11px; color: var(--kleur-grijs); text-align: center; margin-top: 6px; }
.wagen-hoofd { padding: 32px 0 64px; }
.wagen-titel { font-size: 24px; font-weight: 800; color: var(--kleur-tekst); margin-bottom: 24px; letter-spacing: -0.02em; }
.wagen-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.wagen-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.wagen-tabel thead th { background: var(--kleur-licht); padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 700; color: var(--kleur-grijs); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--kleur-grijs-l); }
.wagen-tabel tbody td { padding: 14px; vertical-align: top; border-bottom: 1px solid var(--kleur-grijs-l); }
.wagen-tabel tbody tr:last-child td { border-bottom: none; }
.wagen-product-link { font-weight: 600; color: var(--kleur-primair); text-decoration: none; }
.wagen-product-link:hover { color: var(--kleur-accent); text-decoration: underline; }
.wagen-mtm { font-size: 12px; color: var(--kleur-grijs); margin-top: 2px; }
.wagen-extras-lijst { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.wagen-extra-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; }
.wagen-extra-check { color: #16a34a; }
.wagen-extra-gear { color: #2563eb; }
.wagen-extra-prijs { color: #94a3b8; margin-left: auto; }
.wagen-stukprijs-extra { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.wagen-aantal-ctrl { display: flex; align-items: center; gap: 8px; }
.wagen-aantal-btn { width: 28px; height: 28px; background: var(--kleur-grijs-l); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-s); color: var(--kleur-tekst); font-weight: 700; text-decoration: none; font-size: 16px; transition: background 0.15s; }
.wagen-aantal-btn:hover { background: var(--kleur-border); text-decoration: none; color: var(--kleur-tekst); }
.wagen-aantal-getal { min-width: 20px; text-align: center; font-weight: 600; }
.wagen-verwijder { color: var(--kleur-accent); font-size: 18px; text-decoration: none; font-weight: 700; transition: color 0.15s; }
.wagen-verwijder:hover { color: var(--kleur-accent-h); }
.wagen-verder-link { font-size: 13px; color: var(--kleur-grijs); text-decoration: none; margin-top: 16px; display: inline-block; }
.wagen-verder-link:hover { color: var(--kleur-tekst); }
.wagen-dag-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #1e3a5f, #1a3460); border-radius: var(--radius-m); padding: 14px 20px; margin-bottom: 20px; }
.wagen-dag-tekst { display: flex; flex-direction: column; gap: 2px; }
.wagen-dag-tekst strong { color: #fff; font-size: 14px; font-weight: 700; }
.wagen-dag-tekst span { color: rgba(255,255,255,0.65); font-size: 13px; }
.wagen-dag-timer { font-family: monospace; font-weight: 700; color: #dc2626; }
.wagen-regel-totaal { font-weight: 700; }
.checkout-akkoord-tekst { font-size: 11px; color: var(--kleur-grijs); text-align: center; margin-top: 10px; line-height: 1.5; }
.checkout-akkoord-tekst a { color: var(--kleur-primair); }
.wagen-item-aantal { color: #94a3b8; }

/* ── LAPTOPS PAGINA ─────────────────────────────────────────── */
.lp-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 24px 0 40px; align-items: start; }
.filter-aside, .lp-sidebar { background: var(--kleur-wit); border: 1px solid var(--kleur-grijs-l); border-radius: var(--radius-l); padding: 18px 16px; position: sticky; top: calc(var(--nav-totaal) + 16px); }
.filter-blok { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--kleur-grijs-l); }
.filter-blok:last-of-type { border-bottom: none; margin-bottom: 10px; }
.filter-titel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kleur-primair); margin-bottom: 10px; }
.filter-input { width: 100%; padding: 7px 10px; border: 1.5px solid var(--kleur-border); border-radius: var(--radius-s); font-family: var(--font-hoofd); font-size: 13px; background: var(--kleur-wit); color: var(--kleur-tekst); transition: border-color 0.15s; }
.filter-input:focus { outline: none; border-color: var(--kleur-primair); }
.filter-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--kleur-border); background: var(--kleur-licht); color: #555; cursor: pointer; transition: all 0.15s; user-select: none; }
.pill input { display: none; }
.pill:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); background: #f0f4ff; }
.pill.active { background: var(--kleur-primair); border-color: var(--kleur-primair); color: #fff; }
.pill.grade-aplus.active, .pill.grade-a.active { background: #16a34a; border-color: #16a34a; }
.pill.grade-b.active { background: #2563eb; border-color: #2563eb; }
.pill.grade-c.active { background: #d97706; border-color: #d97706; }
.grade-mini-uitleg { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--kleur-grijs); }
.grade-kleur-aplus, .grade-kleur-a { color: #16a34a; }
.grade-kleur-b { color: #2563eb; }
.grade-kleur-c { color: #d97706; }
.prijs-range { display: flex; align-items: center; gap: 6px; }
.prijs-input { width: calc(50% - 10px) !important; }
.prijs-dash { color: var(--kleur-grijs); font-size: 12px; flex-shrink: 0; }
.filter-zoek-btn { width: 100%; margin-top: 4px; padding: 9px; font-size: 13px; background: #c0392b; color: #fff; }
.filter-wis-btn { display: block; text-align: center; margin-top: 8px; font-size: 12px; color: var(--kleur-grijs); text-decoration: none; }
.filter-wis-btn:hover { color: var(--kleur-accent); }
.lp-resultaten { min-width: 0; }
.lp-resultaten-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.lp-resultaten-titel { font-size: 20px; font-weight: 700; color: var(--kleur-primair); }
.lp-resultaten-aantal { font-size: 13px; color: var(--kleur-grijs); }
.lp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lp-kaart { display: flex; flex-direction: column; background: var(--kleur-wit); border: 1px solid var(--kleur-grijs-l); border-radius: var(--radius-l); overflow: hidden; transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; }
.lp-kaart:hover { box-shadow: var(--schaduw-l); transform: translateY(-2px); border-color: var(--kleur-border); }
.lp-foto-wrap { position: relative; display: block; background: #f8fafc; height: 160px; overflow: hidden; }
.lp-foto-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.3s; }
.lp-kaart:hover .lp-foto-wrap img { transform: scale(1.04); }

/* ── FIX 1: BADGES GESCHEIDEN — STATUS LINKS-BOVEN, GRADE RECHTS-BOVEN ── */
/* Status badge (OP=OP, uitverkocht, binnenkort, etc.) → links-boven */
.lp-badge-status { position: absolute; top: 8px; left: 8px; z-index: 3; }
/* Grade badge (A, B, C, Nieuw) → rechts-boven, niet overlappend */
.lp-grade-badge { position: absolute; top: 8px; right: 8px; left: auto; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; color: #fff; letter-spacing: 0.05em; z-index: 3; }

.lp-laag-badge { position: absolute; bottom: 8px; left: 8px; font-size: 10px; font-weight: 700; background: var(--kleur-accent); color: #fff; padding: 2px 8px; border-radius: 20px; }
.lp-body { flex: 1; padding: 12px 14px 8px; }
.lp-merk { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kleur-accent); margin-bottom: 2px; }
.lp-naam { font-size: 14px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.lp-naam a { color: var(--kleur-primair); text-decoration: none; }
.lp-naam a:hover { color: var(--kleur-accent); }
.lp-versie { display: inline-block; font-size: 10px; font-weight: 600; background: var(--kleur-licht); color: #666; border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
.lp-specs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-specs li { display: grid; grid-template-columns: 16px 48px 1fr; align-items: baseline; gap: 3px; font-size: 12px; line-height: 1.3; color: var(--kleur-tekst); }
.lp-icon { font-size: 12px; text-align: center; }
.lp-label { font-weight: 700; color: #aaa; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.lp-windows { color: var(--kleur-windows); font-weight: 700; }
.lp-footer { padding: 10px 12px 12px; border-top: 1px solid var(--kleur-grijs-l); display: flex; flex-direction: column; gap: 8px; }
.lp-prijs-blok { min-width: 0; }
.lp-prijs { font-size: 18px; font-weight: 900; color: var(--kleur-primair); line-height: 1; letter-spacing: -0.02em; }
.lp-excl { font-size: 10px; color: var(--kleur-grijs); margin-top: 2px; }
.lp-btns { display: flex; gap: 6px; align-items: center; }
.lp-btns .btn { font-size: 12px; padding: 7px 14px; border-radius: var(--radius-s); white-space: nowrap; flex: 1; justify-content: center; }
.lp-bekijk-btn { background: #c0392b !important; color: #fff !important; border: none !important; }
.lp-bekijk-btn:hover { background: #a93226 !important; color: #fff !important; }
.lp-wagen-btn { background: #16a34a !important; color: #fff !important; border: none !important; flex: 0 0 auto !important; padding: 7px 12px !important; }
.lp-wagen-btn:hover { background: #15803d !important; color: #fff !important; }

/* ── GRADE BADGES KLEUREN (lp-kaart) ───────────────────────── */
.lp-grade-a, .lp-grade-a-plus { background: #16a34a; }
.lp-grade-b { background: #2563eb; }
.lp-grade-c { background: #d97706; }
.lp-grade-nieuw { background: #7c3aed; }

/* ── GRADE BADGES (product detail) ─────────────────────────── */
.pd-grade-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.04em; }
.pd-grade-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pd-grade-optie { padding: 12px 16px; border-radius: var(--radius-m); border-left: 3px solid transparent; cursor: pointer; transition: background 0.15s; margin-bottom: 8px; border: 1px solid var(--kleur-grijs-l); }
.pd-grade-optie:hover { background: var(--kleur-licht); }
.pd-grade-badge-aplus, .grade-rij-aplus.actief { background: #f3e8ff; border-left-color: #7c3aed !important; }
.pd-grade-badge-aplus { border: 1.5px solid #c4b5fd; color: #7c3aed; }
.pd-grade-badge-aplus .pd-grade-dot { background: #7c3aed; }
.grade-letter-aplus { color: #7c3aed; border-color: #7c3aed; }
.grade-tekst-aplus { color: #7c3aed; }
.pd-grade-badge-a, .grade-rij-a.actief { background: #dcfce7; border-left-color: #16a34a !important; }
.pd-grade-badge-a { border: 1.5px solid #86efac; color: #16a34a; }
.pd-grade-badge-a .pd-grade-dot { background: #16a34a; }
.grade-letter-a { color: #16a34a; border-color: #16a34a; }
.grade-tekst-a { color: #16a34a; }
.pd-grade-badge-b, .grade-rij-b.actief { background: #dbeafe; border-left-color: #2563eb !important; }
.pd-grade-badge-b { border: 1.5px solid #93c5fd; color: #2563eb; }
.pd-grade-badge-b .pd-grade-dot { background: #2563eb; }
.grade-letter-b { color: #2563eb; border-color: #2563eb; }
.grade-tekst-b { color: #2563eb; }
.pd-grade-badge-c, .grade-rij-c.actief { background: #fef3c7; border-left-color: #d97706 !important; }
.pd-grade-badge-c { border: 1.5px solid #fcd34d; color: #d97706; }
.pd-grade-badge-c .pd-grade-dot { background: #d97706; }
.grade-letter-c { color: #d97706; border-color: #d97706; }
.grade-tekst-c { color: #d97706; }
.hero2-kaart-badge-aplus { background: #7c3aed; }
.hero2-kaart-badge-a { background: #16a34a; }
.hero2-kaart-badge-b { background: #2563eb; }
.hero2-kaart-badge-c { background: #d97706; }

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--kleur-grijs); padding: 12px 0; margin-bottom: 8px; }
.breadcrumb a { color: var(--kleur-grijs); text-decoration: none; }
.breadcrumb a:hover { color: var(--kleur-primair); text-decoration: underline; }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-actief { color: var(--kleur-tekst); font-weight: 600; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.grade-uitleg-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }

/* ── PAGINA COMPONENTEN ─────────────────────────────────────── */
.pagina-hoofd { padding: 40px 0 64px; }
.pagina-kop { margin-bottom: 32px; }
.pagina-kop h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 900; color: var(--kleur-tekst); letter-spacing: -0.02em; margin-bottom: 10px; line-height: 1.15; }
.pagina-kop p { font-size: 16px; color: var(--kleur-grijs); max-width: 600px; }
.info-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; }
.info-card { background: var(--kleur-licht); border-radius: var(--radius-l); padding: 24px; border: 1px solid var(--kleur-grijs-l); }
.info-card-icon { font-size: 28px; margin-bottom: 10px; line-height: 1; }
.info-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--kleur-tekst); }
.info-card p { font-size: 13px; color: var(--kleur-grijs); line-height: 1.6; margin: 0; }
.contact-sectie-donker { background: var(--kleur-donker); border-radius: var(--radius-l); padding: 32px; color: #fff; margin-bottom: 48px; }
.contact-sectie-donker h2 { font-size: 20px; font-weight: 800; margin-bottom: 20px; color: #fff; }
.contact-donker-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.contact-donker-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.contact-donker-waarde { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.7; }
.contact-donker-waarde a { color: #60a5fa; text-decoration: none; }
.contact-donker-waarde a:hover { color: #93c5fd; text-decoration: underline; }

/* ── TEKST PAGINA ───────────────────────────────────────────── */
.tekst-pagina { max-width: 860px; margin: 0 auto; padding: 40px 0 64px; }
.tekst-pagina h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 900; color: var(--kleur-tekst); letter-spacing: -0.02em; margin-bottom: 8px; }
.tekst-pagina .intro-tekst { font-size: 16px; color: var(--kleur-grijs); margin-bottom: 40px; }
.tekst-pagina section { margin-bottom: 40px; }
.tekst-pagina h2 { font-size: 20px; font-weight: 800; color: var(--kleur-tekst); margin-bottom: 14px; letter-spacing: -0.01em; }
.tekst-pagina h3 { font-size: 16px; font-weight: 700; color: var(--kleur-tekst); margin-bottom: 10px; }
.tekst-pagina p { font-size: 15px; color: #444; line-height: 1.75; margin-bottom: 14px; }
.tekst-pagina ul, .tekst-pagina ol { font-size: 15px; color: #444; line-height: 1.75; padding-left: 20px; margin-bottom: 14px; }
.tekst-pagina ul { list-style: disc; }
.tekst-pagina ol { list-style: decimal; }
.tekst-pagina a { color: var(--kleur-primair); }
.tekst-pagina a:hover { text-decoration: underline; }
.tekst-pagina .melding-kader { background: var(--kleur-licht); border-left: 4px solid var(--kleur-primair); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 16px 20px; margin: 20px 0; }
.tekst-pagina .waarschuwing-kader { background: #fff8f0; border-left: 4px solid #f97316; border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 16px 20px; margin: 20px 0; font-size: 13px; color: #92400e; }
.over-ons-hoofd { max-width: 860px; margin: 0 auto; padding: 40px 0 64px; }
.tekst-sectie { margin-bottom: 40px; }
.tekst-sectie h2 { font-size: 22px; font-weight: 800; color: var(--kleur-tekst); margin-bottom: 16px; letter-spacing: -0.01em; }
.tekst-sectie p { font-size: 15px; color: #444; line-height: 1.75; margin-bottom: 14px; }
.tekst-sectie p:last-child { margin-bottom: 0; }

/* ── PAGINA WRAP ────────────────────────────────────────────── */
.pagina-wrap { padding: 40px 0 64px; }
.pagina-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--kleur-grijs); margin-bottom: 20px; }
.pagina-breadcrumb a { color: var(--kleur-grijs); text-decoration: none; }
.pagina-breadcrumb a:hover { color: var(--kleur-primair); text-decoration: underline; }
.pagina-breadcrumb span { opacity: 0.5; }
.pagina-card { background: var(--kleur-wit); border: 1px solid var(--kleur-grijs-l); border-radius: var(--radius-l); padding: 32px 28px; max-width: 860px; }
.pagina-titel { font-size: clamp(22px, 4vw, 32px); font-weight: 900; color: var(--kleur-tekst); letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.15; }
.pagina-inhoud { margin-top: 20px; }
.pagina-inhoud p { font-size: 14px; color: #444; line-height: 1.75; margin-bottom: 12px; }
.pagina-inhoud p:last-child { margin-bottom: 0; }
.pagina-inhoud h2 { font-size: 18px; font-weight: 800; color: var(--kleur-tekst); margin: 28px 0 12px; letter-spacing: -0.01em; }
.pagina-inhoud h3 { font-size: 15px; font-weight: 700; color: var(--kleur-tekst); margin: 20px 0 8px; }
.pagina-inhoud ul, .pagina-inhoud ol { font-size: 14px; color: #444; line-height: 1.75; margin-bottom: 12px; padding-left: 20px; }
.pagina-inhoud ul { list-style: disc; }
.pagina-inhoud ol { list-style: decimal; }
.pagina-inhoud ul li, .pagina-inhoud ol li { margin-bottom: 4px; }
.pagina-inhoud a { color: var(--kleur-primair); }
.pagina-inhoud a:hover { text-decoration: underline; }
.sub-artikel { font-size: 13px !important; color: #555 !important; padding-left: 12px; border-left: 3px solid var(--kleur-grijs-l); margin-bottom: 8px !important; }
.faq-sectie-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kleur-primair); background: var(--kleur-licht); padding: 6px 12px; border-radius: 4px; margin: 28px 0 14px; display: inline-block; }
.niet-gevonden { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.niet-gevonden h2 { font-size: clamp(20px, 4vw, 28px); font-weight: 800; color: var(--kleur-tekst); }

/* ── PRODUCT DETAIL ─────────────────────────────────────────── */
.gar-p-mt { margin-top: 10px; }
.gar-uitzondering { font-size: 12px; color: #dc2626; font-weight: 600; margin-top: 10px; }
.gar-p-klein { font-size: 12px; color: #94a3b8; margin-top: 8px; }
.pd-wrap { background:#f5f7fa; padding-bottom:60px; }
.pd-container { max-width:1200px; margin:0 auto; padding:0 16px; }
.pd-breadcrumb { padding:14px 0; font-size:13px; color:#888; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.pd-breadcrumb a { color:#2563eb; text-decoration:none; }
.pd-breadcrumb a:hover { text-decoration:underline; }
.pd-breadcrumb span { color:#ccc; }
.pd-alert-succes { background:#f0fdf4; border:1px solid #86efac; color:#166534; padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; }
.pd-alert-succes a { color:#15803d; font-weight:700; }
.pd-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; background:#fff; border-radius:12px; padding:28px; box-shadow:0 1px 8px rgba(0,0,0,0.06); margin-bottom:24px; align-items:start; }
.pd-gallerij { display:flex; flex-direction:column; }
.pd-foto-main-wrap { position:relative; background:#f8fafc; border-radius:10px; border:1px solid #e8ecf0; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:340px; }
.pd-foto-main { max-width:100%; max-height:360px; object-fit:contain; cursor:zoom-in; display:block; padding:16px; }
.pd-zoom-hint { position:absolute; top:10px; right:10px; font-size:11px; color:#555; background:rgba(255,255,255,0.92); padding:4px 10px; border-radius:4px; cursor:pointer; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.pd-foto-watermark { position:absolute; bottom:6px; right:8px; background:rgba(0,0,0,0.32); color:rgba(255,255,255,0.6); font-size:10px; padding:2px 7px; border-radius:3px; z-index:2; pointer-events:none; letter-spacing:0.3px; }
.pd-geen-foto { color:#aaa; font-size:14px; padding:60px; text-align:center; }
.foto-pijl { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,0.35); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; transition:background 0.15s; }
.foto-pijl:hover { background:rgba(0,0,0,0.6); }
.foto-pijl-links { left:10px; }
.foto-pijl-rechts { right:10px; }
.pd-thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pd-thumb-wrap { width:68px; height:52px; border:2px solid #e2e8f0; border-radius:6px; background:#f8fafc; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; transition:border-color 0.15s; flex-shrink:0; }
.pd-thumb-wrap img { max-width:100%; max-height:100%; object-fit:contain; padding:4px; }
.pd-thumb-wrap.actief { border-color:#2563eb; }
.pd-thumb-wrap:hover { border-color:#1e3a5f; }
.pd-info { display:flex; flex-direction:column; gap:16px; align-self:start; }
.pd-naam { font-size:24px; font-weight:800; color:#1e3a5f; line-height:1.25; margin:0; }
.pd-keyspecs { background:#f8fafc; border:1px solid #e8ecf0; border-radius:8px; overflow:hidden; }
.pd-keyspec-rij { display:grid; grid-template-columns:24px 110px 1fr; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid #e8ecf0; font-size:13px; }
.pd-keyspec-rij:last-child { border-bottom:none; }
.pd-keyspec-rij:nth-child(even) { background:#fff; }
.pd-keyspec-icon { font-size:14px; text-align:center; }
.pd-keyspec-label { color:#64748b; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.3px; }
.pd-keyspec-waarde { color:#1e293b; font-weight:500; }
.pd-prijs-blok { background:#f8fafc; border:1px solid #e8ecf0; border-radius:10px; padding:18px 20px; }
.pd-prijs-incl { font-size:34px; font-weight:900; color:#1e3a5f; line-height:1; transition:all 0.2s; }
.pd-prijs-excl { font-size:13px; color:#94a3b8; margin-top:4px; }
.pd-garantie-rij { margin-top:10px; font-size:13px; color:#166534; font-weight:600; display:flex; align-items:center; gap:6px; }
.pd-voorraad-rij { margin-top:6px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.pd-voorraad-rij .pd-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pd-voorraad-rij.groen { color:#16a34a; } .pd-voorraad-rij.groen .pd-dot { background:#16a34a; }
.pd-voorraad-rij.oranje { color:#d97706; } .pd-voorraad-rij.oranje .pd-dot { background:#d97706; }
.pd-voorraad-rij.rood { color:#dc2626; } .pd-voorraad-rij.rood .pd-dot { background:#dc2626; }
.pd-extra-opties { border:1.5px solid #e8ecf0; border-radius:10px; overflow:hidden; background:#fff; }
.pd-extra-titel { background:#f8fafc; padding:11px 16px; font-size:13px; font-weight:700; color:#1e3a5f; border-bottom:1px solid #e8ecf0; }
.pd-extra-titel span { font-weight:400; color:#94a3b8; font-size:12px; }
.pd-extra-rij { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background 0.12s; }
.pd-extra-rij:last-of-type { border-bottom:none; }
.pd-extra-rij:hover { background:#f8fafc; }
.pd-extra-rij input[type="checkbox"] { width:18px; height:18px; accent-color:#1e3a5f; cursor:pointer; flex-shrink:0; }
.pd-extra-info { flex:1; min-width:0; }
.pd-extra-info strong { display:block; font-size:13px; color:#1e293b; margin-bottom:2px; }
.pd-extra-info span { font-size:11.5px; color:#94a3b8; line-height:1.4; }
.pd-extra-prijs { font-size:13px; font-weight:700; color:#1e3a5f; white-space:nowrap; flex-shrink:0; }
.pd-extra-waarschuwing { background:#fff8f0; border-top:1px solid #fed7aa; padding:10px 16px; font-size:11.5px; color:#92400e; line-height:1.5; }
.pd-knoppen { display:flex; flex-direction:column; gap:10px; }
.pd-btn-wagen { display:block; text-align:center; padding:15px; border-radius:8px; font-size:15px; font-weight:700; text-decoration:none; background:#dc2626; color:#fff; transition:background 0.15s; cursor:pointer; border:none; }
.pd-btn-wagen:hover { background:#b91c1c; color:#fff; text-decoration:none; }
.pd-btn-uitverkocht { background:#e2e8f0; color:#94a3b8; padding:15px; border-radius:8px; font-size:15px; font-weight:700; border:none; cursor:not-allowed; width:100%; }
.pd-usps { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.pd-usps li { font-size:13.5px; color:#374151; display:flex; align-items:flex-start; gap:8px; }
.usp-check { color:#16a34a; font-weight:900; font-size:14px; flex-shrink:0; margin-top:1px; }
.pd-grades-uitleg { border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.pd-grades-titel { background:#f8fafc; padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:1px; color:#64748b; text-transform:uppercase; border-bottom:1px solid #e2e8f0; }
.pd-grades-rijen { display:flex; flex-direction:column; }
.pd-grade-rij { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #e2e8f0; border-left:3px solid transparent; transition:background 0.15s; }
.pd-grade-rij:last-child { border-bottom:none; }
.pd-grade-letter { width:32px; height:32px; border-radius:6px; border:2px solid; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900; flex-shrink:0; }
.pd-grade-desc { font-size:12px; color:#64748b; margin-top:2px; }
.pd-grade-huidig { margin-left:auto; font-size:11px; font-weight:700; background:#1e3a5f; color:#fff; padding:3px 8px; border-radius:4px; white-space:nowrap; }
.pd-tabs-wrap { background:#fff; border-radius:12px; box-shadow:0 1px 8px rgba(0,0,0,0.06); overflow:hidden; }
.pd-tabs { display:flex; border-bottom:2px solid #e8ecf0; background:#f8fafc; }
.pd-tab { padding:14px 22px; font-size:14px; font-weight:600; color:#64748b; background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer; transition:color 0.15s,border-color 0.15s; white-space:nowrap; }
.pd-tab:hover { color:#1e3a5f; }
.pd-tab.actief { color:#1e3a5f; border-bottom-color:#2563eb; }
.pd-tab-inhoud { display:none; }
.pd-tab-inhoud.actief { display:block; }
.pd-spec-header { background:#f8fafc; padding:10px 20px; font-size:11px; font-weight:700; letter-spacing:2px; color:#1e3a5f; text-transform:uppercase; border-bottom:1px solid #e8ecf0; }
.pd-spec-rij { display:grid; grid-template-columns:200px 1fr; border-bottom:1px solid #f1f5f9; }
.pd-spec-rij:nth-child(even) { background:#fafbfc; }
.pd-spec-naam { padding:10px 20px; font-size:13px; color:#64748b; font-weight:600; border-right:1px solid #f1f5f9; }
.pd-spec-waarde { padding:10px 20px; font-size:13px; color:#1e293b; }
.spec-lijst { margin:0; padding-left:18px; }
.spec-lijst li { margin-bottom:2px; }
.pd-tab-content-box { padding:28px; font-size:14px; line-height:1.8; color:#374151; }
.tab-omschrijving-tekst { font-size:15px; line-height:1.7; color:#334155; margin-bottom:24px; }
.tab-vertrouw-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.tab-vertrouw-item { display:flex; gap:14px; align-items:flex-start; background:#f8fafc; border:1px solid #e8ecf0; border-radius:10px; padding:16px; }
.tab-vertrouw-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.tab-vertrouw-item strong { display:block; font-size:14px; color:#1e3a5f; margin-bottom:4px; }
.tab-vertrouw-item p { font-size:13px; color:#64748b; line-height:1.5; margin:0; }
.gar-kaarten { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.gar-kaart { border-radius:10px; padding:18px 16px; text-align:center; }
.gar-kaart-blauw { background:#eff6ff; border:1px solid #bfdbfe; }
.gar-kaart-groen { background:#f0fdf4; border:1px solid #bbf7d0; }
.gar-kaart-oranje { background:#fff7ed; border:1px solid #fed7aa; }
.gar-kaart-paars { background:#faf5ff; border:1px solid #e9d5ff; }
.gar-kaart-icon { font-size:24px; margin-bottom:8px; }
.gar-kaart-titel { font-size:14px; font-weight:700; color:#1e293b; margin-bottom:4px; }
.gar-kaart-sub { font-size:12px; color:#64748b; line-height:1.4; }
.gar-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gar-sectie { border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.gar-sectie-header { background:#f1f5f9; padding:12px 16px; font-size:13px; font-weight:700; color:#1e3a5f; border-bottom:1px solid #e2e8f0; }
.gar-sectie-body { padding:16px; font-size:13px; color:#475569; line-height:1.6; }
.gar-lijst { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.gar-lijst li { font-size:13px; color:#334155; }
.gar-contact { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid #e8ecf0; }
.gar-contact span { font-size:13px; color:#334155; }
.gar-contact a { color:#2563eb; text-decoration:none; font-weight:600; }
.gar-contact a:hover { text-decoration:underline; }
.pd-upgrades { margin-top:10px; }
.pd-upg-groep { padding:14px 18px 10px; border-top:1px solid #f0f4f8; }
.pd-upg-groep:first-of-type { border-top:none; }
.pd-upg-groep-label { font-size:13px; font-weight:700; color:#1e3a5f; margin-bottom:10px; }
.pd-upg-huidig { font-size:12px; font-weight:400; color:#64748b; margin-left:4px; }
.pd-upg-radio-rij { display:flex; flex-wrap:wrap; gap:8px; }
.pd-upg-radio { display:flex; align-items:center; cursor:pointer; }
.pd-upg-radio input { display:none; }
.pd-upg-radio-label { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1.5px solid #e2e8f0; background:#fff; font-size:13px; font-weight:600; color:#334155; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.pd-upg-radio input:checked + .pd-upg-radio-label { border-color:#1e3a5f; background:#eff6ff; color:#1e3a5f; }
.pd-upg-radio-label:hover { border-color:#93c5fd; background:#f8faff; }
.pd-upg-meerprijs { font-size:11px; font-weight:700; color:#16a34a; }
.pd-upg-radio input:checked + .pd-upg-radio-label .pd-upg-meerprijs { color:#1e3a5f; }
.sticky-bestel { display:none; position:fixed; bottom:0; left:0; right:0; z-index:999; background:#fff; border-top:1px solid #e2e8f0; padding:10px 16px; box-shadow:0 -4px 16px rgba(0,0,0,0.10); align-items:center; gap:12px; }
.sticky-naam { flex:1; font-size:12px; font-weight:700; color:#1e3a5f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sticky-rechts { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.sticky-prijs { font-size:15px; font-weight:900; color:#1e3a5f; white-space:nowrap; }
.sticky-btn { background:#dc2626; color:#fff; font-size:13px; font-weight:700; padding:10px 16px; border-radius:8px; text-decoration:none; white-space:nowrap; }
.sticky-btn:hover { background:#b91c1c; text-decoration:none; color:#fff; }
.pd-pdf-btn { display:flex; align-items:center; gap:8px; margin-top:16px; padding:11px 18px; background:#f8f9fa; border:1px solid #dee2e6; color:#333; font-size:13px; font-weight:600; text-decoration:none; transition:all 0.2s; border-radius:4px; }
.pd-pdf-btn:hover { background:#c0392b; color:#fff; border-color:#c0392b; text-decoration:none; }

/* ── CONTACT PAGINA ─────────────────────────────────────────── */
.contact-info h3 { font-size: 18px; font-weight: 800; color: var(--kleur-tekst); margin-bottom: 14px; }
.contact-lijst { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--kleur-tekst); margin-bottom: 20px; padding: 0; }
.contact-lijst li { display: flex; align-items: center; gap: 6px; }
.contact-lijst a { color: var(--kleur-primair); text-decoration: none; }
.contact-lijst a:hover { text-decoration: underline; }
.contact-tijden { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--kleur-grijs); padding: 14px 16px; background: var(--kleur-licht); border-radius: var(--radius-m); border-left: 3px solid var(--kleur-primair); }
.contact-tijden strong { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--kleur-primair); margin-bottom: 4px; }
.contact-succes { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; padding: 16px 20px; border-radius: var(--radius-m); font-size: 15px; font-weight: 600; }
.contact-fout { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 12px 16px; border-radius: var(--radius-m); font-size: 14px; margin-bottom: 16px; }
.form-veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-veld label { font-size: 13px; font-weight: 600; color: var(--kleur-tekst); }
.form-veld input, .form-veld textarea { width: 100%; padding: 10px 14px; font-family: var(--font-hoofd); font-size: 14px; border: 1.5px solid var(--kleur-border); border-radius: var(--radius-s); background: var(--kleur-wit); color: var(--kleur-tekst); transition: border-color 0.15s, box-shadow 0.15s; resize: vertical; }
.form-veld input:focus, .form-veld textarea:focus { outline: none; border-color: var(--kleur-primair); box-shadow: 0 0 0 3px rgba(30,58,95,0.1); }

/* ── LIGHTBOX ───────────────────────────────────────────────── */
#lb { display:none; position:fixed; top:0;left:0;width:100%;height:100%;z-index:9999; }
#lb.aan { display:block; }
#lb-over { position:absolute;inset:0;background:rgba(0,0,0,0.88);cursor:zoom-out; }
#lb-img { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:72vw;max-height:76vh;object-fit:contain;border-radius:6px; }
#lb-sluit { position:absolute;top:14px;right:18px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer; }
#lb-prev { position:absolute;left:14px;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;cursor:pointer; }
#lb-next { position:absolute;right:14px;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;font-size:32px;display:flex;align-items:center;justify-content:center;cursor:pointer; }
#lb-sluit:hover,#lb-prev:hover,#lb-next:hover { background:rgba(255,255,255,0.2); }
#lb-nr { position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.45);font-size:12px;letter-spacing:2px; }

/* ── BETALING PAGINA ────────────────────────────────────────── */
.betaling-wrap { display: flex; justify-content: center; padding: 60px 0 80px; }
.betaling-kaart { background: var(--kleur-wit); border-radius: var(--radius-l); padding: 48px 40px; box-shadow: var(--schaduw-l); text-align: center; max-width: 600px; width: 100%; border: 1px solid var(--kleur-grijs-l); }
.betaling-icon { font-size: 64px; margin-bottom: 16px; line-height: 1; }
.betaling-titel { font-size: clamp(22px, 4vw, 28px); font-weight: 900; color: var(--kleur-primair); margin-bottom: 12px; letter-spacing: -0.02em; }
.betaling-titel-rood { color: var(--kleur-accent); }
.betaling-tekst { font-size: 15px; color: var(--kleur-grijs); margin-bottom: 24px; line-height: 1.6; }
.betaling-tekst strong { color: var(--kleur-tekst); }
.betaling-info { text-align: left; margin-bottom: 24px; line-height: 1.8; }
.betaling-knoppen { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ── SPACING HELPERS ────────────────────────────────────────── */
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }

/* ── FILTER TOGGLE KNOP ─────────────────────────────────────── */
.filter-toggle-btn { display: none; width: 100%; background: #8b0000; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; margin-bottom: 12px; align-items: center; justify-content: space-between; gap: 8px; }

/* ── TABEL WRAP ─────────────────────────────────────────────── */
.tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (min-width: 480px) {
  :root { --container-padding: 20px; }
  .pk-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .waarom-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-nav-midden { flex-direction: row; gap: 36px; }
  .info-card-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-donker-grid { grid-template-columns: repeat(2, 1fr); }
  .form-rij { grid-template-columns: 1fr 1fr; gap: 16px; }
  .grade-uitleg-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
  :root { --container-padding: 24px; }
  .topbar-inner { justify-content: center; }
  .grade-s-grid { grid-template-columns: repeat(3, 1fr); }
  .grade-s-item { flex-direction: column; text-align: center; padding: 28px 20px; }
  .grade-s-letter { font-size: 40px; width: 64px; height: 64px; margin: 0 auto 12px; }
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
  .da-grid { grid-template-columns: 1fr 1fr; }
  .footer-badges-sectie { flex-direction: row; gap: 24px; }
}
@media (min-width: 768px) {
  :root { --container-padding: 32px; --header-hoogte: 68px; }
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobiel { display: none !important; }
  .hero2 { padding: 56px 0; }
  .hero2-inner { flex-direction: row; align-items: center; gap: 48px; }
  .hero2-tekst { flex: 1; }
  .hero2-visual { width: 300px; }
  .pk-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { flex-direction: row; flex-wrap: wrap; gap: 40px; }
  .footer-brand { flex: 0 0 260px; }
  .footer-nav-midden { flex: 1; }
  .footer-nav-rechts { flex: 0 0 180px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
  .da-grid { grid-template-columns: 240px 1fr; }
  .lp-layout { grid-template-columns: 240px 1fr; }
  .checkout-grid { grid-template-columns: 1fr 360px; gap: 32px; }
  .wagen-layout { grid-template-columns: 1fr 360px; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr 400px; }
}
@media (min-width: 1024px) {
  :root { --container-padding: 40px; }
  .hero2 { padding: 72px 0; }
  .hero2-visual { width: 340px; }
  .pk-grid { grid-template-columns: repeat(3, 1fr); }
  .usp-grid { grid-template-columns: repeat(5, 1fr); }
  .grade-s-grid { grid-template-columns: repeat(3, 1fr); }
  .grade-s-item { flex-direction: row; text-align: left; }
  .grade-s-letter { margin: 0; }
  .waarom-grid { grid-template-columns: repeat(4, 1fr); }
  .da-grid { grid-template-columns: 240px 1fr 220px; }
  .da-tg-blok span { font-size: 32px; }
  .da-naam { font-size: 22px; }
  .lp-layout { grid-template-columns: 260px 1fr; }
  .lp-grid { grid-template-columns: repeat(3, 1fr); }
  .info-card-grid { grid-template-columns: repeat(4, 1fr); }
  .grade-uitleg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  :root { --container-padding: 48px; }
  .hero2 { padding: 88px 0; }
  .hero2-visual { width: 380px; }
  .pk-grid { grid-template-columns: repeat(4, 1fr); }
  .lp-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-top { flex-wrap: nowrap; }
}

/* ── PRODUCT DETAIL RESPONSIVE ──────────────────────────────── */
@media (max-width:900px) {
  .pd-grid { grid-template-columns:1fr; gap:20px; padding:20px; }
  .pd-naam { font-size:20px; }
  .pd-prijs-incl { font-size:28px; }
  .gar-detail-grid { grid-template-columns:1fr; }
  .pd-spec-rij { grid-template-columns:160px 1fr; }
}
@media (max-width:768px) {
  .sticky-bestel { display:flex; }
  .pd-wrap { padding-bottom:80px; }
}
@media (max-width:600px) {
  .pd-grid { padding:16px; gap:16px; border-radius:8px; }
  .pd-foto-main-wrap { min-height:240px; }
  .pd-foto-main { max-height:260px; }
  .tab-vertrouw-grid { grid-template-columns:1fr; }
  .gar-kaarten { grid-template-columns:1fr 1fr; }
  .gar-detail-grid { grid-template-columns:1fr; }
  .pd-naam { font-size:18px; }
  .pd-prijs-incl { font-size:26px; }
  .pd-keyspec-rij { grid-template-columns:22px 90px 1fr; font-size:12px; padding:8px 10px; }
  .pd-tabs { overflow-x:auto; }
  .pd-tab { padding:12px 14px; font-size:13px; }
  .pd-spec-rij { grid-template-columns:1fr; }
  .pd-spec-naam { padding:8px 16px 2px; border-right:none; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:#94a3b8; }
  .pd-spec-waarde { padding:2px 16px 8px; }
  .pd-breadcrumb { font-size:12px; }
  .pd-thumbs { gap:6px; }
  .pd-thumb-wrap { width:54px; height:42px; }
  .pd-grades-uitleg { display:none; }
  .pd-tab-content-box { padding:16px; }
}
@media (max-width:380px) {
  .pd-prijs-incl { font-size:22px; }
  .pd-naam { font-size:16px; }
  .pd-btn-wagen { padding:13px; font-size:14px; }
}

/* ================================================================
   MOBILE & TABLET FIXES — GECONSOLIDEERD
   ================================================================ */

/* ── 1. HERO MOBIEL ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero2 { padding: 28px 0; }
  .hero2-inner { flex-direction: column; gap: 20px; }
  .hero2-visual { width: 100%; max-width: 300px; margin: 0 auto; }
  .hero2-tekst h1 { font-size: 26px; }
  .hero2-tekst p { font-size: 14px; }
  .h2-btn-primair, .h2-btn-sec { padding: 12px 20px; font-size: 14px; width: 100%; justify-content: center; }
  .hero2-btns { flex-direction: column; gap: 10px; }
}

/* ── 2. HERO STATS: 2×2 grid op mobiel ─────────────────────── */
@media (max-width: 640px) {
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .hero-stat-sep { display: none !important; }
  .hero-stat { min-width: unset !important; padding: 8px 4px; flex: unset !important; }
  .hero-stat-getal { font-size: 16px !important; }
  .hero-reviews { padding-right: 64px; flex-wrap: wrap; }
  .hero-slide { padding: 16px !important; }
  .hero2-kaart-naam { font-size: 15px !important; margin-bottom: 10px !important; }
  .hero2-kaart-specs div { font-size: 12px !important; }
  .hero2-kaart-prijs strong { font-size: 24px !important; }
}

/* ── 3. SECTIE KOP: links op mobiel ─────────────────────────── */
@media (max-width: 767px) {
  .sectie-kop-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .sectie-kop-flex h2,
  .sectie-kop-flex p { text-align: left; }
}

/* ── 4. CONTAINER: altijd padding ───────────────────────────── */
@media (max-width: 479px) {
  :root { --container-padding: 16px; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .pagina-card { padding: 20px 16px; }
  .betaling-kaart { padding: 32px 20px; }
  .pk-grid { grid-template-columns: 1fr !important; }
  .pk-foto-container { height: 180px !important; }
}

/* ── 5. TOPBAR: klein mobiel ────────────────────────────────── */
@media (max-width: 380px) {
  .topbar-inner { flex-direction: column; gap: 4px; padding: 4px 0; }
  .topbar-inner span + span::before { display: none; }
  .winkelwagen-tekst { display: none; }
}

/* ── 6. LAPTOPS PAGINA: mobiel ──────────────────────────────── */
@media (max-width: 767px) {
  .lp-layout { grid-template-columns: 1fr; padding: 16px 0 32px; }
  .lp-sidebar, .filter-aside { position: static; top: auto; }
  .lp-sidebar.mobiel-verborgen { display: none; }
  .lp-grid { grid-template-columns: 1fr !important; }
  .filter-toggle-btn { display: flex; }
  .wagen-layout { grid-template-columns: 1fr; }
  .wagen-totaal { position: static; }
  .checkout-grid { grid-template-columns: 1fr; }
  .pd-grid { grid-template-columns: 1fr; }
  .cp-sidebar { display: none; }
  .cp-main { margin-left: 0; }
  .cp-stats { grid-template-columns: 1fr 1fr; }
  .cp-grid-2, .cp-grid-3 { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .rep-grid-2, .rep-grid-3 { grid-template-columns: 1fr; }
  .rep-veld-breed { grid-column: 1; }
}

/* ── 7. TABLET (768–1023px) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-layout { grid-template-columns: 220px 1fr; gap: 16px; }
  .lp-grid { grid-template-columns: repeat(2, 1fr); }
  .pk-grid { grid-template-columns: repeat(2, 1fr); }
  .wagen-layout { grid-template-columns: 1fr 300px; }
  .checkout-grid { grid-template-columns: 1fr 300px; }
  .cp-sidebar { width: 200px; }
  .cp-main { margin-left: 200px; }
  .cp-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── 8. USP STRIP: scroll fade rechts ──────────────────────── */
@media (max-width: 1023px) {
  .usp-strip::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(to right, transparent, #fff 90%);
    pointer-events: none;
    z-index: 2;
  }
}

/* ── 9. WINKELWAGEN TABEL MOBIEL ────────────────────────────── */
@media (max-width: 639px) {
  .wagen-tabel { min-width: auto; }
  .wagen-tabel thead { display: none; }
  .wagen-tabel tbody tr { display: flex; flex-direction: column; background: var(--kleur-wit); border: 1px solid var(--kleur-grijs-l); border-radius: var(--radius-m); margin-bottom: 12px; padding: 16px; gap: 8px; }
  .wagen-tabel tbody td { padding: 0; border: none; }
  .wagen-tabel tbody td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kleur-grijs); margin-bottom: 2px; }
}

/* ── 10. FOOTER MOBIEL ──────────────────────────────────────── */
@media (max-width: 767px) {
  .tcf-main { grid-template-columns: 1fr; padding: 24px 16px; gap: 20px; }
  .tcf-hulp-inner { flex-direction: column; gap: 12px; text-align: center; }
  .tcf-hulp-acties { margin-left: 0; justify-content: center; width: 100%; }
  .tcf-hulp-btn { flex: 1; justify-content: center; }
  .tcf-usp-inner { flex-direction: column; align-items: stretch; padding: 0 16px; }
  .tcf-usp-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 12px 0; justify-content: flex-start; }
  .tcf-usp-item:last-child { border-bottom: none; }
  .tcf-bottom-inner { flex-direction: column; text-align: center; gap: 4px; }
}

/* ── 11. TOUCH & MOTION ─────────────────────────────────────── */
@media (hover: none) {
  .pk:hover { transform: none; box-shadow: none; }
  .waarom-item:hover { transform: none; box-shadow: none; }
  .grade-s-item:hover { box-shadow: none; border-color: var(--kleur-grijs-l); }
  .lp-kaart:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ── 12. TOUCH TARGETS MIN 44PX ─────────────────────────────── */
@media (max-width: 767px) {
  .btn, .tc-winkelwagen, .wagen-aantal-btn, .filter-toggle-btn { min-height: 44px; }
  .lp-btns .btn { min-height: 40px; }
}

/* ── 13. SUBNAV SCROLL ──────────────────────────────────────── */
.tc-subnav-inner { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tc-subnav-inner::-webkit-scrollbar { display: none; }