/* SAF Member Directory 0.5.2 — design-system tokens mapped onto saf-md__* */

.saf-md {
  /* Admin-overridable (also dual-written from PHP) */
  --saf-md-bg: #F4F7FA;
  --saf-md-surface: #FFFFFF;
  --saf-md-ink: #082448;
  --saf-md-muted: #5a6f68;
  --saf-md-border: #DCE4EC;
  --saf-md-accent: #2468AD;
  --saf-md-accent-hover: #1b5590;
  --saf-md-badge: #78BE32;
  --saf-md-banner: #FFF0E8;

  /* Design tokens */
  --saf-blue: #1568b3;
  --saf-green: #6bac33;
  --leaf: var(--saf-md-badge);
  --on-leaf: var(--saf-md-ink);
  --action-blue: var(--saf-md-accent);
  --action-blue-hover: var(--saf-md-accent-hover);
  --on-action: #ffffff;
  --ink: var(--saf-md-ink);
  --ink-muted: var(--saf-md-muted);
  --surface: var(--saf-md-surface);
  --surface-raised: var(--saf-md-surface);
  --surface-sunken: var(--saf-md-bg);
  --border: var(--saf-md-border);
  --border-strong: #7d8e9f;
  --focus-ring: var(--saf-md-accent);
  --florist-tint: #eef6e6;
  --florist-ink: #2f5f12;
  --grower-tint: #fbf1de;
  --grower-ink: #8a5a00;
  --wholesaler-tint: #e8f1fa;
  --wholesaler-ink: #1c4f85;
  --supplier-tint: #f4ecf7;
  --supplier-ink: #6b3a7a;
  --educator-tint: #e8f7f2;
  --educator-ink: #0f6b52;
  --premium: #9a6b00;
  --scrim: rgba(8, 36, 72, 0.45);
  --shadow-card-hover: 0 6px 20px rgba(8, 36, 72, 0.10);
  --shadow-panel: 0 12px 32px rgba(8, 36, 72, 0.12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface-sunken);
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: clip; /* non-full-width: contain children; full-width overrides to visible */
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

.saf-md *,
.saf-md *::before,
.saf-md *::after {
  box-sizing: border-box;
}

.saf-md :where(.saf-md__btn, .saf-md__pill, .saf-md__input, .saf-md__select, .saf-md__card, .saf-md__view-btn, .saf-md__near-me, .saf-md__link, .saf-md__drawer-close):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* —— Gated —— */
/* 0.4.88: gated root holds the sign-in card + server-rendered About section. */
.saf-md--gated {
  padding: 0;
}
.saf-md--gated .saf-md__gate {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: var(--space-6) var(--space-12) var(--space-8);
}
.saf-md--gated .saf-md__gate-message {
  margin: 0 0 var(--space-4);
}
/* 0.4.91: answer-first H1 + lead in the gate (one H1 per page for crawlers/agents). */
.saf-md--gated .saf-md__gate-eyebrow {
  margin: 0 0 var(--space-2, 8px);
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action-blue);
}
.saf-md--gated .saf-md__gate-title {
  margin: 0 0 var(--space-3, 12px);
  padding: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--saf-blue, #082448);
}
.saf-md--gated .saf-md__gate-lead {
  max-width: 40rem;
  margin: 0 auto var(--space-4, 16px);
  padding: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: inherit;
}
.saf-md--gated .saf-md__gate-actions {
  margin: 0;
  padding: 0;
}
@media (max-width: 720px) {
  .saf-md--gated .saf-md__gate {
    margin: var(--space-4) var(--space-4) var(--space-6);
  }
}

.saf-md__gate-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  background: var(--action-blue);
  color: var(--on-action) !important;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}

/* —— Hero —— */
.saf-md__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--saf-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 28px var(--space-12) var(--space-4);
  box-sizing: border-box;
}

.saf-md__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.saf-md__hero-bg-layer {
  position: absolute;
  inset: 0;
  background-color: var(--saf-blue);
  background-position: 70% center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.saf-md__hero-bg-layer.is-active {
  opacity: 1;
}

.saf-md__hero-shade {
  position: absolute;
  inset: 0;
  /* Left SAF-blue scrim for headline contrast; keep right side of photo open. */
  background: linear-gradient(
    100deg,
    rgba(8, 36, 72, 0.92) 0%,
    rgba(8, 36, 72, 0.78) 22%,
    rgba(8, 36, 72, 0.45) 46%,
    rgba(8, 36, 72, 0.16) 72%,
    rgba(8, 36, 72, 0.05) 100%
  );
}

.saf-md__hero-inner {
  position: relative;
  z-index: 1;
}

.saf-md__hero-eyebrow {
  margin: 0 0 var(--space-2);
  font: 700 12px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.saf-md__hero-bar {
  display: inline-block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--saf-green);
  flex: none;
}

.saf-md__hero-title {
  margin: 0;
  font: 800 32px/38px var(--font-sans);
  letter-spacing: -0.02em;
  color: #fff;
}


.saf-md__hero-lead {
  margin: 6px 0 0;
  font: 400 15px/1.55 var(--font-sans);
  opacity: 0.95;
  max-width: 68ch; /* 0.6.10: ~3-sentence intro stays readable */
  text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(8, 36, 72, 0.6);
  text-shadow: 0 1px 2px rgba(8, 36, 72, 0.45);
}

/* —— Search wrap (inside hero, under headline) —— */
.saf-md__search-wrap {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 960px;
  margin-top: 12px;
  padding: 0;
  box-sizing: border-box;
}

.saf-md__search {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 150px auto;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.saf-md__field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.saf-md__field-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.saf-md .saf-md__input,
.saf-md .saf-md__select {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px 0 44px; /* clear 18px left icon + gap */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: 400 15px/1 var(--font-sans);
}

.saf-md .saf-md__select {
  padding-left: 14px;
  padding-right: 36px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--ink);
}

.saf-md .saf-md__input::placeholder { color: var(--ink-muted); }

/* Location field: left icon + right Near me — keep text clear of both */
.saf-md .saf-md__input--loc {
  padding-left: 44px;
  padding-right: 118px;
}

.saf-md__near-me {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--action-blue);
  font: 600 13px/1 var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.saf-md__near-me:hover { background: var(--surface-sunken); }
.saf-md__near-me.is-active {
  background: var(--wholesaler-tint);
  color: var(--ink, #1a1a1a);
  box-shadow: inset 0 0 0 1.5px var(--action-blue, #2f6fed);
  font-weight: 700;
}

/* You-are-here (browser geo / Near me) map marker */
.saf-md__you-are-here {
  background: transparent !important;
  border: 0 !important;
}
.saf-md__you-are-here-dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #4285F4 0 5px, rgba(66, 133, 244, 0.25) 6px 10px, transparent 11px);
  box-shadow: 0 0 0 1.5px #4285F4, 0 1px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.saf-md__search .saf-md__btn { height: 48px; padding: 0 24px; }

.saf-md__select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* —— Buttons —— */
.saf-md__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: 600 15px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  appearance: none;
}

.saf-md__btn:disabled { opacity: 0.6; cursor: not-allowed; }

.saf-md__btn--primary {
  background: var(--action-blue);
  color: var(--on-action);
}
.saf-md__btn--primary:hover:not(:disabled) { background: var(--action-blue-hover); }

.saf-md__btn--secondary {
  background: var(--surface-raised);
  color: var(--action-blue);
  border-color: var(--border-strong);
}
.saf-md__btn--secondary:hover:not(:disabled) { border-color: var(--action-blue); }

.saf-md__btn--ghost {
  background: transparent;
  color: var(--ink-muted);
  border-color: transparent;
}
.saf-md__btn--ghost:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-sunken);
}

/* —— Filter chips —— */
.saf-md__associations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-12) 2px;
  box-sizing: border-box;
}
.saf-md__associations[hidden] {
  display: none !important;
}
.saf-md__pill--association {
  font-weight: 600;
}
.saf-md__segments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow: visible;
  padding: var(--space-3) var(--space-12) 2px;
  margin-top: 0;
  box-sizing: border-box;
}

.saf-md__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
}
.saf-md__pill:hover { border-color: var(--ink); }
.saf-md__pill.is-active,
.saf-md__pill[aria-pressed="true"] {
  background: var(--leaf);
  border-color: var(--leaf);
  color: var(--on-leaf);
}
.saf-md__pill-count {
  font-weight: 500;
  font-size: 13px;
  opacity: 0.8;
}

/* —— Results area —— */
.saf-md__results-area {
  background: var(--surface-sunken);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-12) var(--space-6);
}

.saf-md__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.saf-md__status {
  font: 500 14px/20px var(--font-sans);
  color: var(--ink-muted);
  margin: 0;
  min-height: 1.25rem;
}
.saf-md__status strong { color: var(--ink); font-weight: 700; }
.saf-md__status.saf-md__error { color: #9b1c1c; }

.saf-md__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.saf-md__copy-link {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  gap: 6px;
}
.saf-md__copy-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.saf-md__copy-link.is-copied {
  color: var(--leaf);
  border-color: var(--leaf);
}

.saf-md__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/1 var(--font-sans);
  color: var(--ink-muted);
}
.saf-md__sort .saf-md__select {
  height: 36px;
  width: auto;
  min-width: 130px;
  padding: 0 34px 0 12px;
  font-size: 14px;
}

.saf-md__view-toggle {
  display: none;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}

.saf-md__view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  appearance: none;
}
.saf-md__view-btn.is-active,
.saf-md__view-btn[aria-pressed="true"] {
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(8, 36, 72, 0.12);
}

/* —— Layout —— */
.saf-md__layout {
  --saf-md-sticky-top: 16px;
  display: grid;
  grid-template-columns: minmax(480px, 560px) minmax(0, 1fr);
  gap: 20px;
  min-height: 480px;
  align-items: start;
}
body.admin-bar .saf-md__layout {
  --saf-md-sticky-top: 48px;
}

.saf-md__results-col { min-width: 0; }

.saf-md__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.saf-md__cards.is-loading {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}

/* In-list loading banner (reset search / segment / sort / Near me) */
.saf-md__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  font: 600 15px/22px var(--font-sans);
  box-shadow: 0 1px 0 rgba(8, 36, 72, 0.04);
}
.saf-md__loading-text { color: var(--ink); }

.saf-md__loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font: 600 14px/20px var(--font-sans);
}

.saf-md__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(36, 104, 173, 0.22);
  border-top-color: var(--action-blue);
  border-right-color: var(--leaf);
  animation: saf-md-spin 0.75s linear infinite;
  flex: none;
}
.saf-md__spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

@keyframes saf-md-spin {
  to { transform: rotate(360deg); }
}

.saf-md__status-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}

.saf-md.is-searching .saf-md__filters button[type="submit"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.saf-md__pager {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}
/* Author display rules can override UA [hidden]; keep Load more truly gone. */
.saf-md__more[hidden] {
  display: none !important;
}

/* —— Cards —— */
.saf-md__card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.15s, border-color 0.15s;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
}
.saf-md__card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
}
.saf-md__card.is-active,
.saf-md__card[aria-current="true"] {
  border-color: var(--leaf);
  box-shadow: 0 0 0 1px var(--leaf), var(--shadow-card-hover);
}
.saf-md__card.is-pin-hover {
  border-color: var(--action-blue);
}

.saf-md__card-logo-wrap,
.saf-md__logo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.saf-md__card-logo {
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
  width: auto;
  height: auto;
}
.saf-md__logo--placeholder {
  /* 0.4.78: category SVGs include tile fill + corner radius — no extra frame. */
  background: transparent;
  border-color: transparent;
}
.saf-md__card-logo--placeholder {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.saf-md__flower-ph {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  opacity: 1;
}
.saf-md__map-popup {
  font: 600 13px/1.35 var(--font-sans);
  color: var(--ink);
}
.saf-md__map-popup-loc {
  font-weight: 500;
  color: var(--muted, #667);
  font-size: 12px;
}

.saf-md__card-mono,
.saf-md__mono {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font: 800 22px/1 var(--font-sans);
  letter-spacing: -0.02em;
}
.saf-md__mono--florist { background: var(--florist-tint); color: var(--florist-ink); }
.saf-md__mono--grower { background: var(--grower-tint); color: var(--grower-ink); }
.saf-md__mono--wholesaler { background: var(--wholesaler-tint); color: var(--wholesaler-ink); }
.saf-md__mono--supplier { background: var(--supplier-tint); color: var(--supplier-ink); }
.saf-md__mono--educator { background: var(--educator-tint); color: var(--educator-ink); }
.saf-md__mono--all { background: var(--florist-tint); color: var(--florist-ink); }

.saf-md__card-body { min-width: 0; }

.saf-md__card-name {
  margin: 0;
  font: 700 17px/24px var(--font-sans);
  color: var(--ink);
}
.saf-md__card-name a {
  color: inherit;
  text-decoration: none;
}
.saf-md__card-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.saf-md__card-loc {
  margin: 2px 0 0;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink-muted);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.saf-md__card-loc svg {
  flex: none;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saf-md__card-mem {
  margin: 4px 0 0;
  font: 500 12.5px/18px var(--font-sans);
  color: var(--ink-muted);
}

.saf-md__card-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
  margin: 0.15rem 0 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--text-muted, #6b7280);
}
.saf-md__card-rating .saf-md__stars {
  font-size: 0.85em;
  letter-spacing: 0.02em;
}
.saf-md__card-rating-avg {
  font-weight: 600;
  color: var(--ink, #1f2937);
}
.saf-md__card-rating-count {
  color: var(--text-muted, #6b7280);
}


.saf-md__card-tags {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.saf-md__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-sans);
  white-space: nowrap;
}
.saf-md__badge--florist { background: var(--florist-tint); color: var(--florist-ink); }
.saf-md__badge--grower { background: var(--grower-tint); color: var(--grower-ink); }
.saf-md__badge--wholesaler { background: var(--wholesaler-tint); color: var(--wholesaler-ink); }
.saf-md__badge--supplier { background: var(--supplier-tint); color: var(--supplier-ink); }
.saf-md__badge--educator { background: var(--educator-tint); color: var(--educator-ink); }
.saf-md__badge--all { background: var(--florist-tint); color: var(--florist-ink); }
.saf-md__badge--association {
  background: #eef4fb;
  color: #1b4f8a;
  border: 1px solid #c5d8ef;
}

/* 0.4.86: membership level/tier badges (Premium star) never shown on public UI. */
.saf-md__premium {
  display: none !important;
}
.saf-md__premium svg {
  display: none !important;
}

.saf-md__card-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.saf-md__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--action-blue);
  font: 600 13px/1 var(--font-sans);
  text-decoration: none;
}
.saf-md__link:hover { background: var(--wholesaler-tint); }
.saf-md__link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* —— Map —— */
.saf-md__map-col {
  position: relative; /* containing block for in-column drawer overlay */
  min-width: 0;
  overflow: visible;
  align-self: stretch;
}

@media (min-width: 1025px) {
  .saf-md__map-col {
    position: sticky; /* sticky still establishes containing block for absolute drawer */
    top: var(--saf-md-sticky-top, 16px);
    height: calc(100vh - var(--saf-md-sticky-top, 16px) - 16px);
    max-height: none;
  }
}

.saf-md__map,
#saf-md-map {
  height: 560px;
  min-height: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #eef2f5;
  width: 100%;
}

@media (min-width: 1025px) {
  .saf-md__map,
  #saf-md-map {
    height: 100%;
    min-height: 480px;
    max-height: none;
    position: static;
  }
}
/* Dim markers/overlays only — never the basemap tile pane (was greying tiles ~8s during search). */
.saf-md__map.is-dimmed {
  pointer-events: none;
}
.saf-md__map.is-dimmed .leaflet-marker-pane,
.saf-md__map.is-dimmed .leaflet-shadow-pane,
.saf-md__map.is-dimmed .leaflet-overlay-pane,
.saf-md__map.is-dimmed .leaflet-tooltip-pane,
.saf-md__map.is-dimmed .leaflet-popup-pane {
  opacity: 0.35;
}

/* Zoom controls: always visible, bottom-left — clear of bottom-right chat (Aster) */
.saf-md__map .leaflet-control-zoom {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 8px rgba(8, 36, 72, 0.12);
  overflow: hidden;
  margin-bottom: 16px !important;
  margin-left: 12px !important;
}
.saf-md__map .leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px !important;
  color: var(--ink) !important;
  background: var(--surface-raised) !important;
}
.saf-md__map .leaflet-control-zoom a:hover {
  background: var(--surface-sunken) !important;
  color: var(--action-blue) !important;
}
.saf-md__map .leaflet-bottom.leaflet-right {
  /* Keep any residual bottom-right controls above chat widgets */
  margin-bottom: 72px;
}
.saf-md__map .gm-bundled-control,
.saf-md__map .gmnoprint > .gmnoprint {
  margin-bottom: 8px !important;
}

/* 0.5.6: OpenStreetMap fallback notice (Google Maps blocked by cookie consent).
   Sits at the top of the map; zoom (bottom-left) and attribution (bottom-right) stay clear. */
.saf-md__map-notice {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100; /* above Leaflet panes/controls (≤ 1000) */
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 24px);
  min-width: min(260px, calc(100% - 24px));
  box-sizing: border-box;
  margin: 0;
  padding: 8px 6px 8px 12px;
  background: var(--surface-raised, #fff);
  color: var(--ink, #082448);
  border: 1px solid var(--border, #DCE4EC);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 2px 8px rgba(8, 36, 72, 0.12);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
}
.saf-md__map-notice[hidden] { display: none !important; }
.saf-md.is-drawer-open .saf-md__map-notice { display: none; }
.saf-md__map-notice-text {
  margin: 0;
  padding: 2px 0;
  color: inherit;
  font: inherit;
}
/* Theme button styles (Divi / block themes) must not leak in: reset with !important. */
.saf-md .saf-md__map-notice-link {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--action-blue, #2468AD) !important;
  font: inherit !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  line-height: inherit !important;
  cursor: pointer;
  white-space: nowrap;
}
.saf-md .saf-md__map-notice-link:hover { color: var(--action-blue-hover, #1b5590) !important; }
.saf-md .saf-md__map-notice-close {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -4px 0 -4px 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink, #082448) !important;
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: none !important;
  cursor: pointer;
}
.saf-md .saf-md__map-notice-close:hover { background: var(--surface-sunken, #F4F7FA) !important; }
.saf-md .saf-md__map-notice-link:focus-visible,
.saf-md .saf-md__map-notice-close:focus-visible {
  outline: 2px solid var(--focus-ring, #2468AD) !important;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .saf-md__map-notice {
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
    max-width: none;
    font-size: 12.5px;
  }
}

/* Custom pins */
.saf-md__pin {
  background: transparent !important;
  border: none !important;
}
.saf-md__pin-inner {
  width: 28px;
  height: 36px;
  display: block;
}
.saf-md__pin-inner svg { display: block; width: 28px; height: 36px; }
.saf-md__pin-inner .pin-fill { fill: var(--action-blue); }
.saf-md__pin-inner .pin-dot { fill: #fff; }
.saf-md__pin.is-selected .pin-fill,
.saf-md__pin.is-hover .pin-fill { fill: var(--leaf); }
.saf-md__pin.is-selected .pin-stroke { stroke: var(--ink); stroke-width: 1.5; }
/* Neighborhood (hidden-street) pins: slightly softer so they read as approximate. */
.saf-md__pin.is-approx:not(.is-selected):not(.is-hover) .pin-fill { fill: #5a8f82; }
.saf-md__pin.is-approx:not(.is-selected):not(.is-hover) { opacity: 0.88; }

.saf-md .marker-cluster-small,
.saf-md .marker-cluster-medium,
.saf-md .marker-cluster-large {
  background-color: rgba(120, 190, 50, 0.28) !important;
}
.saf-md .marker-cluster-small div,
.saf-md .marker-cluster-medium div,
.saf-md .marker-cluster-large div {
  background-color: var(--leaf) !important;
  color: var(--on-leaf) !important;
  font-family: var(--font-sans);
  font-weight: 700;
}

/* —— Drawer (lives inside .saf-md__map-col; overlays map column only on desktop) —— */
.saf-md__drawer[hidden] { display: none !important; }

.saf-md__drawer {
  /* Desktop default: absolute within map-col (see min-width 1025 below). */
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.saf-md__drawer-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.saf-md__drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 72%);
  height: auto;
  max-height: 100%;
  background: var(--surface-raised);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
}

@media (min-width: 1025px) {
  .saf-md__drawer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    width: auto;
    max-width: none;
  }
  /* Map-col is already below the admin bar — pad inside panel instead of shifting top. */
  body.admin-bar .saf-md__drawer-panel {
    top: 0;
    height: auto;
    max-height: 100%;
    padding-top: 8px;
  }
}

@media (max-width: 1024px) {
  /* Map-col is display:none in list view; promote it to a viewport shell when drawer opens
     so the in-column drawer can still show as a bottom sheet. */
  .saf-md.is-drawer-open .saf-md__map-col {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 100000;
    height: 100%;
    width: 100%;
    max-height: none;
    top: 0;
  }
  .saf-md.is-drawer-open #saf-md-map,
  .saf-md.is-drawer-open .saf-md__map {
    visibility: hidden;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    border: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .saf-md__drawer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
  }
  .saf-md__drawer:not([hidden]) {
    pointer-events: auto;
  }
  .saf-md__drawer-backdrop {
    background: var(--scrim);
    pointer-events: auto;
  }
  .saf-md__drawer-panel {
    width: 100%;
    border-left: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    top: auto;
    bottom: 0;
    height: min(92vh, 100%);
    max-height: min(92vh, 100%);
  }
  body.admin-bar .saf-md__drawer-panel {
    top: auto;
    bottom: 0;
    height: min(92vh, calc(100% - 46px));
    max-height: min(92vh, calc(100% - 46px));
    padding-top: 0;
  }
}

.saf-md__drawer-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.saf-md__drawer-close:hover {
  border-color: var(--action-blue);
  color: var(--action-blue);
}

.saf-md__drawer-body {
  overflow-y: auto;
  flex: 1;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.saf-md__drawer-head {
  padding: var(--space-6);
  padding-top: calc(var(--space-6) + 8px);
  padding-right: 56px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  align-items: start;
  border-bottom: 1px solid var(--border);
}
.saf-md__drawer-head .saf-md__logo,
.saf-md__drawer-head .saf-md__mono {
  width: 72px;
  height: 72px;
}
.saf-md__drawer-head .saf-md__mono { font-size: 24px; }

.saf-md__drawer-logo {
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
}

.saf-md__drawer-title {
  margin: 0;
  font: 700 22px/28px var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.saf-md__drawer-loc {
  margin: 4px 0 8px;
  color: var(--ink-muted);
  font: 500 14px/20px var(--font-sans);
}

.saf-md__drawer-cta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.saf-md__drawer-cta .saf-md__btn {
  height: 56px;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  padding: 0 8px;
}
.saf-md__drawer-cta .saf-md__btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.saf-md__drawer-cta--sparse {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.saf-md__drawer-details {
  padding: var(--space-2) var(--space-6) var(--space-6);
}

.saf-md__dl { margin: 0; }
.saf-md__dl > div {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.saf-md__dl > div:last-child { border-bottom: 0; }
.saf-md__dl dt {
  font: 700 12px/16px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.saf-md__dl dd {
  margin: 0;
  font: 400 15px/22px var(--font-sans);
  color: var(--ink);
}
.saf-md__dl dd a {
  color: var(--action-blue);
  font-weight: 600;
  text-decoration: none;
}
.saf-md__dl dd a:hover { text-decoration: underline; }
.saf-md__dl .saf-md__dl-ico {
  color: var(--ink-muted);
  margin-top: 1px;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.saf-md__drawer-address { white-space: pre-line; margin: 0; }
.saf-md__drawer-social {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.saf-md__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
}
.saf-md__social:hover {
  border-color: var(--action-blue);
  color: var(--action-blue);
}
.saf-md__social svg { width: 16px; height: 16px; display: block; }

/* —— Empty / error / skeleton —— */
.saf-md__empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.saf-md__empty-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--florist-tint);
  color: var(--florist-ink);
}
.saf-md__empty h3 {
  margin: var(--space-4) 0 var(--space-2);
  font: 700 20px/26px var(--font-sans);
  color: var(--ink);
}
.saf-md__empty p {
  margin: 0 auto var(--space-6);
  max-width: 380px;
  color: var(--ink-muted);
  font: 400 15px/22px var(--font-sans);
}
.saf-md__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

.saf-md__error-panel {
  padding: 1.5rem 1rem;
  text-align: center;
  color: #9b1c1c;
  background: #fde8e8;
  border: 1px solid #f5c2c2;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.saf-md__error-panel p { margin: 0; }
.saf-md__error {
  color: #9b1c1c;
  background: #fde8e8;
  border: 1px solid #f5c2c2;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}

.saf-md__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.saf-md__skeleton-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  min-height: 96px;
  position: relative;
  overflow: hidden;
}
.saf-md__skeleton-card::before {
  content: "";
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.saf-md__skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(36, 104, 173, 0.14), transparent);
  animation: saf-md-shimmer 1.15s ease-in-out infinite;
}
@keyframes saf-md-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.saf-md .leaflet-popup-content-wrapper {
  border-radius: 10px;
  font-family: var(--font-sans);
}
.saf-md .leaflet-container a { color: var(--action-blue); }

/* —— Responsive —— */
@media (min-width: 1025px) {
  .saf-md__view-toggle { display: none !important; }
}

@media (max-width: 1024px) {
  .saf-md__layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .saf-md__view-toggle { display: inline-flex; }
  .saf-md__map-col { display: none; }
  .saf-md__map, #saf-md-map {
    position: static;
    min-height: 55vh;
    height: 55vh;
    max-height: 420px;
  }
  .saf-md[data-view="map"] .saf-md__results-col { display: none; }
  .saf-md[data-view="map"] .saf-md__map-col { display: block; }
  .saf-md[data-view="list"] .saf-md__map-col { display: none; }
  .saf-md[data-view="list"] .saf-md__results-col { display: block; }
  /* Drawer sheet styles live with drawer rules; is-drawer-open forces map-col visible. */
}

@media (max-width: 720px) {
  .saf-md__hero {
    padding: var(--space-8) var(--space-4) 28px;
  }
  .saf-md__hero-title { font-size: 28px; line-height: 34px; }
  .saf-md__hero-lead { font-size: 15px; line-height: 1.5; max-width: none; }
  .saf-md__hero { height: auto; min-height: 0; } /* 0.6.10: let hero grow with longer intro */
  .saf-md__search-wrap {
    margin-top: var(--space-4);
    max-width: none;
  }
  .saf-md__associations {
    padding: 0 var(--space-4);
  }
  .saf-md__segments {
    padding: var(--space-3) var(--space-4) 2px;
  }
  .saf-md__search {
    grid-template-columns: 1fr 1fr;
  }
  .saf-md__search > .saf-md__field--q,
  .saf-md__search .saf-md__btn {
    grid-column: 1 / -1;
  }
  .saf-md__results-area {
    padding: var(--space-4) var(--space-4) var(--space-8);
  }
  .saf-md__card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-3);
  }
  .saf-md__card-logo-wrap,
  .saf-md__logo,
  .saf-md__card-mono,
  .saf-md__mono {
    width: 56px;
    height: 56px;
    font-size: 18px;
  }
}


/* Full-width layout: break out of theme content column.
   Stretch via equal negative margins with width:auto (not width:100vw).
   Half-span uses --saf-md-cvw (layout viewport = documentElement.clientWidth,
   set by directory.js) so the used width equals the layout viewport — not
   100vw, which includes the classic scrollbar gutter and causes a horizontal
   page scrollbar. Falls back to 100vw before JS runs. Overflow-x stays
   visible so the hero is true edge-to-edge; list/map containment stays on
   .saf-md__results-area (map sticky preserved). */
.saf-md.saf-md--full-width {
  width: auto;
  max-width: none;
  margin-left: calc(50% - var(--saf-md-cvw, 100vw) / 2);
  margin-right: calc(50% - var(--saf-md-cvw, 100vw) / 2);
  box-sizing: border-box;
  overflow-x: visible;
}

.saf-md.saf-md--full-width .saf-md__results-area {
  overflow-x: clip; /* list/map only — do not clip the hero */
}

/* Design v2: fixed readable list column; map fills remaining width + viewport height */
@media (min-width: 1025px) {
  .saf-md.saf-md--full-width .saf-md__layout {
    grid-template-columns: minmax(480px, 560px) minmax(0, 1fr);
    gap: var(--space-6);
  }
  .saf-md.saf-md--full-width .saf-md__map,
  .saf-md.saf-md--full-width #saf-md-map {
    height: calc(100vh - var(--saf-md-sticky-top, 16px) - 16px);
    min-height: 480px;
    max-height: none;
  }

  /* Full-width hero: shorter band so results clear the fold on ~800–900px laptops (0.4.90 / 0.4.79 intent). */
  .saf-md.saf-md--full-width .saf-md__hero {
    min-height: clamp(200px, 16vw, 240px);
    padding-top: clamp(20px, 1.8vw, 28px);
    padding-bottom: clamp(12px, 1.4vw, 16px); /* room for elevated search card + shadow */
    box-sizing: border-box;
  }
  .saf-md.saf-md--full-width .saf-md__hero-title {
    font-size: clamp(26px, 2.2vw, 32px);
    line-height: 1.15;
  }
  .saf-md.saf-md--full-width .saf-md__hero-lead {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
  }
  .saf-md.saf-md--full-width .saf-md__hero-bg-layer {
    background-position: center 45%; /* slightly lower so heads clear the top edge */
  }
  .saf-md.saf-md--full-width .saf-md__hero-shade {
    /* Stronger left blue fade so headline/search don’t sit on faces (review ask) */
    background: linear-gradient(
      96deg,
      rgba(8, 36, 72, 0.90) 0%,
      rgba(8, 36, 72, 0.72) 18%,
      rgba(8, 36, 72, 0.40) 38%,
      rgba(8, 36, 72, 0.14) 62%,
      rgba(8, 36, 72, 0.04) 100%
    );
  }
  .saf-md.saf-md--full-width .saf-md__hero-inner {
    max-width: 720px;
  }
  .saf-md.saf-md--full-width .saf-md__search-wrap {
    margin-top: 10px; /* no negative sit-on-hero; tightened so results clear laptop fold */
    max-width: 960px;
  }
}


/* Divi top-nav submenu spill (staging: scrollWidth ~1302 vs clientWidth ~1265).
   Header-scoped overflow-x:clip on directory pages only (body.saf-md-page) so
   .saf-md--full-width hero breakout is not clipped by #page-container.
   overflow-x:clip (not hidden) keeps overflow-y visible so dropdowns can open
   downward; right-edge items whose .sub-menu extends past the viewport may be
   horizontally clipped — residual risk vs document scrollbar. */
body.saf-md-page #main-header,
body.saf-md-page .et-l--header,
body.saf-md-page #et-top-navigation {
  overflow-x: clip;
}

/* —— Drawer print control —— */
.saf-md__drawer-print {
  margin-top: var(--space-4);
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.saf-md__drawer-print svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.saf-md__drawer-print-row {
  padding: 0 var(--space-6) var(--space-6);
}

/* —— Drawer Reviews (admin show_reviews; placeholder until Place ID) —— */
.saf-md__reviews {
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--border, var(--saf-md-border, #DCE4EC));
  margin-top: var(--space-2, 8px);
}
.saf-md__reviews-title {
  margin: var(--space-5, 20px) 0 var(--space-3, 12px);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, var(--saf-md-ink, #082448));
  letter-spacing: 0.01em;
}
.saf-md__reviews-placeholder-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-sunken, var(--saf-md-bg, #F4F7FA));
  border: 1px dashed var(--border, var(--saf-md-border, #DCE4EC));
}
.saf-md__reviews-placeholder {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted, var(--saf-md-muted, #5a6f68));
}
.saf-md__reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: var(--space-3, 12px);
}
.saf-md__reviews-avg {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink, var(--saf-md-ink, #082448));
}
.saf-md__reviews-count {
  font-size: 0.875rem;
  color: var(--ink-muted, var(--saf-md-muted, #5a6f68));
}
.saf-md__stars {
  display: inline-flex;
  gap: 2px;
  line-height: 1;
}
.saf-md__star {
  font-size: 18px;
  color: var(--border, var(--saf-md-border, #DCE4EC));
}
.saf-md__star.is-filled {
  color: #e6a817;
}
.saf-md__reviews-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.saf-md__review-snip {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-sunken, var(--saf-md-bg, #F4F7FA));
  border: 1px solid var(--border, var(--saf-md-border, #DCE4EC));
}
.saf-md__review-text {
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink, var(--saf-md-ink, #082448));
}
.saf-md__review-meta {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--ink-muted, var(--saf-md-muted, #5a6f68));
}
.saf-md__reviews-google {
  margin: var(--space-3, 12px) 0 0;
}
.saf-md__google-profile {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand, var(--saf-md-brand, #0B5CAB));
  text-decoration: none;
}
.saf-md__google-profile:hover,
.saf-md__google-profile:focus {
  text-decoration: underline;
}

/* —— Print: clean one-pager for open member profile —— */

/* —— About the directory (0.4.88): answer + fact tiles, FAQ, update strip ——
   Ported from the 2026-10-05 About mockup; mockup vars mapped to directory tokens:
   --font → --font-sans, --muted → --ink-muted, --sunken → --surface-sunken,
   --action → --action-blue, f1–f4 → florist / grower / wholesaler / supplier tint+ink. */
.saf-md .saf-md__about {
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--border);
  padding: 56px var(--space-12, 48px) 64px;
  scroll-margin-top: 96px;
  text-align: left;
}

.saf-md .saf-md__about-wrap {
  max-width: 1440px;
  margin: 0 auto;
}

.saf-md .saf-md__about-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.saf-md .saf-md__about-top--no-facts {
  grid-template-columns: minmax(0, 1fr);
}

.saf-md .saf-md__kicker {
  margin: 0 0 10px;
  padding: 0;
  font: 700 12px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--florist-ink);
  display: flex;
  gap: 8px;
  align-items: center;
}
.saf-md .saf-md__kicker i {
  display: inline-block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--saf-green);
  flex: none;
}

.saf-md .saf-md__about h2 {
  margin: 0 0 14px;
  padding: 0;
  font: 800 28px/34px var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: none;
}

.saf-md .saf-md__answer {
  margin: 0;
  padding: 0;
  max-width: 62ch;
  font: 400 17px/28px var(--font-sans);
  color: var(--ink);
}
.saf-md .saf-md__answer + .saf-md__answer {
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 26px;
}

.saf-md .saf-md__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.saf-md .saf-md__fact {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--surface-sunken);
  color: var(--ink);
}
.saf-md .saf-md__fact strong {
  display: block;
  font: 800 32px/36px var(--font-sans);
  letter-spacing: -0.02em;
  color: inherit;
}
.saf-md .saf-md__fact span {
  display: block;
  margin-top: 4px;
  font: 600 14px/20px var(--font-sans);
  color: inherit;
}
.saf-md .saf-md__fact--f1 { background: var(--florist-tint); color: var(--florist-ink); }
.saf-md .saf-md__fact--f2 { background: var(--grower-tint); color: var(--grower-ink); }
.saf-md .saf-md__fact--f3 { background: var(--wholesaler-tint); color: var(--wholesaler-ink); }
.saf-md .saf-md__fact--f4 { background: var(--supplier-tint); color: var(--supplier-ink); }
.saf-md .saf-md__fact--total {
  grid-column: 1 / -1;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.saf-md .saf-md__fact--total strong {
  font-size: 40px;
  line-height: 44px;
}
.saf-md .saf-md__fact--total span {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.saf-md .saf-md__faq-block {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.saf-md .saf-md__faq-block h2 {
  font-size: 24px;
  line-height: 30px;
}
.saf-md .saf-md__faq-side p {
  margin: 0;
  padding: 0;
  color: var(--ink-muted);
  font: 400 15px/24px var(--font-sans);
}

.saf-md .saf-md__faq-item {
  border-bottom: 1px solid var(--border);
  margin: 0;
  padding: 0;
}
.saf-md .saf-md__faq-item:first-child {
  border-top: 1px solid var(--border);
}
.saf-md .saf-md__faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  color: var(--ink);
}
.saf-md .saf-md__faq-q::-webkit-details-marker { display: none; }
.saf-md .saf-md__faq-q::marker { content: ""; }
.saf-md .saf-md__faq-q h3 {
  margin: 0;
  padding: 0;
  font: 700 17px/24px var(--font-sans);
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.saf-md .saf-md__faq-ico {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-muted);
  transition: transform 0.15s;
}
.saf-md .saf-md__faq-item[open] .saf-md__faq-ico {
  transform: rotate(180deg);
}
.saf-md .saf-md__faq-q:focus-visible {
  outline: 2px solid var(--action-blue);
  outline-offset: 2px;
  border-radius: 6px;
}
.saf-md .saf-md__faq-a {
  margin: 0;
  padding: 0 4px 20px; /* ~20px under open FAQ answers */
  max-width: 68ch;
  font: 400 16px/26px var(--font-sans);
  color: var(--ink);
}
.saf-md .saf-md__faq-item[open] .saf-md__faq-a {
  margin-bottom: 0;
  padding-bottom: 20px;
}

.saf-md .saf-md__about a {
  color: var(--action-blue);
  font-weight: 600;
}
.saf-md .saf-md__about a:hover {
  color: var(--action-blue-hover);
}
.saf-md .saf-md__about a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.saf-md .saf-md__about-update {
  margin-top: 48px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}
.saf-md .saf-md__about-update h3 {
  margin: 0 0 4px;
  padding: 0;
  font: 700 18px/24px var(--font-sans);
  color: var(--ink);
}
.saf-md .saf-md__about-update p {
  margin: 0;
  padding: 0;
  color: var(--ink-muted);
  font: 400 15px/22px var(--font-sans);
  max-width: 60ch;
}
.saf-md .saf-md__about a.saf-md__about-update-cta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border-strong);
  text-decoration: none;
  white-space: nowrap;
  font: 600 15px/1 var(--font-sans);
}
.saf-md .saf-md__about a.saf-md__about-update-cta:hover {
  border-color: var(--action-blue);
}
.saf-md .saf-md__about-update-cta svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Toolbar jump link to #about-directory (sits beside Copy link) */
.saf-md .saf-md__about-link {
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  text-decoration: none;
}
.saf-md .saf-md__about-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .saf-md .saf-md__faq-ico { transition: none; }
}

@media (max-width: 900px) {
  .saf-md .saf-md__about {
    padding: 36px var(--space-4, 16px) 44px;
  }
  .saf-md .saf-md__about-top,
  .saf-md .saf-md__faq-block {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .saf-md .saf-md__faq-block {
    margin-top: 36px;
  }
  .saf-md .saf-md__about h2 {
    font-size: 24px;
    line-height: 30px;
  }
  .saf-md .saf-md__about-update {
    margin-top: 36px;
  }
}

@media (max-width: 480px) {
  .saf-md .saf-md__fact {
    padding: 14px 16px;
  }
  .saf-md .saf-md__fact strong {
    font-size: 26px;
    line-height: 30px;
  }
  .saf-md .saf-md__fact--total strong {
    font-size: 32px;
    line-height: 36px;
  }
  .saf-md .saf-md__about a.saf-md__about-update-cta {
    white-space: normal;
  }
}

@media print {
  body * {
    visibility: hidden !important;
  }
  body.admin-bar #wpadminbar {
    display: none !important;
  }
  .saf-md,
  .saf-md__drawer,
  .saf-md__drawer-panel,
  .saf-md__drawer-body,
  .saf-md__drawer-body * {
    visibility: visible !important;
  }
  .saf-md__hero,
  .saf-md__search-wrap,
  .saf-md__results-area,
  .saf-md__drawer-backdrop,
  .saf-md__drawer-close,
  .saf-md__drawer-print-row,
  .saf-md__drawer-cta,
  .saf-md__drawer-social,
  .saf-md__reviews,
  .saf-md__map,
  #saf-md-map,
  .saf-md__copy-link,
  .saf-md__about-link,
  .saf-md__about {
    display: none !important;
    visibility: hidden !important;
  }
  /* Drawer is a child of map-col — keep the column as a print shell */
  .saf-md__map-col {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    inset: auto !important;
    height: auto !important;
    width: 100% !important;
    max-height: none !important;
  }
  .saf-md__drawer {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: auto !important;
  }
  .saf-md__drawer[hidden] {
    display: block !important;
  }
  .saf-md__drawer-panel {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    top: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
  }
  .saf-md__drawer-body {
    overflow: visible !important;
    padding: 0 !important;
  }
  .saf-md__drawer-head {
    padding-right: var(--space-6);
    border-bottom: 1px solid #ccc;
  }
  .saf-md__drawer-details {
    padding: var(--space-4) var(--space-6);
  }
  a[href]::after {
    content: none !important;
  }
}


/* —— SEO / one-H1: hide theme page title on directory pages (hero H1 stays).
   Avoid bare .page-title so the site AJAX login modal label is not forced hidden. —— */
body.saf-md-page .entry-title,
body.saf-md-page article .page-title,
body.saf-md-page .entry-content > .page-title,
body.saf-md-page #left-area > .page-title,
body.saf-md-page #main-content .container > .page-title,
body.saf-md-page .wp-block-post-title,
body.saf-md-page h1.entry-title,
body.saf-md-page h1.main_title,
body.saf-md-page .main_title,
body.saf-md-page #left-area .entry-title,
body.saf-md-page #left-area > article > .entry-title,
body.saf-md-page #left-area > article > header .entry-title,
body.saf-md-page .et_pb_title_container,
body.saf-md-page .et_pb_title,
body.saf-md-page .ast-page-title-wrapper,
body.saf-md-page .page-header,
body.saf-md-page .page-header .page-title,
body.saf-md-page .entry-header,
body.saf-md-page .fusion-page-title-row,
body.saf-md-page .title-area,
body.saf-md-page .title-area .entry-title {
  display: none !important;
}

/* Protect directory hero H1 from over-broad theme title rules. */
body.saf-md-page .saf-md__hero-title,
body.saf-md-page #saf-md-root .saf-md__hero-title,
body.saf-md-page #left-area .saf-md__hero-title {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  clip: auto !important;
  position: static !important;
}

/*
 * Site AJAX login modal: after JS demotes h1.page-title → div.page-title,
 * keep the same visual weight. Do not hide — modal UX needs the label.
 */
body.saf-md-page form#login div.page-title,
body.saf-md-page #login div.page-title {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 0 0.5em;
  font: inherit;
}

/* ==========================================================================
   0.5.0/0.5.1 — Individual member listing pages (.saf-mdl, scoped under .saf-md tokens)
   ========================================================================== */

.saf-md__link--listing { white-space: nowrap; }
.saf-md__drawer-listing {
  margin: var(--space-3) 0 0;
}

.saf-md.saf-mdl {
  display: block;
  max-width: 880px;
  margin: var(--space-6) auto var(--space-12);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.saf-mdl :where(a:not(.saf-md__btn)) {
  color: var(--action-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.saf-mdl :where(a:not(.saf-md__btn)):hover { color: var(--action-blue-hover); }
.saf-mdl :where(a, .saf-md__btn):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.saf-mdl__crumbs { margin: 0 0 var(--space-4); font-size: 14px; color: var(--ink-muted); }
.saf-mdl__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.saf-mdl__crumbs li { margin: 0; padding: 0; }
.saf-mdl__crumbs li + li::before {
  content: "\203A";
  margin: 0 var(--space-2);
  color: var(--border-strong);
}
.saf-mdl__crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

.saf-mdl__head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
.saf-mdl__logo {
  flex: none;
  width: 96px;
  height: 96px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.saf-mdl__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.saf-mdl__head-text { min-width: 0; }
.saf-mdl__type { margin: 0 0 var(--space-2); padding: 0; }
.saf-md .saf-mdl__title {
  margin: 0 0 var(--space-1);
  padding: 0;
  font: 700 clamp(26px, 4vw, 34px)/1.15 var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.saf-mdl__loc { margin: 0; padding: 0; font-size: 17px; color: var(--ink-muted); }
.saf-mdl__since { margin: var(--space-1) 0 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--florist-ink); }

.saf-mdl__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-6);
}

.saf-mdl__section { margin: 0 0 var(--space-6); padding: 0; }
.saf-md .saf-mdl__h2 {
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  font: 700 19px/1.3 var(--font-sans);
  color: var(--ink);
}
.saf-mdl__dl { margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.saf-mdl__dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-3);
}
.saf-mdl__dl dt { margin: 0; font-weight: 600; color: var(--ink-muted); }
.saf-mdl__dl dd { margin: 0; padding: 0; }
.saf-mdl__dl address { font-style: normal; margin: 0; }
.saf-mdl__desc { margin: 0; padding: 0; white-space: pre-line; }

.saf-mdl__tags,
.saf-mdl__nearby { margin: 0; padding: 0; list-style: none; }
.saf-mdl__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.saf-mdl__tags li {
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-size: 14px;
}
.saf-mdl__nearby { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2) var(--space-4); }
.saf-mdl__nearby li { margin: 0; padding: 0; }

.saf-mdl__back { margin: var(--space-6) 0 var(--space-3); padding: 0; }
.saf-mdl__update {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--saf-md-banner);
  font-size: 14px;
  color: var(--ink);
}
.saf-mdl__gone { padding: var(--space-6) 0; }
.saf-mdl__gone p { margin: 0 0 var(--space-3); }

/* 0.5.1: listing rendered inside the routed directory page (Divi text module / entry-content).
   Beat theme list / paragraph / heading rules such as `.et_pb_text ul` and `.entry-content ul`. */
.saf-mdl-wrap { width: 100%; max-width: 880px; margin: 0 auto; box-sizing: border-box; }
.saf-mdl-wrap .saf-md.saf-mdl { max-width: none; }
.saf-md.saf-mdl ul,
.saf-md.saf-mdl ol { list-style: none; margin: 0; padding: 0; }
.saf-md.saf-mdl .saf-mdl__crumbs li,
.saf-md.saf-mdl .saf-mdl__nearby li { margin: 0; padding: 0; }
.saf-md.saf-mdl .saf-mdl__tags li { margin: 0; padding: 4px 12px; }
.saf-md.saf-mdl p { padding-bottom: 0; }
.saf-md.saf-mdl .saf-mdl__crumbs ol { display: flex; flex-wrap: wrap; }
.saf-md.saf-mdl ul.saf-mdl__nearby { display: grid; }
.saf-md.saf-mdl h1.saf-mdl__title { padding-bottom: 0; }
.saf-md.saf-mdl dl, .saf-md.saf-mdl dd { margin-left: 0; padding: 0; }
body.saf-md-listing-routed .et_pb_section:has(.saf-mdl-wrap) { padding-top: 0; }

/* Divi / classic themes: no sidebar divider, comfortable top spacing. */
body.saf-md-listing-page #main-content .container::before { display: none; }
body.saf-md-listing-page #main-content .container { padding-top: 0; }
body.saf-md-listing-page #left-area { width: 100%; padding: 0; float: none; }

@media (max-width: 720px) {
  .saf-md.saf-mdl {
    margin: var(--space-4) 0 var(--space-8);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
  }
  .saf-mdl__head { flex-direction: column; }
  .saf-mdl__logo { width: 72px; height: 72px; }
  .saf-mdl__actions .saf-md__btn { flex: 1 1 auto; }
  .saf-mdl__dl > div { grid-template-columns: 1fr; gap: 2px; }
}

@media print {
  .saf-mdl__actions, .saf-mdl__back { display: none; }
  .saf-md.saf-mdl { border: 0; padding: 0; }
}

/* 0.5.2: "Also: Springfield, IL" — other states with members in a typed city. */
.saf-md__status .saf-md__place-alt {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--saf-md-accent, #2468AD);
  text-decoration: underline;
  cursor: pointer;
}
.saf-md__status .saf-md__place-alt:hover,
.saf-md__status .saf-md__place-alt:focus-visible { text-decoration-thickness: 2px; }

/* 0.6.6: coverage copy + browse-by-state (server-rendered, crawlable). Inherit .saf-md__about. */
.saf-md .saf-md__coverage-wrap,.saf-md .saf-md__browse{padding-top:40px;padding-bottom:40px}
.saf-md .saf-md__member-types{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:8px}
.saf-md .saf-md__member-types li{margin:0;padding:0;line-height:1.55;color:var(--ink)}
.saf-md .saf-md__coverage,.saf-md .saf-md__trust,.saf-md .saf-md__direct{margin:0 0 12px;line-height:1.6;max-width:72ch;color:var(--ink)}
.saf-md .saf-md__coverage-wrap a,.saf-md .saf-md__browse a{color:var(--action-blue,#0068b0)}
.saf-md .saf-md__browse-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 16px}
.saf-md .saf-md__browse-list li{margin:0;padding:0}

/* 0.6.10: links inside the hero intro stay legible on the dark image */
.saf-md__hero-lead a, .saf-md__gate-lead a { color: inherit; text-decoration: underline; }