/* ══════════════════════════════════════════════════════════════════
   Boerenroute.nl — Stylesheet
   Layers: reset → tokens → base → layout → components → animations → responsive
   ══════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, components, animations, responsive;

/* ── Geregistreerde custom properties voor smooth animaties ────── */
@property --blob-x { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --blob-y { syntax: '<length>'; initial-value: 0px; inherits: false; }

/* ══ TOKENS ══════════════════════════════════════════════════════ */
@layer tokens {
  :root {
    /* Brand — dieper bosgroen + warm-goud accent */
    --green-dark:   #1C4109;
    --green-mid:    #356611;
    --green-light:  #5E9420;
    --green-bg:     #E7F0D6;
    --amber:        #B8720F;
    --amber-light:  #E8981C;
    --amber-ink:    #9A5800;   /* toegankelijk goud: AA-contrast wit-op-goud & goud-op-licht */
    --amber-bg:     #FBEFD6;
    --sand:         #F8F4EC;
    --sand-dark:    #EDE7DC;
    --white:        #FFFFFF;
    --text:         #1A1A18;
    --text-mid:     #555550;
    --text-light:   #6B6A64;   /* gedempt maar AA-leesbaar op wit én zand */
    --red:          #A32D2D;

    /* Semantisch */
    --bg-page:    var(--sand);
    --bg-card:    var(--white);
    --border:     rgba(0,0,0,.07);
    --border-md:  rgba(0,0,0,.13);

    /* Typografie */
    --serif:   'Lora', Georgia, serif;
    --sans:    'DM Sans', system-ui, sans-serif;

    /* Fluide schaal */
    --t-xs:   clamp(.75rem, 1.6vw, .8125rem);
    --t-sm:   clamp(.75rem,   1.8vw, .8125rem);
    --t-base: clamp(.875rem,  2vw,   .9375rem);
    --t-md:   clamp(1rem,     2.2vw, 1.0625rem);
    --t-lg:   clamp(1.125rem, 2.8vw, 1.375rem);
    --t-xl:   clamp(1.375rem, 3.5vw, 1.875rem);
    --t-hero: clamp(2rem,     5.5vw, 3.5rem);

    /* Ruimte */
    --pad: clamp(16px, 4vw, 32px);
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 9999px;

    /* Schaduwen (perceptueel gelaagd) */
    --sh-sm:  0 1px 2px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
    --sh:     0 1px 3px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.05);
    --sh-md:  0 4px 10px rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.06);
    --sh-lg:  0 8px 20px rgba(0,0,0,.10), 0 20px 48px rgba(0,0,0,.08);
    --sh-amber: 0 3px 12px rgba(186,117,23,.35);
    --sh-green: 0 3px 10px rgba(59,109,17,.3);

    /* Overgangen */
    --ease:       cubic-bezier(.4,0,.2,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --tf: .12s var(--ease);
    --tb: .2s  var(--ease);
    --ts: .35s var(--ease);

    /* Layout */
    --max-w:      1320px;
    --header-h:   62px;
    --toolbar-h:  56px;
    --sidebar-w:  400px;
  }
}

/* ══ RESET ═══════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body { min-height: 100dvh; overflow-x: hidden; max-width: 100vw; }
  img, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  ul, ol { list-style: none; }
  a { text-decoration: none; color: inherit; }
  button { cursor: pointer; border: none; background: none; }
  /* Zorg dat het hidden-attribuut altijd wint, ook van display:flex/grid */
  [hidden] { display: none !important; }
}

/* ══ BASE ════════════════════════════════════════════════════════ */
@layer base {
  body {
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    font-family: var(--serif);
    line-height: 1.2;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  :focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
    border-radius: 3px;
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.26); }
  * { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.16) transparent; }

  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

/* ══ HEADER ══════════════════════════════════════════════════════ */
@layer layout {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: var(--green-dark);
    transition: background var(--ts), backdrop-filter var(--ts), box-shadow var(--ts);
    will-change: background;
  }

  .site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 24px rgba(0,0,0,.32);
    pointer-events: none;
  }

  .site-header.is-glass {
    background: rgba(27, 54, 8, .86);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
  }

  .header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Logo */
  .logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    min-height: 44px;
  }

  /* Oud emoji-icoon (nog gebruikt op gegenereerde subpagina's) */
  .logo-icon {
    font-size: 22px;
    line-height: 1;
    display: block;
    transition: transform var(--tb);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
  }
  .logo:hover .logo-icon { transform: rotate(-8deg) scale(1.12); }

  /* Eigen SVG-merkteken: route-pin met spruit */
  .logo-mark {
    display: block;
    flex-shrink: 0;
    transition: transform var(--tb);
    transform-origin: 50% 90%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
  }
  .logo:hover .logo-mark,
  .footer-logo:hover .logo-mark { transform: rotate(-6deg) scale(1.08); }

  .logo-text {
    font-family: var(--serif);
    font-size: clamp(16px, 2.6vw, 19px);
    font-weight: 600;
    color: var(--white);
    letter-spacing: -.018em;
    white-space: nowrap;
  }

  /* Gouden accent op 'route' (pop op donkergroene header, haalt WCAG AA) */
  .logo-text .lt-accent,
  .footer-logo .lt-accent {
    color: var(--amber-light);
    font-weight: 700;
  }

  /* Subpagina's gebruiken nog 'Boeren<strong>route.nl</strong>' */
  .logo-text strong {
    color: var(--green-light);
    font-weight: 700;
  }

  /* Nav */
  .header-nav {
    display: flex;
    gap: 1px;
    margin-left: auto;
  }

  .nav-btn {
    color: rgba(255,255,255,.65);
    font-size: var(--t-sm);
    font-weight: 500;
    padding: 7px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-full);
    transition: background var(--tf), color var(--tf);
    white-space: nowrap;
  }

  .nav-btn:hover { background: rgba(255,255,255,.1); color: var(--white); }

  .nav-btn.active {
    background: rgba(255,255,255,.13);
    color: var(--white);
  }

  /* Nav-icoontje (lijn, currentColor) */
  .nav-ic {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    flex-shrink: 0;
  }

  /* Kaart/Route als segment-schakelaar: maakt duidelijk dat het twee
     weergaven van hetzelfde zijn — en onderscheidt ze van de paginalinks. */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-full);
    margin-right: 4px;
  }
  .nav-toggle-btn { min-height: 36px; padding: 6px 14px; }
  .nav-toggle-btn:hover { background: rgba(255,255,255,.08); }
  .nav-toggle-btn.active {
    background: var(--white);
    color: var(--green-dark);
  }
  .nav-toggle-btn.active .nav-ic { stroke: var(--green-mid); }

  /* Tip-knop */
  .tip-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--amber-ink);
    color: var(--white);
    font-size: var(--t-sm);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--r-full);
    flex-shrink: 0;
    box-shadow: var(--sh-amber);
    transition: background var(--tf), transform var(--tf), box-shadow var(--tf);
  }

  .tip-btn:hover {
    background: color-mix(in srgb, var(--amber-ink) 90%, white);
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(186,117,23,.45);
  }

  .tip-btn:active { transform: scale(.97); }
}

/* ══ HERO ════════════════════════════════════════════════════════ */
@layer layout {
  .hero {
    position: relative;
    background: linear-gradient(148deg, #142D07 0%, var(--green-dark) 32%, var(--green-mid) 68%, #4A8519 100%);
    color: var(--white);
    padding: clamp(64px, 10vw, 108px) var(--pad) clamp(96px, 14vw, 140px);
    overflow: hidden;
    isolation: isolate;
  }

  /* Licht-streep over de hero */
  .hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 40%, rgba(255,255,255,.18) 60%, transparent);
    pointer-events: none;
  }

  /* Blob-achtergrond */
  .hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

  /* Hero foto-achtergrond */
  .hero-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Overlay gradient voor tekstleesbaarheid */
  .hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(20,45,7,.58) 0%,
      rgba(20,45,7,.44) 45%,
      rgba(20,45,7,.66) 100%
    );
    pointer-events: none;
  }

  .hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    will-change: transform;
    pointer-events: none;
  }
  .hero-bg { overflow: hidden; }

  .blob-1 {
    width: clamp(320px, 48vw, 680px);
    height: clamp(320px, 48vw, 680px);
    background: radial-gradient(circle, rgba(99,153,34,.42) 0%, transparent 68%);
    top: -150px; right: -80px;
    animation: blob1 11s ease-in-out infinite;
  }

  .blob-2 {
    width: clamp(240px, 38vw, 520px);
    height: clamp(240px, 38vw, 520px);
    background: radial-gradient(circle, rgba(186,117,23,.24) 0%, transparent 68%);
    bottom: 60px; left: -60px;
    animation: blob2 14s ease-in-out infinite;
  }

  .blob-3 {
    width: clamp(180px, 26vw, 380px);
    height: clamp(180px, 26vw, 380px);
    background: radial-gradient(circle, rgba(59,109,17,.5) 0%, transparent 68%);
    top: 35%; left: 32%;
    animation: blob3 8.5s ease-in-out infinite;
  }

  /* Grain-textuur (SVG feTurbulence als data-URI) */
  .hero-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    opacity: .045;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  /* Hero-inhoud */
  .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 660px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
  }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fade-up .5s var(--ease) both;
  }

  .hero-title {
    font-size: var(--t-hero);
    font-weight: 700;
    color: var(--white);
    letter-spacing: -.025em;
    text-shadow: 0 2px 14px rgba(0,0,0,.28);
    animation: fade-up .55s var(--ease) .08s both;
  }

  .hero-title em {
    font-style: italic;
    /* Warm honing-goud: maximaal contrast met het donkergroen, on-brand, oogt premium */
    color: color-mix(in srgb, var(--amber-light) 82%, white);
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
  }

  /* Voormalige H1-tagline: één niveau lager, warm en cursief */
  .hero-tagline {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: clamp(15px, 2.2vw, 17px);
    color: rgba(255,255,255,.65);
    margin-top: -4px;
    margin-bottom: 4px;
    animation: fade-up .55s var(--ease) .12s both;
  }

  .hero-sub {
    font-size: clamp(15px, 2.4vw, 18px);
    color: rgba(255,255,255,.78);
    line-height: 1.65;
    max-width: 480px;
    animation: fade-up .55s var(--ease) .16s both;
  }

  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    animation: fade-up .55s var(--ease) .24s both;
  }

  .hero-search {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 460px;
    animation: fade-up .3s var(--ease) both;
  }

  .hero-search-input {
    flex: 1;
    padding: 12px 18px;
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: var(--r);
    background: rgba(255,255,255,.94);
    color: var(--text);
    font-size: var(--t-base);
    box-shadow: 0 4px 20px rgba(0,0,0,.22);
    transition: border-color var(--tf), box-shadow var(--tf);
  }

  .hero-search-input:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(186,117,23,.25), 0 4px 20px rgba(0,0,0,.22);
  }

  /* Decoratieve achtergrond-emoji's */
  .hero-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .hero-deco-item { position: absolute; }

  /* Grote primaire CTA */
  .hero-btn-main { font-size: clamp(15px,2vw,17px); padding: 14px 28px; gap: 10px; }

  /* Trust-stats vervangt de oude hero-stats */
  .hero-trust {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-xl);
    padding: 14px 20px;
    animation: fade-up .55s var(--ease) .32s both;
    flex-wrap: wrap;
  }

  .hero-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 72px;
    padding: 4px 8px;
  }

  .hero-trust-num {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1;
  }

  .hero-trust-label {
    font-size: var(--t-xs);
    color: rgba(255,255,255,.55);
    text-align: center;
    white-space: nowrap;
  }

  .hero-trust-sep {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
  }

  /* Wave */
  .hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    line-height: 0;
    pointer-events: none;
    z-index: 1;
  }

  .hero-wave svg { width: 100%; display: block; }
}

/* ══ VOORDELEN-SECTIE ════════════════════════════════════════════ */
@layer components {
  .voordelen {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: clamp(32px, 5vw, 56px) var(--pad);
  }

  .voordelen-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
  }

  .voordeel-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 20px;
    background: var(--sand);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    transition: box-shadow var(--tb), transform var(--tb);
  }

  .voordeel-card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
  }

  .voordeel-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 2px;
  }

  .voordeel-card strong {
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1.2;
  }

  .voordeel-card p {
    font-size: var(--t-sm);
    color: var(--text-mid);
    line-height: 1.55;
    margin: 0;
  }

  /* Quote / testimonial */
  .quote-block {
    max-width: 680px;
    margin: clamp(28px, 4vw, 44px) auto 0;
    padding: clamp(24px, 3vw, 36px);
    background: var(--amber-bg);
    border-radius: var(--r-xl);
    border: 1px solid color-mix(in srgb, var(--amber) 20%, transparent);
    position: relative;
    text-align: center;
  }

  .quote-mark {
    position: absolute;
    top: clamp(-8px, -1vw, -4px);
    left: clamp(16px, 3vw, 28px);
    font-family: var(--serif);
    font-size: clamp(3.5rem, 8vw, 5rem);
    line-height: 1;
    color: var(--amber);
    opacity: .35;
    pointer-events: none;
  }

  .quote-text {
    font-family: var(--serif);
    font-size: clamp(16px, 2.4vw, 20px);
    font-style: italic;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 18px;
    position: relative;
  }

  .quote-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--t-sm);
    color: var(--text-mid);
  }

  .quote-avatar {
    font-size: 1.8rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow: var(--sh-sm);
  }

  .quote-author strong { color: var(--green-dark); font-weight: 600; }
}

/* ══ BOERENROUTE VAN DE MAAND — homepage showcase ════════════════ */
@layer components {
  .maandhome {
    background: var(--green-bg);
    padding: clamp(32px, 5vw, 56px) var(--pad);
  }

  .maandhome-inner { max-width: var(--max-w); margin: 0 auto; }

  .maandhome-skeleton {
    color: var(--text-light);
    font-size: var(--t-sm);
    text-align: center;
    padding: 40px;
  }

  .maandhome-card {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    background: var(--white);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-md);
    border: 1px solid var(--border);
  }

  .maandhome-left {
    padding: clamp(24px, 3.5vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .maandhome-badge {
    display: inline-block;
    background: var(--amber-bg);
    color: var(--amber-ink);
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--r-full);
    margin-bottom: 14px;
  }

  .maandhome-title {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 3.2vw, 2rem);
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1.15;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .maandhome-title-ic {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--green-bg);
    color: var(--green-dark);
    display: inline-flex; align-items: center; justify-content: center;
  }

  .maandhome-sub {
    font-size: var(--t-md);
    color: var(--green-mid);
    font-weight: 500;
    margin-bottom: 14px;
  }

  .maandhome-intro {
    font-size: var(--t-sm);
    color: var(--text-mid);
    line-height: 1.65;
    margin-bottom: 18px;
  }

  .maandhome-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
  }

  .maandhome-meta-item {
    font-size: var(--t-sm);
    color: var(--text-mid);
  }
  .maandhome-meta-item strong { color: var(--text); font-weight: 700; }

  .maandhome-btn { font-size: var(--t-md); padding: 13px 24px; }

  /* Rechterpaneel: stops-lijst */
  .maandhome-right {
    background: linear-gradient(160deg, var(--green-bg) 0%, #dcecca 100%);
    padding: clamp(24px, 3.5vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .maandhome-stops-label {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--green-mid);
    font-weight: 700;
    margin-bottom: 14px;
  }

  .maandhome-stops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
  }

  /* Verbindingslijn tussen stops */
  .maandhome-stops::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      var(--green-light) 0 4px,
      transparent 4px 8px
    );
    opacity: .5;
  }

  .maandhome-stop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    position: relative;
    z-index: 1;
  }

  .maandhome-stop-num {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--green-mid);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-sm);
    font-weight: 700;
    border: 2px solid var(--white);
  }

  .maandhome-stop-emoji { flex-shrink: 0; color: var(--green-mid); display: inline-flex; align-items: center; }
  .maandhome-stop-name {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (max-width: 900px) {
    .maandhome-card { grid-template-columns: 1fr; }
    .maandhome-right { border-top: 1px solid var(--border); }
  }
}

/* ══ POPULAIRE ROUTES ════════════════════════════════════════════ */
@layer components {
  .poproutes {
    background: var(--sand);
    padding: clamp(8px, 2vw, 16px) var(--pad) clamp(32px, 5vw, 56px);
  }
  .poproutes-inner { max-width: var(--max-w); margin: 0 auto; position: relative; }

  .poproutes-header { text-align: center; margin-bottom: 26px; }
  .poproutes-title {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 6px;
  }
  .poproutes-sub { font-size: var(--t-sm); color: var(--text-mid); }

  /* Carrousel: horizontaal scrollen/swipen met snap-punten. */
  .poproutes-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    padding: 4px 2px 8px;
    scroll-behavior: smooth;
  }
  .poproutes-grid::-webkit-scrollbar { display: none; }   /* WebKit */

  .poproutes-grid > .poproute-card {
    flex: 0 0 clamp(240px, 78vw, 268px);
    scroll-snap-align: start;
  }

  /* Pijl-knoppen: alleen op grotere schermen (mobiel = swipen). */
  /* Pijlen rechtsboven naast de kop — overlappen de kaarten nooit. */
  .poproll {
    position: absolute;
    top: clamp(6px, 1.5vw, 12px);
    z-index: 2;
    width: 38px; height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    box-shadow: var(--sh-sm);
    color: var(--green-dark);
    cursor: pointer;
    transition: background var(--tf), box-shadow var(--tf);
  }
  .poproll:hover { background: var(--green-bg); box-shadow: var(--sh-md); }
  .poproll-prev { right: 50px; left: auto; }
  .poproll-next { right: 4px; }
  .poproll svg { width: 18px; height: 18px; }

  @media (min-width: 720px) {
    .poproll { display: inline-flex; }
  }

  .poproute-skeleton { color: var(--text-light); font-size: var(--t-sm); padding: 30px; text-align: center; }

  .poproute-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow var(--tb), transform var(--tb);
  }
  .poproute-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }

  .poproute-top { display: flex; align-items: center; justify-content: space-between; }
  .poproute-emoji {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--green-bg);
    color: var(--green-dark);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .poproute-prov {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--green-mid);
    background: var(--green-bg);
    padding: 3px 10px;
    border-radius: var(--r-full);
  }

  .poproute-title {
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
  }
  .poproute-sub { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.45; flex: 1; }

  .poproute-stopemojis { display: flex; gap: 4px; }
  .poproute-stopemoji {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--green-bg); color: var(--green-dark); border-radius: 9px;
  }

  .poproute-meta {
    display: flex;
    gap: 14px;
    font-size: var(--t-sm);
    color: var(--text-mid);
  }

  .poproute-btn { width: 100%; justify-content: center; margin-top: 4px; }
}

/* ══ VERHALEN / BLOG ═════════════════════════════════════════════ */
@layer components {
  .verhalen-section { background: var(--sand); min-height: 100vh; }

  .blog-page {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px) var(--pad);
  }

  .blog-header { text-align: center; margin-bottom: 32px; }
  .blog-title {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 8px;
  }
  .blog-sub { font-size: var(--t-md); color: var(--text-mid); }

  /* Overzicht-grid */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }

  .blog-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--tb), transform var(--tb);
  }
  .blog-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
  .blog-card:focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; }

  .blog-card-emoji {
    font-size: 2.6rem;
    text-align: center;
    padding: 28px 0;
    background: linear-gradient(160deg, var(--green-bg) 0%, #dcecca 100%);
  }

  .blog-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }

  .blog-card-meta {
    font-size: var(--t-xs);
    color: var(--text-light);
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }

  .blog-card-title {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 8px;
  }

  .blog-card-excerpt {
    font-size: var(--t-sm);
    color: var(--text-mid);
    line-height: 1.6;
    margin-bottom: 14px;
    flex: 1;
  }

  .blog-card-link {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--green-mid);
  }

  /* Artikel */
  .blog-article {
    background: var(--white);
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    padding: clamp(24px, 4vw, 48px);
    box-shadow: var(--sh-sm);
  }

  .blog-back {
    background: none;
    border: none;
    color: var(--green-mid);
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 20px;
  }
  .blog-back:hover { color: var(--green-dark); }

  .blog-article-header { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .blog-article-emoji { font-size: 3rem; margin-bottom: 12px; }
  .blog-article-meta {
    font-size: var(--t-xs);
    color: var(--text-light);
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
  }
  .blog-article-title {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .blog-article-lead {
    font-size: var(--t-md);
    color: var(--text-mid);
    line-height: 1.6;
    font-style: italic;
  }

  .blog-article-body { font-size: var(--t-md); line-height: 1.75; color: var(--text); }
  .blog-article-body h2 {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--green-dark);
    margin: 28px 0 10px;
  }
  .blog-article-body p  { margin-bottom: 16px; }
  .blog-article-body ul { margin: 0 0 16px; padding-left: 22px; }
  .blog-article-body li { margin-bottom: 6px; }

  .blog-inline-cta {
    margin: 26px 0;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--amber-bg);
    border: 1px solid rgba(184,114,15,.24);
    border-radius: var(--r-lg);
  }

  .blog-inline-kicker {
    margin: 0 0 4px;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--amber);
    text-transform: uppercase;
    letter-spacing: 0;
  }

  .blog-inline-title {
    margin: 0 0 4px;
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--green-dark);
  }

  .blog-inline-copy {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--text-mid);
  }

  .blog-article-footer {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

  .blog-related {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }

  .blog-related h2 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: var(--t-xl);
    color: var(--green-dark);
  }

  .blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .blog-related-card {
    min-width: 0;
    padding: 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    background: var(--sand);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color var(--tf), transform var(--tf), box-shadow var(--tf);
  }

  .blog-related-card:hover {
    border-color: rgba(53,102,17,.35);
    box-shadow: var(--sh-sm);
    transform: translateY(-2px);
  }

  .blog-related-emoji { font-size: 1.35rem; line-height: 1; }
  .blog-related-card strong {
    display: block;
    margin-bottom: 5px;
    font-size: var(--t-sm);
    line-height: 1.25;
    color: var(--text);
  }
  .blog-related-card small {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--text-mid);
  }

  @media (max-width: 480px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-inline-cta { align-items: stretch; flex-direction: column; }
    .blog-inline-cta .btn { width: 100%; justify-content: center; }
    .blog-article-footer .btn { width: 100%; justify-content: center; }
    .blog-related-grid { grid-template-columns: 1fr; }
  }
}

/* ══ KNOPPEN ════════════════════════════════════════════════════ */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--r);
    font-family: var(--sans);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--tf), box-shadow var(--tf), transform var(--tf);
  }

  .btn:active { transform: scale(.965); }

  .btn-primary {
    background: var(--amber-ink);
    color: var(--white);
    box-shadow: var(--sh-amber), inset 0 1px 0 rgba(255,255,255,.14);
  }

  .btn-primary:hover {
    background: color-mix(in srgb, var(--amber-ink) 90%, white);
    box-shadow: 0 5px 18px rgba(186,117,23,.45), inset 0 1px 0 rgba(255,255,255,.14);
    transform: translateY(-1px);
  }

  .btn-secondary {
    background: rgba(255,255,255,.12);
    color: var(--white);
    border: 1.5px solid rgba(255,255,255,.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .btn-secondary:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.5);
    transform: translateY(-1px);
  }

  .btn-green {
    background: var(--green-mid);
    color: var(--white);
    box-shadow: var(--sh-green);
  }

  .btn-green:hover {
    background: color-mix(in srgb, var(--green-mid) 88%, black);
    box-shadow: 0 5px 16px rgba(59,109,17,.4);
    transform: translateY(-1px);
  }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-sm);
    color: var(--text-mid);
    transition: background var(--tf), border-color var(--tf), transform var(--tf);
    flex-shrink: 0;
  }

  .icon-btn:hover {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.22);
    transform: scale(1.06);
  }
}

/* ══ TOOLBAR ════════════════════════════════════════════════════ */
@layer components {
  .toolbar {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--header-h);
    z-index: 90;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    height: var(--toolbar-h);
  }

  .toolbar-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Zoekbalk */
  .search-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
  }

  .search-input {
    width: clamp(148px, 18vw, 230px);
    padding: 8px 12px 8px 30px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-full);
    background: var(--white);
    color: var(--text);
    font-size: var(--t-sm);
    transition: border-color var(--tf), box-shadow var(--tf);
  }

  .search-input:focus {
    outline: none;
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(59,109,17,.11);
  }

  /* Filter chips */
  .filter-chips {
    display: flex;
    gap: 5px;
    flex: 1;
    min-width: 0;            /* laat de chips-rij krimpen + scrollen i.p.v. de sorteer-select buiten beeld te duwen */
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
  }

  .filter-chips::-webkit-scrollbar { display: none; }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-full);
    background: var(--white);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text-mid);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--tf), border-color var(--tf), color var(--tf), box-shadow var(--tf), transform var(--tf);
  }

  .chip:hover:not(.chip-active) {
    border-color: var(--green-mid);
    color: var(--green-mid);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59,109,17,.1);
  }

  .chip-active {
    background: var(--green-mid);
    border-color: var(--green-mid);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(59,109,17,.28);
  }

  .chip-subtle {
    border-style: dashed;
    color: var(--text-light);
  }

  .chip-subtle:hover:not(.chip-active) {
    border-style: solid;
    border-color: var(--text-light);
  }

  /* Streekwinkel-chip: amber tint om duidelijk te maken dat dit een betaald segment is */
  .chip-streek {
    border-color: rgba(184,114,15,.4);
    color: #92400E;
  }
  .chip-streek:hover:not(.chip-active) {
    border-color: var(--amber);
    color: var(--amber);
    background: none;
  }
  .chip-streek.chip-active {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--text-mid);
  }

  .chip-reset {
    border-color: var(--amber);
    color: var(--amber);
    font-weight: 600;
  }
  .chip-reset:hover {
    background: var(--amber-bg);
    border-color: var(--amber);
    color: var(--amber);
  }

  /* Rechts in de toolbar */
  .toolbar-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* "Mijn locatie"-knop in de toolbar (snel naar GPS, ook na wegscrollen hero) */
  .toolbar-locate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--green-mid);
    color: var(--white);
    border-radius: var(--r-full);
    padding: 8px 14px;
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(59,109,17,.22);
    transition: background var(--tf), transform var(--tf);
  }
  .toolbar-locate:hover  { background: var(--green-dark); }
  .toolbar-locate:active { transform: scale(.97); }
  .toolbar-locate { display: none; }   /* desktop: hero + zoekveld volstaan; alleen op mobiel tonen */

  .toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-md);
    flex-shrink: 0;
  }

  .more-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-full);
    background: var(--white);
    color: var(--text-mid);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: border-color var(--tf), color var(--tf), background var(--tf);
  }

  .more-filters-btn::after {
    content: "";
    width: 10px;
    height: 6px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    opacity: .65;
  }

  .more-filters-btn:hover,
  .more-filters-btn[aria-expanded="true"] {
    border-color: var(--green-mid);
    color: var(--green-dark);
    background: var(--green-bg);
  }

  /* Actieve "verstopte" filters: amber accent + teller, ook als het paneel dicht is */
  .more-filters-btn.has-active {
    border-color: var(--amber);
    color: var(--amber);
    background: var(--amber-bg);
  }

  .more-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--amber);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }
  .more-filters-count[hidden] { display: none; }

  .more-filters-panel {
    /* Positie wordt via JS gezet (position: fixed, top/right via getBoundingClientRect).
       Hierdoor valt het paneel altijd boven de bottom sheet, ongeacht stacking context. */
    min-width: min(300px, calc(100vw - 32px));
    padding: 14px;
    display: grid;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
  }

  .more-filters-panel[hidden] { display: none; }

  /* Overlay achter het "Meer filters"-paneel: body-level, z-15 = boven kaart (z-10), onder toolbar (z-20/90) */
  .more-filters-overlay {
    position: fixed;
    inset: 0;
    z-index: 15;
    background: rgba(0,0,0,.28);
  }
  .more-filters-overlay[hidden] { display: none; }

  .more-filter-field {
    display: grid;
    gap: 6px;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text-mid);
  }

  .more-filter-field .sort-select { width: 100%; }

  /* Toggle pill (Nu open / Favorieten) */
  .toggle-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-full);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text-mid);
    cursor: pointer;
    user-select: none;
    transition: background var(--tf), border-color var(--tf), color var(--tf);
    white-space: nowrap;
  }

  .toggle-pill:has(input:checked) {
    background: var(--amber-bg);
    border-color: rgba(186,117,23,.4);
    color: var(--amber-ink);
  }

  .toggle-pill input { display: none; }

  .toggle-pill-sm { padding: 5px 10px; font-size: var(--t-xs); }

  /* Sorteer-select */
  .sort-select {
    padding: 7px 28px 7px 12px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-full);
    background: var(--white)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888780' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 10px center;
    appearance: none;
    font-size: var(--t-sm);
    color: var(--text-mid);
    cursor: pointer;
    transition: border-color var(--tf);
  }

  .sort-select:focus {
    outline: none;
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(59,109,17,.1);
  }
}

/* ══ LAYOUT: KAART + LIJST ══════════════════════════════════════ */
@layer layout {
  /*
   * 60/40 split: kaart als visuele context, lijst als primaire info.
   * Kaart hoogte gecapped op 78vh zodat hij de pagina niet domineert.
   * Op smallere schermen gaat de kaart boven de lijst (stacked).
   */
  .content-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 50/50: kaart en lijst even breed */
    min-height: calc(100dvh - var(--header-h) - var(--toolbar-h));
    max-width: var(--max-w);
    margin: 0 auto;
  }

  /* Kaart */
  .map-section {
    position: sticky;
    grid-column: 1;
    grid-row: 1;
    top: calc(var(--header-h) + var(--toolbar-h));
    height: min(calc(100dvh - var(--header-h) - var(--toolbar-h)), 68vh);
    max-height: 720px;
    overflow: hidden;
  }

  /* Lijst en routepaneel zitten altijd in kolom 2, rij 1 */
  .list-section  { grid-column: 2; grid-row: 1; }
  .route-section { grid-column: 2; grid-row: 1; }

  .map-container {
    width: 100%;
    height: 100%;
    background: var(--green-bg);
    position: relative;
  }

  .map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--green-bg) 0%, #d9ecca 50%, var(--green-bg) 100%);
    background-size: 200% 200%;
    animation: mapShimmer 2.5s ease-in-out infinite;
    color: var(--green-dark);
  }

  @keyframes mapShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .map-placeholder-icon {
    font-size: 3.5rem;
    animation: mapBounce 1.8s ease-in-out infinite;
  }

  @keyframes mapBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
  }

  .map-placeholder-text {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--green-mid);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .map-placeholder-dots::after {
    content: '';
    animation: mapDots 1.4s steps(4,end) infinite;
  }
  @keyframes mapDots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
  }

  .map-placeholder span { font-size: 3rem; opacity: .35; }

  /* Lijst */
  .list-section {
    background: var(--bg-page);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: min(calc(100dvh - var(--header-h) - var(--toolbar-h)), 78vh);
  }

  .list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-page);
    z-index: 5;
  }

  .list-count {
    font-size: var(--t-sm);
    color: var(--text-light);
    font-weight: 500;
  }

  .shop-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Landing-nudge: zichtbaar op mobiel als er geen locatie gekozen is */
  .shop-landing-nudge {
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--amber-bg);
    border: 1.5px dashed rgba(184,114,15,.35);
    border-radius: var(--r-lg);
    padding: 16px;
    margin: 4px 0 8px;
  }
  .sln-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
  .sln-body { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.5; }
  .sln-body strong { color: var(--amber); }
  .sln-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

  /* Locatie-prompt: zichtbaar tot gebruiker een locatie kiest */
  .locatie-prompt {
    padding: 1.25rem 1rem 1rem;
    text-align: center;
    background: var(--sand);
    border-bottom: 1px solid var(--green-bg);
  }
  .locatie-prompt-text {
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 .3rem;
    color: var(--text);
  }
  .locatie-prompt-sub {
    font-size: .82rem;
    color: var(--text-mid);
    margin: 0 0 .9rem;
    line-height: 1.5;
  }
  .locatie-prompt-btns {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  .locatie-prompt-btn {
    font-size: .82rem;
    padding: .45rem .9rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
  }

  /* Kids-hint: verschijnt alleen bij 'Alles'-filter */
  .kids-hint {
    font-size: var(--t-sm);
    color: var(--amber);
    padding: 6px 16px 4px;
    margin: 0;
  }
  .kids-hint[hidden] { display: none; }
  .kids-hint-btn {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .kids-hint-btn:hover, .kids-hint-btn:focus-visible { color: var(--amber-ink, #7a4b00); }

  .list-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-light);
    font-size: var(--t-base);
    line-height: 1.7;
  }

  .list-empty span { font-size: var(--t-sm); }
}

/* ══ SHOP-KAARTEN ═══════════════════════════════════════════════ */
@layer components {
  .shop-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--r-lg);
    padding: 14px 14px 12px;
    box-shadow: var(--sh);
    border: 1.5px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow var(--tb), border-color var(--tb), transform var(--tb);
  }

  /* Shimmer sweep on hover */
  .shop-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .55s var(--ease);
    pointer-events: none;
    z-index: 10;
  }

  .shop-card:hover::after { transform: translateX(120%); }

  .shop-card:hover {
    box-shadow: var(--sh-md);
    border-color: var(--green-bg);
    transform: translateY(-2px);
  }

  .shop-card.selected {
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(59,109,17,.12), var(--sh-md);
  }

  /* Scroll-driven entry animation (progressieve verbetering) */
  @supports (animation-timeline: view()) {
    .shop-card {
      animation: card-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 24%;
    }
  }

  .shop-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    z-index: 2;
  }

  .shop-emoji {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--green-bg);
    color: var(--green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .shop-info { flex: 1; min-width: 0; }

  .shop-name {
    font-family: var(--serif);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .shop-address {
    font-size: var(--t-sm);
    color: var(--text-light);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 8px;
    position: relative;
    z-index: 2;
  }

  .shop-tag {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: var(--r-full);
    background: var(--green-bg);
    color: var(--green-dark);
    font-weight: 500;
    transition: background var(--tf);
  }

  .shop-card:hover .shop-tag { background: color-mix(in srgb, var(--green-bg) 78%, var(--green-light)); }

  .shop-badge {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: var(--r-full);
    font-weight: 600;
  }

  .badge-premium     { background: var(--amber-bg); color: var(--amber-ink); border: 1px solid rgba(186,117,23,.2); }
  .badge-dagvers     { background: #fffbe6; color: #7A5200; border: 1px solid rgba(122,82,0,.15); }
  .badge-open        { background: rgba(59,109,17,.08); color: var(--green-mid); border: 1px solid rgba(59,109,17,.2); }
  .badge-closed      { background: rgba(163,45,45,.07); color: var(--red); border: 1px solid rgba(163,45,45,.18); }
  .badge-streekwinkel{ background: #FEF3C7; color: #92400E; border: 1px solid rgba(184,114,15,.25); font-weight: 600; }

  /* Favoriet-hartje */
  .shop-fav {
    position: absolute;
    top: 11px; right: 11px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: var(--text-light);
    z-index: 3;
    transition: background var(--tf), transform var(--tf), color var(--tf);
  }

  .shop-fav:hover { background: rgba(163,45,45,.08); color: var(--red); transform: scale(1.18); }
  .shop-fav.is-fav { color: var(--red); }

  /* Afstand-label */
  .shop-dist {
    font-size: var(--t-xs);
    color: var(--text-light);
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Rating */
  .shop-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
  }

  .shop-rating strong { color: var(--text); font-weight: 700; }

  .star-row { display: inline-flex; gap: 1px; font-size: 12px; line-height: 1; }
  .star { color: var(--border-md); }
  .star-full  { color: #F5A623; }
  .star-half {
    position: relative;
    color: var(--border-md);
  }
  .star-half::before {
    content: '★';
    position: absolute;
    left: 0; top: 0;
    width: 50%;
    overflow: hidden;
    color: #F5A623;
  }

  .shop-reviews {
    color: var(--text-light);
    font-weight: 400;
  }

  /* Top beoordeeld-badge */
  .badge-toprated {
    background: linear-gradient(135deg, #FFF3D6 0%, #FFE6A8 100%);
    color: #8A5A00;
    border: 1px solid rgba(245,166,35,.35);
    font-weight: 700;
  }

  /* Focus op kaart-rij (keyboard) */
  .shop-card:focus-visible {
    outline: 2px solid var(--green-mid);
    outline-offset: 2px;
  }
}

/* ══ FOOTER ══════════════════════════════════════════════════════ */
@layer layout {
  .site-footer {
    background: var(--green-dark);
    color: rgba(255,255,255,.62);
    padding: clamp(48px, 7vw, 72px) var(--pad) 0;
    margin-top: 0;
    position: relative;
  }

  /* Subtiele licht-streep boven footer */
  .site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 40%, rgba(255,255,255,.1) 60%, transparent);
  }

  .footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: start;
    padding-bottom: clamp(32px, 5vw, 48px);
  }

  .footer-brand { display: flex; flex-direction: column; gap: 10px; }

  .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--serif);
    font-size: var(--t-xl);
    color: var(--white);
    width: fit-content;
  }

  .footer-logo strong { color: var(--green-light); font-weight: 700; }

  .footer-tagline {
    font-size: var(--t-sm);
    color: rgba(255,255,255,.78);
    line-height: 1.65;
  }

  .footer-sponsor {
    font-size: var(--t-xs);
    color: rgba(255,255,255,.72);
    margin-top: 4px;
  }

  .footer-sponsor a {
    color: rgba(255,255,255,.82);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--tf);
  }

  .footer-sponsor a:hover { color: rgba(255,255,255,.75); }

  .footer-cols { display: flex; gap: 20px; flex-wrap: wrap; }
  .footer-col  { flex: 1 1 120px; min-width: 0; }

  .footer-col h3 {
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 600;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 14px;
  }

  .footer-col ul { display: flex; flex-direction: column; gap: 9px; }

  .footer-col a {
    font-size: var(--t-sm);
    color: rgba(255,255,255,.78);
    transition: color var(--tf);
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }

  .footer-col a:hover { color: var(--white); }

  .footer-bottom {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 18px 0 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--t-xs);
    color: rgba(255,255,255,.72);
  }

  .footer-bottom a {
    color: rgba(255,255,255,.78);
    transition: color var(--tf);
    display: inline-block;
    padding: 6px 2px;           /* ruimer tik-doel (≥ AA 24px) */
  }
  .footer-bottom a:hover { color: var(--white); }

  /* Donatieknop in de footer (wit pilletje, valt op tegen donkergroen) */
  .footer-bottom .footer-donate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;                 /* duwt copyright + statistieken naar rechts */
    background: var(--white);
    color: var(--green-dark);
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--r-full);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transition: transform var(--tf), box-shadow var(--tf);
  }
  .footer-bottom .footer-donate:hover {
    color: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.26);
  }

  /* Steunblok op de Over ons-pagina */
  .over-steun {
    margin-top: 28px;
    background: var(--green-bg);
    border: 1px solid color-mix(in srgb, var(--green-mid) 22%, transparent);
    border-radius: var(--r-xl);
    padding: clamp(20px, 3vw, 30px);
    text-align: center;
  }
  .over-steun h2 {
    font-family: var(--sans);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 8px;
  }
  .over-steun p {
    color: var(--text-mid);
    line-height: 1.65;
    max-width: 56ch;
    margin: 0 auto 16px;
  }
  .over-steun-btn { font-size: var(--t-md); }
  .over-steun-note {
    font-size: var(--t-sm);
    color: var(--text-light);
    margin: 10px auto 0;
  }

  /* Affiliate-tip na GPX-download */
  .gpx-tip {
    display: flex; align-items: center; gap: .6rem;
    margin-top: .75rem; padding: .6rem .75rem;
    background: var(--green-bg); border-radius: 8px;
    font-size: .8rem; color: var(--text-mid); line-height: 1.4;
    border: 1px solid rgba(53,102,17,.15);
  }
  .gpx-tip-icon { font-size: 1rem; flex-shrink: 0; }
  .gpx-tip-text { flex: 1; }
  .gpx-tip-link { color: var(--green-dark); font-weight: 600; text-decoration: underline; white-space: nowrap; }
  .gpx-tip-link:hover { color: var(--green-mid); }
  .gpx-tip-close {
    background: none; border: none; cursor: pointer; font-size: 1rem;
    color: var(--text-light); padding: 0 .2rem; flex-shrink: 0; line-height: 1;
  }
  .gpx-tip-close:hover { color: var(--text); }

  /* Bol.com affiliate banner onder winkellijst */
  .bol-banner {
    display: flex; justify-content: center;
    padding: 1.5rem 1rem 2rem;
  }
  .bol-banner img[width="300"] { border-radius: 8px; max-width: 100%; }

  /* Subtiele steun-regel onder een geladen route */
  .route-donate {
    text-align: center;
    font-size: var(--t-xs);
    color: var(--text-light);
    margin-top: 6px;
  }
  .route-donate a { color: var(--green-mid); font-weight: 600; white-space: nowrap; }
  .route-donate a:hover { color: var(--green-dark); text-decoration: underline; }

  /* Bedankpagina — donateursformulier */
  .donor-label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--text); margin-bottom: 5px; }
  .donor-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--t-sm); color: var(--text-mid); cursor: pointer; }
  .donor-check input { width: 18px; height: 18px; flex-shrink: 0; }
  .donor-privacy { font-size: var(--t-xs); color: var(--text-light); margin-top: 10px; }
  .donor-ok {
    background: var(--green-bg);
    border: 1px solid color-mix(in srgb, var(--green-mid) 25%, transparent);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    margin-top: 14px;
  }
  .donor-ok h3 { font-family: var(--serif); font-size: var(--t-lg); color: var(--green-dark); margin-bottom: 6px; }
  .donor-ok p { color: var(--text-mid); }
  .donor-err { color: var(--red); font-size: var(--t-sm); margin-top: 10px; }

  /* "door Arno" — verduidelijkt dat de bunq-betaling bij de juiste persoon hoort */
  .donate-by { font-size: var(--t-xs); color: var(--text-light); margin-top: 8px; }
  .footer-by { display: block; width: 100%; font-size: var(--t-xs); color: rgba(255,255,255,.55); margin-top: 2px; }
}

/* ══ LOCATIE-BREADCRUMB & HERO-ERROR ════════════════════════════ */
@layer components {
  .location-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--green-bg);
    border-bottom: 1px solid rgba(59,109,17,.15);
    font-size: var(--t-sm);
    color: var(--green-dark);
    animation: fade-up .25s var(--ease) both;
  }

  .crumb-icon { flex-shrink: 0; }
  .crumb-label { flex: 1; }
  .crumb-label strong { font-weight: 600; }

  .crumb-reset {
    flex-shrink: 0;
    width: auto;
    height: auto;
    padding: 3px 10px;
    font-size: var(--t-xs);
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    color: var(--text-light);
    background: transparent;
    transition: background var(--tf), color var(--tf);
  }

  .crumb-reset:hover { background: rgba(163,45,45,.1); color: var(--red); }

  .hero-error {
    font-size: var(--t-sm);
    color: #fff;
    background: rgba(163,45,45,.75);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    max-width: 440px;
    text-align: center;
    animation: fade-up .2s var(--ease) both;
  }
}

/* ══ MODAL ═══════════════════════════════════════════════════════ */
@layer components {
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,18,4,.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    animation: overlay-in .22s var(--ease) both;
  }

  @media (min-width: 600px) { .modal-overlay { align-items: center; } }

  .modal-overlay[hidden] { display: none; }
}

/* ══ NAV-BADGE ═══════════════════════════════════════════════════ */
@layer components {
  .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--amber);
    color: var(--white);
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--sans);
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
  }
}

/* ══ ROUTE-PANEEL ════════════════════════════════════════════════ */
@layer components {
  .route-section {
    background: var(--bg-page);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: min(calc(100dvh - var(--header-h) - var(--toolbar-h)), 78vh);
  }

  /* Header */
  .route-header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-page);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .route-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .route-title {
    font-size: var(--t-md);
    font-family: var(--serif);
    font-weight: 600;
  }

  .route-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .route-total {
    font-size: var(--t-sm);
    color: var(--text-mid);
    font-weight: 500;
  }

  /* Recreatieve metrics-chips */
  .route-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  .rstat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--green-dark);
    background: var(--green-bg);
    border-radius: var(--r-full);
    padding: 4px 10px;
    white-space: nowrap;
  }
  .rstat small { font-weight: 500; opacity: .7; }
  .rstat-score { background: var(--amber-bg); color: var(--amber-ink); }
  .rstat-family { background: #E3EFD5; color: var(--green-mid); }

  /* Klikbare belevingsscore + uitklap-uitleg */
  button.rstat-score {
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--amber-ink) 25%, transparent);
    transition: background var(--tf), box-shadow var(--tf);
  }
  button.rstat-score:hover { background: color-mix(in srgb, var(--amber-bg) 80%, var(--amber-light)); }
  button.rstat-score[aria-expanded="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber-ink) 30%, transparent); }
  .rstat-i { font-size: .9em; opacity: .8; margin-left: 1px; }

  .rstat-info {
    width: 100%;
    margin-top: 4px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    box-shadow: var(--sh-sm);
    animation: fade-up .2s var(--ease) both;
  }
  .rstat-info-lead { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.6; margin-bottom: 10px; }
  .rstat-info-lead strong { color: var(--amber-ink); }
  .rstat-info-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .rstat-info-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--t-sm); color: var(--text); }
  .rstat-info-list strong { color: var(--green-dark); font-variant-numeric: tabular-nums; }
  .rstat-info-foot { font-size: var(--t-xs); color: var(--text-light); font-style: italic; }

  /* Lege staat */
  .route-empty {
    padding: 48px 24px 36px;
    text-align: center;
    color: var(--text-light);
    font-size: var(--t-sm);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .route-empty-icon  { font-size: 3rem; opacity: .3; margin-bottom: 4px; }
  .route-empty-title { font-size: var(--t-md); font-weight: 600; color: var(--text-mid); }
  .route-empty-hint  { max-width: 240px; }
  .route-empty strong { color: var(--green-mid); }

  .route-empty-badge {
    display: inline-block;
    background: var(--green-bg);
    color: var(--green-dark);
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--r-full);
    border: 1px solid rgba(39,80,10,.15);
    white-space: nowrap;
  }

  .route-empty-back {
    margin-top: 4px;
    color: var(--text-light);
  }

  /* Automatische routegeneratie */
  .route-gen {
    width: 100%;
    max-width: 320px;
    background: var(--green-bg);
    border: 1px solid rgba(39,80,10,.12);
    border-radius: var(--r-lg);
    padding: 16px 16px 14px;
    margin: 6px 0 4px;
  }
  .route-gen-title { font-size: var(--t-md); font-weight: 700; color: var(--green-dark); margin-bottom: 2px; }
  .route-gen-hint  { font-size: var(--t-xs); color: var(--text-mid); line-height: 1.5; margin-bottom: 12px; }
  .route-gen-btns  { display: flex; gap: 8px; justify-content: center; }
  .route-gen-btns .btn { flex: 1; }
  .route-gen-status {
    font-size: var(--t-xs);
    color: var(--green-mid);
    font-weight: 600;
    margin-top: 10px;
  }
  .route-empty-or { color: var(--text-light); font-size: var(--t-xs); margin-top: 6px; }

  /* Stop-lijst */
  .route-stops {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    counter-reset: route-counter;
  }

  /* Stop-kaart */
  .route-stop {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border-radius: var(--r-lg);
    padding: 11px 12px;
    box-shadow: var(--sh-sm);
    border: 1.5px solid var(--border);
    transition: box-shadow var(--tb), border-color var(--tb);
  }

  .route-stop:hover { box-shadow: var(--sh); border-color: var(--green-bg); }

  .stop-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    background: var(--green-mid);
    color: var(--white);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
  }

  .stop-emoji { flex-shrink: 0; color: var(--green-mid); display: inline-flex; align-items: center; }

  .stop-info { flex: 1; min-width: 0; }

  .stop-name {
    font-family: var(--serif);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stop-addr {
    font-size: var(--t-xs);
    color: var(--text-light);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stop-leg {
    font-size: var(--t-xs);
    color: var(--green-mid);
    font-weight: 500;
    margin-top: 2px;
  }

  .stop-rm {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 11px;
    color: var(--text-light);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--tf), color var(--tf);
  }

  .stop-rm:hover { background: rgba(163,45,45,.09); color: var(--red); }

  /* Export-knoppen — sticky onderaan het routepaneel */
  .route-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bg-page);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,.07);
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Primaire navigeerknop */
  .route-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: var(--t-md);
    font-weight: 700;
    padding: 13px 16px;
    border-radius: var(--r);
    text-align: center;
  }
  .route-nav-txt { display: inline-flex; flex-direction: column; line-height: 1.15; text-align: left; }
  .route-nav-sub { font-size: var(--t-xs); font-weight: 500; opacity: .85; }

  /* Rij met secundaire knoppen */
  .route-actions-row {
    display: flex;
    gap: 8px;
  }

  .route-sec-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 8px;
    font-size: var(--t-sm);
    font-weight: 600;
    border-radius: var(--r);
    text-align: center;
  }

  .route-sec-sub {
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--text-light);
    line-height: 1.2;
  }

  /* btn-outline variant */
  .btn-outline {
    background: transparent;
    color: var(--text-mid);
    border: 1.5px solid var(--border-md);
    transition: background var(--tf), border-color var(--tf), color var(--tf);
  }

  .btn-outline:hover {
    background: var(--sand-dark);
    border-color: var(--green-mid);
    color: var(--green-dark);
  }

  /* Toast — korte bevestiging (bv. winkel toegevoegd aan route) */
  .br-toast {
    position: fixed;
    left: 50%;
    bottom: 84px;            /* boven de zwevende route-balk */
    transform: translateX(-50%) translateY(16px);
    background: var(--green-dark);
    color: #fff;
    padding: 11px 20px;
    border-radius: var(--r-full);
    font-size: var(--t-sm);
    font-weight: 600;
    box-shadow: var(--sh-lg);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    text-align: center;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .br-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .br-toast { transition: opacity .2s linear; transform: translateX(-50%); }
  }

  /* Zwevende "route klaar"-balk */
  .route-fab {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 150;            /* boven content, onder de modal (200) */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--green-mid);
    color: #fff;
    border: none;
    border-radius: var(--r-full);
    box-shadow: 0 6px 22px rgba(28,65,9,.4);
    cursor: pointer;
    font-family: var(--sans);
    font-size: var(--t-sm);
    max-width: calc(100vw - 28px);
    animation: fabIn .3s var(--ease-spring);
    transition: background var(--tf), transform var(--tf);
  }
  .route-fab:hover { background: var(--green-dark); transform: translateX(-50%) translateY(-2px); }

  .route-fab-icon { font-size: 1.15rem; line-height: 1; }
  .route-fab-text strong { font-weight: 700; }
  .route-fab-cta {
    font-weight: 700;
    background: rgba(255,255,255,.18);
    padding: 4px 12px;
    border-radius: var(--r-full);
    white-space: nowrap;
  }

  @keyframes fabIn {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* Op de route-tab zelf overbodig (de echte knoppen staan er al) */
  body[data-page="route"] .route-fab { display: none !important; }
  /* Op de route-tab: geen losse generator-strip (de route is er al; gebruik
     "Andere route" of de lege-staat-generator) en geen iOS-installatiehint
     die de gepinde actiebalk overlapt. */
  body[data-page="route"] .route-cta { display: none !important; }
  body[data-page="route"] .ios-hint  { display: none !important; }

  /* Kleine variant van btn-ghost en btn-sm */
  .btn-sm {
    padding: 7px 14px;
    font-size: var(--t-sm);
  }

  /* Route-knop op shop-kaarten */
  .card-route-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 9px;
    padding: 5px 13px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-full);
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text-mid);
    background: transparent;
    transition: background var(--tf), color var(--tf), border-color var(--tf);
    cursor: pointer;
  }

  .card-route-btn:hover {
    border-color: var(--green-mid);
    color: var(--green-mid);
    background: var(--green-bg);
  }

  .card-route-btn.in-route {
    background: var(--green-mid);
    border-color: var(--green-mid);
    color: var(--white);
  }

  .card-route-btn.in-route:hover {
    background: color-mix(in srgb, var(--green-mid) 85%, black);
    border-color: color-mix(in srgb, var(--green-mid) 85%, black);
  }
}

/* ══ LEAFLET OVERRIDES ═══════════════════════════════════════════ */
@layer components {
  /* Popup wrapper */
  .br-popup .leaflet-popup-content-wrapper {
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .br-popup .leaflet-popup-content {
    margin: 0;
    width: auto !important;
  }

  .br-popup .leaflet-popup-tip-container {
    margin-top: -1px;
  }

  .br-popup .leaflet-popup-tip {
    box-shadow: none;
  }

  /* Popup inhoud */
  .map-popup { padding: 14px 16px 12px; min-width: 200px; }

  .popup-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
  }

  .popup-emoji {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--green-bg);
    color: var(--green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .popup-info { flex: 1; min-width: 0; }

  .popup-name {
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
  }

  .popup-addr {
    font-size: var(--t-xs);
    color: var(--text-light);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  .popup-hours {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-xs);
    color: var(--text-mid);
    background: var(--sand);
    border-radius: var(--r-sm);
    padding: 5px 8px;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .popup-hours svg { flex-shrink: 0; color: var(--text-light); }

  .popup-bottom {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }

  .popup-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--green-bg);
    color: var(--green-dark);
    font-weight: 500;
  }

  .popup-rating {
    font-size: 11px;
    font-weight: 600;
    color: var(--amber-ink);
    margin-left: auto;
  }

  /* Leaflet algemeen */
  .leaflet-control-zoom a {
    font-family: var(--sans) !important;
    color: var(--text-mid) !important;
    border-radius: var(--r-sm) !important;
  }

  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }

  .leaflet-control-attribution {
    font-size: 12px !important;
    background: rgba(255,255,255,.75) !important;
    backdrop-filter: blur(4px);
  }
}

/* ══ ANIMATIES ═══════════════════════════════════════════════════ */
@layer animations {
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes blob1 {
    0%,100% { transform: translate(0,0) scale(1); }
    35%      { transform: translate(26px,-36px) scale(1.06); }
    70%      { transform: translate(-18px,16px) scale(.96); }
  }

  @keyframes blob2 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%      { transform: translate(-22px,-24px) scale(1.05); }
    75%      { transform: translate(18px,22px) scale(.97); }
  }

  @keyframes blob3 {
    0%,100% { transform: translate(0,0) scale(1); }
    28%      { transform: translate(20px,16px) scale(1.07); }
    72%      { transform: translate(-14px,-20px) scale(.94); }
  }

  @keyframes card-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Respects reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ══ DRIJVENDE TIP-KNOP + IOS-HINT ══════════════════════════════ */
@layer components {
  .float-tip {
    position: fixed;
    bottom: 22px; right: 18px;
    width: 52px; height: 52px;
    background: var(--amber);
    color: var(--white);
    border-radius: 50%;
    font-size: 22px;
    box-shadow: 0 4px 18px rgba(186,117,23,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 60;
    transition: transform var(--tf), box-shadow var(--tf);
  }
  .float-tip:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(186,117,23,.55); }
  .float-tip:active { transform: scale(.95); }

  @media (max-width: 900px) { .float-tip { display: flex; } }

  .ios-hint {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    width: auto;
    background: rgba(27,54,8,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--white);
    border-radius: var(--r-xl);
    padding: 16px 52px 16px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    z-index: 9000;
    box-shadow: var(--sh-lg);
    animation: fade-up .3s var(--ease) both;
    font-size: var(--t-sm);
    line-height: 1.5;
  }
  .ios-hint[hidden] { display: none; }
  .ios-hint-icon { font-size: 22px; flex-shrink: 0; }
  .ios-hint p strong { color: var(--green-light); }
  .ios-hint-close {
    position: absolute;
    top: 50%; right: 10px;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 20px;
    color: rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--tf);
    -webkit-tap-highlight-color: transparent;
  }
  .ios-hint-close:hover, .ios-hint-close:active { background: rgba(255,255,255,.15); color: white; }
}

/* ══ MODALS ══════════════════════════════════════════════════════ */
@layer components {
  .modal {
    background: var(--white);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90dvh;
    overflow-y: auto;
    position: relative;
    animation: fade-up .22s var(--ease) both;
  }

  .modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-light);
    transition: background var(--tf), color var(--tf);
    z-index: 10;
  }
  .modal-close:hover { background: rgba(0,0,0,.06); color: var(--text); }

  .modal-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 24px 0;
  }

  .modal-emoji {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 15px;
    background: var(--green-bg);
    color: var(--green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .modal-title {
    font-size: var(--t-lg);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .modal-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-sm);
    color: var(--text-mid);
    flex-wrap: wrap;
  }

  .modal-meta .shop-badge { font-size: 11px; }

  .modal-subtitle-text { font-size: var(--t-sm); color: var(--text-mid); margin-top: 2px; }

  .modal-body {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .modal-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--t-sm);
    line-height: 1.5;
  }

  .modal-row-icon { flex-shrink: 0; width: 18px; text-align: center; }

  .modal-link {
    display: block;
    margin-top: 3px;
    font-size: var(--t-xs);
    color: var(--green-mid);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .modal-divider { height: 1px; background: var(--border); }

  .modal-products {
    font-size: var(--t-sm);
    color: var(--text-mid);
    line-height: 1.6;
  }

  .modal-tags { display: flex; gap: 5px; flex-wrap: wrap; }

  .modal-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-sm);
  }
  .modal-reviews { color: var(--text-light); }

  .modal-dagvers { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }

  .modal-desc {
    font-size: var(--t-sm);
    color: var(--text-mid);
    line-height: 1.65;
    padding: 10px 12px;
    background: var(--sand);
    border-radius: var(--r);
    border-left: 3px solid var(--green-bg);
  }

  .modal-footer {
    display: flex;
    gap: 8px;
    padding: 12px 24px 20px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .modal-footer .btn { font-size: var(--t-sm); padding: 9px 16px; }
  .modal-footer .btn-green.in-route { background: var(--green-bg); color: var(--green-dark); }

  /* Formulieren */
  .modal-form { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 14px; }

  /* Reparatieschuur */
  .werkplaats { padding: 8px 20px 22px; display: flex; flex-direction: column; gap: 16px; }
  .werkplaats-card {
    background: var(--sand);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 18px 20px;
  }
  .werkplaats-fix {
    background: linear-gradient(160deg, var(--green-bg) 0%, #dcecca 100%);
    border-color: color-mix(in srgb, var(--green-mid) 25%, transparent);
  }
  .werkplaats-h { font-family: var(--serif); font-size: var(--t-md); font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
  .werkplaats-p { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.55; margin-bottom: 14px; }
  .werkplaats-p strong { color: var(--green-dark); }
  .werkplaats-fix .btn { width: 100%; justify-content: center; }
  .werkplaats-hint { font-size: var(--t-sm); color: var(--green-dark); font-weight: 600; margin-top: 10px; text-align: center; }
  .werkplaats .modal-form { padding: 0; }

  .form-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text);
  }

  .form-input, .form-textarea {
    padding: 9px 12px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-sm);
    font-family: var(--sans);
    font-size: var(--t-sm);
    background: var(--white);
    color: var(--text);
    transition: border-color var(--tf), box-shadow var(--tf);
  }

  .form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(59,109,17,.1);
  }

  .form-textarea { resize: vertical; min-height: 100px; }

  .form-req { color: var(--red); }
  .form-opt { color: var(--text-light); font-weight: 400; }

  .form-actions { display: flex; gap: 8px; }

  .form-status {
    font-size: var(--t-sm);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-weight: 500;
  }
  .form-ok  { background: var(--green-bg); color: var(--green-dark); }
  .form-err { background: rgba(163,45,45,.08); color: var(--red); }
}

/* ══ GROENTE & FRUIT CONFETTI ════════════════════════════════════ */
@layer components {
  .emoji-burst {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
  }

  .emoji-flake {
    position: absolute;
    top: -4rem;
    display: block;
    animation: emojifall ease-in forwards;
    will-change: transform, opacity;
    user-select: none;
    line-height: 1;
  }

  @keyframes emojifall {
    0%   { transform: translateY(0)     translateX(0)                        rotate(0deg)   scale(1);   opacity: 1; }
    15%  { opacity: 1; }
    65%  { transform: translateY(65vh)  translateX(var(--drift))              rotate(340deg) scale(.88); opacity: .85; }
    100% { transform: translateY(118vh) translateX(calc(var(--drift) * 1.5)) rotate(600deg) scale(.55); opacity: 0; }
  }

  /* Dankjewel-banner die boven de confetti verschijnt */
  .bedankt-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10000;
    background: var(--white);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    padding: 28px 36px;
    text-align: center;
    animation: bedanktPop .45s var(--ease-spring) .3s forwards;
    pointer-events: none;
  }

  .bedankt-banner-icon { font-size: 3rem; display: block; margin-bottom: 8px; }
  .bedankt-banner-title {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 4px;
  }
  .bedankt-banner-sub { font-size: var(--t-sm); color: var(--text-mid); }

  @keyframes bedanktPop {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
    70%  { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  }

  /* Bug-pletter-animatie (Reparatieschuur) */
  .fix-anim { position: relative; height: 60px; margin-bottom: 6px; }
  .fix-anim span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: 3rem; line-height: 1; }
  .fix-bug   { animation: fixBugWalk .6s ease-in-out 2, fixBugSquash .35s ease-in 1.3s forwards; }
  .fix-splat { opacity: 0; animation: fixSplat .5s ease-out 1.45s forwards; }
  .fix-done  { opacity: 0; animation: fixDone .45s var(--ease-spring) 2.1s forwards; }

  @keyframes fixBugWalk {
    0%,100% { transform: translateX(-50%) rotate(-7deg); }
    50%     { transform: translateX(-50%) rotate(7deg) translateY(-4px); }
  }
  @keyframes fixBugSquash {
    to { transform: translateX(-50%) scaleY(.22) scaleX(1.35) translateY(18px); opacity: .25; }
  }
  @keyframes fixSplat {
    0%   { opacity: 0; transform: translateX(-50%) scale(.3); }
    60%  { opacity: 1; transform: translateX(-50%) scale(1.25); }
    100% { opacity: .85; transform: translateX(-50%) scale(1); }
  }
  @keyframes fixDone {
    0%   { opacity: 0; transform: translateX(-50%) scale(0) rotate(-20deg); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .fix-bug, .fix-splat, .fix-done { animation-duration: .01s; }
    .fix-done { opacity: 1; }
  }

  /* Installeer-knop in header */
  .btn-install {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: background var(--tf);
    flex-shrink: 0;
  }
  .btn-install:hover { background: rgba(255,255,255,.2); }

  /* OSM-indicator */
  .osm-indicator {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 6px var(--pad);
    font-size: var(--t-xs);
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Opvallende auto-route-strip boven de kaart */
  .route-cta {
    max-width: var(--max-w);
    margin: 8px auto 0;
    padding: 10px 14px;
    background: linear-gradient(100deg, var(--green-bg), var(--amber-bg));
    border: 1px solid rgba(39,80,10,.14);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .route-cta-label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--green-dark);
  }
  .route-cta-btns { display: flex; gap: 8px; flex-wrap: wrap; }
}

/* ══ BOODSCHAPPENLIJST ═══════════════════════════════════════════ */
@layer components {
  .bood-section { background: var(--sand); }

  .bood-container {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) var(--pad);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .bood-title { font-size: var(--t-xl); font-weight: 700; }
  .bood-intro { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.65; }

  .bood-input-row {
    display: flex;
    gap: 8px;
  }
  .bood-input { flex: 1; }

  .bood-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .bood-chip {
    padding: 5px 13px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-mid);
    background: var(--white);
    cursor: pointer;
    transition: background var(--tf), border-color var(--tf), color var(--tf);
  }
  .bood-chip:hover { border-color: var(--green-mid); color: var(--green-mid); background: var(--green-bg); }

  .bood-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 28px;
  }

  .bood-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--green-mid);
    color: var(--white);
    border-radius: var(--r-full);
    font-size: var(--t-sm);
    font-weight: 500;
    animation: fade-up .2s var(--ease) both;
  }

  .bood-remove {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    line-height: 1;
    padding: 0 2px;
    transition: color var(--tf);
  }
  .bood-remove:hover { color: var(--white); }

  .bood-empty {
    font-size: var(--t-sm);
    color: var(--text-light);
    font-style: italic;
    padding: 4px 0;
  }

  .bood-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .bood-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .bood-result { display: flex; flex-direction: column; gap: 8px; }

  .bood-result-title {
    font-family: var(--serif);
    font-size: var(--t-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .bood-result-count {
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-light);
    background: var(--sand-dark);
    padding: 2px 8px;
    border-radius: var(--r-full);
  }

  .bood-no-match { font-size: var(--t-sm); color: var(--text-light); font-style: italic; padding: 4px 0; }

  .bood-shops { display: flex; flex-direction: column; gap: 7px; }

  .bood-shop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 10px 12px;
    box-shadow: var(--sh-sm);
    transition: box-shadow var(--tb), border-color var(--tb);
  }
  .bood-shop-item:hover { box-shadow: var(--sh); border-color: var(--green-bg); }

  .bood-shop-emoji { flex-shrink: 0; color: var(--green-mid); display: inline-flex; align-items: center; }
  .bood-shop-info  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .bood-shop-name  { font-family: var(--serif); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bood-shop-addr  { font-size: var(--t-xs); color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .bood-add-route {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border-md);
    font-size: 16px;
    font-weight: 600;
    color: var(--green-mid);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--tf), border-color var(--tf), color var(--tf), transform var(--tf);
  }
  .bood-add-route:hover { background: var(--green-bg); border-color: var(--green-mid); transform: scale(1.1); }
  .bood-add-route.in-route { background: var(--green-mid); border-color: var(--green-mid); color: var(--white); }

  .bood-more { font-size: var(--t-xs); color: var(--text-light); font-style: italic; padding: 4px 12px; }
}

/* ══ SEIZOENSKALENDER (interactief) ══════════════════════════════ */
@layer components {
  .season-page { max-width: var(--max-w); margin: 0 auto; padding: clamp(24px,4vw,48px) var(--pad); }

  .season-page-header { text-align: center; margin-bottom: 24px; }
  .season-page-title  { font-family: var(--serif); font-size: var(--t-2xl, 2rem); font-weight: 700; color: var(--green-dark); }
  .season-page-sub    { margin: 8px auto 0; color: var(--text-mid); font-size: var(--t-md); max-width: 600px; line-height: 1.55; }

  /* ── Maandkiezer (horizontaal scrollbaar) ── */
  .season-monthstrip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 2px 14px;
    margin-bottom: 8px;
    scroll-snap-type: x proximity;
  }
  .season-monthstrip::-webkit-scrollbar { display: none; }

  .season-mchip {
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 62px;
    padding: 10px 8px;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1.5px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: border-color var(--tf), background var(--tf), transform var(--tf), box-shadow var(--tf);
  }
  .season-mchip:hover { border-color: var(--green-light); transform: translateY(-2px); }
  .season-mchip-icon  { font-size: 1.35rem; line-height: 1; }
  .season-mchip-label { font-size: var(--t-xs); font-weight: 600; color: var(--text-mid); }

  .season-mchip.is-active {
    background: var(--green-mid);
    border-color: var(--green-mid);
    box-shadow: 0 4px 14px rgba(28,65,9,.28);
  }
  .season-mchip.is-active .season-mchip-label { color: #fff; }

  .season-mchip-dot {
    position: absolute;
    top: 6px; right: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--amber-light);
    box-shadow: 0 0 0 2px var(--white);
  }
  .season-mchip.is-active .season-mchip-dot { box-shadow: 0 0 0 2px var(--green-mid); }

  /* ── Productpaneel ── */
  .season-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }
  .season-panel-icon  { font-size: 1.6rem; line-height: 1; }
  .season-panel-title { font-family: var(--serif); font-size: var(--t-xl); font-weight: 700; color: var(--green-dark); }
  .season-panel-count {
    margin-left: auto;
    font-size: var(--t-xs); font-weight: 600;
    color: var(--green-dark); background: var(--green-bg);
    padding: 3px 12px; border-radius: var(--r-full);
  }

  .season-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  /* ── Productkaart ── */
  .season-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 18px 12px 14px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    text-align: center;
    transition: transform var(--tb), box-shadow var(--tb), border-color var(--tb);
    animation: season-pop .4s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
  .season-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--green-light);
  }
  .season-card:active { transform: translateY(-1px) scale(.98); }

  .season-card-emoji {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: var(--green-bg);
    color: var(--green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;      /* geldt alleen voor de emoji-fallback */
    line-height: 1;
  }
  .season-card-name  {
    font-family: var(--serif); font-weight: 600; font-size: var(--t-md);
    color: var(--green-dark); text-transform: capitalize;
  }

  /* Mini-beschikbaarheidsbalk: 12 maandsegmenten */
  .season-availbar {
    display: flex;
    gap: 2px;
    margin-top: 2px;
  }
  .sab {
    width: 13px; height: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; font-weight: 700;
    color: transparent;
    background: var(--sand-dark, #e9e2d4);
    border-radius: 3px;
  }
  .sab-on  { background: var(--green-light); color: rgba(255,255,255,.85); }
  .sab-cur { outline: 2px solid var(--amber); outline-offset: 1px; }

  .season-card-find {
    font-size: var(--t-xs);
    color: var(--text-light);
    font-weight: 600;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--tf), transform var(--tf), color var(--tf);
  }
  .season-card:hover .season-card-find { opacity: 1; transform: translateY(0); color: var(--green-mid); }

  @keyframes season-pop {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .season-card { animation: none; }
  }

  /* Op touch: 'vind dichtbij' altijd tonen (geen hover) */
  @media (hover: none) {
    .season-card-find { opacity: 1; transform: none; color: var(--green-mid); }
  }
}

/* ══ OVER ONS ════════════════════════════════════════════════════ */
@layer layout {
  .over-section { background: var(--sand); }

  .over-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: clamp(32px,5vw,64px) var(--pad);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .over-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }

  .over-title { font-size: var(--t-2xl, 2rem); font-weight: 700; margin-bottom: 16px; }

  .over-intro p, .over-adverteren p { font-size: var(--t-base); line-height: 1.7; color: var(--text-mid); margin-bottom: 12px; }
  .over-intro a { color: var(--green-mid); text-decoration: underline; text-underline-offset: 2px; }

  .over-stats {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .stat-item strong { font-size: var(--t-xl); font-weight: 700; color: var(--green-mid); }
  .stat-item span   { font-size: 12px !important; color: var(--text-light); }

  /* Adverteren */
  .adverteer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
  }

  .adverteer-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
    position: relative;
    transition: box-shadow var(--tb);
  }
  .adverteer-card:hover { box-shadow: var(--sh-md); }
  .adverteer-featured   { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(186,117,23,.1); }

  .adverteer-label {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--amber);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--r-full);
    white-space: nowrap;
  }

  .adverteer-prijs {
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
  }
  .adverteer-prijs span { font-size: var(--t-sm); color: var(--text-light); font-weight: 400; }
  .adverteer-naam { font-weight: 600; font-size: var(--t-sm); margin-bottom: 10px; }
  .adverteer-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .adverteer-card li { font-size: var(--t-xs); color: var(--text-mid); padding-left: 12px; position: relative; }
  .adverteer-card li::before { content: '✓'; position: absolute; left: 0; color: var(--green-mid); font-weight: 700; }

  /* Maandroute */
  .over-maand h2, .over-regio h2, .over-contact h2 {
    font-size: var(--t-lg);
    margin-bottom: 10px;
  }

  .maand-placeholder { color: var(--text-light); font-size: var(--t-sm); padding: 12px 0; }

  .maand-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px;
    max-width: 520px;
    box-shadow: var(--sh);
  }
  .maand-badge { font-size: var(--t-xs); color: var(--amber-ink); font-weight: 600; margin-bottom: 6px; }
  .maand-title { font-size: var(--t-lg); font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
  .maand-title-ic {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--green-bg);
    color: var(--green-dark);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .maand-sub   { font-size: var(--t-sm); color: var(--text-mid); margin-bottom: 10px; }
  .maand-intro { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.6; margin-bottom: 12px; }
  .maand-meta  { display: flex; gap: 16px; font-size: var(--t-sm); color: var(--text-light); margin-bottom: 16px; }

  /* Regio-links */
  .regio-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .regio-link {
    padding: 7px 15px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-full);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text-mid);
    transition: background var(--tf), border-color var(--tf), color var(--tf);
  }
  .regio-link:hover { border-color: var(--green-mid); color: var(--green-mid); background: var(--green-bg); }

  /* Contact */
  /* Dankjewel-blok */
  .over-dankjewel {
    margin: 0 0 44px;
    padding: 28px 32px;
    background: linear-gradient(135deg, #fffbf0 0%, var(--amber-bg) 100%);
    border: 1px solid #f0d9a0;
    border-radius: var(--r-xl);
  }
  .over-dankjewel h2 {
    font-family: var(--sans);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--amber);
    margin-bottom: 10px;
  }
  .over-dankjewel p {
    font-size: var(--t-sm);
    color: var(--text-mid);
    line-height: 1.6;
    margin-bottom: 14px;
  }
  .dankjewel-lijst {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dankjewel-lijst li {
    font-size: var(--t-sm);
    color: var(--text);
    padding: 10px 14px;
    background: rgba(255,255,255,.7);
    border-radius: var(--r-md);
    border-left: 3px solid var(--amber-light);
  }
  .dankjewel-naam {
    font-weight: 700;
    color: var(--green-dark);
  }
  .dankjewel-sub {
    font-size: var(--t-xs) !important;
    color: var(--text-light) !important;
    margin: 0 !important;
  }

  .over-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  .over-contact p { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.6; margin-bottom: 12px; }

  .nieuwsbrief-row { display: flex; gap: 8px; }
  .nieuwsbrief-row .form-input { flex: 1; }
}

/* ══ REGIOPAGINA (regio/*.html) ══════════════════════════════════ */
@layer layout {
  .regio-main { background: var(--sand); min-height: 70dvh; }
  .regio-container {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(24px,4vw,48px) var(--pad);
  }
  .regio-breadcrumb { font-size: var(--t-sm); color: var(--text-light); margin-bottom: 16px; }
  .regio-breadcrumb a { color: var(--green-mid); }
  .regio-title { font-size: var(--t-xl); font-weight: 700; margin-bottom: 10px; }
  .regio-intro { font-size: var(--t-base); color: var(--text-mid); line-height: 1.7; margin-bottom: 28px; }
  .regio-intro a { color: var(--green-mid); }

  .regio-shops { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }

  /* Spring-naar-plaats navigatie */
  .regio-placenav { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 0 0 30px; }
  .regio-placenav-label { font-size: var(--t-sm); font-weight: 600; color: var(--text-mid); margin-right: 4px; }
  .regio-placenav a {
    font-size: var(--t-xs); color: var(--green-dark); background: var(--green-bg);
    padding: 4px 10px; border-radius: var(--r-full); text-decoration: none;
    transition: background var(--tf);
  }
  .regio-placenav a:hover { background: color-mix(in srgb, var(--green-bg) 75%, var(--green-light)); }
  .regio-placenav a span { color: var(--text-light); font-weight: 600; }

  /* Gemeente-secties */
  .regio-place { margin-bottom: 34px; scroll-margin-top: 80px; }
  .regio-place-title {
    font-family: var(--serif); font-size: var(--t-lg); font-weight: 700;
    color: var(--green-dark); margin: 0 0 14px; padding-bottom: 8px;
    border-bottom: 2px solid var(--green-bg);
    display: flex; align-items: baseline; gap: 8px;
  }
  .regio-place-count {
    font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
    color: var(--white); background: var(--green-light);
    padding: 1px 9px; border-radius: var(--r-full);
  }

  .regio-shop {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    box-shadow: var(--sh-sm);
    border: 1.5px solid var(--border);
  }
  .regio-emoji { font-size: 24px; flex-shrink: 0; margin-top: 1px; }
  .regio-info  { flex: 1; }
  .regio-shop-name  { font-family: var(--serif); font-size: var(--t-md); font-weight: 600; margin-bottom: 2px; }
  .regio-shop-type  { font-size: var(--t-sm); color: var(--text-mid); }
  .regio-shop-products { font-size: var(--t-xs); color: var(--text-light); margin-top: 3px; }
  .regio-shop-hours    { font-size: var(--t-xs); color: var(--text-light); margin-top: 3px; }
  .regio-shop-rating   { font-size: var(--t-xs); color: var(--amber-ink); margin-top: 3px; font-weight: 600; }

  .regio-cta { text-align: center; padding: 32px 0 16px; }
  .regio-cta-sub { font-size: var(--t-sm); color: var(--text-light); margin-top: 10px; }

  /* Cross-links naar andere provincies (onderaan regiopagina) */
  .regio-more { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); }
  .regio-more-title {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 6px;
  }
  .regio-link-count { color: var(--text-light); font-weight: 400; }
  .regio-more-blog { margin-top: 18px; }
  .regio-more-blog a { color: var(--green-mid); font-weight: 600; }
  .regio-more-blog a:hover { color: var(--green-dark); }

  /* Klikbare winkelkaart (link naar /winkel/) */
  a.regio-shop-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    border-radius: var(--r-lg);
    transition: background 0.15s, box-shadow 0.15s;
  }
  a.regio-shop-link:hover {
    background: var(--green-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  }
  a.regio-shop-link:hover .regio-shop-name { color: var(--green-mid); }
  a.regio-shop-link::after {
    content: '→';
    margin-left: auto;
    padding: 0 4px;
    color: var(--green-light);
    font-size: var(--t-sm);
    align-self: center;
    flex-shrink: 0;
  }

  /* Individuele winkelpagina */
  .winkel-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-bottom: 32px; }
  .winkel-header { display: flex; align-items: center; gap: 18px; padding: 28px 28px 20px; background: linear-gradient(135deg, var(--green-bg) 0%, #deecc6 100%); }
  .winkel-emoji { font-size: 3rem; flex-shrink: 0; }
  .winkel-name { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--green-dark); margin-bottom: 4px; }
  .winkel-type { font-size: var(--t-sm); color: var(--text-mid); font-weight: 600; }
  .winkel-body { padding: 24px 28px 28px; }
  .winkel-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .winkel-stars { font-size: var(--t-lg); font-weight: 700; color: var(--amber); }
  .winkel-reviews { font-size: var(--t-sm); color: var(--text-light); }
  .winkel-desc { font-size: var(--t-md); color: var(--text); line-height: 1.65; margin-bottom: 20px; }
  .winkel-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .winkel-detail { display: grid; grid-template-columns: 130px 1fr; gap: 8px; font-size: var(--t-sm); }
  .winkel-detail dt { font-weight: 700; color: var(--text-mid); }
  .winkel-detail dd { margin: 0; color: var(--text); }
  .winkel-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .winkel-nearby { margin-bottom: 32px; }
  .winkel-nearby-title { font-family: var(--serif); font-size: var(--t-lg); font-weight: 700; color: var(--green-dark); margin-bottom: 14px; }
  .winkel-nearby-card { display: flex; border-radius: var(--r-lg); }

  /* Homepage FAQ-sectie (altijd zichtbaar, boven footer) */
  .faq-section {
    background: var(--sand);
    border-top: 1px solid var(--border);
    padding: 48px 20px 56px;
  }
  .faq-container {
    max-width: 780px;
    margin: 0 auto;
  }
  .faq-section-title {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 28px;
    text-align: center;
  }
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }
  .faq-list .faq-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 22px;
  }
  .faq-list dt {
    font-weight: 700;
    font-size: var(--t-md);
    color: var(--green-dark);
    margin-bottom: 6px;
  }
  .faq-list dd {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--text-mid);
    line-height: 1.6;
  }
  .faq-list dd a { color: var(--green-mid); font-weight: 600; }
  .faq-list dd a:hover { color: var(--green-dark); }

  /* Categoriepagina: provinciegroep */
  .categ-prov { margin-bottom: 44px; }
  .categ-prov-link { font-size: var(--t-sm); margin-top: -4px; margin-bottom: 12px; }
  .categ-prov-link a { color: var(--green-mid); font-weight: 600; }
  .categ-prov-link a:hover { color: var(--green-dark); }

  /* FAQ met details/summary */
  .categ-faq { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); }
  .categ-faq h2 {
    font-family: var(--serif); font-size: var(--t-xl); font-weight: 700;
    color: var(--green-dark); margin-bottom: 18px;
  }
  .faq-item {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .faq-item summary {
    padding: 14px 18px;
    font-weight: 600;
    font-size: var(--t-md);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sand);
    color: var(--green-dark);
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::before { content: '+'; font-size: 1.2rem; font-weight: 700; color: var(--green-light); }
  .faq-item[open] summary::before { content: '−'; }
  .faq-item p { padding: 12px 18px 16px; font-size: var(--t-sm); color: var(--text-mid); margin: 0; }

  /* Aanmeldpagina */
  .aanmeld-main { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
  .aanmeld-hero { text-align: center; margin-bottom: 44px; }
  .aanmeld-hero h1 { font-family: var(--serif); font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 700; color: var(--green-dark); margin-bottom: 12px; }
  .aanmeld-hero p { font-size: var(--t-md); color: var(--text-mid); max-width: 560px; margin: 0 auto; }
  .aanmeld-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 44px; }
  .aanmeld-perk { background: var(--green-bg); border-radius: var(--r-lg); padding: 20px; }
  .aanmeld-perk-icon { font-size: 1.8rem; margin-bottom: 8px; }
  .aanmeld-perk h3 { font-family: var(--serif); font-size: var(--t-md); font-weight: 700; color: var(--green-dark); margin-bottom: 4px; }
  .aanmeld-perk p { font-size: var(--t-sm); color: var(--text-mid); }
  .aanmeld-form-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; }
  .aanmeld-form-wrap h2 { font-family: var(--serif); font-size: var(--t-xl); font-weight: 700; color: var(--green-dark); margin-bottom: 20px; }
  .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
  .form-row label { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
  .form-row input, .form-row textarea, .form-row select {
    padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md);
    font-family: var(--sans); font-size: var(--t-md); color: var(--text); background: var(--sand);
    transition: border-color 0.15s;
  }
  .form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    outline: none; border-color: var(--green-mid); background: var(--white);
  }
  .form-row textarea { min-height: 100px; resize: vertical; }
  .aanmeld-submit { width: 100%; padding: 14px; font-size: var(--t-md); font-weight: 700; cursor: pointer; }

  /* Stichting / ANBI-pagina */
  .steun-block {
    background: linear-gradient(135deg, var(--green-bg) 0%, #dcecca 100%);
    border: 1px solid #c8dca8;
    border-radius: var(--r-xl);
    padding: 28px 32px;
    margin-bottom: 40px;
    text-align: center;
  }
  .steun-block h2 {
    font-family: var(--serif); font-size: var(--t-xl); font-weight: 700;
    color: var(--green-dark); margin-bottom: 10px;
  }
  .steun-block p { font-size: var(--t-md); color: var(--text-mid); line-height: 1.6; max-width: 560px; margin: 0 auto 18px; }
  .steun-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .steun-btn { font-size: var(--t-md); font-weight: 700; padding: 13px 30px; }
  .steun-note { font-size: var(--t-xs) !important; color: var(--text-light) !important; margin: 0 !important; }

  .stichting-section { margin-bottom: 34px; }
  .stichting-section h2 {
    font-family: var(--serif); font-size: var(--t-lg); font-weight: 700;
    color: var(--green-dark); margin-bottom: 12px;
  }
  .stichting-section p { font-size: var(--t-md); color: var(--text-mid); line-height: 1.65; }
  .stichting-anbi-intro { margin-bottom: 16px; }
  .stichting-list { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; }
  .stichting-list li { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.55; }

  .stichting-data { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
  .stichting-data > div {
    display: grid; grid-template-columns: 190px 1fr; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
  }
  .stichting-data dt { font-weight: 700; color: var(--text); font-size: var(--t-sm); }
  .stichting-data dd { margin: 0; color: var(--text-mid); font-size: var(--t-sm); line-height: 1.55; }
  .stichting-data a { color: var(--green-mid); font-weight: 600; }
  @media (max-width: 560px) {
    .stichting-data > div { grid-template-columns: 1fr; gap: 2px; }
  }

  /* Partners / adverteren-pagina */
  .partner-stats { justify-content: center; margin: 0 0 40px; padding: 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); }
  .partner-tiers { margin: 16px 0 8px; }
  .partner-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
  .partner-cta-note { font-size: var(--t-sm); color: var(--text-light); }

  /* Provincie-fietsroute op de regiopagina */
  .regioroute {
    margin: 32px 0 8px;
    padding: 24px;
    background: linear-gradient(160deg, var(--green-bg) 0%, #dcecca 100%);
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
  }
  .regioroute-title {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 6px;
  }
  .regioroute-intro { font-size: var(--t-sm); color: var(--text-mid); margin-bottom: 16px; }
  .regioroute-intro strong { color: var(--text); }
  .regioroute-stops { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .regioroute-stop { display: flex; align-items: center; gap: 10px; }
  .regioroute-num {
    width: 26px; height: 26px; flex-shrink: 0;
    background: var(--green-mid); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--t-xs); font-weight: 700; border: 2px solid #fff;
  }
  .regioroute-emoji { font-size: 1.1rem; }
  .regioroute-name { font-size: var(--t-sm); font-weight: 500; }
}

/* ══ RESPONSIEF ══════════════════════════════════════════════════ */
@layer responsive {
  /* Tablet: iets gelijkwaardigere verdeling */
  @media (max-width: 1100px) {
    .content-wrap { grid-template-columns: 1fr 1fr; }  /* 50/50 */
  }

  /* Mobiel (≤900px): kaart en lijst NOOIT naast elkaar — altijd gestapeld.
     Voorkomt dat ze horizontaal buiten beeld lopen vóór locatiekeuze.
     De bottom-sheet JS legt hier daarna de fixed-layout overheen. */
  @media (max-width: 900px) {
    .content-wrap {
      display: block !important;
      grid-template-columns: none !important;
    }
    .map-section,
    .list-section {
      grid-column: auto !important;
      grid-row: auto !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .map-section {
      position: relative;
      z-index: 1; /* stacking context: houdt Leaflet-tiles (z-index 200+) opgesloten zodat ze niet boven de fixed header (z-index 100) uitkomen */
      top: auto;
      height: 50vh;
      min-height: 280px;
      pointer-events: none; /* voorkomt scroll-trap: Leaflet vangt geen touch op de landingspagina */
    }
    body.map-active .map-section { pointer-events: auto; }
    .list-section {
      position: relative;
      max-height: none;
      border-left: none;
      border-top: 1px solid var(--border);
    }
  }

  /* Mobiel: voorkom dat iOS Safari inzoomt zodra je een veld aantikt
     (gebeurt bij invoer < 16px). Geldt voor alle formuliervelden. */
  /* Touch-schermen: iOS zoom-fix + 44px tap targets */
  @media (hover: none) {
    input, select, textarea,
    .form-input, .hero-search-input, .search-input, .sort-select,
    .diploma-name-input, .sk-backup-code, .bood-input {
      font-size: 16px !important;
    }
    button, .btn, .nav-btn, .chip, .tip-btn, .route-nav-btn,
    .nav-meer-item, .sheet-map-btn {
      min-height: 44px;
    }
    a.regio-shop-link, a.blog-card { min-height: 44px; }
  }

  /* Notch / home-indicator */
  .site-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Desktop: safe-area voor zwevende knoppen */
  @media (min-width: 901px) {
    .float-tip { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    .route-fab { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
    .br-toast  { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  }

  /* Mobiel: zwevende knoppen boven de bottom nav */
  @media (max-width: 900px) {
    :root { --bottomnav-h: 60px; }
    body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
    .float-tip { bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom, 0px)); right: 14px; }
    .route-fab { bottom: calc(var(--bottomnav-h) + 12px + env(safe-area-inset-bottom, 0px)); }
    /* Leaflet zoom-knoppen boven de bottom nav */
    .leaflet-bottom { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)) !important; }
  }

  @media (max-width: 900px) {
    /* --header-h blijft 62px (desktop-waarde) — geen override nodig met compacte header */

    /* Header altijd vast bovenaan */
    .site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
    }

    /* Compenseer voor de fixed header zodat pagina-inhoud er niet onder schuift */
    body { padding-top: var(--header-h); }

    /* Navigatie verhuist naar bottom-nav — header toont alleen logo + tip-knop */
    .header-nav,
    .nav-meer-panel { display: none !important; }

    .tip-btn span { display: none; }
    .tip-btn { padding: 8px 12px; margin-left: auto; }
    .btn-install { display: none; }
  }

  /* Kleine telefoons (< 480px): verberg extra nav-knoppen, toon Meer▾ */
  @media (max-width: 480px) {
    .nav-btn-desktop { display: none !important; }
  }

  /* Zeer smalle telefoons (≤400px): trim nav-padding zodat "Meer ▾" past */
  @media (max-width: 400px) {
    .nav-btn { padding-left: 10px; padding-right: 10px; }
    .nav-toggle-btn { padding-left: 11px; padding-right: 11px; }
    .nav-toggle { margin-right: 2px; }
    .nav-ic { margin-right: 5px; }
  }

  /* Meer-dropdown */
  .nav-btn-meer { display: none; }
  @media (max-width: 480px) { .nav-btn-meer { display: inline-flex; } }

  .nav-meer-panel {
    position: fixed;
    top: var(--header-h);
    right: 8px;
    z-index: 200;
    background: var(--white);
    border-radius: var(--r-xl);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    padding: 8px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nav-meer-panel[hidden] { display: none; }

  .nav-meer-item {
    text-align: left;
    padding: 12px 16px;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--text);
    border-radius: var(--r-lg);
    width: 100%;
    transition: background var(--tf);
  }
  .nav-meer-item:hover { background: var(--green-bg); color: var(--green-dark); }

  /* Mobiel: basis (altijd) */
  @media (max-width: 900px) {
    .toolbar-inner { flex-wrap: wrap; padding-block: 8px; gap: 8px; }
    /* Zoekveld verbergen op mobiel: lijst is scrollbaar + filters volstaan */
    .search-wrap { display: none; }
    /* Toast bovenaan — botst niet met bottom nav */
    .br-toast {
      top: calc(var(--header-h) + 12px);
      bottom: auto;
    }
    .filter-chips  {
      order: 3; width: 100%; padding-bottom: 4px;
      overflow-x: auto; scrollbar-width: none;
      -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
      mask-image: linear-gradient(to right, black 80%, transparent 100%);
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    /* Controls-rij (GPS + Nu open + Afstand + Straal) als één volle,
       scrollbare rij — hoogte-neutraal en niets wordt afgekapt.
       Filterchips komen op de rij eronder. */
    .toolbar-locate { display: inline-flex; }
    .toolbar-right {
      order: 2;
      width: 100%;
      margin-left: 0;
      gap: 6px;
      flex-wrap: nowrap;
      overflow: visible;
    }
    .toolbar-right::-webkit-scrollbar { display: none; }
    .toolbar-divider { display: none; }
    .toolbar-locate { padding: 7px 12px; }
    .toolbar-right .toggle-pill { padding: 7px 11px; font-size: var(--t-xs); flex-shrink: 0; }
    .more-filters-btn { margin-left: auto; padding: 7px 11px; font-size: var(--t-xs); }
    .sort-select {
      max-width: none;
      flex-shrink: 0;
      padding: 7px 26px 7px 11px;
      font-size: var(--t-xs);
      background-position: right 8px center;
    }
    .btn { max-width: 100%; box-sizing: border-box; }
    /* Route-CTA ("Maak een fietsroute") verbergen op mobiel: staat in verkeerde flow-positie,
       route aanmaken loopt via het Route-tabblad */
    .route-cta { display: none; }
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .footer-cols  { gap: 20px; flex-wrap: wrap; }
    .footer-col   { flex: 1 1 140px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* Winkelkaartjes luchtiger op mobiel */
    .shop-card { padding: 16px 14px 14px; }
    .shop-emoji { width: 44px; height: 44px; border-radius: 12px; }
    .shop-name { font-size: 16px; white-space: normal; line-height: 1.25; }
    .shop-address { font-size: 13px; white-space: normal; }
    .shop-meta { margin-top: 10px; gap: 6px; }
    .shop-tag { font-size: 12px; padding: 3px 10px; }
    /* Verberg extra tags op mobiel — houd het scanbaar */
    .shop-tag:nth-child(n+4) { display: none; }
  }

  /* Mobiel: bottom sheet layout — alleen actief na locatiekeuze */
  @media (max-width: 900px) {
    body.map-active .content-wrap {
      display: block !important;
      position: relative;
    }

    body.map-active .map-section {
      position: fixed !important;
      top: var(--header-h) !important;
      left: 0 !important; right: 0 !important;
      bottom: 0 !important;
      height: auto !important;
      max-height: none !important;
      width: 100% !important;
      z-index: 10;
    }

    body.map-active .toolbar {
      position: fixed !important;
      top: var(--header-h) !important;
      left: 0; right: 0;
      z-index: 20;
      height: auto;
      overflow: visible;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

    body.map-active .list-section {
      position: fixed !important;
      left: 0; right: 0; bottom: 0;
      z-index: 30;
      border-left: none;
      border-top: none;
      border-radius: 20px 20px 0 0;
      background: var(--white);
      box-shadow: 0 -4px 24px rgba(0,0,0,.15);
      max-height: 92dvh;
      overflow: hidden;
      transition: transform .36s cubic-bezier(.32,.72,0,1);
      will-change: transform;
      /* touch-action alleen op de handle, niet op de hele sheet — anders scrollt sheet-scroll niet */
    }

    /* Sheet volledig open: kaart staat achter de sheet, blokkeer map-interactie */
    body.sheet-is-open .map-section {
      pointer-events: none;
    }

    body.map-active .list-section.sheet-half { transform: translateY(48%); }
    body.map-active .list-section.sheet-open { transform: translateY(0); }
    body.map-active .list-section.sheet-no-transition { transition: none !important; }

    /* Route-pagina: kaart compact bovenaan, de winkels in de route meteen
       zichtbaar in de eigen scroll-box eronder (geen fullscreen-kaart +
       "swipe omhoog" meer). De actiebalk blijft gepind onderaan die box. */
    body.map-active[data-page="route"] .map-section {
      position: static !important;
      top: auto !important; bottom: auto !important;
      height: 34vh !important;
      max-height: 34vh !important;
      z-index: 1;
    }
    body.map-active[data-page="route"] .toolbar { display: none !important; }
    body.map-active[data-page="route"] .route-section {
      max-height: calc(100dvh - var(--header-h) - 34vh);
    }

    /* Sleepgreep */
    .sheet-handle {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 10px 16px 8px;
      cursor: pointer;
      user-select: none;
      background: var(--white);
      border-radius: 20px 20px 0 0;
      flex-shrink: 0;
      touch-action: none;
    }
    body.map-active .sheet-handle { display: flex; }
    .sheet-handle-bar { width: 40px; height: 4px; background: var(--border-md); border-radius: 2px; }
    .sheet-handle-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .sheet-handle-label { font-size: var(--t-sm); color: var(--text-mid); font-weight: 600; }
    .sheet-map-btn {
      position: absolute;
      right: 0;
      font-size: var(--t-xs);
      color: var(--green-mid);
      font-weight: 600;
      background: var(--green-bg);
      border-radius: var(--r-full);
      padding: 3px 10px;
      display: none;
    }

    /* ── Quicknav: altijd-bereikbare navigatiestrip in de sheet-handle ── */
    .sheet-quicknav {
      display: flex;
      width: 100%;
      gap: 6px;
      padding: 4px 0 2px;
      border-top: 1px solid var(--border);
    }
    .sq-btn {
      flex: 1;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 6px 4px 5px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 600;
      color: var(--text-mid);
      background: transparent;
      transition: background .12s, color .12s;
      touch-action: manipulation;
    }
    .sq-btn:active,
    .sq-btn:focus-visible {
      background: var(--green-bg);
      color: var(--green-dark);
    }
    .sq-btn svg { stroke: currentColor; }

    /* Scrollbaar deel */
    .sheet-scroll {
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      height: calc(92dvh - 64px);
      overscroll-behavior: contain;
      touch-action: pan-y; /* native scroll toestaan; handle heeft z'n eigen touch-action: none */
    }

    .list-header { border-radius: 0; border-top: 1px solid var(--border); }

    /* Onboarding-tooltip */
    .sheet-onboard {
      position: fixed;
      bottom: calc(52% + 14px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 35;
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--green-dark);
      color: var(--white);
      font-size: var(--t-sm);
      font-weight: 600;
      padding: 9px 10px 9px 18px;
      border-radius: var(--r-full);
      box-shadow: 0 4px 20px rgba(0,0,0,.28);
      white-space: nowrap;
      cursor: pointer;
      animation: fade-up .35s var(--ease) both;
    }
    .sheet-onboard[hidden] { display: none; }
    /* Pijltje naar de sheet-handle */
    .onboard-caret {
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 7px solid var(--green-dark);
    }
    .onboard-dismiss {
      display: flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; flex-shrink: 0;
      border-radius: 50%;
      background: rgba(255,255,255,.18);
      color: var(--white);
      font-size: 15px; line-height: 1;
      transition: background .12s;
    }
    .onboard-dismiss:hover { background: rgba(255,255,255,.32); }
    @keyframes fadeout { to { opacity: 0; } }
  }

  @media (max-width: 480px) {
    .hero { padding-bottom: clamp(88px, 18vw, 130px); }
    .hero-actions       { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
    .hero-trust         { gap: 0; padding: 10px 12px; }
    .hero-trust-sep     { height: 24px; }
    .hero-trust-label   { font-size: .6rem; }
    .voordelen-inner    { grid-template-columns: 1fr 1fr; gap: 12px; }
    .voordeel-card      { padding: 16px 14px; }
    .footer-cols  { flex-direction: column; }
    .adverteer-grid { grid-template-columns: 1fr; }
    .modal-footer   { flex-direction: column; }
    .modal-footer .btn { width: 100%; justify-content: center; }
  }

  @media (max-width: 860px) {
    .over-grid      { grid-template-columns: 1fr; }
    .adverteer-grid { grid-template-columns: 1fr 1fr; }
    .over-contact   { grid-template-columns: 1fr; }
  }
}

/* ══ BOTTOM NAV ═════════════════════════════════════════════════ */
@layer components {
  /* Verborgen op desktop */
  .bottom-nav { display: none; }

  @media (max-width: 900px) {
    .bottom-nav {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 40;
      background: var(--white);
      border-top: 1px solid var(--border);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      box-shadow: 0 -2px 14px rgba(0,0,0,.07);
    }

    .bn-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 8px 4px 6px;
      font-size: 10px;
      font-weight: 600;
      color: var(--text-light);
      min-height: var(--bottomnav-h, 60px);
      position: relative;
      transition: color .12s, background .12s;
      border-radius: 0;
      touch-action: manipulation;
    }
    .bn-btn:active { background: var(--green-bg); }
    .bn-btn.active {
      color: var(--green-mid);
    }
    .bn-btn.active svg { stroke: var(--green-mid); }
    .bn-btn svg { stroke: var(--text-light); transition: stroke .12s; }

    .bn-badge {
      position: absolute;
      top: 5px;
      right: calc(50% - 18px);
      background: var(--amber);
      color: var(--white);
      font-size: 9px;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }
    .bn-badge[hidden] { display: none; }

    /* Meer-panel: popup boven de bottom nav */
    .bn-meer-panel {
      position: fixed;
      bottom: calc(var(--bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px) + 6px);
      right: 8px;
      z-index: 50;
      background: var(--white);
      border-radius: var(--r-xl);
      box-shadow: 0 8px 32px rgba(0,0,0,.18);
      padding: 8px;
      min-width: 210px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .bn-meer-panel[hidden] { display: none; }

    .bn-meer-item {
      text-align: left;
      padding: 12px 16px;
      font-size: var(--t-md);
      font-weight: 500;
      color: var(--text);
      border-radius: var(--r-lg);
      width: 100%;
      transition: background var(--tf);
    }
    .bn-meer-item:hover,
    .bn-meer-item:active { background: var(--green-bg); color: var(--green-dark); }
  }
}

/* ══ PRESTATIES ══════════════════════════════════════════════════ */
@layer components {
  /* Lange winkellijst: alleen zichtbare kaartjes volledig renderen */
  .shop-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 88px;
  }
}

/* ══ STEMPELKAART ════════════════════════════════════════════════ */
@layer components {

  .sk-section-wrap { background: var(--sand); min-height: 100vh; }

  .sk-page {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(24px,4vw,48px) var(--pad);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* ── Intro: wat is het + zo werkt het ── */
  .sk-intro {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: clamp(20px, 3vw, 28px);
    box-shadow: var(--sh-sm);
  }
  .sk-intro-title {
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--green-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .sk-intro-lead {
    font-size: var(--t-sm);
    color: var(--text-mid);
    line-height: 1.7;
    max-width: 62ch;
    margin-bottom: 20px;
  }
  .sk-intro-lead strong { color: var(--green-mid); }

  .sk-how {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
  }
  .sk-how-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--green-bg);
    border-radius: var(--r-lg);
    padding: 14px 16px;
  }
  .sk-how-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: var(--green-mid);
    color: var(--white);
    font-weight: 700;
    font-size: var(--t-sm);
    border-radius: 50%;
  }
  .sk-how-text { font-size: var(--t-sm); color: var(--text); line-height: 1.5; }
  .sk-how-text strong { color: var(--green-dark); white-space: nowrap; }

  @media (min-width: 620px) {
    .sk-how { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  }

  /* ── Rang-kaart ── */
  .sk-rank-card {
    background: var(--white);
    border: 2px solid var(--rank-color, var(--green-mid));
    border-radius: var(--r-xl);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: var(--sh-md);
    flex-wrap: wrap;
  }

  .sk-rank-icon  { font-size: 3rem; line-height: 1; flex-shrink: 0; }
  .sk-rank-info  { flex: 1; min-width: 140px; }
  .sk-rank-title { font-family: var(--serif); font-size: var(--t-xl); font-weight: 700; color: var(--rank-color, var(--green-dark)); }
  .sk-rank-sub   { font-size: var(--t-sm); color: var(--text-mid); margin-top: 2px; }

  .sk-rank-progress-wrap { width: 100%; margin-top: 4px; }
  .sk-rank-progress-label { font-size: var(--t-sm); color: var(--text-mid); margin-bottom: 8px; }
  .sk-rank-progress-label strong { color: var(--text); }
  .sk-rank-progress-label em { color: var(--rank-color, var(--green-mid)); font-style: normal; font-weight: 600; }

  .sk-rank-bar {
    height: 10px;
    background: var(--sand-dark);
    border-radius: var(--r-full);
    overflow: hidden;
  }
  .sk-rank-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rank-color, var(--green-mid)) 0%, color-mix(in srgb, var(--rank-color, var(--green-mid)) 70%, white) 100%);
    border-radius: var(--r-full);
    transition: width .6s var(--ease);
  }
  .sk-rank-max { font-size: var(--t-sm); color: var(--amber-ink); font-weight: 600; }

  /* ── Sectie-headers ── */
  .sk-section { }
  .sk-section-title {
    font-family: var(--serif);
    font-size: var(--t-lg);
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sk-count-badge {
    margin-left: auto;
    background: var(--green-bg);
    color: var(--green-dark);
    font-size: var(--t-xs);
    font-family: var(--sans);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--r-full);
  }
  .sk-count-amber { background: var(--amber-bg); color: var(--amber-ink); }

  .sk-empty {
    color: var(--text-mid);
    font-size: var(--t-sm);
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    line-height: 1.7;
  }
  .sk-empty strong { color: var(--green-mid); }

  /* ── Stempel-grid ── */
  .sk-stamp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 10px;
  }

  .sk-stamp {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: var(--t-xs);
    transition: transform .15s var(--ease);
  }

  .sk-stamp-empty {
    border: 2px dashed var(--border-md);
    background: rgba(0,0,0,.02);
  }
  .sk-stamp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border-md);
    opacity: .5;
  }

  .sk-stamp-filled {
    background: var(--amber-bg);
    border: 2.5px double var(--amber);
    transform: rotate(var(--rot, 0deg));
    cursor: default;
    box-shadow: var(--sh-sm);
  }
  .sk-stamp-filled:hover { transform: rotate(0deg) scale(1.12); z-index: 1; }

  .sk-stamp-emoji { color: var(--amber); display: inline-flex; align-items: center; justify-content: center; }
  .sk-stamp-name  { font-size: .55rem; color: var(--text-mid); text-align: center; line-height: 1.2; max-width: 64px; overflow: hidden; }

  /* ── Recent bezocht ── */
  .sk-recent { display: flex; flex-direction: column; gap: 0; }
  .sk-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    transition: background var(--tf);
  }
  .sk-recent-item:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sk-recent-item:last-child  { border-radius: 0 0 var(--r-lg) var(--r-lg); border-bottom: none; }
  .sk-recent-item:hover { background: var(--sand); }

  .sk-recent-emoji {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--green-bg);
    color: var(--green-dark);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sk-recent-info  { flex: 1; min-width: 0; }
  .sk-recent-name  { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sk-recent-addr  { font-size: var(--t-xs); color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sk-recent-age   { font-size: var(--t-xs); color: var(--text-light); flex-shrink: 0; white-space: nowrap; }

  /* ── Achievements ── */
  .sk-achievements { display: flex; flex-direction: column; gap: 8px; }
  .sk-achievement {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1.5px solid var(--border);
    opacity: .55;
    transition: opacity var(--tf), border-color var(--tf);
  }
  .sk-achievement-earned {
    opacity: 1;
    border-color: var(--amber);
    background: var(--amber-bg);
  }
  .sk-ach-icon   { font-size: 1.6rem; flex-shrink: 0; }
  .sk-ach-info   { flex: 1; }
  .sk-ach-title  { font-weight: 600; font-size: var(--t-sm); }
  .sk-ach-desc   { font-size: var(--t-xs); color: var(--text-mid); margin-top: 1px; }
  .sk-ach-check  { color: var(--amber); font-weight: 700; font-size: var(--t-lg); }

  /* ── Actie-sectie ── */
  .sk-actions-section { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .sk-diploma-btn { font-size: var(--t-md); padding: 14px 24px; }
  .sk-clear-btn   { font-size: var(--t-sm); color: var(--text-light); }

  /* Back-up: bewaar & herstel */
  .sk-backup-intro { font-size: var(--t-sm); color: var(--text-mid); line-height: 1.55; margin-bottom: 14px; }
  .sk-backup-intro strong { color: var(--green-dark); }
  .sk-backup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .sk-backup-panel {
    margin-top: 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px;
  }
  .sk-backup-label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: 8px; }
  .sk-backup-code {
    width: 100%;
    font-family: ui-monospace, monospace;
    font-size: var(--t-xs);
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    resize: vertical;
    background: var(--sand);
    color: var(--text-mid);
  }
  .sk-backup-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
  .sk-file-label { cursor: pointer; }
  .sk-backup-msg { margin-top: 10px; font-size: var(--t-sm); font-weight: 600; }
  .sk-backup-ok  { color: var(--green-dark); }
  .sk-backup-err { color: var(--red); }

  /* ── Check-in knop in modal ── */
  .modal-checkin-wrap {
    border-top: 1px solid var(--border);
    padding: 14px 20px 16px;
    background: var(--green-bg);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .modal-checkin-btn {
    width: 100%;
    justify-content: center;
    background: var(--green-mid);
    color: var(--white);
    font-weight: 600;
    font-size: var(--t-md);
    padding: 12px 16px;
    border-radius: var(--r);
    transition: background var(--tf), transform var(--tf);
    border: none;
    cursor: pointer;
  }
  .modal-checkin-btn:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-1px); }
  .modal-checkin-btn:disabled             { background: var(--green-bg); color: var(--green-mid); cursor: default; }
  .modal-checkin-btn.checkin-done         { background: transparent; color: var(--green-dark); border: 1.5px solid var(--green-mid); }
  .modal-checkin-btn.checkin-far          { background: var(--amber); }
  .modal-checkin-hint {
    font-size: var(--t-xs);
    color: var(--green-dark);
    text-align: center;
    margin-top: 6px;
    opacity: .75;
    line-height: 1.5;
  }
  .modal-checkin-hint.checkin-hint-warn {
    color: var(--amber-ink);
    opacity: 1;
    font-weight: 600;
  }

  /* ── Stempel-burst animatie ── */
  .stamp-burst {
    position: fixed;
    z-index: 9999;
    transform: translateX(-50%) translateY(-100%);
    font-size: 2.5rem;
    pointer-events: none;
    animation: stampPop .9s var(--ease-spring) forwards;
  }
  .stamp-burst-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--white);
    border: 2px solid var(--amber);
    border-radius: 50%;
    width: 70px; height: 70px;
    font-size: 1.2rem;
    justify-content: center;
    box-shadow: var(--sh-lg);
    text-align: center;
    line-height: 1.2;
  }
  .stamp-burst-inner small { font-size: .55rem; font-family: var(--sans); color: var(--green-dark); }
  @keyframes stampPop {
    0%   { transform: translateX(-50%) translateY(-100%) scale(0) rotate(-20deg); opacity: 1; }
    50%  { transform: translateX(-50%) translateY(-140%) scale(1.2) rotate(4deg); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-180%) scale(.9) rotate(0deg); opacity: 0; }
  }

  /* ── Badge "Bezocht" in shop-lijst ── */
  .badge-visited {
    background: var(--green-bg);
    color: var(--green-dark);
    border: 1px solid rgba(39,80,10,.2);
  }

  /* ── Diploma-overlay ── */
  .diploma-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
  }
  .diploma-modal {
    background: var(--white);
    border-radius: var(--r-xl);
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    position: relative;
    box-shadow: var(--sh-lg);
  }
  .diploma-close {
    position: absolute;
    top: 14px; right: 16px;
    font-size: 1.4rem;
    color: var(--text-light);
    background: none; border: none; cursor: pointer;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background var(--tf), color var(--tf);
  }
  .diploma-close:hover { background: var(--sand-dark); color: var(--text); }

  .diploma-preview {
    border: 3px double var(--amber);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #FFF8EE;
  }
  .diploma-doc      { padding: 28px 32px; text-align: center; font-family: var(--sans); }
  .diploma-header   { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; font-family: var(--serif); font-size: 18px; }
  .diploma-logo     { font-size: 1.5rem; }
  .diploma-logo-text strong { color: var(--green-light); }
  .diploma-type     { font-family: var(--serif); font-size: clamp(28px,5vw,44px); font-weight: 700; color: var(--amber); letter-spacing: .1em; margin-bottom: 8px; }
  .diploma-awarded  { font-size: var(--t-sm); color: var(--text-light); margin-bottom: 4px; }
  .diploma-name     { font-family: var(--serif); font-size: clamp(22px,4vw,34px); font-weight: 700; color: var(--green-dark); margin: 8px 0 12px; min-height: 1.3em; }
  .diploma-rank-badge { display: inline-block; background: var(--green-bg); color: var(--green-dark); border: 1.5px solid var(--green-light); border-radius: var(--r-full); padding: 4px 18px; font-weight: 600; margin-bottom: 18px; }
  .diploma-text     { font-size: var(--t-sm); line-height: 1.7; color: var(--text); margin-bottom: 18px; }
  .diploma-text strong { color: var(--green-mid); }
  .diploma-visited  { background: var(--green-bg); border-radius: var(--r); padding: 12px 16px; margin-bottom: 18px; text-align: center; }
  .diploma-visited-title { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); margin-bottom: 8px; }
  .diploma-visited-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: var(--t-sm); }
  .diploma-seal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border: 3px double var(--amber);
    border-radius: 50%;
    margin: 0 auto 14px;
    background: var(--amber-bg);
  }
  .diploma-seal-inner { text-align: center; font-size: .6rem; font-weight: 700; color: var(--amber-ink); letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; }
  .diploma-date       { font-size: var(--t-xs); color: var(--text-light); margin-bottom: 4px; }
  .diploma-footer-text{ font-size: var(--t-xs); color: var(--text-light); font-style: italic; }

  .diploma-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .diploma-name-label { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; }
  .diploma-name-input { flex: 1; min-width: 160px; }
  .diploma-actions { display: flex; justify-content: center; }

  /* ── nav-badge stempelkaart ── */
  .nav-badge-stamp {
    background: var(--amber);
    color: var(--white);
  }
}

/* ── Kaartlegenda ──────────────────────────────────────────────────── */
.map-legend {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--white, #fff);
  color: var(--text, #1A1A18);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  overflow: hidden;
  margin: 0 0 10px 10px;
  font-size: 12px;
  line-height: 1.2;
  user-select: none;
}
.map-legend-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 0;
  background: none;
  padding: 7px 11px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: inherit;
}
.map-legend-chevron { margin-left: auto; transition: transform .2s ease; }
.map-legend.collapsed .map-legend-chevron { transform: rotate(-90deg); }
.map-legend-body {
  list-style: none;
  margin: 0;
  padding: 2px 11px 9px;
  display: grid;
  gap: 5px;
}
.map-legend.collapsed .map-legend-body { display: none; }
.map-legend-body li { display: flex; align-items: center; }
.map-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-right: 8px;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  flex: 0 0 auto;
}

/* ── Sociaal-bewijs-strip onder de testimonial (gecentreerd, niet links) ── */
.quote-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 5vw, 48px);
  max-width: 680px;
  margin: clamp(20px, 3vw, 28px) auto 0;
}

/* ── Hero mini-preview (3 echte uitgelichte winkels) ───────────────── */
.hero-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: fade-up .55s var(--ease, ease) .3s both;
}
.hero-preview-label {
  margin: 0;
  font-size: var(--t-xs, 12px);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.hero-preview-cards {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: safe center;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 2px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-preview-cards::-webkit-scrollbar { display: none; }
.hero-preview-card {
  flex: 0 0 auto;
  width: clamp(158px, 44vw, 190px);
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.hero-preview-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .24); }
.hero-preview-card:focus-visible { outline: 2px solid var(--amber-light, #E8981C); outline-offset: 2px; }
.hero-preview-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-bg, #E7F0D6);
  border-radius: 50%;
}
.hero-preview-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.hero-preview-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--green-dark, #1C4109);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-preview-place {
  font-size: 11px;
  color: var(--text-mid, #555550);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-preview-rating {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--amber, #B8720F);
  white-space: nowrap;
}

/* ── Footer social-links (Facebook / Instagram) ────────────────────── */
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.footer-social-link:hover { color: #fff; background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.footer-social-link:focus-visible { outline: 2px solid var(--amber-light, #E8981C); outline-offset: 2px; }

/* ══ Provincieverzamelaar ════════════════════════════════════════════ */
.prov-kaart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.prov-kaart-hdr {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.prov-kaart-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.prov-kaart-score {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green-mid);
  font-family: var(--serif);
  line-height: 1;
}
.prov-kaart-total {
  font-size: .85rem;
  font-weight: 400;
  color: var(--text-light);
}
.prov-kaart-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}
.prov-kaart-tip {
  font-size: .82rem;
  color: var(--text-light);
  text-align: center;
  margin: 0;
}
.prov-kaart-complete {
  font-size: .9rem;
  font-weight: 600;
  color: var(--green-mid);
  text-align: center;
  margin: 0;
  background: var(--green-bg);
  padding: 8px 16px;
  border-radius: 8px;
  width: 100%;
}