/* Auto Dries — huisstijl. Logo-blauw #354697, warme bg #f7f6f2. Mobiel-first. */

/* ---- Archivo (self-hosted, latin subset, OFL) — Cloud Design display/UI font.
   Eén variabel woff2 per gewicht-bestand; font-display: swap zodat de
   systeem-fallback direct rendert en er geen externe request nodig is. ---- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/archivo.woff2") format("woff2");
}

:root {
  --blue: #354697;
  --blue-dark: #26326c;
  --bg: #f7f6f2;
  --ink: #1a1a1a;
  --muted: #5b5b5b;
  --line: #e3e1d8;
  --card: #ffffff;
  --green: #1f7a3d;

  /* Type — Archivo als UI/display-font, systeemstack als fallback */
  --font-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* Cloud Design token-foundation — radius- en shadow-schaal.
     Conservatief toegevoegd naast bestaande waarden; alleen 1-op-1
     mappings waar het visueel niets verandert. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(14, 19, 32, 0.04), 0 1px 1px rgba(14, 19, 32, 0.03);
  --shadow-md: 0 8px 24px -12px rgba(14, 19, 32, 0.18),
    0 2px 6px rgba(14, 19, 32, 0.05);
  --shadow-lg: 0 24px 48px -24px rgba(14, 19, 32, 0.25);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background-color: var(--bg);
  line-height: 1.5;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Koppen — Archivo 800 met Cloud Design's signature tracking (-0.02em).
   Alleen font-family/gewicht/tracking; maten + spacing ongewijzigd. */
h1.page-title,
.detail-head h1,
.hk-head h2,
.empty h2,
.pin-title,
.form-title,
.form-subtitle {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* Zeer licht logo-watermark, één laag, deterministisch op iOS Safari
   (geen background-attachment: fixed — dat rendert iOS onbetrouwbaar). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(70vw, 520px) auto;
  opacity: 0.04;
}

a { color: var(--blue); }

/* ---- Header (sticky) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.site-header .bar {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  min-height: 44px;
}
.site-header a.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.site-header img.logo-img {
  height: 40px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 4px 8px;
}
.site-header .tagline {
  margin-left: auto;
  font-size: 0.9rem;
  opacity: 0.92;
}
.site-header a.hdr-tel {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
}

/* ---- Prominente logo-hero (home + detail) ---- */
.hero {
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* subtiele diagonale glans, nuchter — geen glossy AI-look */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 80% -10%,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}
.hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 16px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.hero-logo {
  width: auto;
  height: 132px;
  max-width: min(86vw, 360px);
  object-fit: contain;
  background: #fff;
  border-radius: 16px;
  padding: 14px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  display: block;
}
/* Gerbens volledige banner-logo: slogan + contactgegevens zitten al in het
   beeld, dus geen wit kaartje of extra padding — gewoon het logo, strak en
   scherp, met een zachte schaduw zodat het op de blauwe hero loskomt. */
.hero-logo.hero-banner {
  /* width:100% van de gepadde hero-inner -> kan nooit horizontaal overflowen,
     ongeacht viewport. De cap houdt het beeld op grotere schermen netjes. */
  height: auto;
  width: 100%;
  max-width: 420px;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
@media (min-width: 720px) {
  .hero-logo.hero-banner { width: 100%; max-width: 620px; height: auto; }
}
.hero-tag {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.96;
  max-width: 30ch;
}
.hero-compact .hero-inner {
  padding: 26px 16px 24px;
  gap: 12px;
}
.hero-compact .hero-logo {
  height: 92px;
  padding: 10px 18px;
}
.hero-compact .hero-tag {
  font-size: 1rem;
}
@media (min-width: 720px) {
  .hero-inner { padding: 56px 16px 48px; }
  .hero-logo { height: 168px; max-width: min(70vw, 460px); }
  .hero-tag { font-size: 1.3rem; max-width: none; }
}

/* ---- Contact-CTA: twee duidelijke knoppen (Bellen / WhatsApp) ---- */
.contact-cta {
  margin: 22px 0;
}
.hero .contact-cta { margin: 4px 0 0; width: 100%; max-width: 460px; }
.cb-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cb-btn {
  flex: 1 1 0;
  min-width: 140px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.08rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    background 0.12s ease;
}
.cb-btn:hover { transform: translateY(-2px); }
.cb-btn:active { transform: translateY(0); }
.cb-btn .cb-ico { flex: 0 0 auto; }
.cb-call { background: var(--blue); }
.cb-call:hover { box-shadow: 0 8px 22px rgba(53, 70, 151, 0.4); }
.cb-call:active { background: var(--blue-dark); }
.cb-wa { background: #25d366; color: #073a1c; }
.cb-wa:hover { box-shadow: 0 8px 22px rgba(37, 211, 102, 0.42); }
.cb-wa:active { background: #1faa53; }
.cb-num {
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
  margin: 12px 0 0;
}
.cb-num a { font-weight: 700; }
.contact-cta.on-dark .cb-num {
  color: rgba(255, 255, 255, 0.92);
}
.contact-cta.on-dark .cb-num a { color: #fff; }
.hero .cb-call {
  background: #fff;
  color: var(--blue-dark);
}
.hero .cb-call:active { background: #eef0f8; }

/* ---- Smalle telefoons: header netjes, knoppen niet afkappen ---- */
@media (max-width: 560px) {
  .site-header .tagline { display: none; }
  .site-header .bar { gap: 10px; }
}
@media (max-width: 430px) {
  .cb-btn { flex: 1 1 100%; }
}

/* ---- Layout ---- */
main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 0 96px;
}
.page-title,
.grid,
main > .empty {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
.detail-wrap { padding-left: 16px; padding-right: 16px; }
h1.page-title {
  font-size: 1.6rem;
  margin: 26px auto 18px;
  color: var(--blue-dark);
}

/* ---- Grid: 1 kolom telefoon -> 2 -> 3 ---- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 620px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ====================================================================
   Filterbalk (autosite-stijl) — native <select>'s in een GET-form,
   werkt zonder JS. Mobiel: nette inklapbare <details>-disclosure.
   Desktop: altijd-open inline rij (summary verborgen).
   ==================================================================== */
.filter {
  max-width: 1140px;
  margin: 0 auto 18px;
  padding-left: 16px;
  padding-right: 16px;
}
.filter-form { margin: 0; }
.filter-disclosure {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 10px rgba(38, 50, 108, 0.06);
  overflow: hidden;
}
.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 800;
  color: var(--blue-dark);
  list-style: none;
  user-select: none;
}
.filter-summary::-webkit-details-marker { display: none; }
.fs-label { display: inline-flex; align-items: center; gap: 8px; }
.fs-label::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--blue);
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E");
}
.fs-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fs-count::after {
  content: "\25BE";
  font-size: 0.8rem;
  color: var(--blue);
  transition: transform 0.2s ease;
}
.filter-disclosure[open] .fs-count::after { transform: rotate(180deg); }
.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 18px 0;
}
.ff { display: flex; flex-direction: column; gap: 6px; }
.ff label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.ff select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 11px 38px 11px 13px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background-color: #fff;
  border: 2px solid var(--line);
  border-radius: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23354697'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
}
.ff select:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(53, 70, 151, 0.18);
}
.filter-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px 18px;
}
.filter-go {
  flex: 1 1 auto;
  min-width: 160px;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(165deg, #3d4fa6 0%, var(--blue) 45%, #2b3a7d 100%);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(53, 70, 151, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.filter-go:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(53, 70, 151, 0.4); }
.filter-go:active { transform: translateY(0); }
.filter-clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.filter-clear:hover { border-bottom-color: var(--blue); }
.filter-count {
  margin: 12px 2px 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
}
.filter-empty { padding: 48px 16px; }

/* Desktop: paneel altijd open, één strakke inline rij, geen disclosure. */
@media (min-width: 760px) {
  /* JS zet op desktop [open]; dan verbergen we de summary en tonen we
     de strakke inline filterrij. Zonder JS blijft de summary een nette,
     klikbare "Filter & sorteer"-knop (graceful degradation). */
  .filter-disclosure[open] .filter-summary { display: none; }
  .filter-disclosure[open] {
    overflow: visible;
    padding: 16px 18px;
  }
  .filter-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 0;
  }
  .filter-actions {
    padding: 16px 0 0;
  }
  .filter-go { flex: 0 0 auto; min-width: 180px; }
}

/* ---- Auto-kaart ---- */
.car-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.car-card:hover {
  box-shadow: 0 6px 22px rgba(38, 50, 108, 0.16);
  transform: translateY(-2px);
}
.car-card .photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #ece9e0;
  overflow: hidden;
}
.car-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(160deg, #eceadf 0%, #e3e0d3 100%);
  color: var(--muted);
}
.no-photo {
  padding: 16px;
}
.no-photo .np-logo {
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 46%;
  object-fit: contain;
  opacity: 0.5;
}
.no-photo .np-text {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.car-card .photo .no-photo {
  position: absolute;
  inset: 0;
}
.car-card .body { padding: 14px 16px 18px; }
.car-card .title {
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--blue-dark);
}
.car-card .meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 12px;
}
.car-card .price {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--blue);
}

/* ---- Kenmerk-chips (Automaat / Airco) op de autokaart en detailpagina ---- */
.kenmerken {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kenmerk-chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue);
  background: #eef1f8;
  border: 1px solid #d6ddf0;
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---- Merk-chip rechtsonder op elke autofoto (public) ----
   Klein, strak wit hoek-chipje met het logo — premium dealer-look,
   leesbaar op lichte én donkere foto's. Blijft uit de buurt van de
   VERKOCHT-stempel (links-boven) en de "Nieuw binnen"-pill (rechts-boven). */
.brand-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(20, 28, 70, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.brand-chip .photo-logo {
  display: block;
  height: 34px;
  width: auto;
}
.car-card .photo .brand-chip { padding: 6px 10px; }
.car-card .photo .brand-chip .photo-logo { height: 30px; }
.carousel .brand-chip .photo-logo { height: 40px; }
.car-card.is-verkocht .brand-chip { opacity: 0.6; }
@media (min-width: 620px) {
  .brand-chip .photo-logo { height: 42px; }
  .car-card .photo .brand-chip .photo-logo { height: 34px; }
}

/* ---- "Nieuw binnen"-badge (foto-pill, rechtsboven) ----
   Warme accent-pill die past bij de huisstijl maar duidelijk anders is
   dan de groene RDW-badge en de rode VERKOCHT-stempel. Rechtsboven —
   uit de buurt van VERKOCHT (links-boven) en de logo-overlay
   (rechts-onder). */
.nieuw-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  background: linear-gradient(165deg, #d98a1f 0%, #c2731a 100%);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.nieuw-badge::before {
  content: "\2728";
  margin-right: 5px;
}
.car-card.is-verkocht .nieuw-badge { display: none; }

/* ---- "Speciale aanbieding"-badge (foto-pill, LINKSboven) ----
   Diep huisstijl-blauw verloop met een ster — duidelijk anders dan de
   amber "Nieuw binnen"-pill (rechtsboven), de groene RDW-badge en de
   rode VERKOCHT-stempel. Staat LINKSboven zodat hij nooit overlapt met
   "Nieuw binnen" rechtsboven; een auto kan dus beide pills tegelijk
   tonen zonder botsing. Uit de buurt van de logo-chip (rechtsonder).
   Bij een verkochte auto verbergen we hem (isSpeci geeft daar al false,
   dus dit is puur extra borging tegen de VERKOCHT-stempel linksboven). */
.speci-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  background: linear-gradient(165deg, #3d4fa6 0%, var(--blue) 50%, #2b3a7d 100%);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(20, 28, 70, 0.34);
  pointer-events: none;
}
.speci-badge::before {
  content: "\2605";
  margin-right: 5px;
}
.car-card.is-verkocht .speci-badge { display: none; }

/* UX-fix 2026-05-20: beide pills in één wrapper. Flex space-between
   + flex-wrap. Past het naast elkaar (brede mobiel-kaart) -> de
   bekende speci-links/nieuw-rechts look. Past het niet (smalle
   desktopkaart in 3-kol grid) -> ze breken netjes onder elkaar,
   geen overlap. Positie van .speci-badge/.nieuw-badge zelf wordt
   binnen de wrapper teruggezet naar static. */
.photo-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
}
.photo-badges .speci-badge,
.photo-badges .nieuw-badge {
  position: static;
  top: auto;
  left: auto;
  right: auto;
}
.car-card.is-verkocht .photo-badges { display: none; }

/* ---- RDW-badge (groen, vinkje) ---- */
.rdw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--green);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.rdw-badge::before { content: "\2713"; font-weight: 900; }

/* ---- VERKOCHT-stempel (diagonaal) ---- */
.verkocht-stempel {
  position: absolute;
  top: 22px;
  left: -54px;
  transform: rotate(-22deg);
  background: #b8232a;
  color: #fff;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 0.95rem;
  padding: 7px 64px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  z-index: 5;
  pointer-events: none;
}
.car-card.is-verkocht .photo img { filter: grayscale(0.55) brightness(0.92); }

/* ---- Detailpagina ---- */
.detail-wrap { max-width: 880px; margin: 24px auto 0; }
.carousel-shell {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #ece9e0;
  box-shadow: 0 6px 22px rgba(38, 50, 108, 0.14);
}
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel .slide {
  position: relative;
  scroll-snap-align: center;
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
}
.slide-open {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.carousel .slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 28, 70, 0.62);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.carousel-shell:hover .zoom-hint,
.slide-open:focus-visible .zoom-hint { opacity: 1; }
@media (hover: none) {
  .zoom-hint { opacity: 0.92; }
}
.zoom-hint::before { content: "\1F50D"; }
.carousel .no-photo {
  flex: 0 0 100%;
  aspect-ratio: 4 / 3;
}
.detail-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 18px 0 4px;
}
.detail-head h1 {
  font-size: 1.55rem;
  margin: 0;
  color: var(--blue-dark);
}
.detail-head .price {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--blue);
  margin-left: auto;
}
.spec-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  border-top: 1px solid var(--line);
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.spec-list li .k { color: var(--muted); }
.spec-list li .v { font-weight: 600; text-align: right; }
.omschrijving {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

/* ---- Sticky contact-bar (detail) ---- */
.contact-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--blue);
  display: flex;
  gap: 1px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
}
.contact-bar a {
  flex: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  background: var(--blue);
}
.contact-bar a:active { background: var(--blue-dark); }
.contact-bar a.wa { background: #1faa53; }
.contact-bar a.wa:active { background: #178a43; }
.contact-adres {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 22px 0 8px;
}

/* ---- Empty state ---- */
.empty {
  text-align: center;
  padding: 64px 16px;
  color: var(--muted);
}
.empty h2 { color: var(--blue-dark); margin-bottom: 8px; }

/* ---- Blije klanten — dealer "wall of happy customers" ---- */
.happy-klanten {
  max-width: 1180px;
  margin: 40px auto 8px;
  padding: 0 16px;
}
.hk-head {
  text-align: center;
  margin: 0 auto 20px;
  max-width: 640px;
}
.hk-head h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--blue-dark);
}
.hk-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}
.hk-shell {
  position: relative;
}
.hk-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px 10px;
  /* Peek van de volgende foto op mobiel: kaart < viewport. */
  scroll-padding-left: 16px;
}
.hk-track::-webkit-scrollbar { display: none; }
.hk-track:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 16px;
}
.hk-slide {
  position: relative;
  flex: 0 0 78%;
  max-width: 360px;
  margin: 0;
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: #ece9e0;
  box-shadow: 0 6px 22px rgba(38, 50, 108, 0.14);
}
.hk-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Kleine, smaakvolle logo-chip rechtsONDER met een zachte gradient die
   alleen de onderrand raakt — nooit over gezichten. */
.hk-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  padding: 5px 10px;
  box-shadow: 0 2px 8px rgba(38, 50, 108, 0.22);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hk-chip img {
  height: 18px;
  width: auto;
  display: block;
}
.hk-slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 88px;
  background: linear-gradient(
    to top,
    rgba(20, 28, 70, 0.22),
    rgba(20, 28, 70, 0)
  );
  pointer-events: none;
}
.hk-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue-dark);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(38, 50, 108, 0.22);
  align-items: center;
  justify-content: center;
}
.hk-arrow:hover { background: #fff; }
.hk-arrow:active { transform: translateY(-50%) scale(0.96); }
.hk-prev { left: -8px; }
.hk-next { right: -8px; }
@media (min-width: 620px) {
  .hk-slide { flex-basis: 42%; }
}
@media (min-width: 900px) {
  .hk-head h2 { font-size: 1.8rem; }
  .hk-slide { flex-basis: 30%; }
  .hk-arrow { display: flex; }
  .hk-track { scroll-padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-track { scroll-behavior: auto; }
}

/* ---- Footer ---- */
.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 28px 16px 12px;
}

/* Tap targets: alle interactieve elementen >=44px (zie header/contact-bar). */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
}

/* ====================================================================
   BEHEER (Gerben — mobiel, op de bank, grote tap-targets)
   ==================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  padding: 14px 18px;
  min-height: 52px;
  width: 100%;
}
.btn:active { background: var(--blue-dark); }
.btn-big { min-height: 56px; font-size: 1.1rem; }

/* ---- Samenhangende blauw/gradient admin-knoppen (/beheer) ----
   Alles in de huisstijl-blauwe familie. Primair = zelfverzekerd blauw
   verloop met subtiele glans. State/secundair = rustige blauw-tinten,
   onderling onderscheidend via vulling vs. ghost-outline (geen groen/
   goud). Nuchter, premium-simpel — net als de publieke kant. */
.btn-add {
  background: linear-gradient(165deg, #3d4fa6 0%, var(--blue) 45%, #2b3a7d 100%);
  box-shadow: 0 4px 14px rgba(53, 70, 151, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-add:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(53, 70, 151, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn-add:active { transform: translateY(0); background: linear-gradient(165deg, #2b3a7d 0%, var(--blue-dark) 100%); }

/* "Verkocht" — gevulde, gedempte blauw-tint (de actieve toggle-actie). */
.btn-sold {
  background: #5b67a3;
  box-shadow: 0 2px 8px rgba(53, 70, 151, 0.22);
}
.btn-sold:hover { background: #515c95; }
.btn-sold:active { background: var(--blue-dark); }

/* "Terug te koop" — ghost/outline binnen dezelfde familie: visueel de
   tegenpool van "Verkocht" zodat de toggle-relatie meteen duidelijk is. */
.btn-reopen {
  background: #eef0f8;
  color: var(--blue-dark);
  border: 2px solid #b7bfe0;
  box-shadow: none;
}
.btn-reopen:hover { background: #e3e7f4; }
.btn-reopen:active { background: #d6dcef; }

/* "Wijzigen" — neutrale blauw-grijze ghost, duidelijk apart van beide. */
.btn-edit {
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: none;
}
.btn-edit:hover { background: #f3f5fc; }
.btn-edit:active { background: #e7ebf8; }

/* "Deel op Facebook" — herkenbaar Facebook-blauw, binnen de knop-familie. */
.btn-fb {
  background: #1877f2;
  color: #fff;
  border: 2px solid #1877f2;
}
.btn-fb:hover { background: #1466d6; border-color: #1466d6; }
.btn-fb:active { background: #1059be; }

/* ---- Facebook-conceptpagina ---- */
.fb-sub { color: var(--blue-dark); font-weight: 600; margin: 0 0 14px; }
.fb-fotos {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px;
}
.fb-fotos img {
  width: 90px; height: 68px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line);
}
.fb-textarea {
  width: 100%; font: 1.02rem/1.5 system-ui, sans-serif; padding: 14px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card);
  resize: vertical; margin-bottom: 12px;
}
.fb-waarschuwing {
  background: #fff8e6; border: 1px solid #f0d28a; border-radius: 12px;
  padding: 12px 14px; color: #7a5a00; margin: 0 0 14px;
}
.fb-gedeeld {
  background: #eef9f1; border: 1px solid #bfe6cc; border-radius: 12px;
  padding: 12px 14px; color: #2f5d40; margin: 0 0 14px;
}
.btn-big:disabled { opacity: .5; cursor: not-allowed; }

/* "Haal 'nieuw binnen' eraf" — kleine, rustige ghost binnen de familie;
   secundair t.o.v. de hoofdacties, niet schreeuwerig. */
.btn-nieuw-af {
  background: transparent;
  color: var(--blue);
  border: 1.5px dashed #b7bfe0;
  box-shadow: none;
  min-height: 48px;
  font-size: 0.98rem;
  font-weight: 700;
}
.btn-nieuw-af:hover { background: #f3f5fc; }
.btn-nieuw-af:active { background: #e7ebf8; }

.btn-danger { background: #b3261e; }
.btn-danger:active { background: #8c1a14; }
.link-btn {
  background: none;
  border: 0;
  color: var(--blue);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
}

.admin-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}
/* Groene bevestiging na een actie (flash). Duidelijk zichtbaar voor Gerben. */
.admin-flash {
  background: #eef9f1;
  border: 1px solid #bfe6cc;
  color: #0a7d33;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 1.05rem;
}
.admin-list { list-style: none; padding: 0; margin: 20px 0 0; }
.admin-car {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  margin-bottom: 14px;
}
.admin-car.is-verkocht { opacity: 0.7; }
.admin-car-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.admin-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-thumb-empty img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.28;
}
.admin-car-info { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.admin-car-titel { font-weight: 700; font-size: 1.1rem; }
/* Kenteken-pill: alleen in /beheer (nooit publiek). Strak, monospace,
   geel-getint zoals een echte NL-kentekenplaat maar rustig/op-merk. */
.admin-car-plate {
  align-self: flex-start;
  display: inline-flex;
  align-items: stretch;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  color: #111;
  background: #f6cf18;
  border: 1px solid #c9a400;
  border-radius: var(--r-sm);
  padding: 3px 10px 3px 24px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.18);
  text-transform: uppercase;
}
/* Blauwe EU/NL-band links, zoals een echte kentekenplaat */
.admin-car-plate::before {
  content: "NL";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 17px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
  background: #2a3da3;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 5px 0 0 5px;
}
.admin-car-prijs { color: var(--muted); }
/* Aftelling bij een verkochte auto: "verdwijnt over 9 dagen vanzelf van de
   site". Rustig maar leesbaar op de bank — geen alarmkleur, want het is
   normaal gedrag, en Gerben kan hem altijd terugzetten op te koop. */
.admin-car-verdwijnt {
  display: block;
  margin-top: 2px;
  color: #8a5a00;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- Zoekbalk op /beheer (Gerben, mobiel) ---- */
.admin-zoek {
  display: flex;
  gap: 10px;
  margin: 14px 0 6px;
}
.admin-zoek-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  font-size: 1.05rem;
  border: 2px solid #c9cfe8;
  border-radius: 12px;
  background: #fff;
  color: var(--blue-dark);
}
.admin-zoek-input:focus {
  outline: none;
  border-color: var(--blue);
}
.btn-zoek {
  flex: 0 0 auto;
  width: auto;
  padding: 14px 20px;
}
.admin-zoek-tel {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 14px;
}
.admin-zoek-tel a { color: var(--blue); }

/* "Maak speciale aanbieding" — ghost binnen de blauw-familie; in actieve
   ("eraf") staat een gevulde blauw-tint zodat de toggle-status meteen
   leesbaar is. Onderscheidend van nieuw-af (gestippeld) en edit. */
.btn-aanbieding {
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: none;
  min-height: 48px;
  font-size: 0.98rem;
}
.btn-aanbieding:hover { background: #f3f5fc; }
.btn-aanbieding:active { background: #e7ebf8; }
.btn-aanbieding.is-on {
  background: #5b67a3;
  color: #fff;
  border-color: #5b67a3;
}
.btn-aanbieding.is-on:active { background: var(--blue-dark); }
.admin-car-acties { display: flex; flex-direction: column; gap: 10px; }
.admin-car-acties form { margin: 0; }
.admin-empty { text-align: center; color: var(--muted); padding: 40px 0; }

.pin-wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 48px 20px;
  text-align: center;
}
.pin-title { color: var(--blue-dark); }
.pin-error, .form-error {
  background: #fde8e7;
  color: #8c1a14;
  border-radius: var(--r-md);
  padding: 12px;
  margin: 12px 0;
}
/* Rode rand om een foutief ingevuld veld + melding eronder, zodat Gerben
   ziet WELK veld fout is, niet alleen DAT er iets fout is. */
.is-fout {
  border-color: #c0392b !important;
  background: #fdf3f2 !important;
}
.veld-fout {
  color: #8c1a14;
  font-weight: 700;
  font-size: 0.95rem;
  margin: -2px 0 10px;
}
.pin-form { display: flex; flex-direction: column; gap: 14px; }
.pin-form label, .big-label {
  text-align: left;
  font-weight: 700;
  margin-top: 6px;
}
.pin-input {
  width: 100%;
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: 0.3em;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
}
.pin-form button { width: 100%; }
.pin-fallback { margin-top: 28px; color: var(--muted); font-size: 0.95rem; }

.form-wrap { max-width: 640px; }
.form-title { color: var(--blue-dark); margin: 12px 0 8px; }
.form-subtitle { color: var(--blue-dark); margin: 22px 0 6px; }
.form-screen { display: flex; flex-direction: column; gap: 6px; }
.form-screen input,
.form-screen textarea,
.form-screen select,
.form-wrap input,
.form-wrap textarea,
.form-wrap select {
  font-size: 1.1rem;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  width: 100%;
  background: var(--card);
  margin-bottom: 8px;
}
.big-input { font-size: 1.25rem; }
.form-screen label, .form-wrap label { font-weight: 600; margin-top: 6px; }
.form-screen .btn, .form-wrap .btn { margin-top: 10px; }
.rdw-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  margin: 14px 0;
}
.rdw-card-title { font-size: 1rem; color: var(--blue-dark); margin: 0 0 10px; }
.rdw-status { color: var(--muted); min-height: 1.4em; margin: 6px 0; }
.file-input { padding: 12px; }
.previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.preview-thumb,
.edit-photo img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.edit-photos-section { margin: 8px 0 4px; }
.edit-photos { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.edit-photo {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
}
.edit-photo.is-hoofd { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(53, 70, 151, 0.18); }
.edit-photo-img { position: relative; }
.edit-photo-img img {
  width: 96px;
  height: 72px;
  object-fit: contain;
  background: #ece9e0;
  border-radius: 7px;
  display: block;
}
.edit-photo-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--blue);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: var(--r-sm);
}
.edit-photo-order { display: flex; flex-wrap: wrap; gap: 10px; }
.edit-photo-order form { margin: 0; flex: 1 1 auto; }
.edit-photo-nudge { display: flex; gap: 10px; flex: 1 1 100%; }
.edit-photo-nudge form { flex: 1; }
/* Senior-vriendelijke tap-targets: ruime knoppen, leesbare tekst (was 40px/0.86rem). */
.btn-order {
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: none;
  min-height: 52px;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 14px;
}
.btn-order:hover { background: #f3f5fc; }
.btn-order:active { background: #e7ebf8; }
.btn-order-primary {
  background: linear-gradient(165deg, #3d4fa6 0%, var(--blue) 45%, #2b3a7d 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 14px rgba(53, 70, 151, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn-order-primary:active { background: var(--blue-dark); }
.edit-photo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #eef0f8;
  color: var(--blue-dark);
  border: 2px solid #b7bfe0;
  border-radius: 12px;
  font-weight: 700;
  min-height: 48px;
  padding: 12px;
}
.edit-photo-acties { display: flex; flex-direction: column; gap: 10px; }
.edit-photo-del-form { margin: 0; }
.btn-order-del {
  width: 100%;
  min-height: 52px;
  color: #9a3a2f;
  border-color: #d8b3ad;
  background: #fdf6f4;
}
.btn-order-del:hover { background: #faece8; }
.btn-order-del:active { background: #f3ddd6; }
.edit-photo-showroom-form { margin: 0; }
.btn-order-showroom {
  width: 100%;
  min-height: 44px;
  color: var(--blue-dark);
  border-color: #b7bfe0;
  background: #f3f5fc;
}
.btn-order-showroom:hover { background: #e9edf9; }
.btn-order-showroom:active { background: #dde3f4; }
/* #16 — Showroom-beoordeelpagina: origineel vs resultaat. */
.showroom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 16px 0 22px;
}
@media (min-width: 720px) {
  .showroom-grid { grid-template-columns: 1fr 1fr; }
}
.showroom-fig { margin: 0; }
.showroom-fig figcaption {
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 6px;
}
.showroom-fig img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 2px solid #e3e6f1;
  background: #fff;
  display: block;
}
.muted-note { color: var(--muted); }
/* #18 — Wacht-overlay bij plaatsen op Facebook. Verschijnt zodra op
   "Plaats op Facebook" wordt geklikt en blokkeert het scherm (voorkomt
   dubbel posten), met een draaiend rondje en geruststellende tekst,
   want het uploaden van alle foto's duurt even. Staat vóór .js-hidden
   zodat de overlay bij start verborgen blijft. */
.fb-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(247, 246, 242, 0.94);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.fb-bezig-box {
  max-width: 380px; text-align: center;
  background: #fff; border: 1px solid #e3e6f1; border-radius: 16px;
  padding: 30px 26px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.fb-spinner {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border: 6px solid #e3e6f1; border-top-color: var(--blue);
  border-radius: 50%; animation: fb-spin 0.9s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }
.fb-overlay h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--blue); }
.fb-overlay p { margin: 0; color: #4a5568; font-size: 1rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .fb-spinner { animation: none; } }
/* #17 — Elementen die pas nut hebben mét JS; no-JS verbergt ze. JS
   onthult de knop via classList.remove("js-hidden"). */
.js-hidden { display: none; }
/* #17 — Kenteken-foto-knop: subtiel accent, scheidt 'm van de RDW-knop. */
.btn-kenteken-foto {
  background: #f3f5fc;
  color: var(--blue-dark);
  border: 2px solid #b7bfe0;
  box-shadow: none;
  margin-top: 8px;
}
.btn-kenteken-foto:hover { background: #e9edf9; }
.btn-kenteken-foto:active { background: #dde3f4; }
.danger-form { margin-top: 28px; }

/* "Blije klanten"-beheerblok (slider-bron). Compacte galerij: kleine
   vierkante thumbs met een klein, ≥44px verwijder-knopje eronder. */
.bk-beheer { margin-top: 32px; border-top: 2px solid #e6e8f4; padding-top: 18px; }
.bk-add-form { margin: 12px 0 20px; }
.bk-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}
.bk-thumb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  cursor: pointer;
  margin: 0;
}
.bk-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #e6e8f4;
  display: block;
}
/* Aangevinkte thumb duidelijk oplichten zodat Gerben ziet wat weg gaat. */
.bk-thumb:has(input:checked) img { border-color: #d33; }
.bk-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 6px;
}
.bk-check input {
  width: 24px;
  height: 24px;
  flex: none;
  accent-color: #d33;
}
.bk-check-label { font-size: 0.95rem; color: #333; }
.bk-del-form { margin: 0; }
.bk-del-btn { margin-top: 14px; }
.btn-plus {
  display: inline-block;
  color: #fff;
  font-weight: 900;
  font-size: 1.2em;
  line-height: 1;
  margin-right: 4px;
}

/* ===================================================================
   Herontwerp publieke front-end — mini-contact, carrousel-controls,
   lightbox. JS-contract: site.js togglet .is-visible (.mini-contact),
   .is-open (.lightbox), .is-active (.carousel-dot/.lightbox-img).
   =================================================================== */

/* ---- Slank sticky mini-balkje: schuift in na de hero ---- */
.mini-contact {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%);
  box-shadow: 0 4px 16px rgba(20, 28, 70, 0.32);
  transform: translateY(-110%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.mini-contact.is-visible { transform: translateY(0); }
.mini-logo { display: flex; align-items: center; }
.mini-logo img {
  display: block;
  height: 26px;
  width: auto;
  background: #fff;
  border-radius: 5px;
  padding: 3px 7px;
}
.mini-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.mini-call,
.mini-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  color: #fff;
}
.mini-call { background: #fff; color: var(--blue-dark); }
.mini-call:active { background: #eef0f8; }
.mini-wa { background: #25d366; color: #073a1c; }
.mini-wa:active { background: #1faa53; }
.mini-call .cb-ico,
.mini-wa .cb-ico { width: 18px; height: 18px; }
@media (max-width: 380px) {
  .mini-call span,
  .mini-wa span { display: none; }
  .mini-call,
  .mini-wa { padding: 0 12px; }
}

/* ---- Carrousel-controls: pijltjes, dots, swipe-hint ---- */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue-dark);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20, 28, 70, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-arrow:hover { background: #fff; }
.carousel-arrow:active { transform: translateY(-50%) scale(0.94); }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 7px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.carousel-dot.is-active {
  width: 22px;
  background: #fff;
}
.swipe-hint {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 28, 70, 0.55);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 999px;
  pointer-events: none;
  animation: swipe-fade 4.5s ease forwards;
}
.swipe-hint::after { content: " \2194"; }
.swipe-hint-single::after { content: ""; }
@keyframes swipe-fade {
  0%, 70% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* ---- Lightbox (foto vergroten) ---- */
html.has-lightbox { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 30, 0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 12px;
}
.lightbox-img {
  display: none;
  max-width: 96vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-img.is-active { display: block; }
.lightbox-close,
.lightbox-arrow {
  position: absolute;
  z-index: 2;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox-close {
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  font-size: 1.7rem;
  line-height: 1;
}
.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-close:hover,
.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.26); }
@media (min-width: 620px) {
  .lightbox-close { width: 52px; height: 52px; }
  .lightbox-arrow { width: 56px; height: 56px; }
}

/* ---- Gerben hoek-mascotte (links-onder) + bezoeker-×-knopje ----
   Of de mascotte überhaupt in de HTML zit bepaalt de zaakbrede admin-
   setting 'gerben_mascotte' (migratie 0005). De bezoeker kan hem
   daarnaast zelf wegklikken met de kleine × (site.js / localStorage),
   die zet .gerben-wrap weer op [hidden]. */
.gerben-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 70;
  pointer-events: none;
  animation: gm-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gerben-wrap[hidden] { display: none; }
@keyframes gm-in {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gerben-wrap { animation: none; }
}
.gerben-mascotte { position: relative; display: block; }
.gm-img {
  width: auto;
  height: 150px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(20, 28, 70, 0.28));
  pointer-events: none;
  user-select: none;
}
/* Kleine, smaakvolle ×-sluitknop. Rechtsboven de cutout — bewust niet
   over Gerbens gezicht, subtiel cirkeltje. ≥44px tikdoel via padding-box,
   visueel klein. Per-bezoeker wegklikken (localStorage ad_gerben_x). */
.gm-x {
  pointer-events: auto;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px; /* vergroot het tikdoel tot ~44px zonder visuele groei */
  box-sizing: content-box;
  border: 0;
  border-radius: 999px;
  background: rgba(53, 70, 151, 0.82);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(20, 28, 70, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.gm-x:hover { background: var(--blue); }
.gm-x:active { background: var(--blue-dark); }
@media (max-width: 560px) {
  .gm-img { height: 104px; }
}
@media (max-width: 380px) {
  .gm-img { height: 92px; }
}

/* ---- Admin: zaakbrede Gerben aan/uit-knop ---- */
.gerben-setting {
  margin-top: 32px;
  border-top: 2px solid #e6e8f4;
  padding-top: 18px;
}
.btn-gerben {
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: none;
  min-height: 48px;
  font-size: 0.98rem;
}
.btn-gerben:hover { background: #f3f5fc; }
.btn-gerben:active { background: #e7ebf8; }
.btn-gerben.is-on {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-gerben.is-on:active { background: var(--blue-dark); }

/* ====================================================================
   Cloud Design DESKTOP-LAAG (taak #14 — F2 showroom, F3 detail,
   F4 beheer-shell). ALLES media-query-gated op >=1024px. Mobiel <1024
   krijgt NIETS hiervan -> de huidige, demo-bewezen mobiele site blijft
   exact zoals hij is. Eén codebase, geen device-detectie, geen
   markup-duplicatie: dezelfde server-HTML, alleen CSS herschikt.
   ==================================================================== */

/* --- F4: zij-navigatie standaard verborgen (mobiel = lean app). --- */
.admin-side { display: none; }

@media (min-width: 1024px) {
  /* main is mobiel op 1140px gecapt; op desktop iets ruimer zodat de
     showroom-/detail-containers (1240/1200) hun breedte echt krijgen. */
  main { max-width: 1240px; }

  /* ---------------- F2 — Desktop "Showroom" ---------------- */
  /* filter (sticky sidebar) + autogrid naast elkaar. */
  .showroom {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
  }
  h1.page-title { max-width: 1240px; padding: 0 24px; }

  /* Filter wordt het linker sticky paneel; eigen centrering/breedte
     opheffen, het blijft meescrollen tot bovenin. */
  .showroom > .filter {
    max-width: none;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 16px;
  }
  /* In de smalle sidebar: velden onder elkaar i.p.v. de 5-koloms
     tablet-rij. (JS zet [open]; zonder JS blijft de summary-knop —
     nette graceful degradation, net als nu.) */
  .showroom > .filter .filter-disclosure[open] { padding: 20px; }
  .showroom > .filter .filter-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .showroom > .filter .filter-actions {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 0 0;
  }
  .showroom > .filter .filter-go { flex: 1 1 auto; min-width: 0; }
  .showroom > .filter .filter-count { display: none; }

  /* Autogrid: eigen centrering opheffen, vult de rechter kolom.
     2 kaarten naast elkaar; vanaf 1280 drie (zie verderop). */
  .showroom > .grid {
    max-width: none;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .showroom > .empty,
  .showroom > .filter-empty {
    max-width: none;
    margin: 0;
    grid-column: 2;
  }
  .car-card { transition: box-shadow .15s ease, transform .15s ease; }
  .car-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -16px rgba(14, 19, 32, .28);
  }

  /* ---------------- F3 — Desktop detailpagina ---------------- */
  .detail-wrap { max-width: 1200px; }
  .detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: 32px;
    align-items: start;
  }
  .detail-gallery { min-width: 0; }
  /* Samenvatting/prijspaneel: rechts, sticky, op een eigen kaart. */
  .detail-summary {
    position: sticky;
    top: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: 0 2px 10px rgba(38, 50, 108, .06);
  }
  .detail-summary .detail-head { margin-top: 0; }
  .detail-summary .contact-cta { margin-top: 4px; }

  /* ---------------- F4 — Desktop beheer-shell ---------------- */
  .admin-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }
  .admin-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding: 24px 16px;
    background: var(--card);
    border-right: 1px solid var(--line);
  }
  .admin-side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--blue-dark);
    letter-spacing: -0.02em;
    padding: 4px 8px 18px;
  }
  .admin-side-brand img { border-radius: 8px; }
  .admin-side-nav { display: flex; flex-direction: column; gap: 4px; }
  .admin-side-link {
    display: block;
    padding: 12px 14px;
    border-radius: var(--r-md);
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
  }
  .admin-side-link:hover { background: #f3f5fc; }
  .admin-side-link.is-active {
    background: var(--blue);
    color: #fff;
  }
  .admin-side-site {
    margin-top: auto;
    padding: 12px 14px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
  }
  .admin-side-site:hover { text-decoration: underline; }
  /* Inhoud krijgt wat meer ademruimte dan de smalle mobiele kolom. */
  .admin-content .admin-wrap,
  .admin-content .form-wrap { max-width: 820px; }
  .admin-content { padding: 8px 0 40px; }
}

/* Vanaf 1280px past een derde kaartkolom comfortabel in de showroom. */
@media (min-width: 1280px) {
  .showroom > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}