/* ============================================================
   Mobiele homepage: "Keuzegids"-ontwerp (v2 uit _MOBIEL-sandbox)
   Alleen actief ≤700px; daarboven blijft de bestaande desktop-home.
   Prefix hm2- om botsingen met page-home.css te voorkomen.
   ============================================================ */

.hm2{display:none}
.hm2-actiebalk{display:none}

@media (max-width:700px){

/* Desktop-secties uit, mobiel blok aan */
.hm-hero,.logo-strip,.usp,.kosten,.top10,.slot,.hm-artikelen{display:none}
.hm2{display:block}
body.is-home-v2{padding-bottom:76px}

.hm2 .hm2-wrap{padding:0 16px;max-width:560px;margin:0 auto}

/* Donkere hero met taakkeuze */
.hm2-hero{background:var(--color-ink);color:var(--color-on-dark);padding:26px 0 34px;border-radius:0 0 22px 22px}
.hm2-hero h1{font-family:var(--font-display);font-weight:500;color:#fff;font-size:clamp(1.7rem,7.5vw,2.05rem);line-height:1.14;letter-spacing:-.02em;margin-bottom:6px}
.hm2-hero h1 em{font-style:italic;color:var(--color-accent)}
.hm2-hero .hm2-sub{font-size:.93rem;color:var(--color-on-dark-soft);margin-bottom:20px}

.hm2-taken{display:grid;gap:12px}
.hm2-taak{display:flex;align-items:center;gap:14px;background:var(--color-surface-card);color:var(--color-ink);text-decoration:none;border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(36,48,41,.2),0 14px 30px -18px rgba(0,0,0,.5)}
.hm2-taak .hm2-ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--color-surface-deep);display:flex;align-items:center;justify-content:center;color:var(--color-primary)}
.hm2-taak--primair{background:var(--color-primary);color:#fff}
.hm2-taak--primair .hm2-ico{background:rgba(255,255,255,.14);color:var(--color-accent)}
.hm2-taak--primair .hm2-taak-sub{color:var(--color-on-dark)}
.hm2-taak strong{display:block;font-size:1rem;line-height:1.25}
.hm2-taak-sub{display:block;font-size:.82rem;color:var(--color-ink-soft);margin-top:2px}
.hm2-taak .hm2-pijl{margin-left:auto;flex:none;color:currentColor;opacity:.55}

/* Zoekstrook */
.hm2-zoekstrook{padding-block:26px 8px}
.hm2 h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,5.5vw,1.6rem);line-height:1.18;letter-spacing:-.02em;margin-bottom:10px}
.hm2-zoekstrook form{display:flex;gap:8px}
.hm2-zoekstrook input[type=search]{flex:1;min-width:0;font:inherit;font-size:1rem;padding:13px 14px;border:1.5px solid var(--color-line);border-radius:10px;background:var(--color-surface-card)}
.hm2-zoekstrook input[type=search]:focus{border-color:var(--color-primary);outline:none}
.hm2-zoekstrook button{font:inherit;font-weight:600;color:#fff;background:var(--color-primary);border:0;border-radius:10px;padding:0 18px;cursor:pointer}
.hm2-hint{font-size:.84rem;color:var(--color-ink-soft);margin-top:10px}
.hm2-hint a{color:var(--color-primary)}

/* Uitklapsecties */
.hm2-accordeons{padding-block:26px 10px}
.hm2-accordeons details{background:var(--color-surface-card);border:1px solid var(--color-line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.hm2-accordeons summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px 16px;font-weight:600;font-size:.96rem}
.hm2-accordeons summary::-webkit-details-marker{display:none}
.hm2-accordeons summary .hm2-chev{margin-left:auto;flex:none;transition:transform .2s;color:var(--color-ink-soft)}
.hm2-accordeons details[open] summary .hm2-chev{transform:rotate(180deg)}
.hm2-accordeons .hm2-inhoud{padding:0 16px 16px;font-size:.92rem;color:var(--color-ink-soft)}
.hm2-accordeons .hm2-inhoud a.hm2-meer{display:inline-block;margin-top:8px;font-weight:600;color:var(--color-primary)}
.hm2-kostenrij{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--color-line);color:var(--color-ink)}
.hm2-kostenrij:last-of-type{border-bottom:0}
.hm2-kostenrij .hm2-prijs{font-family:var(--font-display);color:var(--color-primary);white-space:nowrap;font-size:.95rem}

/* Best beoordeeld */
.hm2-sectie{padding-block:26px}
.hm2-kicker{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-heide);display:block;margin-bottom:8px}
.hm2-toplijst{list-style:none;margin:0;padding:0}
.hm2-toplijst li a{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-line);text-decoration:none;color:var(--color-ink)}
.hm2-toplijst li:nth-child(n+6){display:none}
.hm2-toplijst.hm2-alles li:nth-child(n+6){display:list-item}
.hm2-rang{flex:none;width:26px;height:26px;border-radius:50%;background:var(--color-surface-deep);font-size:.8rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.hm2-t-naam{font-weight:600;font-size:.9rem;line-height:1.3;display:block}
.hm2-t-meta{font-size:.78rem;color:var(--color-ink-soft)}
.hm2-t-score{margin-left:auto;flex:none;font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:3px}
.hm2-t-score svg{color:var(--color-accent)}
.hm2-toonmeer{display:block;width:100%;margin-top:12px;font:inherit;font-size:.9rem;font-weight:600;color:var(--color-primary);background:none;border:1.5px solid var(--color-line);border-radius:10px;padding:11px;cursor:pointer}
.hm2-toplijst.hm2-alles + .hm2-toonmeer{display:none}
.hm2-link-alle{display:block;margin-top:12px;font-size:.9rem;font-weight:600;color:var(--color-primary)}

/* Slot-CTA */
.hm2-slot{background:var(--color-surface-deep);border-radius:16px;margin:10px 16px 0;padding:26px 20px;text-align:center}
.hm2-slot p{color:var(--color-ink-soft);font-size:.92rem;margin:6px 0 16px}
.hm2-knop{display:block;text-align:center;font-weight:600;font-size:1rem;color:var(--color-ink);background:var(--color-accent);border-radius:10px;padding:14px;text-decoration:none}

/* Sticky actiebalk: verschijnt na scrollen */
.hm2-actiebalk{position:fixed;left:0;right:0;bottom:0;background:var(--color-surface-card);border-top:1px solid var(--color-line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;z-index:50;transform:translateY(110%);transition:transform .25s ease}
.hm2-actiebalk.hm2-zichtbaar{transform:none}
.hm2-actiebalk a,.hm2-actiebalk button{flex:1;text-align:center;font:inherit;font-weight:600;font-size:.95rem;border-radius:10px;padding:13px 8px;text-decoration:none;background:none;border:0;cursor:pointer}
.hm2-actiebalk .hm2-primair{background:var(--color-accent);color:var(--color-ink)}
.hm2-actiebalk .hm2-secundair{color:var(--color-primary);border:1.5px solid var(--color-line)}

}

@media (prefers-reduced-motion: reduce){
  .hm2-actiebalk{transition:none}
  .hm2-accordeons summary .hm2-chev{transition:none}
}