.directory-tag { display:inline-flex; align-items:center; justify-content:center; max-width:100%; padding:5px 10px; border:0; border-radius:8px; font:700 12px/1.4 'DM Sans',Arial,sans-serif; overflow-wrap:anywhere; text-align:center; }
.directory-layout { display:grid; grid-template-columns:minmax(150px,200px) minmax(0,1fr); align-items:start; gap:24px; }
.directory-filters { min-width:0; padding:12px; border:0; border-radius:14px; background:#d0d0d0; }
.directory-filter-panel { position:relative; min-width:0; }
.directory-filter-list { display:flex; flex-wrap:wrap; gap:10px; }
.directory-filter-list button { min-height:36px; cursor:pointer; }
.directory-filter-list button[aria-pressed='true'] { outline:0; box-shadow:inset 0 0 0 2px #2b2023; }
.directory-filter-list button:focus-visible { outline:3px solid #265f9e; outline-offset:3px; }
.directory-all { flex:0 0 auto; min-height:36px; cursor:pointer; background:#edf0f2; color:#2b2023; }
.directory-all[aria-pressed='true'] { outline:0; box-shadow:inset 0 0 0 2px #2b2023; }
.directory-all:focus-visible { outline:3px solid #265f9e; outline-offset:3px; }
.directory-list { display:grid; gap:12px; min-width:0; }
.directory-card { position:relative; display:flex; align-items:center; min-width:0; min-height:132px; padding:14px 62px 14px 146px; overflow:hidden; background:#d0d0d0; border:0; border-radius:14px; color:inherit; text-decoration:none; box-shadow:0 10px 24px rgba(36,55,67,.22); transition:transform .18s ease,box-shadow .18s ease; }
.directory-card:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.directory-photo { position:absolute; top:0; left:0; display:grid; width:132px; height:132px; place-items:center; overflow:hidden; border:1px solid #a8a8a8; border-radius:14px 0 0 14px; background:#fff; color:#586773; font:800 42px/1 Manrope,sans-serif; }
.directory-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.directory-card.is-tourism .directory-photo img { object-fit:cover; }
.directory-card-info { display:flex; min-width:0; align-self:stretch; flex:1; flex-direction:column; justify-content:center; gap:8px; overflow:hidden; }
.directory-card h2 { display:-webkit-box; margin:0; overflow:hidden; color:#2b2023; font:800 clamp(16px,1.5vw,21px)/1.25 Manrope,sans-serif; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
.directory-card .directory-tag { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.directory-item-tags { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; }
.directory-tag--overflow { display:none; }
.directory-item-tags.show-all-tags .directory-tag--overflow { display:inline-flex; }
.directory-tags-more { display:inline-grid; min-width:34px; min-height:27px; place-items:center; padding:4px 8px; border-radius:8px; background:#59666f; color:#fff; cursor:pointer; font:800 11px/1 'DM Sans',Arial,sans-serif; }
.directory-tags-more:focus-visible { outline:2px solid #18242d; outline-offset:2px; }
.directory-card-trail { position:absolute; inset:0 0 0 auto; display:grid; width:46px; place-items:center; border-radius:0 14px 14px 0; background:#000; color:#fff; font:400 42px/1 Arial,sans-serif; }
.category-results .directory-empty { padding:24px 16px; margin:0; border:1px dashed #aeb8be; border-radius:12px; background:rgba(255,255,255,.38); color:#586773; font-size:14px; text-align:center; }
.directory-load-more { display:block; min-height:42px; padding:9px 18px; margin:18px auto 0; border:0; border-radius:10px; background:#18242d; color:#fff; font:800 12px/1.2 Manrope,sans-serif; }
.directory-load-more[hidden] { display:none; }
.directory-layout.is-loading { grid-template-columns:1fr; }
.directory-layout.is-loading .directory-filters { display:none; }
.directory-card--skeleton { padding:0; background:linear-gradient(100deg,#d0d0d0 30%,#e7e7e7 48%,#d0d0d0 66%); background-size:240% 100%; animation:directory-shimmer 1.25s linear infinite; }
@keyframes directory-shimmer { to { background-position:-240% 0; } }
@media(hover:hover) { .directory-card:not(.directory-card--skeleton):hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(36,55,67,.28); } }
.directory-card:not(.directory-card--skeleton):active { transform:scale(.99); }
.directory-retry { padding:10px 16px; border:0; border-radius:9px; background:#ff3131; color:white; cursor:pointer; font:700 14px 'DM Sans',sans-serif; }
#categoryResultsTitle { margin:0 0 26px; text-align:center; }
.subcategory-heading { display:flex; width:max-content; max-width:100%; align-items:center; justify-content:center; gap:12px; margin:0 auto clamp(24px,3vw,34px); text-align:left; }
.subcategory-heading-icon { display:grid; width:clamp(52px,6vw,64px); flex:0 0 auto; aspect-ratio:1; place-items:center; overflow:hidden; border-radius:14px; color:#fff; font:800 24px/1 Manrope,sans-serif; }
.subcategory-heading-icon:has(img) { overflow:visible; border-radius:0; background:transparent !important; }
.subcategory-heading-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.subcategory-heading h1 { max-width:100%; color:#18242d; font-size:clamp(22px,3vw,32px); font-weight:800; line-height:1.1; text-align:left; text-wrap:balance; }
.subcategory-heading h1::first-letter { color:#18242d; }
@media(min-width:761px) {
  .directory-filter-panel { margin-top:10px; }
  .directory-filter-list { flex-direction:column; align-items:center; }
  .directory-all { width:100%; }
  .directory-card h2 { text-align:left; }
}
@media(max-width:760px) {
  .category-results { padding:20px 12px; }
  .directory-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  .directory-filters { display:flex; align-items:center; gap:6px; padding:6px; overflow:hidden; border-radius:12px; }
  .directory-filter-panel { min-width:0; flex:1; }
  .directory-filter-panel.can-scroll:not(.at-scroll-end)::after { content:'›'; position:absolute; z-index:2; top:0; right:0; display:grid; width:24px; height:100%; place-items:center; pointer-events:none; background:linear-gradient(90deg,transparent,var(--cream) 58%); color:#18242d; font-size:20px; font-weight:900; }
  .directory-filter-list { flex-wrap:nowrap; gap:6px; padding:3px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .directory-filter-list::-webkit-scrollbar { display:none; }
  .directory-filter-list button { width:auto; min-width:max-content; min-height:28px; flex:0 0 auto; padding:4px 8px; font-size:10px; overflow-wrap:normal; scroll-snap-align:start; white-space:nowrap; }
  .directory-all { min-height:28px; padding:4px 8px; font-size:10px; }
  .directory-card { min-height:104px; padding:12px 50px 12px 116px; border-radius:12px; }
  .directory-card-trail { width:38px; font-size:36px; }
  .directory-photo { width:104px; height:104px; border-radius:12px 0 0 12px; }
  .directory-card h2 { font-size:16px; }
  .directory-item-tags { flex-wrap:nowrap; justify-content:flex-start; gap:4px; overflow:hidden; }
  .directory-item-tags .directory-tag--overflow { display:inline-flex; }
  .directory-tags-more { display:none; }
  .directory-card .directory-tag { flex:0 0 auto; padding:3px 6px; font-size:9px; }
  .directory-card .directory-tag.is-dot { width:9px; min-width:9px; height:9px; min-height:9px; padding:0; border-radius:50%; color:transparent !important; font-size:0; box-shadow:none; cursor:pointer; }
  .directory-card .directory-tag.is-revealed { cursor:pointer; }
  .directory-card .directory-tag.is-tag-revealable:focus-visible { outline:2px solid #18242d; outline-offset:2px; }
}
@media(prefers-reduced-motion:reduce) { .directory-card,.directory-card--skeleton { transition:none; animation:none; } }
@media(max-width:480px) {
  .category-results { padding:16px 8px; }
  .subcategory-heading { gap:9px; margin-bottom:20px; }
  .subcategory-heading-icon { width:44px; border-radius:11px; font-size:18px; }
  .subcategory-heading h1 { font-size:21px; }
  .directory-filter-list { display:flex; }
  .directory-filter-list button { width:auto; }
  .directory-card { min-height:84px; padding:8px 38px 8px 92px; }
  .directory-photo { width:84px; height:84px; }
  .directory-card-trail { width:30px; font-size:30px; }
  .directory-card-info { gap:5px; }
  .directory-card h2 { font-size:14px; line-height:1.2; }
  .directory-card .directory-tag { padding:3px 5px; font-size:8.5px; }
}
