.dir-hero { text-align: center; padding: 3rem 1.5rem 0.5rem; max-width: 820px; margin: 0 auto; }
.dir-hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 0.4rem; letter-spacing: -0.02em; font-weight: 700; }
.dir-hero p { color: var(--muted); font-size: 1rem; margin: 0 0 1.5rem; }
.dir-filter { max-width: 640px; margin: 0 auto 2.5rem; }
.dir-filter input { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 0.98rem; background: var(--card); color: var(--ink); outline: none; font-family: inherit; }
.dir-filter input:focus { border-color: var(--accent); }
.filter-count { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 0.9rem; }
.salon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.salon-card[data-hidden="1"] { display: none; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; margin: 2.5rem 0 0; }
.pagination a, .pagination .page-num, .pagination .page-prev, .pagination .page-next, .pagination .page-ellipsis { display: inline-block; padding: 0.5rem 0.85rem; border-radius: 8px; font-size: 0.92rem; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.pagination a:hover { border-color: var(--accent); background: var(--tint); }
.pagination .page-num.current { background: var(--grad); color: #fff; border-color: var(--accent); }
.pagination .disabled { color: var(--muted); background: transparent; border-color: transparent; cursor: default; }
.pagination .page-ellipsis { background: transparent; border-color: transparent; padding-left: 0.25rem; padding-right: 0.25rem; }