.bottom-nav { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: 84px; }
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #f0dfe8; box-shadow: 0 -6px 20px #3421380f;
  }
  .bottom-nav a { display: grid; justify-items: center; gap: 3px; color: #6b6275; text-decoration: none; font-size: 10px; font-weight: 700; }
  .bottom-nav a.active { color: #d6006f; }
  .bottom-nav-icon { position: relative; width: 26px; height: 26px; display: grid; place-items: center; }
  .bottom-nav-icon svg { width: 24px; height: 24px; }
  .bottom-nav-badge {
    position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center; border-radius: 999px; background: #ffc107; color: #3b2a00; font-size: 9px;
  }
  .bottom-nav-center { margin-top: -26px; color: #d6006f; }
  .bottom-nav-center .bottom-nav-icon {
    width: 56px; height: 56px; border-radius: 50%; color: #fff;
    background: linear-gradient(145deg, #ff2f9a, #d6006f);
    border: 4px solid #fff; box-shadow: 0 6px 16px #d6006f55;
  }
  .bottom-nav-center .bottom-nav-icon svg { width: 26px; height: 26px; }
  /* the bottom bar replaces the hamburger and the chat shortcut */
  .site-header .mobile-nav, .site-header .header-chat { display: none !important; }
  .utility-bar { display: none; }
  .site-header .desktop-nav { display: none; }
}