/* Hamburger menu for mobile & tablet (<=1024px). Needs menu.js; without JS the normal menu stays visible. */
.nav-toggle{display:none}
@media (max-width:1024px){
  .js-nav .site-header .bar{flex-wrap:nowrap;gap:12px}
  .js-nav .brand{margin-right:auto}
  .js-nav .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer}
  .js-nav .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
  .js-nav .nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .js-nav .nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
  .js-nav .nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .js-nav .nav{display:none;position:absolute;left:0;right:0;top:100%;flex:none;flex-basis:auto;order:0;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:0;padding:6px 16px 14px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.12);max-height:calc(100vh - 80px);overflow-y:auto}
  .js-nav .nav.open{display:flex}
  .js-nav .nav a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line)}
  .js-nav .nav a:last-child{border-bottom:0}
}

/* Brands dropdown */
.nav .has-sub{position:relative;display:flex;align-items:center;gap:2px}
.nav .sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:6px}
.nav .sub-toggle svg{transition:transform .2s}
.nav .has-sub.open .sub-toggle svg{transform:rotate(180deg)}
.nav .sub{display:none;position:absolute;top:100%;left:-12px;z-index:20;min-width:260px;max-height:70vh;overflow-y:auto;flex-direction:column;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 24px rgba(0,0,0,.12)}
.nav .sub a{padding:9px 12px;border-bottom:0;font-size:14px;border-radius:6px;white-space:nowrap}
.nav .sub a:hover{background:rgba(0,0,0,.05)}
.nav .has-sub.open .sub{display:flex}
@media (hover:hover) and (min-width:1025px){.nav .has-sub:hover .sub{display:flex}}
@media (max-width:1024px){
  .js-nav .nav .has-sub{flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid var(--line)}
  .js-nav .nav .has-sub>a{flex:1;border-bottom:0}
  .js-nav .nav .sub-toggle{width:44px;height:44px}
  .js-nav .nav .sub{position:static;flex-basis:100%;min-width:0;max-height:none;overflow:visible;padding:0 0 8px 12px;border:0;box-shadow:none;background:none}
  .js-nav .nav .sub a{padding:11px 4px;font-size:15px;border-bottom:0}
}