/* ============================================================
   VOORBEELD nieuw ontwerp (26-10-2026), naar de stijl van TSA Clima Control:
   antraciet, dunne letters, zachte lijnen, crème actieknop, 3D-foto en 3D-lint.
   Dit bestand ligt over styles.css heen; alleen voorbeeld.html gebruikt het.
   ============================================================ */
:root {
  --ant-1: #303030; --ant-2: #191919; --ant-kaart: #222;
  --wit: #F2F2F2; --grijs: #8A8A8A; --lijn-d: rgba(255,255,255,.08);
  --creme-1: #F1ECE4; --creme-2: #DCD5CA;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* tokens van styles.css omzetten naar donker */
  --ink: var(--wit); --ink-soft: var(--grijs); --line: var(--lijn-d); --line-strong: rgba(255,255,255,.14);
  --bg: #1b1b1b; --bg-soft: #202020; --accent: var(--creme-1); --accent-600: #fff; --accent-700: #CFC7BA;
  --navy: var(--wit);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -18px rgba(0,0,0,.9);
  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -30px rgba(0,0,0,.95);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.95);
}
html { background: var(--ant-2); }
body { background: radial-gradient(120% 1400px at 50% 0%, var(--ant-1), var(--ant-2) 70%) no-repeat, var(--ant-2); color: var(--wit); }
h1, h2, h3 { font-weight: 300; letter-spacing: -.03em; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--grijs); text-transform: uppercase; }

/* kop */
.topbar { background: #0d0d0d; color: var(--grijs); font-weight: 300; }
header.site { background: rgba(30,30,30,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lijn-d); }
.brand .logo { color: var(--wit); font-weight: 500; }
.brand .sub { color: var(--grijs); border-color: var(--lijn-d) !important; }
.nav-links a { color: #CFCFCF; font-weight: 300; }
.nav-links a:hover { color: #fff; }
.nav-drop-menu { background: #232323 !important; border: 1px solid var(--lijn-d) !important; }
.cart-btn { background: transparent; color: var(--wit); border: 1px solid rgba(255,255,255,.38); box-shadow: none; font-weight: 400; }
.cart-btn:hover { background: rgba(255,255,255,.06); }
.cart-count { background: var(--creme-1); color: #111; }

/* ---------- opening ---------- */
.held { padding: 72px 0 40px; position: relative; overflow: hidden; }
.held-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.held h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; margin: 18px 0 22px; color: var(--wit); }
.held h1 em { font-style: italic; color: var(--grijs); font-weight: 200; }
.held p { color: #B5B5B5; font-size: 18px; font-weight: 300; max-width: 520px; line-height: 1.65; }
.held-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 38px; }
.knop-creme { background: linear-gradient(180deg, var(--creme-1), var(--creme-2)); color: #151515; padding: 15px 26px; border-radius: 999px; font-weight: 500; box-shadow: 0 10px 30px -12px rgba(241,236,228,.45); transition: transform .2s; }
.knop-creme:hover { transform: translateY(-2px); }
.knop-lijn { border: 1px solid rgba(255,255,255,.38); color: var(--wit); padding: 15px 24px; border-radius: 999px; font-weight: 300; }
.knop-lijn:hover { background: rgba(255,255,255,.06); }
.held-feiten { display: flex; gap: 34px; border-top: 1px solid var(--lijn-d); padding-top: 22px; }
.held-feiten b { display: block; font-size: 26px; font-weight: 300; color: var(--wit); }
.held-feiten span { font-size: 13px; color: var(--grijs); }

.held-foto { position: relative; height: min(640px, 78vh); perspective: 1200px; transform-style: preserve-3d; }
.held-foto .laag { position: absolute; transition: transform .08s linear; transform-style: preserve-3d; }
.laag-achter { inset: 6% 2% 4% 14%; border-radius: 28px; background: linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,0)); border: 1px solid var(--lijn-d); }
.laag-foto { inset: 4% 6% 4% 16%; border-radius: 26px; overflow: hidden; box-shadow: 0 50px 100px -40px #000, 0 0 0 1px rgba(255,255,255,.08); }
.laag-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; }
.laag-foto canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.laag-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,.12), transparent 35%, transparent 70%, rgba(0,0,0,.35)); pointer-events: none; }
.laag-kraan canvas { position: absolute; left: -150%; top: -200%; width: 250%; height: 350%; pointer-events: none; }
.laag-kraan { right: -7%; bottom: -5%; height: 42%; aspect-ratio: 1; pointer-events: none; }
.laag-kraan img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(0,0,0,.4)); }
.laag-kaart { left: 0; top: 10%; padding: 16px 20px; border-radius: 16px; background: rgba(28,28,28,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -25px #000; }
.laag-kaart .kaart-regel { font-size: 15px; font-weight: 300; margin-top: 6px; color: var(--wit); }
.laag-label { right: 4%; top: 7%; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(20,20,20,.5); color: var(--wit); }

/* ---------- 3D-lint ---------- */
.lint { padding: 30px 0 10px; }
.lint-kop, .lint-voet { display: flex; justify-content: space-between; align-items: center; }
.lint-pijlen { display: flex; gap: 12px; align-items: center; }
.lint-pijlen button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: var(--wit); font-size: 16px; }
.lint-pijlen button:hover { background: rgba(255,255,255,.07); }
.lint-plaat { position: relative; height: clamp(360px, 42vw, 600px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.lint-plaat.pakt { cursor: grabbing; }
.lint-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.lint-plak { position: absolute; left: 0; top: 0; overflow: hidden; backface-visibility: hidden; }
.lint-plak.eerste { border-radius: 22px 0 0 22px; } .lint-plak.laatste { border-radius: 0 22px 22px 0; }
.lint-vak { position: absolute; top: 0; display: block; overflow: hidden; border-radius: 22px; background: linear-gradient(160deg, #2a2a2a, #161616); border: 1px solid rgba(255,255,255,.08); color: var(--wit); }
.lint-vak .foto { position: absolute; right: 4%; top: 8%; bottom: 8%; width: 52%; border-radius: 16px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.lint-vak .foto img { max-width: 92%; max-height: 92%; object-fit: contain; }
.lint-vak .nr { position: absolute; left: 26px; top: 22px; }
.lint-vak .naam { position: absolute; left: 26px; bottom: 26px; width: 38%; font-size: clamp(22px, 2.4vw, 40px); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; }
.lint-vak .naam small { display: block; font-size: 13px; color: var(--grijs); margin-top: 10px; letter-spacing: 0; line-height: 1.45; }
.lint-vak .pijl { position: absolute; left: 26px; top: 50%; width: 44px; height: 44px; margin-top: -40px; border-radius: 50%; background: var(--creme-1); color: #111; display: grid; place-items: center; }
.lint-vak::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,.08), transparent 35%, transparent 70%, rgba(0,0,0,.25)); }
.lint-plak:hover .lint-vak { filter: brightness(1.1); }

/* ---------- winkel ---------- */
.section-head h1, .section-head h2 { color: var(--wit); font-weight: 300; }
.section-head h1::before, .section-head h2::before { background: var(--creme-1) !important; height: 1px !important; }
.section-head p { color: var(--grijs) !important; font-weight: 300; }
.chip { background: transparent; color: #CFCFCF; border: 1px solid rgba(255,255,255,.16); font-weight: 300; }
.chip:hover { border-color: rgba(255,255,255,.4); }
.chip.active { background: var(--creme-1); color: #111; border-color: var(--creme-1); }
.card { background: linear-gradient(170deg, #262626, #1c1c1c); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: var(--shadow-sm); color: var(--wit); }
.card:hover { border-color: rgba(255,255,255,.18); transform: translateY(-3px); }
.card-img { background: #fff; margin: 10px; border-radius: 12px; }
.card-cat { color: var(--grijs) !important; font-family: var(--mono); font-weight: 400 !important; }
.card h3 { color: var(--wit); font-weight: 400; }
.card .tag { color: var(--grijs); font-weight: 300; }
.price { color: var(--wit); font-weight: 400; }
.price small, .price s { color: var(--grijs); }
.badge, .badge-korting { background: var(--creme-1) !important; color: #111 !important; }
.btn { background: linear-gradient(180deg, var(--creme-1), var(--creme-2)); color: #151515; border: 0; border-radius: 999px; box-shadow: none; font-weight: 500; }
.btn:hover { filter: brightness(1.04); }
.btn.ghost { background: transparent; color: var(--wit); border: 1px solid rgba(255,255,255,.38); }
.trust { background: transparent; border-color: var(--lijn-d); }
.trust div { color: var(--grijs); font-weight: 300; border-color: var(--lijn-d) !important; }
.trust b { color: var(--wit); font-weight: 400; }
section[style*="--bg-soft"] { background: rgba(255,255,255,.02) !important; }
.usp-garantie { background: linear-gradient(160deg, #2b2b2b, #181818) !important; border: 1px solid rgba(255,255,255,.08); color: var(--wit); }
.usp-garantie h3, .usp-garantie p { color: var(--wit) !important; }
.johan-kaart { background: linear-gradient(160deg, #2b2b2b, #181818) !important; }
.johan-bel a, .johan-reviews { color: var(--creme-1) !important; }
.bento-johan > *:nth-child(n+2) h3::before, .bento-4 h3::first-letter { color: var(--creme-1) !important; }
.input input, .input select, .input textarea { background: #151515; color: var(--wit); border-color: rgba(255,255,255,.14); }
.input label { color: var(--grijs); }
footer.site { background: #0f0f0f; }

/* panelen (detail en mandje) */
.detail-card, .panel { background: #1e1e1e; color: var(--wit); border: 1px solid rgba(255,255,255,.08); }
.detail-media { background: #fff; }
.detail-info h2, .detail-price, .field-label { color: var(--wit); }
.finish { background: transparent; color: #DADADA; border-color: rgba(255,255,255,.18); }
.finish.sel { border-color: var(--creme-1); color: #fff; }
.iconbtn { background: rgba(255,255,255,.06); color: var(--wit); }
.cart-item .thumb { background: #fff; }

@media (max-width: 900px) {
  .held { padding-top: 34px; }
  .held-raster { grid-template-columns: 1fr; gap: 30px; }
  .held-foto { height: 520px; }
  .laag-foto { inset: 0 4% 0 10%; }
  .held-feiten { gap: 20px; }
  .lint-vak .foto { left: 6%; right: 6%; width: auto; top: 6%; bottom: 40%; }
  .lint-vak .naam { width: auto; right: 26px; bottom: 20px; }
  .lint-vak .pijl { display: none; }
  .lint-plaat { height: 470px; }
}
@media (prefers-reduced-motion: reduce) { .card:hover, .knop-creme:hover { transform: none; } }

/* ---------- leesbaarheid: alles wat in styles.css licht is, donker maken (26-10-2026) ---------- */
.trust div { background: linear-gradient(170deg, #262626, #1d1d1d) !important; border-color: var(--lijn-d) !important; box-shadow: none !important; }
.btn.ghost { background: transparent !important; color: var(--wit) !important; border: 1px solid rgba(255,255,255,.38) !important; box-shadow: none !important; }
.btn.ghost:hover { background: rgba(255,255,255,.06) !important; }
.btn.accent, .usp-garantie .btn { background: linear-gradient(180deg, var(--creme-1), var(--creme-2)) !important; color: #151515 !important; border: 0 !important; box-shadow: 0 10px 30px -12px rgba(241,236,228,.4) !important; }
.panel-note { background: #1d1d1d !important; border: 1px solid var(--lijn-d) !important; color: #BDBDBD !important; }
.panel-note b, #vervangen b, .section b { color: var(--wit); }
#vervangen a[href^="mailto"] { color: var(--creme-1) !important; }
.panel-foot { background: #1a1a1a !important; border-color: var(--lijn-d) !important; }
.summary .row { color: #CFCFCF; } .summary .row.total { color: var(--wit); border-color: rgba(255,255,255,.2) !important; }
.summary [style*="accent"], .summary .korting, .summary .row[style] { color: var(--creme-1) !important; }
.qty { background: transparent !important; border-color: rgba(255,255,255,.25) !important; box-shadow: none !important; }
.qty button, .qty span { color: var(--wit) !important; }
.remove { color: var(--grijs) !important; }
.input input, .input select, .input textarea, .panel input, .panel select { background: #141414 !important; color: var(--wit) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: none !important; }
.input input::placeholder, .input textarea::placeholder, .panel input::placeholder { color: #6F6F6F; }
.panel button:not(.iconbtn):not(.btn):not(.remove):not(.qty button) { background: transparent; color: var(--wit); border: 1px solid rgba(255,255,255,.3); }
.checkout, .checkout .panel-body { background: #1e1e1e; color: var(--wit); }
.toast { background: #F1ECE4 !important; color: #151515 !important; }
.overlay.open { background: rgba(0,0,0,.6); }
.detail-media-wrap, .detail-thumbs { background: transparent !important; border-color: var(--lijn-d) !important; }
.detail-info h2 { font-weight: 300; }
.ph { background: #222 !important; color: var(--grijs) !important; }

/* ---------- productfoto's: originele foto met een "studio"-laag eroverheen ----------
   De witte achtergrond van de fabrieksfoto wordt via mix-blend-mode: multiply de kleur van het vlak
   eronder (warm lichtgrijs verloop). Er wordt niets uitgeknipt, dus geen rafelranden.
   Een tweede laag (::after) geeft een zacht vignet en een glanslijn bovenin. */
.card-img, .lint-vak .foto, .detail-media, .cart-item .thumb, .detail-thumbs .thumb {
  position: relative; isolation: isolate;
  background: radial-gradient(85% 70% at 50% 38%, #F6F4F0 0%, #E6E2DB 58%, #C9C4BC 100%) !important;
}
.card-img img, .lint-vak .foto img, .detail-media img, .cart-item .thumb img, .detail-thumbs .thumb img {
  mix-blend-mode: multiply; filter: contrast(1.04) saturate(.92);
}
.card-img::after, .detail-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 18%),
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 0 -30px 40px -30px rgba(0,0,0,.25);
}
.card-img { border: 0; }
.lint-vak .foto { position: absolute; }
.detail-thumbs .thumb { border-color: rgba(255,255,255,.12) !important; }
.detail-thumbs .thumb.sel { border-color: var(--creme-1) !important; }
.detail-media img, .detail-media-wrap .detail-media img { object-fit: contain !important; padding: 6%; background: transparent !important; }

/* ============================================================
   DIEPTE (26-10-2026, wens Johan "meer diepte"): zie diepte.js
   ============================================================ */
footer.site { border-top: 1px solid rgba(255,255,255,.08) !important; background: #0d0d0d !important; }

/* licht dat de muis volgt + zwevende lichtvlekken die langzamer meescrollen (parallax) */
.diepte-licht { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(520px circle at var(--lx, 70%) var(--ly, 25%), rgba(255,255,255,.055), transparent 60%); }
/* achtergrond in lagen (keuze Johan 26-10-2026: optie 1 en 4)
   1. drie lagen met zachte lichtvlekken die elk met een andere snelheid meescrollen en meebewegen met de muis;
   4. dieper verloop (licht midden, donkere randen) met een fijne korrel, zoals bij een foto.
   De lagen staan achter de inhoud (z-index -1); body is daarvoor doorzichtig, de basiskleur zit op html. */
html.diepte { background: #141414; }
html.diepte body { background: transparent !important; }
.diepte-achter { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(130% 95% at 50% 18%, #343434 0%, #222 42%, #151515 72%, #0b0b0b 100%); }
.diepte-achter .laag { position: absolute; inset: -6% -6%; will-change: transform, background-position; background-repeat: repeat-y !important; background-size: 100% 150vh !important; }
.diepte-achter .vignet, .diepte-achter .korrel { background-size: auto !important; }
.diepte-achter .ver { filter: blur(70px); opacity: .9;
  background:
    radial-gradient(28vw 22vw at 18% 30%, rgba(255,255,255,0.105), transparent 70%),
    radial-gradient(34vw 26vw at 82% 62%, rgba(241,236,228,0.090), transparent 70%),
    radial-gradient(26vw 20vw at 40% 92%, rgba(255,255,255,0.075), transparent 70%); }
.diepte-achter .midden { filter: blur(40px);
  background:
    radial-gradient(16vw 12vw at 70% 22%, rgba(255,255,255,0.090), transparent 70%),
    radial-gradient(20vw 14vw at 12% 70%, rgba(241,236,228,0.075), transparent 70%),
    radial-gradient(14vw 10vw at 58% 118%, rgba(255,255,255,0.075), transparent 70%); }
.diepte-achter .dichtbij { filter: blur(18px);
  background:
    radial-gradient(7vw 5vw at 88% 40%, rgba(255,255,255,0.075), transparent 70%),
    radial-gradient(9vw 6vw at 26% 12%, rgba(241,236,228,0.068), transparent 70%),
    radial-gradient(6vw 4vw at 46% 82%, rgba(255,255,255,0.068), transparent 70%),
    radial-gradient(8vw 5vw at 8% 140%, rgba(255,255,255,0.060), transparent 70%); }
.diepte-achter .vignet { inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%); }
.diepte-achter .korrel { inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }

/* blokken komen uit de diepte naar voren */
.diepte .opkomen { opacity: 0; transform: perspective(1100px) translate3d(0, 46px, -160px) rotateX(9deg);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.75,.2,1), box-shadow .5s ease;
  transition-delay: var(--vertraging, 0ms); }
.diepte .opkomen.in-beeld { opacity: 1; transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0); }

/* kaarten kantelen naar de muis, met een lichtglans en een diepere schaduw */
.diepte .card, .diepte .usp-garantie, .diepte .trust div { transform-style: preserve-3d; will-change: transform; }
.diepte .card.in-beeld, .diepte .usp-garantie.in-beeld, .diepte .trust div.in-beeld {
  transform: perspective(900px) rotateY(var(--kx, 0deg)) rotateX(var(--ky, 0deg)) translateZ(0); }
.diepte .kantelt { transition: transform .12s ease-out, box-shadow .3s ease !important;
  transform: perspective(900px) rotateY(var(--kx, 0deg)) rotateX(var(--ky, 0deg)) translateZ(8px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -30px rgba(0,0,0,.95), 0 18px 30px -18px rgba(0,0,0,.8) !important;
  border-color: rgba(255,255,255,.16) !important; }
.diepte .card { position: relative; }
.diepte .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.10), transparent 55%); transition: opacity .3s; }
.diepte .card.kantelt::before { opacity: 1; }
.diepte .card .card-img { transform: translateZ(14px); transition: transform .3s; }
.diepte .card.kantelt .card-img { transform: translateZ(22px); }
.diepte .card:hover { transform: none; }

/* gelaagde schaduw: elk vlak ligt echt boven de achtergrond */
.card, .usp-garantie, .trust div, .panel-note {
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 4px rgba(0,0,0,.4), 0 24px 50px -24px rgba(0,0,0,.9) !important; }

/* ============================================================
   KNOPPEN (wens Johan 26-10-2026): strakke rechthoeken, dunne rand, hoofdletters met 2px spatiëring,
   rustige kleurwissel bij aanwijzen. Op de donkere achtergrond is een rand van #1a1a1a onzichtbaar;
   die rand staat daarom op de lichte (crème) knoppen, de omlijnde knoppen krijgen een dunne lichte rand.
   ============================================================ */
.btn, .knop-creme, .knop-lijn, .cart-btn, .chip, .usp-garantie .btn, .btn.accent, .btn.ghost, .johan-reviews {
  border-radius: 0 !important; text-transform: uppercase; letter-spacing: 2px !important;
  font-size: 12px !important; font-weight: 500 !important; line-height: 1.2;
  box-shadow: none !important; filter: none !important; transform: none !important;
  transition: background-color .45s ease, color .45s ease, border-color .45s ease !important;
}
.btn, .knop-creme, .btn.accent, .usp-garantie .btn, .chip.active {
  background: #F1ECE4 !important; color: #111 !important; border: 1px solid #1a1a1a !important; padding: 15px 26px;
}
.btn:hover, .knop-creme:hover, .btn.accent:hover, .usp-garantie .btn:hover {
  background: transparent !important; color: #F1ECE4 !important; border-color: rgba(241,236,228,.7) !important; }
.knop-lijn, .btn.ghost, .cart-btn, .chip, .johan-reviews {
  background: transparent !important; color: #EDEDED !important; border: 1px solid rgba(255,255,255,.42) !important; }
.knop-lijn:hover, .btn.ghost:hover, .cart-btn:hover, .chip:not(.active):hover, .johan-reviews:hover {
  background: #F1ECE4 !important; color: #111 !important; border-color: #F1ECE4 !important; }
.chip { padding: 11px 18px !important; }
.cart-btn .cart-count { border-radius: 0 !important; letter-spacing: 0; }
.cart-btn { padding: 10px 14px !important; gap: 10px; white-space: nowrap; }
.nav-links { gap: 18px; }
.nav-links a { font-size: 14px; }
@media (max-width: 1500px) { header.site .brand .sub { display: none; } }
@media (max-width: 1180px) { .nav-links > a[href*="technischeserviceassen"] { display: none; } }
.cart-btn:hover .cart-count { background: #111 !important; color: #F1ECE4 !important; }
.btn:disabled { opacity: .4; }
/* overige knoppen: wel strak, niet in hoofdletters */
.finish, .iconbtn, .qty, .lint-pijlen button, .lint-vak .pijl, .detail-thumbs .thumb, .panel button, .input input, .input select, .input textarea, .card-img, .badge, .badge-korting {
  border-radius: 0 !important; }
.finish { transition: background-color .4s, color .4s, border-color .4s; }
.finish:hover { background: rgba(255,255,255,.06); }
.lint-pijlen button, .rv-pijl { transition: background-color .45s, color .45s; }
.lint-pijlen button:hover, .rv-pijl:hover { background: #F1ECE4 !important; color: #111 !important; }

/* ============================================================
   REVIEWS als minimalistische slider met grote aanhalingstekens
   ============================================================ */
.reviews { padding-top: 90px; padding-bottom: 90px; }
.rv-kop { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 18px; }
.rv-score { display: flex; align-items: baseline; gap: 12px; }
.rv-score b { font-size: 44px; font-weight: 200; color: #F2F2F2; letter-spacing: -.02em; }
.rv-score span { color: #8A8A8A; font-size: 14px; font-weight: 300; }
.rv-slider { position: relative; min-height: 340px; margin: 44px 0 34px; }
.rv-teken { position: absolute; left: -10px; top: -70px; font-family: Georgia, "Times New Roman", serif; font-size: 260px; line-height: 1;
  color: rgba(241,236,228,.14); pointer-events: none; user-select: none; }
.rv-baan { position: relative; }
.rv-dia { position: absolute; inset: 0 auto auto 0; margin: 0; padding: 30px 0 0 110px; max-width: 980px; opacity: 0; visibility: hidden;
  transform: translateY(18px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.75,.2,1), visibility 0s .9s; }
.rv-dia.actief { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .9s ease .15s, transform 1.1s cubic-bezier(.2,.75,.2,1) .15s, visibility 0s; }
.rv-dia blockquote { margin: 0; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.45; font-weight: 300; color: #ECECEC; letter-spacing: -.01em; }
.rv-dia figcaption { margin-top: 28px; display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.rv-naam { font-size: 15px; font-weight: 500; color: #F2F2F2; letter-spacing: .02em; }
.rv-naam::before { content: ""; display: inline-block; width: 34px; height: 1px; background: #F1ECE4; vertical-align: middle; margin-right: 14px; }
.rv-voet { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-left: 110px; }
.rv-knoppen { display: flex; align-items: center; gap: 14px; }
.rv-pijl { width: 46px; height: 46px; border-radius: 0; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #EDEDED; font-size: 16px; cursor: pointer; }
.rv-knoppen .mono { min-width: 64px; text-align: center; }
@media (max-width: 700px) {
  .rv-teken { font-size: 170px; top: -48px; left: -6px; }
  .rv-dia { padding: 46px 0 0 0; }
  .rv-voet { padding-left: 0; }
  .rv-kop { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rv-slider { min-height: 420px; }
}

/* ============================================================
   WAAR IK VOOR STA: vier waarden met sfeerbeelden (26-10-2026)
   ============================================================ */
.waarden { padding-top: 100px; }
.waarden-kop { display: grid; gap: 18px; margin-bottom: 46px; max-width: 820px; }
.waarden-kop h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; font-weight: 300; color: #F2F2F2; }
.waarden-kop h2 em { font-style: italic; font-weight: 200; color: #9A9A9A; }
.waarden-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.waarde { margin: 0; position: relative; overflow: hidden; aspect-ratio: 3 / 4.4; border: 1px solid rgba(255,255,255,.08); background: #111; }
.waarde-beeld { position: absolute; inset: -6% 0; }
.waarde-beeld img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2,.75,.2,1), filter 1.2s ease; filter: brightness(.86); }
.waarde:hover .waarde-beeld img { transform: scale(1.1); filter: brightness(1); }
.waarde::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,.55) 62%, rgba(10,10,10,.92) 100%); }
.waarde figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 26px 24px 28px; }
.waarde figcaption .mono { color: #C9C1B4; }
.waarde h3 { font-size: clamp(22px, 1.9vw, 30px); font-weight: 300; color: #F4F1EC; margin: 10px 0 10px; letter-spacing: -.02em; }
.waarde h3::after { content: ""; display: block; width: 34px; height: 1px; background: #F1ECE4; margin-top: 14px; transition: width .8s ease; }
.waarde:hover h3::after { width: 70px; }
.waarde p { margin: 0; color: #BDBDBD; font-size: 14px; font-weight: 300; line-height: 1.6; }
@media (max-width: 1000px) { .waarden-rij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .waarden-rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -18px; padding: 0 18px 8px; }
  .waarde { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ============================================================
   STARTPAGINA ZONDER PRODUCTFOTO'S (26-10-2026): lint met typografische kaarten
   ============================================================ */
.lint { padding-top: 90px; }
.lint-intro { display: grid; gap: 18px; margin-bottom: 30px; max-width: 900px; }
.lint-intro h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; font-weight: 300; color: #F2F2F2; }
.lint-intro h2 em { font-style: italic; font-weight: 200; color: #9A9A9A; }
.lint-vak { background: linear-gradient(150deg, #2c2c2c 0%, #1b1b1b 55%, #121212 100%) !important; }
.lint-vak .foto { display: none; }
.lint-vak .tag { position: absolute; right: 26px; top: 22px; color: #C9C1B4; }
.lint-vak .groot { position: absolute; right: 18px; bottom: -0.18em; font-size: clamp(120px, 15vw, 260px); line-height: 1; font-weight: 200;
  color: transparent; -webkit-text-stroke: 1px rgba(241,236,228,.16); letter-spacing: -.04em; pointer-events: none; }
.lint-vak .naam { width: 62% !important; font-size: clamp(30px, 3.4vw, 58px) !important; }
.lint-vak .naam small { font-size: 14px !important; max-width: 420px; }
.lint-vak .pijl { top: auto !important; bottom: 26px; left: auto !important; right: 26px; margin: 0 !important; z-index: 1; border-radius: 0 !important; }
.lint-vak::before { content: ""; position: absolute; left: 26px; right: 26px; top: 58px; height: 1px; background: rgba(255,255,255,.08); }
@media (max-width: 900px) {
  .lint-vak .naam { width: auto !important; left: 26px; right: 26px; bottom: 80px; font-size: 34px !important; }
  .lint-vak .pijl { display: grid !important; }
  .lint-vak .groot { font-size: 150px; }
}
.lint-intro { max-width: var(--maxw) !important; }
.lint-intro h2 { max-width: 900px; }
.lint .lint-plaat { height: clamp(320px, 30vw, 440px); }
@media (max-width: 900px) { .lint .lint-plaat { height: 440px; } }

/* ============================================================
   MENU (26-10-2026): zie menu.js
   ============================================================ */
header.site { transition: background-color .4s ease, border-color .4s ease; }
header.site .nav { transition: height .4s ease; }
header.site.mm-klein { background: rgba(14,14,14,.86) !important; border-bottom-color: rgba(255,255,255,.06) !important; }
header.site.mm-klein .nav { height: 60px; }
.brand .logo { letter-spacing: -.03em !important; font-weight: 400 !important; }
.nav-links { gap: 34px !important; align-items: center; }
.nav-links .mm-link { position: relative; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: 2.2px; color: #BDBDBD !important;
  border: 0 !important; padding: 26px 0 !important; transition: color .35s ease; display: inline-flex; align-items: center; gap: 8px; }
.nav-links .mm-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; background: #F1ECE4;
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.75,.2,1); }
.nav-links .mm-link:hover, .nav-links .mm-link.actief, .mm-drop:hover > .mm-link { color: #F4F1EC !important; }
.nav-links .mm-link:hover::after, .nav-links .mm-link.actief::after, .mm-drop:hover > .mm-link::after { transform: scaleX(1); }
header.site.mm-klein .nav-links .mm-link { padding: 19px 0 !important; }
header.site.mm-klein .nav-links .mm-link::after { bottom: 12px; }
.mm-pijl { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .35s; }
.mm-drop:hover .mm-pijl, .mm-drop:focus-within .mm-pijl { transform: rotate(225deg) translateY(-1px); }

/* uitklappanel assortiment */
.mm-paneel { position: absolute; left: 0; right: 0; top: 100%; visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.75,.2,1), visibility 0s .35s;
  background: rgba(16,16,16,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.mm-drop:hover .mm-paneel, .mm-drop:focus-within .mm-paneel { visibility: visible; opacity: 1; transform: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.75,.2,1), visibility 0s; }
.mm-binnen { max-width: var(--maxw); margin: 0 auto; padding: 38px 24px 44px; display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 40px; }
.mm-kolom { display: grid; align-content: start; gap: 12px; padding-right: 20px; border-right: 1px solid rgba(255,255,255,.06); }
.mm-kolom .mm-titel { font-size: 26px; font-weight: 300; color: #F2F2F2; letter-spacing: -.02em; margin: 2px 0 8px; }
.mm-kolom a:not(.mm-titel) { font-size: 14px; font-weight: 300; color: #A8A8A8; transition: color .3s, transform .3s; }
.mm-kolom a:not(.mm-titel):hover { color: #F1ECE4; transform: translateX(4px); }
.mm-johan { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(160deg, #262626, #181818); }
.mm-johan img { width: 64px; height: 64px; object-fit: cover; filter: grayscale(1); flex: none; }
.mm-johan p { margin: 8px 0 12px; color: #BDBDBD; font-size: 14px; font-weight: 300; line-height: 1.5; }
.mm-johan a { font-size: 12px; letter-spacing: 2px; color: #F1ECE4; border-bottom: 1px solid rgba(241,236,228,.4); padding-bottom: 3px; }

/* menuknop (telefoon en smalle schermen) */
.mm-knop { display: none; width: 46px; height: 42px; border: 1px solid rgba(255,255,255,.4); background: transparent; position: relative; cursor: pointer; }
.mm-knop span { position: absolute; left: 13px; right: 13px; height: 1px; background: #F2F2F2; transition: transform .45s cubic-bezier(.2,.75,.2,1), top .45s; }
.mm-knop span:first-child { top: 16px; } .mm-knop span:last-child { top: 24px; }
html.mm-open .mm-knop span:first-child { top: 20px; transform: rotate(45deg); }
html.mm-open .mm-knop span:last-child { top: 20px; transform: rotate(-45deg); }

/* scherm-menu */
.mm-scherm { position: fixed; inset: 0; z-index: 95; background: rgba(10,10,10,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility 0s .45s; overflow-y: auto; }
html.mm-open .mm-scherm { visibility: visible; opacity: 1; transition: opacity .45s ease, visibility 0s; }
.mm-scherm-binnen { min-height: 100%; display: flex; flex-direction: column; padding: 22px 22px 34px; }
.mm-scherm-kop { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mm-sluit { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #EDEDED; padding: 11px 16px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.mm-lijst { display: grid; margin: 18px 0 30px; }
.mm-groot { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; font-size: 22px; font-weight: 300; color: #F2F2F2; letter-spacing: -.02em;
  border-bottom: 1px solid rgba(255,255,255,.06); opacity: 0; transform: translateY(14px); }
.mm-groot .mono { font-size: 10px; }
.mm-sub { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 2px 0 12px 30px; opacity: 0; }
.mm-sub a { font-size: 14px; color: #9A9A9A; font-weight: 300; }
html.mm-open .mm-groot, html.mm-open .mm-sub { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--i) * 50ms + 80ms), transform .7s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 50ms + 80ms); }
.mm-scherm-voet { margin-top: auto; display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.mm-scherm-voet a { color: #F1ECE4; font-size: 15px; font-weight: 300; }

@media (max-width: 980px) {
  .nav-links { display: none !important; }
  .mm-knop { display: block; }
}
@media (min-width: 981px) { .mm-scherm { display: none; } }
@media (max-width: 600px) {
  .cart-btn { font-size: 0 !important; letter-spacing: 0 !important; padding: 10px 12px !important; gap: 0 !important; }
  .cart-btn::before { content: "Mandje"; font-size: 11px; letter-spacing: 2px; margin-right: 8px; }
}
.cart-btn .cart-count { font-size: 11px !important; }
.mm-paneel { background: #111 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.held-feiten span { max-width: 190px; display: block; }

/* ============================================================
   GARANTIE-BAND: 5 jaar op de complete Quooker (26-10-2026)
   ============================================================ */
.garantie-band { padding: 90px 0; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(241,236,228,.035), rgba(241,236,228,0)); }
.gb-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.gb-tekst h2 { font-size: clamp(32px, 3.8vw, 56px); line-height: 1.05; font-weight: 300; color: #F4F1EC; margin: 18px 0 22px; letter-spacing: -.03em; }
.gb-tekst h2 em { font-style: italic; font-weight: 200; color: #A8A8A8; }
.gb-tekst p { color: #BDBDBD; font-size: 17px; font-weight: 300; line-height: 1.7; max-width: 560px; }
.gb-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.gb-meter { padding: 34px 30px 30px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(160deg, #252525, #161616); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.gb-schaal { display: grid; grid-template-columns: repeat(5, 1fr) auto; font-family: var(--mono); font-size: 10px; color: #7A7A7A; letter-spacing: .1em; margin-bottom: 18px; }
.gb-schaal span:last-child { text-align: right; }
.gb-rij { margin-bottom: 26px; }
.gb-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; }
.gb-label b { font-size: 30px; font-weight: 200; color: #9A9A9A; }
.gb-johan .gb-label b { color: #F1ECE4; font-size: 44px; }
.gb-johan .gb-label .mono { color: #E7DFD3; }
.gb-balk { height: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 calc(20% - 2px), transparent calc(20% - 2px) 20%); position: relative; }
.gb-balk i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #6A6A6A; transition: width 1.6s cubic-bezier(.2,.75,.2,1) .2s; }
.gb-johan .gb-balk { height: 10px; }
.gb-johan .gb-balk i { background: linear-gradient(90deg, #CFC7BA, #F1ECE4); box-shadow: 0 0 24px rgba(241,236,228,.25); transition-delay: .5s; }
.gb-meter.in-beeld .gb-balk i, html:not(.diepte) .gb-balk i { width: var(--w); }
.gb-klein { margin: 4px 0 0; color: #8A8A8A; font-size: 13px; font-weight: 300; }
@media (max-width: 900px) { .gb-raster { grid-template-columns: 1fr; gap: 36px; } .garantie-band { padding: 64px 0; } }

/* Kranen: duidelijk wat de prijs omvat (melding 26-10-2026) */
.price s { white-space: nowrap; }
.prijs-uitleg { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); font-size: 13px; line-height: 1.5; color: #A8A8A8; font-weight: 300; }
.prijs-uitleg b { color: #F1ECE4; font-weight: 400; }
.prijs-soort { display: inline-block; margin: 0 0 10px; padding: 7px 12px; border: 1px solid rgba(241,236,228,.35); color: #F1ECE4; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.prijs-soort.los { background: #F1ECE4; color: #111; border-color: #F1ECE4; }

/* Brede schermen (27-10-2026): megamenu loopt gelijk met de rest (zelfde --maxw en zijmarge als .wrap) */
@media (min-width: 1280px) { .mm-binnen { padding-left: var(--zijmarge); padding-right: var(--zijmarge); } }