.mobile-menu-state,
.mobile-menu-toggle,
.mobile-menu-panel,
.mobile-menu-overlay { display: none; }

body.menu-open { overflow: hidden; }

@media screen and (max-width: 1000px) {
 .wrapper .nav-links { display: none !important; }
 .wrapper { padding: 0 18px !important; }
 .wrapper .logo { flex: 1 1 auto; justify-content: flex-start; }
 .mobile-menu-state {
  display: block; position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
 }
 .mobile-menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 9px; border: 1px solid rgba(255,255,255,.45);
  border-radius: 5px; background: transparent; cursor: pointer; z-index: 13001;
 }
 .mobile-menu-toggle span { display: block; height: 2px; width: 100%; background: #fff; }
 .mobile-menu-panel {
  display: block; position: fixed; top: 0; right: 0; bottom: auto;
  width: min(88vw, 390px); height: 100vh; height: 100dvh;
  padding: 18px 18px 32px; overflow-y: auto; background: #595658; color: #fff;
  box-shadow: -8px 0 30px rgba(0,0,0,.3); transform: translateX(105%);
  transition: transform .25s ease; z-index: 13000;
 }
 .mobile-menu-panel.is-open { transform: translateX(0); }
 .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; font-size: 1.25rem; margin-bottom: 12px; }
 .mobile-menu-head label { display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: transparent; color: #fff; font-size: 2rem; cursor: pointer; }
 .mobile-menu-panel ul { list-style: none; margin: 0; padding: 0; }
 .mobile-menu-panel li { margin: 0; }
 .mobile-menu-panel a { display: block; color: #fff; text-decoration: none; padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,.22); }
 .mobile-menu-panel a:hover, .mobile-menu-panel a:focus { background: rgba(255,255,255,.13); }
 .mobile-menu-panel details { border-bottom: 1px solid rgba(255,255,255,.32); }
 .mobile-menu-panel summary { padding: 14px 8px; cursor: pointer; font-weight: 600; }
 .mobile-menu-panel details a { padding-left: 24px; font-size: .94rem; }
 .mobile-menu-featured { margin-top: 12px; border: 1px solid #fff !important; border-radius: 4px; text-align: center; font-weight: 600; }
 .mobile-menu-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
  background: rgba(0,0,0,.55); z-index: 12999;
 }
 .mobile-menu-overlay.is-open { display: block; }
 .mobile-menu-state:checked ~ .mobile-menu-panel { transform: translateX(0); }
 .mobile-menu-state:checked ~ .mobile-menu-overlay { display: block; }
 .mobile-menu-state:checked + .mobile-menu-toggle { visibility: hidden; }
 .mobile-menu-state:focus + .mobile-menu-toggle { outline: 3px solid rgba(255,255,255,.5); outline-offset: 2px; }
}
