/* Mobile navigation is finalized after its rendered MyListing selectors are captured. */
.as-home .as-mobile-nav {
  background: color-mix(in srgb, var(--as-surface) 96%, transparent);
  border-top: 1px solid var(--as-border);
  bottom: 0;
  display: none;
  left: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  position: fixed;
  right: 0;
  z-index: 50;
}

@media (max-width: 767px) {
  .as-home .as-mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .as-home.has-as-mobile-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}