/* Scope: the existing native mobile drawer; desktop navigation is unchanged. */
@media (max-width: 1100px) {
  #offcanvasRight.menu_mobile {
    width: min(420px, 100vw);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
  }

  #offcanvasRight.menu_mobile .offcanvas-header {
    min-height: 44px;
    padding: 0 12px;
    flex-shrink: 0;
    gap: 8px;
  }

  #offcanvasRight .offcanvas-header h5 { margin: 0; font-size: 16px; line-height: 1.4; }
  #offcanvasRight .close_menu { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none; }

  #offcanvasRight.menu_mobile .offcanvas-body.float_menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important;
    overflow: auto;
  }

  #offcanvasRight .menunav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #offcanvasRight .menunav li { min-width: 0; margin: 0; padding: 0; border: 0; }
  #offcanvasRight .menunav > .menu-item-has-children { grid-column: 1 / -1; }

  #offcanvasRight .menunav li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    border-radius: 6px;
  }

  #offcanvasRight .menunav .menu-item-has-children > a { padding-inline-end: 32px; }
  #offcanvasRight .float_menu .menu-item-has-children::before,
  #offcanvasRight .float_menu .menu-item-has-children::after { top: 21px; }
  #offcanvasRight .menunav a:focus-visible,
  #offcanvasRight .mobile_actions a:focus-visible,
  #offcanvasRight button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }

  /* Render from native toggle/ARIA state, with immediate grid expansion instead of a height animation. */
  #offcanvasRight .menunav .sub-menu { display: none !important; margin: 0; padding: 0; }
  #offcanvasRight .menunav .child-minus > .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
    height: auto !important;
    overflow: visible !important;
    border-radius: 8px;
  }

  #offcanvasRight .mobile_actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 44px;
  }

  #offcanvasRight .mobile_actions .login_register { display: block !important; flex: 1 1 auto; min-width: 0; }
  #offcanvasRight .mobile_actions a { min-height: 44px; font-size: 16px; }
  #offcanvasRight .mobile_actions button { min-width: 44px; min-height: 44px; }
}

/* A short viewport uses the open section as a second menu level. Collapse it to return. */
@media (max-width: 1100px) and (max-height: 559px) {
  #offcanvasRight.menu_mobile { width: min(680px, 100vw); }
  #offcanvasRight .menunav:has(> .child-minus) > li:not(.child-minus) { display: none; }
}

@media (min-width: 480px) and (max-width: 1100px) and (max-height: 559px) {
  #offcanvasRight .menunav,
  #offcanvasRight .menunav .child-minus > .sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}