.city-directory-sidebar { display: grid; gap: 20px; }
.city-directory-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--tint);
  color: var(--ink);
  scroll-margin-top: 240px;
}
.city-directory-entry strong { display: block; font-size: 17px; }
.city-entry-action { display: block; margin-top: 4px; color: var(--brand-600); font-size: 13px; }
.city-directory-entry:hover .city-entry-action { text-decoration: underline; }
.city-directory-entry:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; }
.city-entry-pin {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: white url(/img/landing/footer/ic-city.svg) center / 20px no-repeat;
}
.city-directory-entry--mobile { display: none; }
@media (max-width: 640px) {
  .city-directory-sidebar { display: contents; }
  .city-directory-entry--sidebar { display: none; }
  .city-directory-entry--mobile { display: flex; margin: 0 0 16px; }
}
.city-section-heading a:hover,.city-region-nav a:hover,.directory-cities a:hover,.region-city-links a:hover{color:var(--brand-600);text-decoration:underline}
.region-city-panel,.city-group{scroll-margin-top:86px}
.region-city-panel{max-width:100%;margin-top:18px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.city-section-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px}
.city-section-heading h2,.city-region-nav h2{margin:0;color:var(--ink);font-size:18px;letter-spacing:-.02em}
.city-section-heading>a{color:var(--brand-600);font-weight:600;font-size:13px}
.region-city-links,.directory-cities,.city-region-nav ul{list-style:none;margin:0;padding:0}
.region-city-links{display:flex;gap:6px 8px;flex-wrap:wrap;margin-top:12px}
.region-city-links a{display:flex;align-items:center;gap:8px;border-radius:6px;background:var(--tint);padding:6px 11px;color:var(--ink);font-size:14px}
.city-offer-count{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.city-context { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.region-city-more{margin-top:10px}
.region-city-more summary{cursor:pointer;color:var(--brand-600);width:fit-content;font-weight:600;font-size:13px;padding:4px 0}
.city-directory-body{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr);gap:clamp(26px,4vw,64px);padding-top:32px;padding-bottom:64px}
.city-region-nav{align-self:start}
.city-region-nav ul{margin-top:12px;border-top:1px solid var(--line)}
.city-region-nav a,.directory-cities a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;color:var(--ink-2);font-size:14px}
.city-region-nav li{border-bottom:1px solid var(--line)}
.city-region-nav a span:first-child,.city-section-heading h2:first-letter{text-transform:capitalize}
.city-region-nav a span:last-child{font-size:12px;color:var(--muted)}
.city-group{padding:0 0 26px;margin:0 0 24px;border-bottom:1px solid var(--line)}
.city-group .city-section-heading h2{font-size:22px}
.directory-cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));gap:8px 22px;margin-top:12px}
.directory-cities a{justify-content:flex-start;gap:8px}
.directory-search{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 14px;max-width:430px;margin-top:18px}
.directory-search:focus-within{outline:2px solid var(--brand)}
.directory-search input{border:0;outline:0;min-width:0;flex:1;background:transparent;font:inherit;color:var(--ink)}
.directory-search-icon{width:14px;height:14px;border:1.5px solid var(--muted);border-radius:50%;position:relative;flex:none}
.directory-search-icon:after{content:"";position:absolute;right:-4px;bottom:-2px;width:6px;border-top:1.5px solid var(--muted);transform:rotate(45deg)}
.city-directory-body [hidden],.directory-search[hidden]{display:none}
@media(max-width:700px){
  .city-directory-body{display:block;padding-top:22px}
  .city-region-nav{margin-bottom:24px}
  .city-region-nav ul,.directory-cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .city-region-nav a,.directory-cities a{overflow-wrap:anywhere;min-height:42px}
  .directory-cities a { align-items: flex-start; flex-direction: column; gap: 3px; }
  .region-city-panel{padding:12px}
}