.header-nav {
  display: flex;
}

.bottom-nav {
  display: none;
}

body.has-bottom-nav {
  padding-bottom: 0;
}

@media (max-width: 1023px) {
  .header-nav {
    display: none;
  }

  /* Allow the detailed styles.css rules to drive layout, only switch display here */
  .bottom-nav {
    display: flex;
  }

  body.has-bottom-nav {
    padding-bottom: max(var(--bottom-nav-offset, 0px), env(safe-area-inset-bottom, 0px));
  }
}

html.is-webapp .header-nav {
  display: none !important;
}

html.is-webapp .bottom-nav {
  display: flex !important;
}

html.is-webapp body.has-bottom-nav {
  padding-bottom: max(var(--bottom-nav-offset, 0px), env(safe-area-inset-bottom, 0px));
}