/*
 * Hoofdmenu: uitklappanelen op desktop en het schuifmenu met deelschermen op mobiel en tablet.
 * Zelfde bouwstenen als de rest van de site (knoppen, kaarten, kleuren); de oude dropdown en het
 * oude mobiele menu uit ilko.css worden hier overschreven.
 */

/* ---------- Desktop ---------- */
.hdr .nav-links{align-self:stretch;gap:28px}
.mm{display:flex;align-items:center}
.hdr .mm-b{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-bottom:2px solid transparent;font:inherit;font-size:15px;font-weight:500;line-height:normal;color:var(--ink);cursor:pointer;padding:6px 0}
.mm-b svg{transition:transform .25s cubic-bezier(.22,1,.36,1);opacity:.6}
.mm.open .mm-b svg{transform:rotate(180deg)}
.mm.open .mm-b{border-bottom-color:var(--red)}

.mm-p{position:absolute;left:0;right:0;top:100%;z-index:41;background:var(--paper);border-top:1px solid rgba(17,17,17,.06);box-shadow:0 40px 60px -40px rgba(30,28,72,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .25s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s}
.mm.open .mm-p{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mm-in{display:grid;gap:40px;padding-top:28px;padding-bottom:36px;align-items:start}
.mm-rep{grid-template-columns:300px minmax(0,1fr) 280px}
.mm-shop{grid-template-columns:220px minmax(0,1fr)}
.mm-ks{grid-template-columns:minmax(0,1fr) 340px}
.mm-t{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink)}

/* Reparaties */
.mm-kaart{border-radius:var(--r-l);padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--ink);color:var(--paper);min-height:100%}
.mm-kaart-t{margin:0;font-size:30px;line-height:1.02}
.mm-kaart-p{margin:0;font-size:15px;line-height:1.5;color:var(--paper-2)}
.mm-kaart-st{margin:4px 0 8px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.mm-kaart .btn{margin-top:auto}
.mm-tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mm-tegel{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--r-m);background:var(--ground);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .2s}
.mm-tegel:hover,.mm-tegel:focus-visible{background:var(--lila)}
.mm-meer{display:inline-block;margin-top:18px;font-size:15px}
.mm-tegels-groot .mm-tegel{gap:18px;padding:18px 18px 20px}
.mm-tegel-x{display:flex;flex-direction:column;gap:2px}
.mm-tegel-n{font-size:16px;font-weight:600}
.mm-tegel-s{font-size:13px;font-weight:400;line-height:1.4;color:var(--ink-2)}
.mm-weet{list-style:none;margin:0;padding:0}
.mm-weet li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid rgba(17,17,17,.08)}
.mm-weet li:first-child{border-top:0;padding-top:2px}
.mm-weet-n{font-size:15px;font-weight:600}
.mm-weet-s{font-size:13px;line-height:1.4;color:var(--ink-2)}

/* Webshop */
.mm-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mm-cat{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-s);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .2s}
.mm-cat:hover,.mm-cat.on,.mm-cat:focus-visible{background:var(--ground)}
.mm-cat-n{font-size:13px;font-weight:500;color:var(--ink-2)}
.mm-pane{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;animation:mm-pane .3s cubic-bezier(.22,1,.36,1) both}
@keyframes mm-pane{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mm-pr{display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none;min-width:0}
.mm-pr-img{aspect-ratio:1/1;border-radius:var(--r-m);background:var(--paper);box-shadow:inset 0 0 0 1px rgba(17,17,17,.08);display:grid;place-items:center;overflow:hidden}
.mm-pr-img img{width:78%;height:78%;object-fit:contain;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.mm-pr:hover .mm-pr-img img{transform:scale(1.05)}
.mm-pr-x{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm-pr-n{font-size:15px;font-weight:600;line-height:1.3}
.mm-pr-s{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-pr-r{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.mm-pr-p{font-size:14px;font-weight:600}
.mm-dots{display:flex}
.mm-dots span{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px var(--paper),inset 0 0 0 1px rgba(17,17,17,.16);margin-left:-3px}
.mm-alles{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:20px;border-radius:var(--r-m);background:var(--ink);color:var(--paper);text-decoration:none;aspect-ratio:1/1;font-size:15px;font-weight:600;line-height:1.3}
.mm-alles-n{font-size:52px;line-height:.9}
.mm-alles svg{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.mm-alles:hover svg{transform:translateX(4px)}

/* Klantenservice */
.mm-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
.mm-ks{align-items:stretch}
.mm-ks .mm-link{align-content:center}
.mm-link{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;align-items:center;padding:18px 20px;border-radius:var(--r-m);background:var(--ground);color:var(--ink);text-decoration:none;transition:background .2s}
.mm-link:hover,.mm-link:focus-visible{background:var(--lila)}
.mm-link-n{font-size:17px;font-weight:600}
.mm-link-s{grid-row:2;font-size:14px;color:var(--ink-2)}
.mm-link svg{grid-column:2;grid-row:1 / span 2;transition:transform .3s}
.mm-link:hover svg{transform:translateX(3px)}
.mm-winkel{border-radius:var(--r-l);padding:24px;box-shadow:inset 0 0 0 1px rgba(17,17,17,.1);display:flex;flex-direction:column;gap:6px}
.mm-winkel-t{margin:0;font-size:24px;line-height:1.05}
.mm-winkel-a{margin:4px 0 0;font-size:15px;line-height:1.45}
.mm-winkel-st{margin:6px 0 0;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.mm-winkel-u{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.mm-winkel-k{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:12px}
.mm-winkel-k .btn{height:44px;padding:0 20px;font-size:15px}
.mm-winkel-k .tl{font-size:15px}

/* Grote schermen die net te smal zijn: de zijkolom van de webshop valt weg. */
@media (max-width:1240px){
.mm-shop{grid-template-columns:200px minmax(0,1fr)}
.mm-pane{grid-template-columns:repeat(4,minmax(0,1fr))}
.mm-pane .mm-pr:nth-child(4){display:none}
.mm-rep{grid-template-columns:260px minmax(0,1fr) 240px;gap:28px}
}

/* ---------- Mobiel en tablet: schuifmenu ---------- */
@media (max-width:1023px){
html.mnav-open{overflow:hidden}
html.mnav-open .mdock{display:none}
/* De vervaging van de header maakt van 'fixed' iets binnen de header; tijdens het menu uit. */
html.mnav-open .hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
.hdr .mnav{position:fixed;left:0;right:0;top:var(--mnav-top,104px);bottom:0;max-height:none;overflow:hidden;background:var(--paper);border-top:1px solid rgba(17,17,17,.06);border-bottom:0;box-shadow:none;animation:mnav-in .28s cubic-bezier(.22,1,.36,1) both}
.mnav-scherm{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mnav-scherm.in{animation:mnav-vooruit .32s cubic-bezier(.22,1,.36,1) both}
.mnav-scherm.in.terug{animation-name:mnav-terug}
@keyframes mnav-vooruit{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes mnav-terug{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.mnav .mnav-in{display:flex;flex-direction:column;padding-top:4px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.mnav-hoofd{list-style:none;margin:0;padding:0}
.mnav .mnav-l{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:12px 0;background:none;border:0;border-bottom:1px solid rgba(17,17,17,.08);font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.mnav-l-x{display:flex;flex-direction:column;gap:3px}
.mnav-l-n{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.03em;line-height:1.05}
.mnav-l-s{font-size:14px;color:var(--ink-2)}
.mnav-t{margin:28px 0 12px;font-size:15px;font-weight:600}
.mnav-strip{display:grid;grid-auto-flow:column;grid-auto-columns:148px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:0 24px 4px;scroll-padding-inline:24px;scrollbar-width:none}
.mnav-strip::-webkit-scrollbar{display:none}
.mnav-strip .mm-pr{scroll-snap-align:start}
.mnav-knoppen{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:28px}
.mnav .mnav-knoppen .mnav-cta{display:inline-flex;margin:0;align-self:stretch;justify-content:space-between;height:56px}
.mnav-knoppen .btn.s{justify-content:center;height:56px;padding:0 24px}
.mnav-knoppen .tl{align-self:flex-start;margin-top:6px;font-size:15px}
.mnav .mnav-terug{display:inline-flex;align-items:center;gap:10px;outline-offset:4px;border-radius:8px;min-height:64px;padding:0;background:none;border:0;font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.03em;color:var(--ink);cursor:pointer;align-self:flex-start}
.mnav .mnav .mm-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
.mnav-cats{list-style:none;margin:0;padding:0}
.mnav-cat{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid rgba(17,17,17,.08);font-size:18px;font-weight:600;color:var(--ink);text-decoration:none}
.mnav .mnav .mm-links{grid-template-columns:minmax(0,1fr)}
.mnav .mm-winkel{margin-top:16px}
}
@media (min-width:761px) and (max-width:1023px){
.mnav .mnav .mm-tegels{grid-template-columns:repeat(4,minmax(0,1fr))}
.mnav .mm-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.mnav-strip{margin:0 -40px;padding:0 40px 4px;scroll-padding-inline:40px}
}
@media (max-width:760px){
.mnav-strip{margin:0 -16px;padding:0 16px 4px;scroll-padding-inline:16px}
}