@media (max-width: 780px) {
  .top {
    height: auto;
    min-height: 62px;
    padding: 12px 16px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
  }
  .top .brand { min-width: 0; }
  .top > form { display: block; margin: 0; }
  .top > form .link { padding: 8px 4px; font-weight: 700; }
  .top nav {
    display: flex;
    grid-column: 1 / -1;
    gap: 4px;
    width: 100%;
    overflow-x: auto;
    padding: 2px 0 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a {
    flex: 0 0 auto;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 14px;
  }
  .top nav a:hover { background: #eef7f6; color: #087f7a; }
}