/* ---------- DESKTOP (по умолчанию) ---------- */
html, body { margin: 0; }

/* полностью прячем всё мобильное на десктопе */
.main-nav-mobile,
#mobile-drawer,
.drawer-backdrop,
.mobile-logo { display: none !important; }

/* если есть десктопный логотип/навигация — на десктопе их не трогаем */
.main-navigation-desktop,
.main-navigation-desktop-aside,
.main-navigation-desktop-logo { display: block; }

/* ---------- MOBILE/TABLET ---------- */
@media (max-width: 1024px) {
  /* прячем всю десктопную навигацию на мобилке */
  .main-navigation-desktop,
  .main-navigation-desktop-aside,
  .main-navigation-desktop-logo { display: none !important; }

  /* верхняя мобильная панель */
  .main-nav-mobile {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    position: relative;
    z-index: 100; /* ниже дровера/бэкдропа */
  }
  .main-nav-mobile .nav-toggle,
  .main-nav-mobile .nav-search {
    background: transparent;
    border: 0;
    padding: 8px;
    line-height: 0;
    cursor: pointer;
  }
  .main-nav-mobile .nav-logo { margin-left: auto; line-height: 0; }
  /* логотип 80×80 на мобилке */
  .main-nav-mobile .nav-logo img {
    height: 80px;
    width: 80px;
    object-fit: contain;
    display: block;
  }

  /* (опционально) отдельный блок мобильного логотипа, если используешь */
  .mobile-logo { display: block !important; position: absolute; top: 16px; right: 16px; z-index: 100; }
  .mobile-logo img { height: 80px; width: 80px; object-fit: contain; display: block; }

  /* выезжающее меню */
  #mobile-drawer {
    display: block !important;     /* управляем hidden + классом .open */
    position: fixed;
    inset: 0 auto 0 0;             /* слева */
    width: min(420px, 88vw);
    background: #ffce01;
    box-shadow: 0 0 24px rgba(0,0,0,.25);
    transform: translateX(-105%);
    transition: transform .32s ease;
    z-index: 10002;                /* выше верхней панели */
  }
  #mobile-drawer.open { transform: translateX(0); }

  .mobile-drawer-inner {
    position: relative;
    padding: 56px 24px 32px;       /* место под крестик */
    height: 100%;
    overflow: auto;
  }

  .drawer-title { font-size: 2rem; margin: 8px 0 12px; }
  .drawer-sep   { border: 0; border-top: 3px solid #000; margin: 8px 0 24px; }
  .drawer-links { list-style: none; padding: 0; margin: 0; }
  .drawer-links li { margin: 18px 0; }
  .drawer-links a  { text-decoration: none; color: #000; font-size: 1.5rem; }

  /* крестик */
  .drawer-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    left: calc(env(safe-area-inset-left, 0px) + 16px);
    background: transparent;
    border: none;
    padding: 8px;
    line-height: 0;
    cursor: pointer;
    z-index: 10003;
  }

  /* подложка */
  .drawer-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .32s ease;
    z-index: 10001;                 /* между контентом и дровером */
    pointer-events: none;
  }
  .drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* когда меню открыто — бургер исчезает */
  body.nav-open .nav-toggle,
  .nav-toggle[aria-expanded="true"] {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}