/* Thuisbatterijen-menu: merken die openklappen naar hun modellen.
   Opbouw (gegenereerd door tools/thuis-bouw/menu_sitemap_thuis.py):
   .nav-merken > details.nav-merk[style=--merk] > summary + .nav-merk-modellen > a > b + small */

.nav-merken { display: grid; gap: 3px; margin: .15rem 0 .55rem; }
.nav-merk { --merk: #0f6b6b; position: relative; border-radius: 14px; transition: background .25s, box-shadow .25s; }
.nav-merk > summary {
  list-style: none; display: flex; align-items: center; gap: .65rem;
  padding: .5rem .55rem .5rem .45rem; border-radius: 14px; cursor: pointer; user-select: none;
  font: 600 14.5px/1.1 'Space Grotesk', sans-serif; letter-spacing: -.015em; color: var(--ink);
  transition: background .2s, transform .2s;
}
.nav-merk > summary::-webkit-details-marker { display: none; }
.nav-merk > summary::after {
  content: ''; width: 7px; height: 7px; margin: 0 .2rem 0 .1rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .45; transition: transform .25s, opacity .2s;
}
.nav-merk[open] > summary::after { transform: rotate(45deg) translate(-2px, -2px); opacity: .9; color: var(--merk); }
.nav-merk > summary:hover { background: color-mix(in srgb, var(--merk) 9%, transparent); }
.nav-merk > summary:focus-visible { outline: 2px solid var(--merk); outline-offset: 1px; }

/* merkblokje met beginletter */
.nav-merk-stip {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px;
  font: 700 12.5px/1 'Space Grotesk', sans-serif; font-style: normal; color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--merk) 82%, #fff) 0%, var(--merk) 45%, color-mix(in srgb, var(--merk) 60%, #000) 100%);
  box-shadow: 0 6px 14px -6px var(--merk), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1);
}
.nav-merk > summary:hover .nav-merk-stip, .nav-merk[open] .nav-merk-stip { transform: scale(1.08) rotate(-4deg); }
.nav-merk-naam { flex: 1; min-width: 0; }
.nav-merk-n {
  font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .03em; color: var(--ink-faint);
  padding: .3rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.6); white-space: nowrap;
}
.nav-merk[open] .nav-merk-n { border-color: color-mix(in srgb, var(--merk) 40%, transparent); color: color-mix(in srgb, var(--merk) 70%, #000); }

/* open merk: zachte gloed in de merkkleur */
.nav-merk[open] {
  background: linear-gradient(165deg, color-mix(in srgb, var(--merk) 13%, #fff) 0%, #fff 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--merk) 28%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--merk) 70%, transparent);
}
.nav-merk[open] > summary:hover { background: transparent; }

/* modellen */
.nav-merk-modellen { display: grid; gap: 2px; padding: 0 .45rem .5rem 2.55rem; animation: nav-merk-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes nav-merk-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-merken .nav-merk-modellen a {
  position: relative; display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: center;
  gap: 2px; padding: .45rem .6rem .45rem .75rem !important; min-height: 0 !important;
  border-radius: 10px !important; background: none !important; text-decoration: none;
  transition: background .18s, transform .18s !important;
}
.nav-merken .nav-merk-modellen a::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--merk) 45%, transparent); transition: background .18s, top .18s, bottom .18s;
}
.nav-merken .nav-merk-modellen a:hover { background: color-mix(in srgb, var(--merk) 11%, #fff) !important; transform: translateX(3px); }
.nav-merken .nav-merk-modellen a:hover::before, .nav-merken .nav-merk-modellen a[aria-current]::before { background: var(--merk); top: 12%; bottom: 12%; }
.nav-merk-modellen b { font: 600 13.5px/1.2 'Space Grotesk', sans-serif; color: var(--ink); letter-spacing: -.01em; }
.nav-merk-modellen small { font: 400 10.5px/1.3 'JetBrains Mono', monospace; color: var(--ink-faint); letter-spacing: .02em; }
.nav-merk-modellen a[aria-current] b { color: color-mix(in srgb, var(--merk) 75%, #000); }

/* telefoon (hamburgermenu): grotere tikvlakken */
@media (max-width: 980px) {
  .nav-merken { gap: 4px; margin: .35rem 0 .7rem; }
  .nav-merk > summary { min-height: 50px; padding: .55rem .7rem .55rem .55rem; font-size: 16px; }
  .nav-merk-stip { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
  .nav-merk-n { font-size: 10.5px; }
  .nav-merk-modellen { padding: 0 .55rem .6rem 2.95rem; }
  .nav-merken .nav-merk-modellen a { min-height: 48px !important; padding: .55rem .7rem .55rem .85rem !important; }
  .nav-merk-modellen b { font-size: 15px; }
  .nav-merk-modellen small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-merk-modellen { animation: none; }
  .nav-merk-stip, .nav-merken .nav-merk-modellen a { transition: none !important; }
}
/* desktop: paneel iets breder zodat de modelregels op één regel passen */
@media (min-width: 981px) {
  .site-premium .nav-dropdown-panel.nav-dropdown-single:has(.nav-merken), .nav-dropdown-panel:has(.nav-merken) { min-width: 320px; }
}

/* ---- logo's in plaats van letters (20-10) ---- */
.nav-merk-logo {
  display: grid; place-items: center; flex: none; width: 104px; height: 36px; padding: 0 10px; box-sizing: border-box;
  border-radius: 10px; background: #fff; border: 1px solid color-mix(in srgb, var(--merk) 22%, var(--line));
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--merk) 90%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--merk) 14%, transparent);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), border-color .2s, box-shadow .2s;
}
.nav-merk-logo img { display: block; max-width: 100%; max-height: 18px; width: auto; height: auto; object-fit: contain; }
.nav-merk-tekst { font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--ink); padding-left: calc(10px + .32em); }
.nav-merk > summary:hover .nav-merk-logo, .nav-merk[open] .nav-merk-logo { transform: translateY(-1px) scale(1.04); border-color: color-mix(in srgb, var(--merk) 55%, transparent); box-shadow: 0 10px 22px -10px var(--merk), inset 0 -2px 0 var(--merk); }
.nav-merk-naam { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-merk > summary { justify-content: space-between; }
.nav-merk-n { margin-left: auto; }
.nav-merk-modellen { padding-left: 1.1rem; }
@media (max-width: 980px) {
  .nav-merk-logo { width: 116px; height: 40px; }
  .nav-merk-logo img { max-height: 20px; }
  .nav-merk-modellen { padding-left: 1.3rem; }
}
.nav-merk-logo.is-hoog img { max-height: 28px; }
@media (max-width: 980px) { .nav-merk-logo.is-hoog img { max-height: 31px; } }
/* logo-versie 20261020b */