/* ============================================
   INBXIFY DIRECTORY PAGE — Combined CSS
   File: directory-head-v5.03.css
   GitHub: jbrady74/inbxify-site-code
   jsDelivr: https://cdn.jsdelivr.net/gh/jbrady74/inbxify-site-code@latest/directory-head-v5.02.css
   
   Last updated: 2026-03-16
   
   CONTENTS:
   0. Font — Instrument Serif
   1. Quick Fixes — P1, P2, P3 + full width
   2. Color Palette — 10 Themes
   3. Collection List — single column
   4. Card Shell — horizontal flex
   5. Image Zone — left column
   6. Content — right column, themed gradient
   7. Compact Mobile Row
   8. Responsive (cards — tablet, mobile, small mobile)
   9. Tooltip CSS — social icons
   10. Profile Modal CSS
   11. Filter System — v1.0
   12. Mobile/Tablet Icon Bar
   ============================================ */

/* ============================================
   0. FONT — Instrument Serif
   ============================================ */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/instrument-serif@latest/latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================
   1. QUICK FIXES — P1, P2, P3 + full width
   ============================================ */
.directory-grid,
.directory-grid-wrapper,
[class*="jetboost-list-wrapper"],
[class*="jetboost-list-wrapper"] .w-dyn-items,
[class*="jetboost-list-wrapper"] .w-dyn-item,
.directory-card {
  width: 100% !important;
  max-width: 100% !important;
}

.card-socials {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin: 0 !important;
}
.category-major-source,
.category-sub-source,
.category-sub-source-2 {
  display: none !important;
}
.directory-card .card-tags .w-dyn-empty,
.directory-card .w-dyn-list:has(.w-dyn-empty) {
  display: none !important;
}

/* ============================================
   2. COLOR PALETTE — 10 Themes
   ============================================ */
.directory-card {
  --tile-primary: #4A4A4A;
  --tile-light: #F0F0F0;
  --tile-accent: #6A6A6A;
}
[data-theme="forest"]     { --tile-primary: #2D5A47; --tile-light: #E8F0EC; --tile-accent: #4A7C67; }
[data-theme="slate"]      { --tile-primary: #4A4A6A; --tile-light: #EDEDF4; --tile-accent: #6B6B8D; }
[data-theme="burgundy"]   { --tile-primary: #6B4A4A; --tile-light: #F4EDED; --tile-accent: #8D6B6B; }
[data-theme="navy"]       { --tile-primary: #3D4A5A; --tile-light: #ECF0F4; --tile-accent: #5A6E82; }
[data-theme="terracotta"] { --tile-primary: #8B5A3C; --tile-light: #F6EDE8; --tile-accent: #A87A5E; }
[data-theme="plum"]       { --tile-primary: #6A4A6A; --tile-light: #F2EDF2; --tile-accent: #8D6B8D; }
[data-theme="copper"]     { --tile-primary: #7A5C3C; --tile-light: #F4EFE8; --tile-accent: #9A7C5C; }
[data-theme="teal"]       { --tile-primary: #3A5A5A; --tile-light: #E8F0F0; --tile-accent: #5A7A7A; }
[data-theme="sage"]       { --tile-primary: #5A6A4A; --tile-light: #EFF2EC; --tile-accent: #7A8D67; }
[data-theme="charcoal"]   { --tile-primary: #4A4A4A; --tile-light: #F0F0F0; --tile-accent: #6A6A6A; }

/* ============================================
   3. COLLECTION LIST — single column
   ============================================ */
.collection-list-25,
.jetboost-list-wrapper-lyem .w-dyn-items,
.directory-grid .w-dyn-items,
[class*="jetboost-list-wrapper"] .w-dyn-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

/* ============================================
   4. CARD SHELL — horizontal flex
   ============================================ */
.directory-card {
  display: flex !important;
  flex-direction: row !important;
  background: #fff !important;
  border: 0.5px solid #E5E4E0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  height: 220px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.directory-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
}

/* ============================================
   5. IMAGE ZONE — left column, WHITE background
   ============================================ */
.directory-card .card-image-zone {
  width: 28% !important;
  min-width: 200px !important;
  max-width: 30% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  padding: 8px 16px 12px 16px !important;
  background: #fff !important;
}

/* Initials — larger, themed (when no logo image) */
.directory-card .card-logo-tile .card-logo-initials {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: var(--tile-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Phone — in category line, pinned right */
.directory-card .card-phone-chip {
  font-family: Lato, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  color: var(--tile-primary) !important;
  margin-left: auto !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  position: static !important;
  transform: none !important;
  z-index: auto !important;
}

/* ============================================
   6. CONTENT — right column, themed gradient
   ============================================ */
.directory-card .card-content {
  flex: 1 !important;
  padding: 18px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  border-left: 3px solid var(--tile-primary) !important;
  background: linear-gradient(135deg, var(--tile-light), color-mix(in srgb, var(--tile-light) 70%, var(--tile-accent) 10%)) !important;
}

/* Category breadcrumb: Major › Sub */
.directory-card .card-category-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.directory-card .card-category {
  font-family: Lato, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--tile-primary) !important;
  opacity: 0.7 !important;
  white-space: nowrap !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.directory-card .card-category-chevron {
  font-size: 16px !important;
  color: var(--tile-primary) !important;
  opacity: 0.4 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.directory-card .card-subcategory {
  font-family: Lato, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tile-primary) !important;
  background: var(--tile-light) !important;
  padding: 4px 14px !important;
  border-radius: 99px !important;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 30%, transparent) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 240px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Business name — Instrument Serif 2rem */
.directory-card .card-name,
.directory-card h3.card-name {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  line-height: 40px !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Description / tagline */
.directory-card .card-description {
  font-family: Lato, sans-serif !important;
  font-size: 14px !important;
  color: #666 !important;
  line-height: 1.5 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Tags — CLW already flex row in Designer */
.directory-card .card-tags {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}
.directory-card .card-tags .w-dyn-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.directory-card .card-tag-link {
  font-family: Lato, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--tile-primary) !important;
  background: var(--tile-light) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 15%, transparent) !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

/* Socials — absolute centered in meta row */
.directory-card .card-socials {
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.card-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  background: var(--tile-accent, #6A6A6A) !important;
  transition: all 0.2s ease !important;
}
.card-social-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #fff !important;
  stroke-width: 1.75 !important;
  fill: none !important;
}
/* Fill-based icons (X/Twitter) — no stroke */
.card-social-icon svg[fill="currentColor"] {
  stroke: none !important;
  stroke-width: 0 !important;
  fill: #fff !important;
}
.card-social-icon:hover {
  background: var(--tile-primary, #4A4A4A) !important;
}
.card-social-icon:hover svg {
  stroke: #fff !important;
}
.card-social-icon:hover svg[fill="currentColor"] {
  stroke: none !important;
  fill: #fff !important;
}

/* Meta row — location + socials + view */
.directory-card .card-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}
.directory-card .card-location {
  font-family: Lato, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--tile-accent) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.directory-card .card-location svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--tile-accent) !important;
  flex-shrink: 0 !important;
}
.directory-card .card-cta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  background: #fff !important;
  border-radius: 99px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.directory-card .card-cta:hover {
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
.directory-card .card-cta .cta-text,
.directory-card .cta-text {
  font-family: Lato, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--tile-primary) !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.directory-card .card-cta svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--tile-primary) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  display: block !important;
}

/* ============================================
   7. COMPACT MOBILE ROW — hide above 576px
   ============================================ */
@media (min-width: 577px) {
  .compact-row { display: none !important; }
}

/* ============================================
   8. RESPONSIVE (cards)
   ============================================ */

/* --- Tablet cards (≤991px) --- */
@media (max-width: 991px) {
  .directory-card {
    height: 200px !important;
  }
  .directory-card .card-image-zone {
    width: 24% !important;
    min-width: 160px !important;
    padding: 8px 12px !important;
  }
  .directory-card .card-content {
    padding: 14px 20px !important;
  }
  .directory-card .card-name,
  .directory-card h3.card-name {
    font-size: 1.6rem !important;
    line-height: 34px !important;
  }
  .directory-card .card-phone-chip {
    font-size: 16px !important;
  }
  .directory-card .card-description {
    font-size: 13px !important;
    -webkit-line-clamp: 2 !important;
  }
  .card-social-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
  .card-social-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* --- Mobile cards (≤767px) --- */
@media (max-width: 767px) {
  .directory-card {
    flex-direction: column !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .directory-card .card-image-zone {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 100px !important;
    padding: 12px !important;
  }
  .directory-card .card-content {
    border-left: none !important;
    border-top: 2px solid var(--tile-primary) !important;
    padding: 12px 16px !important;
  }
  .directory-card .card-category-line {
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 6px 0 !important;
  }
  .directory-card .card-category {
    font-size: 12px !important;
  }
  .directory-card .card-subcategory {
    font-size: 11px !important;
    padding: 3px 10px !important;
  }
  .directory-card .card-phone-chip {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .directory-card .card-name,
  .directory-card h3.card-name {
    font-size: 18px !important;
    line-height: 26px !important;
    margin: 0 0 2px 0 !important;
  }
  .directory-card .card-description {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 0 6px 0 !important;
    -webkit-line-clamp: 2 !important;
  }
  .card-social-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  .card-social-icon svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 1.5 !important;
  }
  .directory-card .card-meta-row {
    gap: 8px !important;
  }
  .directory-card .card-location {
    font-size: 12px !important;
  }
  .directory-card .card-location svg {
    width: 14px !important;
    height: 14px !important;
  }
  .directory-card .card-cta {
    padding: 6px 12px !important;
  }
  .directory-card .card-cta .cta-text,
  .directory-card .cta-text {
    font-size: 12px !important;
  }
  .directory-card .card-cta svg {
    width: 14px !important;
    height: 14px !important;
  }
  .collection-list-25,
  .jetboost-list-wrapper-lyem .w-dyn-items,
  .directory-grid .w-dyn-items,
  [class*="jetboost-list-wrapper"] .w-dyn-items {
    gap: 16px !important;
  }
}

/* --- Small mobile cards (≤479px) --- */
@media (max-width: 479px) {
  .directory-card .card-image-zone {
    min-height: 80px !important;
    padding: 10px !important;
  }
  .directory-card .card-content {
    padding: 10px 14px !important;
  }
  .directory-card .card-name,
  .directory-card h3.card-name {
    font-size: 16px !important;
    line-height: 22px !important;
  }
  .directory-card .card-description {
    font-size: 11px !important;
  }
  .directory-card .card-logo-tile .card-logo-initials {
    font-size: 28px !important;
  }
  .collection-list-25,
  .jetboost-list-wrapper-lyem .w-dyn-items,
  .directory-grid .w-dyn-items,
  [class*="jetboost-list-wrapper"] .w-dyn-items {
    gap: 12px !important;
  }
}

/* ============================================
   9. TOOLTIP CSS — social icons (card + modal)
   ============================================ */
.card-social-icon[title] {
  position: relative !important;
}
.card-social-icon[title]:hover::after {
  content: attr(title) !important;
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(0,0,0,.7) !important;
  color: #fff !important;
  font-family: Lato, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  padding: 2px 3px !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 10 !important;
}
.card-social-icon[title]:hover::before {
  content: '' !important;
  position: absolute !important;
  bottom: calc(100% + 3px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 3px solid transparent !important;
  border-top-color: rgba(0,0,0,.7) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.profile-social-link[title] {
  position: relative !important;
}
.profile-social-link[title]:hover::after {
  content: attr(title) !important;
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(0,0,0,.7) !important;
  color: #fff !important;
  font-family: Lato, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  padding: 2px 3px !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 10 !important;
}
.profile-social-link[title]:hover::before {
  content: '' !important;
  position: absolute !important;
  bottom: calc(100% + 3px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 3px solid transparent !important;
  border-top-color: rgba(0,0,0,.7) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* ============================================
   10. PROFILE MODAL CSS
   ============================================ */
.profile-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s;
}
.profile-modal-overlay.is-open { display: flex; opacity: 1; }
.profile-modal {
  background: #fff;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform .25s;
}
.profile-modal-overlay.is-open .profile-modal { transform: translateY(0); }
.profile-modal-header {
  background: var(--tile-light, #1A3A3A);
  padding: 16px 24px 20px;
  position: relative;
}
.profile-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: var(--tile-primary, rgba(0,0,0,.15));
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  line-height: 1;
  z-index: 2;
}
.profile-modal-close:hover { background: var(--tile-accent, rgba(0,0,0,.25)); }
.profile-category {
  display: inline-block;
  background: var(--tile-primary, rgba(0,0,0,.15));
  color: #fff;
  font-family: Lato, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  padding: 4px 10px;
  border-radius: 4px;
  margin: 0 0 12px 0;
  line-height: 1.2;
}
.profile-logo-row {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.profile-logo {
  width: auto;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--tile-primary, #1A3A3A);
  overflow: hidden;
  padding: 8px 16px;
  border: 0.5px solid rgba(0,0,0,.06);
}
.profile-logo.has-image { background: #fff; padding: 6px 12px; }
.profile-logo img { height: 48px; width: auto; object-fit: contain; }
.profile-header-content { text-align: center; }
.profile-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--tile-primary, #1A3A3A);
  margin: 0 0 4px;
  line-height: 1.2;
  text-transform: none !important;
}
.profile-tagline {
  font-family: Lato, sans-serif;
  font-size: 13px;
  color: var(--tile-accent, #666);
  line-height: 1.4;
  margin: 0;
}
.profile-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.profile-actions { display: flex; gap: 12px; margin-bottom: 24px; }
.profile-action-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 8px;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s;
  border: none;
  cursor: pointer;
}
.profile-action-btn.primary { background: #1A3A3A; color: #fff; }
.profile-action-btn.primary:hover { background: #0f2626; }
.profile-action-btn.secondary { background: #F9F9F9; color: #1A3A3A; border: 1px solid #E5E5E5; }
.profile-action-btn.secondary:hover { background: #EEF2EE; border-color: #1A3A3A; }
.profile-section-title {
  font-family: Lato, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #999;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-section-title::after { content: ''; flex: 1; height: 1px; background: #E5E5E5; }
.profile-about, .profile-contact, .profile-hours, .profile-social, .profile-services { margin-bottom: 24px; }
.profile-description { font-family: Lato, sans-serif; font-size: 15px; line-height: 1.7; color: #333; margin: 0; }
.profile-services-list { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-services-list .profile-service-tag {
  background: #F5F5F5;
  color: #1A3A3A;
  font-family: Lato, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #E5E5E5;
}
.profile-contact-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.profile-contact-item { background: #F9F9F9; padding: 14px; border-radius: 8px; display: flex; align-items: flex-start; gap: 12px; }
.profile-contact-icon {
  width: 36px;
  height: 36px;
  background: #1A3A3A;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-contact-icon svg { width: 18px; height: 18px; color: #fff; stroke: #fff; }
.profile-contact-info { flex: 1; min-width: 0; }
.profile-contact-label { font-family: Lato, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #999; margin-bottom: 2px; }
.profile-contact-value { font-family: Lato, sans-serif; font-size: 14px; color: #1A1A1A; word-break: break-word; }
.profile-contact-value a { color: #1A3A3A; text-decoration: none; }
.profile-contact-value a:hover { text-decoration: underline; }
.profile-social-links { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-social-link {
  width: 42px;
  height: 42px;
  background: #1A3A3A;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all .2s;
}
.profile-social-link:hover { background: #C4A35A; }
.profile-social-link svg { width: 20px; height: 20px; stroke: #fff; color: #fff; }
.profile-modal-footer {
  padding: 16px 24px;
  background: #F9F9F9;
  border-top: 1px solid #E5E5E5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.profile-footer-attribution { font-family: Lato, sans-serif; font-size: 11px; color: #999; }
.psh { display: none !important; }

/* Modal — mobile */
@media (max-width: 767px) {
  .profile-modal-overlay { padding: 0; align-items: flex-end; }
  .profile-modal { max-width: 100%; max-height: 95vh; max-height: 95dvh; border-radius: 20px 20px 0 0; margin-top: 8px; }
  .profile-modal-header { padding: 8px 20px 14px; padding-top: calc(8px + env(safe-area-inset-top,0)); }
  .profile-logo { height: 48px; min-height: 48px; max-height: 48px; padding: 4px 10px; }
  .profile-logo.has-image { padding: 4px 8px; }
  .profile-logo img { height: 40px; }
  .profile-logo-row { margin-bottom: 10px; }
  .profile-category { font-size: 9px; margin-bottom: 8px; }
  .profile-name { font-size: 22px; }
  .profile-tagline { font-size: 12px; }
  .profile-modal-body { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .profile-actions { flex-direction: column; }
  .profile-contact-grid { grid-template-columns: 1fr; }
  .profile-modal-footer { flex-direction: column; gap: 8px; text-align: center; padding-bottom: calc(16px + env(safe-area-inset-bottom,0)); }
}

/* ============================================
   11. FILTER SYSTEM — v1.0
   ============================================ */

/* --- Filter Bar Layout --- */
.filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 0 !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  z-index: 100 !important;
}

/* --- Hide the old Webflow dropdown (filter-dd) --- */
.filter-bar .filter-dd,
.filter-bar .w-dropdown {
  display: none !important;
}

/* --- Search form: fills remaining space left of dropdowns --- */
.filter-bar form,
.filter-bar .w-form {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

/* --- Hide submit button + Jetboost CLEAR inside search form --- */
.filter-bar form [type="submit"],
.filter-bar .w-form [type="submit"],
.filter-bar .jetboost-list-search-clear-19pb,
.filter-bar [class*="jetboost-list-search-clear"] {
  display: none !important;
}

/* --- Custom search clear × button (injected by JS) --- */
.dir-search-clear {
  display: none !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #D8D8D4 !important;
  border: none !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background 0.15s ease !important;
  z-index: 5 !important;
  line-height: 1 !important;
}
.dir-search-clear::after {
  content: '\00d7' !important;
  font-family: Lato, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1 !important;
}
.dir-search-clear:hover {
  background: #A0A09A !important;
}
.dir-search-clear.is-visible {
  display: flex !important;
}

/* --- Search input style --- */
.jetboost-list-search-input-19pb {
  font-family: Lato, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1A1A1A !important;
  background: #fff !important;
  border: 1.5px solid #D8D8D4 !important;
  border-radius: 999px !important;
  padding: 14px 48px 14px 22px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
}

.jetboost-list-search-input-19pb::placeholder,
.dir-filter-select.is-placeholder {
  color: #A0A09A !important;
  font-weight: 400 !important;
}

.jetboost-list-search-input-19pb:focus {
  border-color: #1A3A3A !important;
  box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.08) !important;
}

/* Focus within wrapper — when button is focused */
.dir-filter-wrap:focus-within {
  border-color: #1A3A3A !important;
  box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.08) !important;
}

/* --- Custom Dropdown Wrapper — 25% each, pill-styled container --- */
.dir-filter-wrap {
  position: relative !important;
  width: calc(25% - 12px) !important;
  flex-shrink: 0 !important;
  z-index: 200 !important;
  background: #fff !important;
  border: 1.5px solid #D8D8D4 !important;
  border-radius: 999px !important;
  height: 52px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* --- Dropdown trigger button — transparent inside the wrapper --- */
.dir-filter-select {
  cursor: pointer !important;
  padding: 14px 44px 14px 22px !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: Lato, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1A1A1A !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* --- Chevron icon --- */
.dir-filter-wrap::after {
  content: '' !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid #A0A09A !important;
  border-bottom: 2px solid #A0A09A !important;
  transform: translateY(-65%) rotate(45deg) !important;
  pointer-events: none !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.dir-filter-wrap.is-open::after {
  transform: translateY(-35%) rotate(-135deg) !important;
  border-color: #1A3A3A !important;
}

/* Active selection — distinctive border on wrapper */
.dir-filter-wrap.is-filtered {
  border-color: #1A3A3A !important;
}
.dir-filter-wrap.is-filtered .dir-filter-select {
  color: #1A1A1A !important;
}
.dir-filter-wrap.is-filtered::after {
  border-color: #1A3A3A !important;
}

/* --- Dropdown Panel --- */
.dir-filter-panel {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  border: 1.5px solid #D8D8D4 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
  z-index: 9000 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 8px 0 !important;
}

.dir-filter-wrap.is-open .dir-filter-panel {
  display: block !important;
}

/* --- Dropdown Items --- */
.dir-filter-item {
  font-family: Lato, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1A1A1A !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: background 0.12s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.dir-filter-item:hover {
  background: #F5F5F2 !important;
}

.dir-filter-item.is-active {
  background: #E8F0F0 !important;
  color: #1A3A3A !important;
  font-weight: 700 !important;
}

/* Item count badge */
.dir-filter-count {
  font-family: Lato, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #A0A09A !important;
  background: #F0F0EC !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  min-width: 24px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  margin-left: 12px !important;
}

.dir-filter-item.is-active .dir-filter-count {
  background: #1A3A3A !important;
  color: #fff !important;
}

/* --- Result Count --- */
.dir-result-count {
  font-family: Lato, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #A0A09A !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.3px !important;
}
.dir-result-count span {
  color: #1A3A3A !important;
  font-weight: 700 !important;
}

/* --- Reset Button --- */
.dir-filter-reset {
  font-family: Lato, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #1A3A3A !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 8px 4px !important;
  transition: opacity 0.2s ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dir-filter-reset.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.dir-filter-reset:hover {
  text-decoration: underline !important;
}

/* --- Hide old CLEAR/RESET link --- */
.filter-bar > a[class*="jetboost-filter-none"],
.filter-bar > .jetboost-filter-none-lyem {
  display: none !important;
}

/* --- Scrollbar in dropdown panel --- */
.dir-filter-panel::-webkit-scrollbar {
  width: 6px !important;
}
.dir-filter-panel::-webkit-scrollbar-track {
  background: transparent !important;
}
.dir-filter-panel::-webkit-scrollbar-thumb {
  background: #D8D8D4 !important;
  border-radius: 3px !important;
}

/* --- Filter system responsive --- */

/* --- MOBILE ICON BAR (≤991px) --- */
/* Hide desktop filter bar elements, show icon bar */
@media (max-width: 991px) {
  /* Hide desktop-only elements (not inside icon bar panels) */
  .filter-bar > form,
  .filter-bar > .w-form,
  .filter-bar > .dir-filter-wrap,
  .filter-bar > .dir-result-count,
  .filter-bar > .dir-filter-reset,
  .filter-bar > .dir-search-clear {
    display: none !important;
  }

  .filter-bar {
    padding: 12px 0 !important;
    gap: 0 !important;
    position: relative !important;
    z-index: 100 !important;
  }

  /* Icon bar container */
  .dir-icon-bar {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Icon bar pill (tablet) */
  .dir-icon-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    background: #fff !important;
    border: 0.5px solid #E5E4E0 !important;
    border-radius: var(--border-radius-lg, 12px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 56px !important;
  }

  /* Icon buttons */
  .dir-icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    border: 1.5px solid #D8D8D4 !important;
    background: #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }
  .dir-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #1A3A3A !important;
    fill: none !important;
    stroke-width: 2 !important;
  }
  .dir-icon-btn svg circle[fill] {
    fill: #1A3A3A !important;
  }
  .dir-icon-btn.is-active {
    border-color: #1A3A3A !important;
    background: #E8F0F0 !important;
  }

  /* Icon divider */
  .dir-icon-divider {
    width: 1px !important;
    height: 24px !important;
    background: #D8D8D4 !important;
    flex-shrink: 0 !important;
  }

  /* Filter badge dot */
  .dir-filter-badge {
    display: none !important;
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 12px !important;
    height: 12px !important;
    background: #C4A35A !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
  }
  .dir-icon-btn.has-filter .dir-filter-badge {
    display: block !important;
  }

  /* Active filter pill (shows selected category name) */
  .dir-active-pill {
    display: none !important;
    font-family: Lato, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1A3A3A !important;
    background: #E8F0F0 !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 200px !important;
  }
  .dir-active-pill.is-visible {
    display: block !important;
  }

  /* Reset × button (compact) */
  .dir-icon-reset {
    display: none !important;
    font-family: Lato, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #A0A09A !important;
    cursor: pointer !important;
    padding: 4px !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
  }
  .dir-icon-reset.is-visible {
    display: block !important;
  }
  .dir-icon-reset:hover {
    color: #1A3A3A !important;
  }

  /* Icon bar result count */
  .dir-icon-count {
    font-family: Lato, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #A0A09A !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .dir-icon-count span {
    color: #1A3A3A !important;
    font-weight: 700 !important;
  }

  /* Expanded panel (search or filters — floats over cards) */
  .dir-expand-panel {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border: 1.5px solid #D8D8D4 !important;
    border-radius: 16px !important;
    padding: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    z-index: 9000 !important;
  }
  .dir-expand-panel.is-open {
    display: block !important;
  }

  /* Search panel — single input */
  .dir-expand-panel .dir-panel-search {
    position: relative !important;
  }
  .dir-expand-panel .dir-panel-search input {
    width: 100% !important;
    font-family: Lato, sans-serif !important;
    font-size: 15px !important;
    color: #1A1A1A !important;
    background: #fff !important;
    border: 1.5px solid #1A3A3A !important;
    border-radius: 999px !important;
    padding: 12px 20px !important;
    height: 48px !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.08) !important;
  }

  /* Filter panel — stacked dropdowns */
  .dir-expand-panel .dir-panel-filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .dir-expand-panel .dir-filter-wrap {
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }
  .dir-expand-panel .dir-filter-select {
    height: 46px !important;
    font-size: 14px !important;
  }
  .dir-expand-panel .dir-filter-panel {
    z-index: 9500 !important;
    max-height: 50vh !important;
  }
}

/* --- Mobile-specific icon bar (≤767px) — tighter --- */
@media (max-width: 767px) {
  .dir-icon-pill {
    border-radius: 99px !important;
    height: 44px !important;
    padding: 6px 12px !important;
    gap: 8px !important;
  }
  .dir-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  .dir-icon-btn svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.5 !important;
  }
  .dir-icon-divider {
    height: 20px !important;
  }
  .dir-active-pill {
    font-size: 11px !important;
    max-width: 130px !important;
    padding: 3px 8px !important;
  }
  .dir-icon-count {
    font-size: 12px !important;
  }
  .dir-expand-panel .dir-panel-search input {
    height: 42px !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
  .dir-expand-panel .dir-filter-select {
    height: 42px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 479px) {
  .dir-icon-count span + span {
    display: none !important;
  }
}

/* Hide icon bar on desktop (>991px) */
@media (min-width: 992px) {
  .dir-icon-bar {
    display: none !important;
  }
}

/* --- Phone link color fix (mobile) --- */
@media (max-width: 767px) {
  .directory-card a[href^="tel"],
  .directory-card .card-phone-chip a {
    color: inherit !important;
    text-decoration: none !important;
  }
}