/* ──────────────────────────────── */
/* Variables & Themes                   */
/* ──────────────────────────────── */
:root {
  --btn-h: 56px;
  --top-offset: 60px;
  --bottom-offset: 60px;

  /* Color Variables */
  --bg: #f5f7fa;
  --fg: #222;
  --card: #fff;
  --primary: #007aff;

  /* Shadow & Radius Variables */
  --radius: 16px;
  --shadow-light: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-strong: 0 8px 24px rgba(0,0,0,0.2);
}

[data-theme="dark"] {
  --bg: #121212;
  --fg: #eee;
  --card: #1e1e1e;
  --primary: #0a84ff;
  --shadow-light: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-strong: 0 8px 24px rgba(0,0,0,0.5);
}

/* ──────────────────────────────── */
/* Reset & Base                          */
/* ──────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ──────────────────────────────── */
/* App Container                        */
/* ──────────────────────────────── */
#app {
  position: absolute;
  top: var(--top-offset);
  bottom: var(--bottom-offset);
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;
}

/* ──────────────────────────────── */
/* Swipe Card                            */
/* ──────────────────────────────── */
#card-container {
  position: relative;
  width: 90%;
  max-width: 400px;
  height: 100%;
  margin: 0 auto;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: calc(var(--btn-h) + var(--bottom-offset));
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease-out, opacity .3s ease-out;
}

/* ──────────────────────────────── */
/* Photo Section                         */
/* ──────────────────────────────── */
.photo-container {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
@media (min-aspect-ratio: 4/3) {
  .photo {
    width: 100%;
    height: auto;
  }
}

.photo-container .photo-toggle,
.photo-container .heart-toggle {
  position: absolute;
  top: 8px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s, color .2s;
}
.photo-container .photo-toggle { left: 8px; }
.photo-container .heart-toggle { right: 8px; color: #aaa; }
.photo-container .heart-toggle:hover { background: rgba(255,255,255,1); }
.photo-container .heart-toggle.favorited { color: #e74c3c; }
.heart-toggle {
  font-size: 1.5rem;     /* grotere icoon-grootte */
  width: 2rem;           /* optioneel: ruimere klikzone */
  height: 2rem;          /* optioneel: ruimere klikzone */
  line-height: 2rem;     /* centreert het hart symbool */
  padding: 0;            /* zorg dat er geen extra padding scheef trekt */
  display: inline-flex;  /* voor perfecte centrering */
  align-items: center;
  justify-content: center;
}
/* Photo default & zoomed */
.card .photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f0f0f0;
  transition: object-fit .2s ease;
}
.card .photo.zoomed {
  object-fit: cover;
}

/* ──────────────────────────────── */
/* Info Below Photo                     */
/* ──────────────────────────────── */
.info {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 120px;
}
.info .logo { height: 80px; }
/* B1: multi-boot CTA als geintegreerde premium pill i.p.v. kale link.
   Hergebruikt de bestaande .vendor-cta kleuren/vorm voor merkconsistentie. */
.info .b1-multiboot-cta {
  flex: 1 0 100%;
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  margin-top: 4px;
  padding: 0 16px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: filter .15s ease, transform .1s ease;
}
.info .b1-multiboot-cta::after {
  content: '→';
  font-weight: 700;
}
.info .b1-multiboot-cta:hover,
.info .b1-multiboot-cta:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.info .b1-multiboot-cta:active { transform: scale(.98); }
.info .text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
}
.info .title {
  font-size: 1.2rem;
  font-weight: bold;
  min-width: 0;
  width: 100%;
}
/* Boottitel is een getrackte klik-out naar de aanbieder (zelfde bestemming als het logo). */
a.title-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.title-link:hover,
a.title-link:focus-visible { text-decoration: underline; }
.info .meta-line {
  font-size: 0.95rem;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0;
}
.info .categorie,
.info .location { font-size: 0.95rem; color: #555; }
.info .meta-sep { color: #94a3b8; padding: 0 4px; }
.info .price   { margin-top:6px; font-size:1.1rem; color: #28a745; font-weight:bold; align-self: flex-end; }
.vendor-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
}
.logo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 72px;
}
.logo-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.logo-link .logo { transition: filter .2s, transform .2s; }
.logo-link:hover .logo,
.logo-link:focus-visible .logo { filter: brightness(1.08); transform: scale(1.04); }
/* 11 aug 2026: een boot zonder werkende aanbiederslink rendert in appdb.js
   (r320-322) een <span class="logo-link no-vendor-hint">, dus GEEN link, maar
   erfde wel de pointer-cursor en het hover-effect van .logo-link. Het logo zag
   er daardoor even klikbaar uit als bij een boot mét werkende link. CSS-only
   correctie: geen valse klik-affordance meer op het dode logo. */
.logo-link.no-vendor-hint { cursor: default; }
.logo-link.no-vendor-hint:hover .logo,
.logo-link.no-vendor-hint:focus-visible .logo { filter: none; transform: none; }

/* ──────────────────────────────── */
/* Action Buttons (Bottom)               */
/* ──────────────────────────────── */
.buttons {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  display: flex;
  justify-content: space-between;
}
.buttons button {
  flex: 1;
  margin: 0 4px;
  height: var(--btn-h);
  border: none;
  border-radius: calc(var(--radius) * 1.75);
  box-shadow: var(--shadow-light);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow .2s, transform .1s;
}
.buttons button:hover { filter: brightness(1.1); }
.buttons button:active {
  box-shadow: var(--shadow-strong);
  transform: translateY(1px);
}
#skip  { background: #d9534f; }
#share { background: #25D366; }
#like  { background: var(--primary); }

/* ──────────────────────────────── */
/* Header & Menu                        */
/* ──────────────────────────────── */
.header-bar {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* was row-reverse (uit de tijd dat dit nog een klein pilletje rechtsboven was).
     De balk is nu volle breedte, dus row-reverse spiegelde hem: hamburger dreef
     naar het midden/links en verschoof mee met kruimelpad, push-bel en
     installeer-knop. Mobiel stond dit al op row. */
  flex-direction: row;
  z-index: 1001;
}
/* Acties (profiel + hamburger) staan altijd hard rechts, ongeacht of het
   kruimelpad, de push-bel of de installeer-knop zichtbaar is. */
.header-bar .top-breadcrumb { order: 0; }
.header-bar #push-container,
.header-bar .install-button { order: 50; }
.header-bar .header-actions { order: 99; margin-left: auto; }
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 25px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.hamburger .line {
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: background-color .2s;
}
.hamburger:hover .line { background-color: var(--primary); }
.menu {
  position: fixed;
  top: 0; right: -100%;
  width: 200px; height: 100vh;
  background: var(--card);
  box-shadow: -2px 0 10px rgba(0,0,0,0.2);
  transition: right .3s;
  padding-top: 60px;
  z-index: 1000;
}
.menu.open { right: 0; }
.menu ul { list-style:none; padding:0 20px; }
.menu ul li { margin:20px 0; }
.menu ul li a {
  text-decoration:none;
  color:#333;
  font-size:1rem;
  transition: color .2s;
}
.menu ul li a:hover { color: var(--primary); }

/* ──────────────────────────────── */
/* Profile Avatar                       */
/* ──────────────────────────────── */
.profile-wrapper {
  position: relative;
  width:44px; height:44px;
  padding:2px;
  border-radius:50%;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  z-index:1002;
}
.profile-wrapper .profile-thumb {
  width:40px; height:40px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #003366;
}

/* ──────────────────────────────── */
/* Onboarding, Responsive, Switch, etc.  */
/* ──────────────────────────────── */
/* overige zaken ongewijzigd linken */



/* ──────────────────────────────── */
/* Onboarding Overlay              */
/* ──────────────────────────────── */
#onboarding-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.75);
  color: #fff;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.onboarding-content {
  background: #007aff;
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  color: #fff;
}
.onboarding-content h2 {
  margin-bottom: 12px;
}
#onboarding-ok {
  margin-top: 20px;
  padding: 10px 18px;
  background: #fff;
  color: #007aff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
#onboarding-ok:hover {
  background: #e6f0ff;
}

/* ──────────────────────────────── */
/* Mobiele aanpassing kaart         */
/* ──────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --top-offset: 54px;
    --bottom-offset: calc(78px + env(safe-area-inset-bottom));
  }
  #app {
    top: var(--top-offset);
    bottom: var(--bottom-offset);
  }
  #card-container {
    width: 100%;
    max-width: 100%;
    padding: 0 10px calc(12px + env(safe-area-inset-bottom));
    margin-top: 0;
  }
  .card {
    bottom: 0;
    border-radius: 18px;
  }
  .photo-container {
    height: min(54vh, 54dvh);
    max-height: none;
  }
  .info {
    padding: 10px 12px;
    min-height: 0;
    gap: 10px;
  }
  .info .logo {
    height: 58px;
  }
  .logo-stack {
    min-width: 64px;
  }
  .header-bar {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-direction: row !important;
  }
  .header-bar .top-breadcrumb {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .header-bar .header-actions {
    order: 2 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
    gap: 10px !important;
  }
  .header-bar .profile-wrapper {
    order: 1 !important;
  }
  .header-bar .hamburger {
    order: 2 !important;
    margin-left: 0 !important;
  }
  .info {
    align-items: flex-start;
    gap: 10px;
  }
  .logo-stack {
    min-width: 92px;
    flex: 0 0 92px;
    align-items: flex-start;
  }
  .info .logo {
    height: 58px;
    max-width: 64px;
    flex: 0 0 64px;
  }
  .info .text {
    min-width: 0;
    flex: 1 1 auto;
  }
  .info .title {
    font-size: .96rem;
    line-height: 1.12;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .info .price {
    display: block;
    white-space: nowrap;
    overflow: visible;
    font-size: .98rem;
    margin-top: 4px;
    text-align: left;
  }
  .info .meta-line {
    font-size: .84rem;
    margin-top: 4px;
  }
  .buttons {
    width: calc(100% - 24px);
    max-width: none;
    bottom: max(10px, env(safe-area-inset-bottom));
    gap: 8px;
    z-index: 1002;
  }
}

/* ──────────────────────────────── */
/* Responsive profiel layout       */
/* ──────────────────────────────── */
.page-profile main.profile-page-wrapper {
  position: absolute;
  top: var(--top-offset);
  bottom: var(--bottom-offset);
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  background: #f5f7fa;
  overflow: visible;
}
.page-profile .card {
  margin: 0;
}
.page-profile .profile-circle {
  border: 4px solid #007aff;
}
.page-profile .input-group input {
  background: #fafafa;
}
/* Toggle switch styling */
.theme-switch {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 26px;
  margin-left: 8px;
}
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.theme-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 26px;
}
.theme-switch .slider:before {
  position: absolute;
  content: "";
  height: 22px; width: 22px;
  left: 2px; bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.theme-switch input:checked + .slider {
  background-color: var(--primary);
}
.theme-switch input:checked + .slider:before {
  transform: translateX(24px);
}

/* Light/dark theme variables */
:root {
  /* light theme colors */
  --bg: #f5f7fa;
  --fg: #222;
  --card: #fff;
  --shadow: rgba(0,0,0,.1);
  --primary: #007aff;
}
[data-theme="dark"] {
  --bg: #121212;
  --fg: #eee;
  --card: #1e1e1e;
  --shadow: rgba(0,0,0,.5);
  --primary: #0a84ff;
}
/* apply */
html, body {
  background: var(--bg) !important;
  color: var(--fg) !important;
}
.card {
  background: var(--card);
  box-shadow: 0 8px 24px var(--shadow);
}
.btn-save, .primary {
  background: var(--primary) !important;
}


.menu ul li.theme-item {
  display: flex;
  align-items: center;
  /* optioneel: maak 'm net iets hoger als je wil */
  /* height: 48px; */
}

/* schuif de hele inhoud van dat rijtje 4px naar beneden */
.menu ul li.theme-item > * {
  transform: translateY(80px);
}

/* reset voor de switch zelf, zodat z'n eigen translate niet dubbel telt */
.menu ul li.theme-item .theme-switch {
  transform: translateY(80px); /* precies dezelfde nudge */
}


:root {
  --color-skip:   #FF8C69;  /* warm koraal */
  --color-share:  #4DD0E1;  /* fris turquoise */
  --color-like:   #5cb85c;  /* zacht gedempt groen */
}

/* Buttons toepassen */
#skip  { background: var(--color-skip); }
#share { background: var(--color-share); }
#like  { background: var(--color-like); }

/* Optioneel: subtiel hover-effect */
#skip:hover,
#share:hover,
#like:hover {
  filter: brightness(0.9);
}

.buttons button {
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  font-weight: 600;
}

:root {
  --btn-skip: #FF8C69;
  --btn-share: #4DD0E1;
  --btn-like: #5CB85C;
  --btn-text: #ffffff;
}
#skip  { background: var(--btn-skip); color: var(--btn-text); }
/* … */

.buttons button {
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.buttons button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.buttons button:focus {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.info .title { margin-bottom: 4px; }
.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.info .categorie,
.info .location {
  color: rgba(0,0,0,0.6);
  font-style: italic;
}
.info .price {
  background: rgba(40,167,69,0.1);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}
#card-container {
  padding-bottom: 80px; /* maakt ruimte voor buttons */
}
.card {
  margin-bottom: -28px; /* laat kaart licht overknippen */
}
.photo-container {
  height: 60vh;
  max-height: 600px;
}
.buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 32px;
  height: var(--btn-h);
  border-radius: 28px;
}
.card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}

/* Share lightbox */
.share-lightbox.hidden { display: none; }
.share-lightbox { position: fixed; inset: 0; z-index: 9999; }
.share-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.share-lightbox-panel {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(92vw, 460px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
  padding: 14px;
}
.share-lightbox-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.share-lightbox-header h3 { margin:0; font-size:18px; }
.share-lightbox-close { border:0; background:#f2f4f7; border-radius:8px; width:32px; height:32px; cursor:pointer; }
.share-lightbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.share-option {
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:10px;
  min-height:42px;
  padding:8px 10px;
  text-align:left;
  cursor:pointer;
  font-weight:600;
}
.share-option:hover { background:#f8fafc; }



/* Breadcrumb overlay on boat cards */
.card-breadcrumbs {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0.10) 0%, rgba(15,23,42,0.82) 100%);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(15,23,42,0.22);
  pointer-events: auto;
}
.card-breadcrumbs a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.28);
}
.card-breadcrumbs .sep {
  color: rgba(255,255,255,0.76);
  padding: 0 2px;
}
.photo-container {
  position: relative;
}
.photo-container .photo {
  z-index: 1;
}
.photo-container .photo-toggle,
.photo-container .heart-toggle {
  z-index: 9;
}
@media (max-width: 768px) {
  .card-breadcrumbs {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    font-size: .76rem;
  }
}




.vendor-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
}
@media (max-width: 768px) {
  .logo-link {
    overflow: visible;
  }
}

/* Force card specs to stay right-aligned on all variants */
.card .info .text {
  align-items: flex-end;
  text-align: right;
}
.card .info .title,
.card .info .meta-line,
.card .info .price {
  width: 100%;
  text-align: right;
}
.card .info .meta-line {
  justify-content: flex-end;
}
.card .info .price {
  display: block;
  align-self: flex-end;
}

@media (max-width: 768px) {
  .card .info .text {
    align-items: flex-end;
    text-align: right;
  }
  .card .info .price {
    text-align: right;
  }
}


/* 2026-07-18 kaartpositie + aanbieder-CTA (mobiel) */
@media (max-width: 768px){
  :root{ --top-offset: 72px; --bottom-offset: calc(max(10px, env(safe-area-inset-bottom)) + 66px); } /* hele kaart ~0.5cm lager; witte balk beneden ~0.5cm minder hoog (78->60px) */
  .logo-stack{ min-width:96px; flex:0 0 auto; gap:6px; align-items:center; }
  .logo-stack .logo-link{ margin-top:-4px; }   /* skippertje-logo iets hoger */
  .vendor-cta{ font-size:.78rem; min-height:30px; padding:0 10px; white-space:nowrap; }
}

/* 2026-07-18 witruimte onderaan (mobiel): foto matig groter zodat infoblok dichter bij de knoppen zakt */
@media (max-width: 768px){
  .photo-container{ height: min(66vh, 66dvh); max-height: none; }
}

/* 2026-07-18 device-agnostic: infoblok verankerd net boven de knoppen, foto vult de resthoogte (vervangt de vaste vh; klopt op elk schermformaat) */
@media (max-width: 768px){
  .card{ display:flex; flex-direction:column; }
  .card .photo-container{ flex:1 1 auto; height:auto; min-height:0; }
  .card .info{ flex:0 0 auto; }
}

/* 2026-07-19 fix (Claude): op mobiel reserveerde de kaart geen knop-hoogte (bottom:0) terwijl margin-bottom:-28px de kaart naar beneden trok; de onderste inforegel (categorie) viel daardoor onder de Skip/Deel/Like-knoppen. Overhang op mobiel neutraliseren -> vaste ~10px lucht boven de knoppen, op elk schermformaat. */
@media (max-width: 768px){
  .card{ margin-bottom: 0; }
}

/* ──────────────────────────────────────────────────────────────
   Menu-fix 19 jul 2026 (to-do "menu springt bij swipen")
   1) #menu-overlay stond wel in de HTML maar had nergens CSS: hoogte 0,
      dus geen verduistering en klik-buiten-sluit kon nooit afgaan.
      20 jul: als ID-selector, want de homepage zet inline
      `body.landing-page > * { position:relative; z-index:1 }` en dat won van
      een class-selector. Daardoor bleef de overlay static/z-index 1 en dook
      het menu op de homepage ONDER de content.
   2) De drawer schoof via `right: -100%`. Op desktop is dat 1400-1900px
      reizen in 0,3s: hij is het grootste deel van de animatie onzichtbaar
      en ploft dan pas in beeld. Nu via transform, dus altijd exact 200px.
   .menu krijgt expliciet visibility:visible omdat hij een kind van de
   overlay is en niet elke pagina de overlay mee-opent.
   ────────────────────────────────────────────────────────────── */
#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
#menu-overlay.open { opacity: 1; visibility: visible; }

.menu {
  right: 0;
  visibility: visible;
  transform: translateX(100%);
  transition: transform .3s ease;
}
.menu.open { right: 0; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .menu, #menu-overlay { transition: none; }
}

/* ──────────────────────────────────────────────────────────────
   Menu-fix 20 jul 2026, deel 2: hamburger dood zodra het menu open is
   Gemeten (Chromium 1280/1440/1920): met open menu geeft
   elementFromPoint op het midden van de hamburger `div.menu.open`.
   De drawer (z-index 1000) ligt dus over de hamburger heen en de
   klik komt nooit bij de toggle aan.
   Oorzaak is paginagebonden, niet de drawer:
     /swipe/    .header-bar = position:fixed; z-index:1001  -> boven de drawer, goed
     homepage   .header-bar = position:relative; z-index:1  -> onder de drawer, fout
   Die 1 komt uit de inline `body.landing-page > * {position:relative;z-index:1}`
   op de homepage, dezelfde regel die 20 jul de overlay al platlegde.
   Alleen de z-index optillen, position bewust met rust laten: fixed maken
   zou de header uit de flow halen en de landingslayout verschuiven.
   Specificiteit (0,2,0) wint van de inline regel (0,1,1), geen !important nodig.
   ────────────────────────────────────────────────────────────── */
body.landing-page .header-bar { z-index: 1001; }

/* 2026-08-11 fotogalerij (CEO-cyclus owner_finding): teller + dots rechtsboven op de foto.
   Alleen zichtbaar als appdb.js FOTO.enabled aan staat EN de boot meer dan één foto heeft.
   pointer-events:none, zodat de tik altijd de foto zelf bereikt (het bladeren zit op .photo)
   en de indicator nooit zelf een dead click kan opleveren. Blijft weg van de loep (links) en
   het hartje (rechts) door de plaatsing midden-boven, en van .card-breadcrumbs onderaan. */
.photo-container .foto-teller{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  z-index:9; display:flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:999px;
  background:rgba(0,0,0,.45); color:#fff;
  font-size:.72rem; line-height:1; font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.photo-container .foto-dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.45); transition:background .2s;
}
.photo-container .foto-dot.actief{ background:#fff; }