html, body { max-width: 100%; overflow-x: hidden; }
.topbar { min-width: 0; }
.topbar > * { min-width: 0; }
.topbar nav { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.topbar nav button, .topbar nav a { white-space: nowrap; }
@media (max-width: 640px) {
  .topbar:not(.home-topbar) { display: block; padding: 15px 18px; }
  .topbar:not(.home-topbar) .brand { display: block; margin-bottom: 10px; }
  .topbar:not(.home-topbar) nav { width: 100%; display: flex; gap: 3px; padding-bottom: 4px; }
  .topbar:not(.home-topbar) nav button, .topbar:not(.home-topbar) .vault-home { flex: 0 0 auto; padding: 8px 10px; font-size: .88rem; }
  .home-topbar { display:block; padding:14px 16px; }
  .home-brand-area { width:100%; justify-content:flex-start; gap:6px; }
  .home-brand-area .brand { font-size: 19px; white-space: nowrap; }
  .home-nav { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:10px; overflow:visible; }
  .home-nav a { min-width:0; padding:8px 3px; font-size:.78rem; text-align:center; overflow:hidden; text-overflow:ellipsis; }
  .home-facebook { width:auto; min-width:0; height:auto; padding:8px 3px; display:block; font-size:.78rem; }
  .home-facebook::after { content:none; }
  .home-hero { width: auto; max-width: none; }
  .store-page main { width: 100%; }
}