.towns { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: grid; gap: 18px; }
.towns-note { max-width: 1100px; margin: -6px auto 12px; padding: 0 20px; }
.towns-none { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.town-filter {
  inline-size: min(220px, 46vw); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; font-size: .9rem;
}
.town-filter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.town-group h3 { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
html[dir=rtl] .town-group h3 { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.town-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.town-chip {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem;
  transition: border-color .2s, transform .2s;
}
.town-chip:hover, .town-chip:focus-visible { border-color: var(--brand); transform: translateY(-1px); }
.town-chip.near { border-color: var(--brand); background: var(--brand-soft); }
.town-chip .alt { color: var(--muted); font-weight: 500; font-size: .85em; }
.town-chip .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--hi); flex: none; }
.town-chip[hidden], .town-group[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .town-chip { transition: none; } .town-chip:hover { transform: none; } }
#townsTitle, .town-chip, .city-card { scroll-margin-block: 96px; }