/* modulepagina.css — de modulepagina van Mijn modules (#872 stap 2, #869), partner en zorg.
   Kleuren alleen uit tokens.css; geen pillen of labels, de stand staat als tekst. */
.mp{max-width:960px;display:grid;gap:22px;align-content:start;min-width:0}
.mp a{color:var(--blue)}
.mp-kruimel{font-size:12.5px;color:var(--hint)}
.mp-kruimel a{color:var(--hint)}
.mp-kop{display:flex;gap:16px;align-items:flex-start}
.mp-kop>div:last-child{min-width:0}
.mp-kop h1{margin:0;font-size:25px;line-height:1.15;color:var(--navy);text-wrap:balance}
.mp-kop p{margin:6px 0 0;color:var(--muted);max-width:66ch;font-size:14px}
.mp-icoon{width:46px;height:46px;border-radius:12px;background:#EEF5E0;display:grid;place-items:center;flex:none}
.mp-icoon svg{width:23px;height:23px;stroke:var(--lime);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-stand{font-size:13px;color:var(--muted);margin-top:8px}
.mp h2{margin:0 0 4px;font-size:16px;color:var(--navy)}
.mp-sub{margin:0 0 12px;color:var(--muted);font-size:13px}
.mp-leeg,.mp-noot{color:var(--muted);font-size:13.5px;margin:0}
.mp-noot{font-size:12.5px;color:var(--hint)}
.mp-fout{border:1px solid #E8B4AD;background:#FBEDEB;color:#8A2A1E;border-radius:10px;padding:10px 14px;font-size:13.5px}
.mp-lijst,.mp-prod{border:1px solid var(--light);border-radius:14px;overflow:hidden;background:var(--white)}
.mp-regel{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid #E1E7ED}
.mp-regel:first-child{border-top:0}
.mp-naam{display:grid;gap:2px;text-decoration:none;min-width:0}
.mp-naam b{color:var(--navy);font-size:14.5px}
.mp-naam span{color:var(--muted);font-size:13px}
a.mp-naam:hover b{text-decoration:underline}
.mp-meta{font-size:12.5px;color:var(--hint);white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-regel.uit .mp-naam,.mp-regel.uit .mp-meta{opacity:.5}
.mp-prod>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,190px) 52px;gap:12px;align-items:center;padding:10px 16px;border-top:1px solid #E1E7ED}
.mp-prod>div:first-child{border-top:0}
.mp-prod .kopr{background:#F5F7FA;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hint);padding:8px 16px}
.mp-p{cursor:pointer}
.mp-p:hover,.mp-p:focus-visible{background:#F5F7FA;outline:none}
.mp-p b{color:var(--navy);font-size:14px}
.mp-p .w{font-size:12.5px;color:var(--muted)}
.mp-tg{position:relative;width:38px;height:22px;display:inline-block;flex:none}
.mp-tg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.mp-tg span{position:absolute;inset:0;border-radius:11px;background:#C9D4DE}
.mp-tg span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.mp-tg input:checked+span{background:var(--lime)}
.mp-tg input:checked+span::after{left:19px}
.mp-tg input:disabled+span{opacity:.45}
.mp-tg input:disabled{cursor:not-allowed}
.mp-tg input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.mp-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid #E1E7ED}
.mp-tabs span{padding:6px 10px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.mp-tabs span.aan{color:var(--navy)}
.mp-tabs span:first-child{border-bottom-color:var(--lime);color:var(--navy)}
.mp-mat{display:flex;flex-wrap:wrap;gap:8px}
.mp-mat a{border:1px solid #E1E7ED;border-radius:10px;padding:9px 12px;color:var(--navy);text-decoration:none;font-weight:600;font-size:13px;background:var(--white)}
.mp-mat a:hover{background:#F5F7FA}
.mp-knop{font:inherit;font-size:13px;font-weight:700;border-radius:9px;padding:7px 13px;border:1px solid #E1E7ED;background:var(--white);color:var(--navy);cursor:pointer;text-decoration:none;display:inline-block}
.mp-knop.vol{background:var(--lime);border-color:var(--lime);color:#fff}
.mp-blad{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--white);border-left:1px solid #E1E7ED;box-shadow:-12px 0 32px rgba(15,26,36,.16);
  padding:22px 24px;overflow:auto;display:grid;gap:12px;align-content:start;z-index:200}
/* Boven de navigatiebalk (nav.css, z-index 100-102): anders valt de kop van het productblad eronder. */
.mp-blad[hidden]{display:none}
.mp-blad h2{font-size:20px;padding-right:80px}
.mp-blad p,.mp-blad li,.mp-blad dd{color:var(--muted);font-size:13.5px}
.mp-blad ul{margin:0;padding-left:18px}
.mp-blad dl{margin:0;display:grid;gap:4px}
.mp-blad dt{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hint);margin-top:6px}
.mp-blad dd{margin:0}
.mp-sluit{position:absolute;top:16px;right:16px}
@media (max-width:600px){.mp-prod>div{grid-template-columns:minmax(0,1fr) 52px}.mp-prod .w{display:none}.mp-regel{grid-template-columns:minmax(0,1fr) 52px}.mp-meta{display:none}}
@media (prefers-reduced-motion:reduce){.mp-tg span::after{transition:none}}
/* Snel naar in het zijscherm (#888) */
.mp-snel{display:grid;gap:8px;border-top:1px solid #E1E7ED;padding-top:14px}
.mp-snel h3{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hint)}
.mp-snel .mp-knop{text-align:left;padding:10px 14px}