@media (max-width: 768px) {
  :root { --topbar-height: 0rem; }
  .topbar { display: none !important; }

  .main-navigation { display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: #fff; z-index: 9999; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .main-navigation.active { display: flex; flex-direction: column; }
  .main-navigation > ul {width: 100%;padding: 0 1.2rem;gap: 0;box-shadow: none;background: #fff;}
  .main-navigation > ul > li {border-bottom: 1px solid #edf2f7;display: block;}
  .main-navigation > ul > li > a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; color: #3b4856; font-size: 1.5rem; padding-right: 3.2rem; }
  .main-navigation > ul > li.menu-item-has-children { position: relative; }
  .main-navigation > ul > li .submenu-toggle {position: absolute;right: 1.2rem;top: 50%;transform: translateY(-50%);width: 2.4rem;height: 2.4rem;border: none;background: transparent;color: #9aa4b2;font-size: 1.6rem;line-height: 1;cursor: pointer;top: 18px;}
  .main-navigation > ul > li .submenu-toggle::before { content: "▾"; display: inline-block; transition: transform .2s ease; }
  .main-navigation > ul > li.open .submenu-toggle::before { transform: rotate(180deg); }

  .main-navigation .sub-menu { display: none; position: static; padding: 0 0 .8rem 0; margin: 0; background: transparent; min-width: auto; border: none; }

html body .site-header .main-navigation .sub-menu {
    position: static;
    max-height: 0px;
    overflow: hidden;
    padding: 0;
}

html body .site-header .main-navigation .open .sub-menu {
    max-height: 100vh;
}
  .main-navigation .menu-item-has-children.open > .sub-menu {display: block;position: static;box-shadow: none;background: #f2f2f2;margin: 0 auto 10px 20px;max-width: 80vw;padding: 20px;}
  .main-navigation .sub-menu li {border: none;transform: none !important;}
  .main-navigation .sub-menu a { display: block; padding: .6rem 0 .6rem 1rem; font-size: 1.3rem; color: #6b7280; }

.site-header .main-navigation .sub-menu > li > a {
    padding: 3px !important;
    font-size: 14px !important;
}

  body.nav-open { overflow: hidden; height: 100vh; }
}

@media (max-width: 480px) {}

@media (min-width: 769px) { .mobile-only { display: none !important; } }