/* Areas directory retains its existing GET city filter and shared editorial cards. */
.merade-areas-page .merade-area-directory { position: relative; z-index: 3; margin: 0 0 22px; }
.merade-areas-page .merade-area-directory form { display: flex; align-items: center; gap: 12px 20px; margin: 0; }
.merade-areas-page .merade-area-directory .merade-catalog-field { width: min(360px,100%); flex: 0 1 360px; }
.merade-area-directory-actions { display: flex; align-items: center; gap: 20px; flex: 1; }
.merade-area-directory-actions button { display: flex; gap: 9px; align-items: center; min-height: 62px; padding: 12px 24px; border: 0; border-radius: 7px; background: var(--merade-gold); color: var(--merade-navy); font: 600 14px/1.5 var(--merade-font-body); cursor: pointer; transition: background-color 240ms ease, transform 120ms ease; }
.merade-area-directory-actions a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; margin-left: auto; color: var(--merade-muted); font-size: 13px; text-underline-offset: 4px; }
.merade-areas-page .merade-area-directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0; }
.merade-areas-page .merade-area-card-link { width: 100%; }
.merade-areas-page [role=alert], .merade-areas-page .entry-content > p:last-child:only-child { color: var(--merade-muted); }
@media(hover:hover) and (pointer:fine) {
 .merade-area-directory-actions button:hover { background: #edc77e; }
 .merade-area-directory-actions a:hover { color: var(--merade-navy); }
}
.merade-area-directory-actions button:active { transform: scale(.98); }
@media(max-width:760px) {
 .merade-areas-page .merade-area-directory form { flex-wrap: wrap; padding: 16px; gap: 12px; }
 .merade-areas-page .merade-area-directory .merade-catalog-field { flex: 1 1 100%; width: 100%; }
 .merade-area-directory-actions { flex: 1 1 100%; gap: 12px; }
 .merade-area-directory-actions button { min-height: 48px; padding: 10px 16px; }
 .merade-area-directory-actions a { font-size: 12px; }
}
@media(max-width:1000px) { .merade-areas-page .merade-area-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .merade-areas-page .merade-area-directory-grid { grid-template-columns: 1fr; gap: 18px; } }
@media(prefers-reduced-motion:reduce) { .merade-area-directory-actions button { transition: none; transform: none; } }
@media(max-width:760px) { .merade-area-directory-actions { flex-wrap: wrap; } }
/* On a phone the city list expands inside the panel so Apply stays unobstructed. */
@media(max-width:760px) {
 .merade-areas-page .merade-area-directory .merade-catalog-choices { position: static; width: 100%; max-height: 280px; margin-top: 6px; }
}