/* ============================================
   INBXIFY DIRECTORY PAGE — Combined CSS
   File: directory-head-v5.20.css
   GitHub: jbrady74/inbxify-site-code
   jsDelivr: https://cdn.jsdelivr.net/gh/jbrady74/inbxify-site-code@latest/directory-head-v5.20.css
   
   Last updated: 2026-05-17
   
   v5.20 — Directory card social icon tray fix:
     • Icons now always single-line, right-justified, 24px (was wrapping
       to 2 lines on desktop @ 34px when centered absolutely).
     • Promoted tablet (≤1080px) icon styles to base.
     • Removed redundant tablet @media overrides for .card-socials sizing.
     • Mobile (≤767px) hide rule unchanged.
   
   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 — REMOVED (was causing duplicates)
   8. Responsive (redesigned all breakpoints — spec v3)
   9. Tooltip CSS — social icons
   10. Profile Modal CSS
   11. Filter System — v1.0
   12. Mobile/Tablet Icon Bar
   13. Mobile Ad Injection — ≤999px (resized per spec v3)
   ============================================ */

/* ============================================
   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: nowrap !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: 12px !important;
}

/* ============================================
   4. CARD SHELL — horizontal flex
   ============================================ */
.directory-card {
  display: flex !important;
  flex-direction: row !important;
  background: #fff !important;
  border: 1px solid #d8d5c0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  height: 220px !important;
  box-shadow: 0 2px 8px rgba(26,58,58,0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.directory-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(26,58,58,0.10) !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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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: 3 !important;
  -webkit-box-orient: vertical !important;
}

.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;
}

.directory-card .card-socials {
  margin: 0 !important;
  padding: 0 !important;
  /* v5.20: static positioning lets parent .card-meta-row's
     justify-content:space-between right-justify the tray. */
}
.card-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !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: 12px !important;
  height: 12px !important;
  stroke: #fff !important;
  stroke-width: 1.75 !important;
  fill: none !important;
}
.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;
}

.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: none !important;
}

/* ============================================
   7. COMPACT MOBILE ROW — REMOVED
   Was causing duplicate text below cards.
   Hidden at all breakpoints.
   ============================================ */
.compact-row {
  display: none !important;
}

/* ============================================
   8. RESPONSIVE (cards)
   v5.05 — Redesigned all breakpoints per
   cross-page design spec v3.
   ============================================ */

/* --- CHEVRON ARROW — all breakpoints --- */
.directory-card::after {
  content: '\203A' !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  color: #ccc !important;
  background: rgba(255,255,255,0.6) !important;
  border-left: 0.5px solid #d8d5c0 !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  z-index: 2 !important;
}
.directory-card:hover::after {
  color: #999 !important;
  background: rgba(255,255,255,0.85) !important;
}

/* --- Desktop cards (≥1000px) — add chevron padding --- */
@media (min-width: 1000px) {
  .directory-card {
    padding-right: 32px !important;
  }
  .directory-card .card-content {
    padding-right: 20px !important;
  }
}

/* --- Tablet cards (768–999px) --- */
@media (max-width: 1080px) {
  .directory-card {
    flex-direction: row !important;
    height: 192px !important;
    padding-right: 32px !important;
    border-left: 2px solid var(--tile-primary) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 0 1px 4px rgba(26,58,58,0.05) !important;
  }
  .directory-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(26,58,58,0.08) !important;
  }
  .directory-card .card-image-zone {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: auto !important;
    padding: 10px !important;
    border-right: none !important;
  }
  .directory-card .card-content {
    border-left: none !important;
    border-top: none !important;
    padding: 22px 14px !important;
    background: #fff !important;
  }
  .directory-card .card-category-line {
    margin: 0 0 3px 0 !important;
  }
  .directory-card .card-category {
    font-size: 11px !important;
  }
  .directory-card .card-subcategory {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }
  .directory-card .card-phone-chip {
    font-size: 12px !important;
    font-weight: 500 !important;
    position: static !important;
    margin-left: auto !important;
  }
  .directory-card .card-name,
  .directory-card h3.card-name {
    font-size: 1.8rem !important;
    line-height: 1.25 !important;
    margin: 0 0 3px 0 !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }
  .directory-card .card-description {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px 0 !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }
  /* v5.20: .card-socials sizing/positioning moved to base — no longer
     needs tablet-specific overrides. */
  .directory-card .card-cta {
    display: none !important;
  }
  .directory-card .card-meta-row {
    gap: 6px !important;
  }
  .directory-card .card-location {
    font-size: 11px !important;
  }
  .directory-card .card-tags {
    display: none !important;
  }
  .directory-card .card-logo-tile img,
  .directory-card .card-image-zone img {
    max-width: 100px !important;
    max-height: 80px !important;
    object-fit: contain !important;
  }
  .directory-card .card-logo-tile .card-logo-initials {
    font-size: 26px !important;
  }
  .collection-list-25,
  .jetboost-list-wrapper-lyem .w-dyn-items,
  .directory-grid .w-dyn-items,
  [class*="jetboost-list-wrapper"] .w-dyn-items {
    gap: 11px !important;
  }
}

/* --- Mobile cards (≤767px) --- */
@media (max-width: 767px) {
  .directory-card {
    height: 180px !important;
    border-radius: 0 8px 8px 0 !important;
    padding-right: 0 !important;
  }
  .directory-card::after {
    display: none !important;
  }
  .directory-card .card-socials {
    display: none !important;
  }
  .directory-card .card-image-zone {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    padding: 10px !important;
  }
  .directory-card .card-content {
    padding: 20px 12px !important;
  }
  .directory-card .card-category-line {
    flex-wrap: nowrap !important;
    margin: 0 0 2px 0 !important;
  }
  .directory-card .card-category {
    font-size: 10px !important;
  }
  .directory-card .card-subcategory {
    display: inline-block !important;
    font-size: 9px !important;
    padding: 1px 6px !important;
  }
  .directory-card .card-phone-chip {
    display: none !important;
  }
  .directory-card .card-name,
  .directory-card h3.card-name {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  .directory-card .card-description {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px 0 !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }
  .directory-card .card-location {
    font-size: 10px !important;
  }
  .directory-card .card-location svg {
    width: 12px !important;
    height: 12px !important;
  }
  .directory-card .card-logo-tile img,
  .directory-card .card-image-zone img {
    max-width: 80px !important;
    max-height: 64px !important;
  }
  .directory-card .card-logo-tile .card-logo-initials {
    font-size: 20px !important;
  }
  .collection-list-25,
  .jetboost-list-wrapper-lyem .w-dyn-items,
  .directory-grid .w-dyn-items,
  [class*="jetboost-list-wrapper"] .w-dyn-items {
    gap: 11px !important;
  }
}

/* --- Small mobile (≤479px) --- */
@media (max-width: 479px) {
  .directory-card {
    height: 170px !important;
  }
  .directory-card .card-image-zone {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    padding: 8px !important;
  }
  .directory-card .card-content {
    padding: 8px 10px !important;
  }
  .directory-card .card-name,
  .directory-card h3.card-name {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
  }
  .directory-card .card-description {
    font-size: 11px !important;
  }
  .directory-card .card-logo-tile .card-logo-initials {
    font-size: 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: 9px !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 {
  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;
}

.filter-bar .filter-dd,
.filter-bar .w-dropdown {
  display: none !important;
}

.filter-bar form,
.filter-bar .w-form {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.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;
}

.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: #d0cdb8 !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;
}

.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 #d0cdb8 !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;
}
.dir-filter-wrap:focus-within {
  border-color: #1A3A3A !important;
  box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.08) !important;
}
.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 #d0cdb8 !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;
}
.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;
}
.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;
}
.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;
}
.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 #d0cdb8 !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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.filter-bar > a[class*="jetboost-filter-none"],
.filter-bar > .jetboost-filter-none-lyem {
  display: none !important;
}
.dir-filter-panel::-webkit-scrollbar {
  width: 6px !important;
}
.dir-filter-panel::-webkit-scrollbar-track {
  background: transparent !important;
}
.dir-filter-panel::-webkit-scrollbar-thumb {
  background: #d0cdb8 !important;
  border-radius: 3px !important;
}

/* ============================================
   12. MOBILE/TABLET ICON BAR (≤991px)
   ============================================ */
@media (max-width: 1080px) {
  .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;
  }
  .dir-icon-bar {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }
  .dir-icon-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    background: #fff !important;
    border: 0.5px solid #d8d5c0 !important;
    border-radius: var(--border-radius-lg, 12px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 56px !important;
  }
  .dir-icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    border: 1.5px solid #d0cdb8 !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;
  }
  .dir-icon-divider {
    width: 1px !important;
    height: 24px !important;
    background: #d0cdb8 !important;
    flex-shrink: 0 !important;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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 #d0cdb8 !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;
  }
  .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;
  }
  .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;
  }
}

@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;
  }
}

@media (min-width: 992px) {
  .dir-icon-bar {
    display: none !important;
  }
}

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

/* ============================================
   13. MOBILE AD INJECTION — ≤999px
   Sidebar hidden, ads injected between cards.
   Lead Ad (SBA-1) after card 3, then every 5.
   All ads rotate in pool after lead.
   Label: "Local Partners"
   v5.05 — Sized per design spec v3
   ============================================ */

@media (max-width: 1080px) {
  .sidebar-25 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }
  .content-75 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.ibx-dir-ad {
  display: none;
}

@media (max-width: 1080px) {
  .ibx-dir-ad {
    display: block;
    width: 100%;
    margin: 11px 0;
    text-align: center;
  }
  .ibx-dir-ad-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #b8a080;
    margin-bottom: 6px;
    background: transparent;
  }
  .ibx-dir-ad a {
    display: block;
    width: 50%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8d5c0;
    text-decoration: none;
  }
  .ibx-dir-ad img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 767px) {
  .ibx-dir-ad {
    margin: 11px 0;
  }
  .ibx-dir-ad a {
    width: 60%;
  }
}

@media (max-width: 479px) {
  .ibx-dir-ad a {
    width: 70%;
  }
}