/* ============================================================
 * Store Locator — CSS Custom Property vocabulary (v1.2.x)
 *
 * These tokens are the public theming contract for the Store Locator.
 * Any page-builder integration (Gutenberg block, future Elementor
 * widget, Divi module, etc.) overrides these tokens via the same
 * container data-tokens JSON contract documented in
 * docs/STORE_LOCATOR_BUILDER_CONTRACT.md. Renaming a token is a
 * breaking change — bump the plugin version and add a CHANGELOG
 * migration note.
 *
 * Groups (declaration order below mirrors this list):
 *   1.  Layout              (sizing, spacing, radii)
 *   2.  Typography          (system fonts only — no Google Fonts)
 *   3.  Colors — Background
 *   4.  Colors — Text
 *   5.  Colors — Brand      (accent + hover + contrast-text + subtle-bg)
 *   6.  Colors — Border & Divider
 *   7.  Colors — Feedback   (danger, success, warning)
 *   8.  Card                (logo size, border, shadow, hover shadow)
 *   9.  Search              (input + button dimensions, border)
 *   10. Badge               (retailer_type badge chrome)
 *   11. Map marker          (default color, size)
 *   12. Shadows & Elevation
 *   13. U1 legacy chrome    (suggest listbox, skip link — internal)
 *
 * The scoping on `.rmfw-store-locator` means these tokens don't leak
 * into the surrounding theme. The React admin app overrides these
 * with Tailwind classes once mounted.
 * ============================================================ */

.rmfw-store-locator {
  /* 1. Layout */
  --rmfw-sl-height: 600px;
  --rmfw-sl-sidebar-width: 360px;
  --rmfw-sl-border-radius: 8px;
  --rmfw-sl-card-radius: 8px;
  --rmfw-sl-input-radius: 6px;
  --rmfw-sl-btn-radius: 6px;
  --rmfw-sl-gap: 0px;
  --rmfw-sl-padding: 16px;
  --rmfw-sl-overlay-sidebar-width: 380px;
  --rmfw-sl-overlay-shell-pad: 16px;
  --rmfw-sl-rail-width: minmax(360px, 40%);

  /* 2. Typography — system fonts only; no Google Fonts in v1 customizer. */
  --rmfw-sl-font-family: inherit;
  --rmfw-sl-font-size-base: 14px;
  --rmfw-sl-font-size-sm: 12px;
  --rmfw-sl-font-size-lg: 16px;
  --rmfw-sl-font-weight-bold: 600;
  --rmfw-sl-line-height: 1.5;

  /* 3. Colors — Background */
  --rmfw-sl-bg: #ffffff;
  --rmfw-sl-sidebar-bg: #ffffff;
  --rmfw-sl-map-bg: #f3f4f6; /* T1.1: was #eef2f7 */
  --rmfw-sl-card-bg: #ffffff;
  --rmfw-sl-card-bg-hover: #f9fafb; /* T1.1: renamed from --rmfw-sl-card-hover-bg */
  --rmfw-sl-card-bg-active: #eff6ff;
  --rmfw-sl-input-bg: #f9fafb; /* T1.1: was #ffffff */
  --rmfw-sl-search-bg: #ffffff;

  /* 4. Colors — Text */
  --rmfw-sl-text: #111827; /* T1.1: was #151619 */
  --rmfw-sl-text-secondary: #6b7280; /* T1.1: renamed from --rmfw-sl-muted */
  --rmfw-sl-text-muted: #9ca3af;
  --rmfw-sl-text-inverse: #ffffff;

  /* 5. Colors — Brand */
  --rmfw-sl-accent: #2563eb;
  --rmfw-sl-accent-hover: #1d4ed8;
  --rmfw-sl-accent-text: #ffffff;
  --rmfw-sl-accent-light: #eff6ff;
  --rmfw-sl-user-location: #4285f4;

  /* 6. Colors — Border & Divider */
  --rmfw-sl-border: #e5e7eb;
  --rmfw-sl-border-focus: #2563eb;
  --rmfw-sl-divider: #f3f4f6;

  /* 7. Colors — Feedback */
  --rmfw-sl-danger: #dc2626;
  --rmfw-sl-success: #16a34a;
  --rmfw-sl-warning: #ca8a04;

  /* 8. Card */
  --rmfw-sl-card-logo-size: 48px;
  --rmfw-sl-card-border: 1px solid var(--rmfw-sl-border);
  --rmfw-sl-card-shadow: none;
  --rmfw-sl-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* 9. Search */
  --rmfw-sl-input-height: 40px;
  --rmfw-sl-input-border: 1px solid var(--rmfw-sl-border);
  --rmfw-sl-btn-height: 40px;

  /* 10. Badge */
  --rmfw-sl-badge-radius: 99px;
  --rmfw-sl-badge-font-size: 11px;

  /* 11. Map marker */
  --rmfw-sl-marker-color: var(--rmfw-sl-accent);
  --rmfw-sl-marker-size: 32px;

  /* 12. Shadows & Elevation */
  --rmfw-sl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --rmfw-sl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --rmfw-sl-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);

  /* 13. U1 legacy chrome — internal consumers in search-bar.js /
   * core.js. Reference the semantic tokens above so a single
   * --rmfw-sl-bg override (e.g. on a dark template) cascades through
   * the suggest listbox, skip link, and badge chrome for free. */
  --rmfw-sl-suggest-bg: var(--rmfw-sl-bg);
  --rmfw-sl-suggest-border: var(--rmfw-sl-border);
  --rmfw-sl-suggest-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  --rmfw-sl-suggest-max-height: 260px;
  --rmfw-sl-badge-bg: #e5e7eb;
  --rmfw-sl-badge-text: var(--rmfw-sl-text);
  --rmfw-sl-skip-bg: var(--rmfw-sl-bg);
  --rmfw-sl-skip-border: var(--rmfw-sl-accent);

  position: relative;
  width: 100%;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: 10px;
  background: var(--rmfw-sl-bg);
  overflow: hidden;
  font-family: var(--rmfw-sl-font-family);
  color: var(--rmfw-sl-text);
  box-sizing: border-box;
}

.rmfw-store-locator *,
.rmfw-store-locator *::before,
.rmfw-store-locator *::after {
  box-sizing: border-box;
}

.rmfw-store-locator__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rmfw-sl-text-secondary);
  font-size: 0.875rem;
  background: #f9fafb;
}

/* Grid: split layout with results list + map at ≥ 768px.
 *
 * The root fills the container's bounded height — PHP emits an inline
 * `height` + `max-height` on `.rmfw-store-locator` so the `1fr` list row
 * has a resolved size for `overflow-y: auto` (below) to engage when
 * search returns many retailers. Without a bounded parent, the list
 * would grow to fit its content and scroll would never appear.
 * `min-height: 0` on the grid itself is the canonical fix preventing
 * grid children from overflowing their track when their content is
 * taller than the row. */
.rmfw-store-locator__root {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
}

@media (min-width: 768px) {
  .rmfw-store-locator__root[data-layout="split"] {
    grid-template-columns: 1fr minmax(320px, 420px);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "search search"
      "map list";
  }
  .rmfw-store-locator__root[data-layout="map-only"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "map";
  }
  .rmfw-store-locator__root[data-layout="list-only"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "list";
  }
}

/* Intro text — optional prose block above the search row. Rendered
 * when the `introText` block attribute / `intro_text` shortcode attr
 * is non-empty. Kept muted so it reads as supporting copy rather than
 * competing with the search UI below it. */
.rmfw-store-locator__intro {
  padding: 0.9rem 1rem 0.25rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__intro p {
  margin: 0 0 0.5rem;
}
.rmfw-store-locator__intro p:last-child {
  margin-bottom: 0;
}
.rmfw-store-locator__intro a {
  color: var(--rmfw-sl-accent);
  text-decoration: none;
}
.rmfw-store-locator__intro a:hover,
.rmfw-store-locator__intro a:focus-visible {
  text-decoration: underline;
}

.rmfw-store-locator__search {
  grid-area: search;
  padding: 1rem;
  border-bottom: 1px solid var(--rmfw-sl-border);
}
/* `min-height: 0` lets the grid row shrink to the track's computed
 * size so `overflow-y: auto` kicks in; without it the list's intrinsic
 * content height would expand the row and the scroll would never
 * appear when there are many retailers. */
.rmfw-store-locator__list {
  grid-area: list;
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
  border-right: 1px solid var(--rmfw-sl-border);
}
.rmfw-store-locator__map {
  grid-area: map;
  min-height: 320px;
  background: var(--rmfw-sl-map-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* Inner canvas — provider (Leaflet / Google Maps) mounts onto THIS
 * element, not the outer `__map`. Separated so any children-wiping or
 * pane-reparenting the provider does stays scoped here and never
 * touches the popup sibling. `flex: 1` so it fills the outer
 * regardless of the `position: relative` that Leaflet forces on its
 * own container (flex sizing is independent of positioning). */
.rmfw-store-locator__map-canvas {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Leaflet divIcon wrapper for the shared coloured pin (lib/marker.js).
 * Strips Leaflet's default white-tile background + border so the SVG
 * pin renders cleanly with its own drop-shadow + gradient. */
.rmfw-store-locator__colored-pin {
  background: transparent !important;
  border: none !important;
}

/* Marker cluster badge (Leaflet.markercluster + shared chrome). */
.rmfw-store-locator__cluster-icon {
  background: transparent !important;
  border: none !important;
}
.rmfw-store-locator__cluster-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.rmfw-store-locator__cluster-marker span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--rmfw-sl-accent, #2563eb);
  color: #fff;
  border: 3px solid #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

/* Themed scrollbars — the default OS scrollbar (light grey) clashes with
 * dark templates. Drive the thumb/track from tokens so every template gets
 * a scrollbar that matches its own palette (subtle on dark, grey on light).
 * `scrollbar-*` (Firefox) inherits from the container; the `::-webkit-*`
 * rules target the actual scroll boxes for Chromium / Safari. */
.rmfw-store-locator {
  scrollbar-width: thin;
  scrollbar-color: var(--rmfw-sl-text-secondary) transparent;
}
.rmfw-store-locator__list::-webkit-scrollbar,
.rmfw-store-locator__result-list::-webkit-scrollbar,
.rmfw-store-locator__combo-menu::-webkit-scrollbar,
.rmfw-store-locator__radius-menu::-webkit-scrollbar,
.rmfw-store-locator__suggest-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.rmfw-store-locator__list::-webkit-scrollbar-track,
.rmfw-store-locator__result-list::-webkit-scrollbar-track,
.rmfw-store-locator__combo-menu::-webkit-scrollbar-track,
.rmfw-store-locator__radius-menu::-webkit-scrollbar-track,
.rmfw-store-locator__suggest-list::-webkit-scrollbar-track {
  background: transparent;
}
.rmfw-store-locator__list::-webkit-scrollbar-thumb,
.rmfw-store-locator__result-list::-webkit-scrollbar-thumb,
.rmfw-store-locator__combo-menu::-webkit-scrollbar-thumb,
.rmfw-store-locator__radius-menu::-webkit-scrollbar-thumb,
.rmfw-store-locator__suggest-list::-webkit-scrollbar-thumb {
  background: var(--rmfw-sl-text-secondary);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rmfw-store-locator__list::-webkit-scrollbar-thumb:hover,
.rmfw-store-locator__result-list::-webkit-scrollbar-thumb:hover,
.rmfw-store-locator__combo-menu::-webkit-scrollbar-thumb:hover,
.rmfw-store-locator__radius-menu::-webkit-scrollbar-thumb:hover,
.rmfw-store-locator__suggest-list::-webkit-scrollbar-thumb:hover {
  background: var(--rmfw-sl-text);
  background-clip: padding-box;
}

@media (max-width: 767px) {
  /* Stacked split: cap the MAP and let the LIST take the remaining space and
   * scroll internally. Previously the map was `1fr` (it filled, growing large)
   * while the list was content-sized + capped at 50vh, so the list felt
   * cramped and short. Track mins are 0 so the grid never forces itself taller
   * than the bounded container (which would clip the list / leave a gap).
   *
   * Map cap is 36vh (matching the dark-rail template's mobile split) so the
   * retailer list keeps a comfortable, scrollable area below the map instead
   * of being squeezed into a thin strip on phones. Was 45vh, which ate most of
   * a fixed-height (≈600px) container and left the list too short. */
  .rmfw-store-locator__root[data-layout="split"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 36vh) minmax(0, 1fr);
    grid-template-areas:
      "search"
      "map"
      "list";
  }
  .rmfw-store-locator__list {
    max-height: none;
    border-right: 0;
    border-top: 1px solid var(--rmfw-sl-border);
  }
  .rmfw-store-locator__map {
    min-height: 0;
  }

  /* ---- mobile collapse/expand toggles ---- */
  /* Reveal both toggle buttons on mobile. The `.__root` prefix raises this
   * to specificity 0,2,0 so it beats the base `.__mobile-toggle { display:
   * none }` rule, which is declared LATER in the file (equal 0,1,0 specificity
   * would otherwise win by source order and keep the buttons hidden). */
  .rmfw-store-locator__root .rmfw-store-locator__mobile-toggle {
    display: inline-flex;
  }
  /* Filters toggle sits above the search form. */
  .rmfw-store-locator__mobile-toggle--filters {
    margin-bottom: 0.6rem;
  }
  /* List toggle is a sticky header at the top of the scrollable list region
   * so it stays reachable while scrolling and reads as the list's title bar
   * alongside the "X stores found" status line directly below it. */
  .rmfw-store-locator__mobile-toggle--list {
    position: sticky;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 40px;
    border: 0;
    border-bottom: 1px solid var(--rmfw-sl-border);
    border-radius: 0;
    background: var(--rmfw-sl-sidebar-bg);
    justify-content: space-between;
  }

  /* Search collapsed: hide the whole search form (address input + radius
   * select + type filter + Search / Use-my-location buttons) so only the
   * toggle bar remains. The toggle button is a sibling of `.__search-row`
   * (a direct child of `.__search`), so it stays visible. The search error
   * line is also hidden while collapsed.
   *
   * `!important` so this also wins on the distance-board template, whose own
   * `:is(...) .__search-row { display: flex }` rule (declared later in the
   * file at equal specificity) would otherwise re-show the form. */
  .rmfw-store-locator__root.is-filters-collapsed .rmfw-store-locator__search-row,
  .rmfw-store-locator__root.is-filters-collapsed
    .rmfw-store-locator__search-error {
    display: none !important;
  }

  /* List collapsed: hand the list's height to the map. The grid row order is
   * search / map / list — give the map the flexible `1fr` track and shrink
   * the list track to `auto` so it only spans the sticky toggle + status
   * header. Higher specificity (`.is-list-collapsed[data-layout]`) than the
   * base split rule above, so it wins. */
  .rmfw-store-locator__root.is-list-collapsed[data-layout="split"] {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  /* `!important` so the board hide wins over distance-board's own
   * `:is(...) .__board { display: flex }` (equal specificity, declared later
   * in the file). Harmless for base templates — these are being hidden in the
   * collapsed state anyway. The status line ("X stores found" / "Search to see
   * retailers nearby.") is hidden too so the collapsed list is just the toggle
   * bar — the count returns when the visitor expands the list again. */
  .rmfw-store-locator__root.is-list-collapsed .rmfw-store-locator__status,
  .rmfw-store-locator__root.is-list-collapsed .rmfw-store-locator__sort-row,
  .rmfw-store-locator__root.is-list-collapsed
    .rmfw-store-locator__result-list,
  .rmfw-store-locator__root.is-list-collapsed .rmfw-store-locator__board,
  .rmfw-store-locator__root.is-list-collapsed .rmfw-store-locator__more {
    display: none !important;
  }
  /* The list region no longer needs to scroll when collapsed. */
  .rmfw-store-locator__root.is-list-collapsed .rmfw-store-locator__list {
    overflow: hidden;
  }
}

/* Search controls. */
.rmfw-store-locator__search-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.rmfw-store-locator__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: 8px;
  background: var(--rmfw-sl-input-bg);
  font-size: 14px;
}
.rmfw-store-locator__input:focus {
  outline: 2px solid var(--rmfw-sl-accent);
  /* outline-offset: 1px; */
  border-color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__btn {
  height: 40px;
  padding: 0 0.9rem !important;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: 8px;
  background: var(--rmfw-sl-input-bg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__btn:hover {
  background: var(--rmfw-sl-card-bg-hover);
}
.rmfw-store-locator__btn[data-variant="primary"] {
  background: var(--rmfw-sl-accent);
  border-color: var(--rmfw-sl-accent);
  color: #fff;
}
.rmfw-store-locator__btn[data-variant="primary"]:hover {
  background: var(--rmfw-sl-accent-hover);
  border-color: var(--rmfw-sl-accent-hover);
}
.rmfw-store-locator__btn:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}

.rmfw-store-locator__btn-icon {
  flex-shrink: 0;
  display: block;
  width: 18px;
  height: 18px;
}

/* Mobile collapse/expand toggles (mounted by mobile-toggles.js). Hidden by
 * default — only revealed inside the @media (max-width: 767px) block below.
 * The class toggles they flip on `.__root` (`is-filters-collapsed` /
 * `is-list-collapsed`) are likewise inert above the breakpoint. */
.rmfw-store-locator__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-btn-radius, 6px);
  background: var(--rmfw-sl-input-bg);
  color: var(--rmfw-sl-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rmfw-store-locator__mobile-toggle:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}
.rmfw-store-locator__mobile-toggle-chevron {
  transition: transform 0.2s ease;
}
/* Chevron points down by default (expanded); flips up when collapsed. */
.rmfw-store-locator__root.is-filters-collapsed
  .rmfw-store-locator__mobile-toggle--filters
  .rmfw-store-locator__mobile-toggle-chevron,
.rmfw-store-locator__root.is-list-collapsed
  .rmfw-store-locator__mobile-toggle--list
  .rmfw-store-locator__mobile-toggle-chevron {
  transform: rotate(180deg);
}

/* Result card. */
.rmfw-store-locator__card {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1rem !important;
  border-bottom: 1px solid var(--rmfw-sl-border);
  cursor: pointer;
  transition: background 120ms ease;
}
.rmfw-store-locator__card:hover,
.rmfw-store-locator__card[aria-selected="true"] {
  background: var(--rmfw-sl-card-bg-hover);
}
.rmfw-store-locator__card:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: -2px;
  background: var(--rmfw-sl-card-bg-hover);
}
.rmfw-store-locator__card-logo {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--rmfw-sl-border);
  background: #f9fafb center/contain no-repeat;
}
.rmfw-store-locator__card-body {
  min-width: 0;
  flex: 1;
}
.rmfw-store-locator__card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rmfw-store-locator__card-head-main {
  min-width: 0;
  flex: 1;
}
.rmfw-store-locator__card-head-action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 0.2rem;
}
.rmfw-store-locator__card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}
.rmfw-store-locator__card-chevron svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}
.rmfw-store-locator__card[aria-selected="true"]
  .rmfw-store-locator__card-chevron
  svg,
.rmfw-store-locator__card.rmfw-store-locator__card--expanded
  .rmfw-store-locator__card-chevron
  svg {
  transform: rotate(180deg);
}
.rmfw-store-locator__card-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 2px;
  color: var(--rmfw-sl-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline retailer-name anchor inside the result card title. Inherits the
 * title's weight/size/ellipsis so the only visual change on hover is a
 * color shift + underline — matches the other layouts' .rmfw-name-link. */
.rmfw-store-locator__card-title .rmfw-name-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  transition: color 0.15s ease;
}

.rmfw-store-locator__card-title .rmfw-name-link:hover,
.rmfw-store-locator__card-title .rmfw-name-link:focus-visible {
  color: var(--rmfw-sl-accent, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rmfw-store-locator__card-title .rmfw-name-link:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent, #2563eb);
  outline-offset: 2px;
  border-radius: 2px;
}
.rmfw-store-locator__card-meta {
  font-size: 12px;
  color: var(--rmfw-sl-text-secondary);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px !important;
}
.rmfw-store-locator__card-accordion-panel {
  display: block;
  max-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition:
    max-height 0.3s ease,
    opacity 0.22s ease,
    transform 0.28s ease,
    margin 0.28s ease,
    padding 0.28s ease;
}
.rmfw-store-locator__card-accordion-panel[data-expanded="true"] {
  max-height: none;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}

.rmfw-store-locator__card-address {
  font-size: 12px;
  color: var(--rmfw-sl-text-secondary);
  margin: 2px 0 0;
}

.rmfw-store-locator__card-address-icon {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  color: var(--rmfw-sl-text-secondary);
}

.rmfw-store-locator__card-address-text {
  margin: 0;
  font-size: 14px;
}

.rmfw-store-locator__card-phone-icon,
.rmfw-store-locator__card-email-icon {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  color: var(--rmfw-sl-accent);
}

/* Actions row — "Visit site" + "Get Directions" as buttons on their own
 * line below the contact metadata. Mirrors the popup action styling so
 * the list card and popup read as the same component family. */
.rmfw-store-locator__card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}
.rmfw-store-locator__card-action {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--rmfw-sl-border);
  background: var(--rmfw-sl-bg);
  color: var(--rmfw-sl-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}
.rmfw-store-locator__card-action:hover,
.rmfw-store-locator__card-action:focus-visible {
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}
.rmfw-store-locator__card-action:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}
.rmfw-store-locator__card-action--primary {
  background: var(--rmfw-sl-accent);
  border-color: var(--rmfw-sl-accent);
  color: #ffffff;
}
.rmfw-store-locator__card-action--primary:hover,
.rmfw-store-locator__card-action--primary:focus-visible {
  background: var(--rmfw-sl-accent-hover);
  border-color: var(--rmfw-sl-accent-hover);
  color: #ffffff;
}

/* T4.2 — Additional CTA button style modifiers for custom CTAs.
 * outline: transparent bg, accent border/text (reads as "secondary").
 * ghost:   transparent bg, accent text, no border (reads as "tertiary").
 * link:    no box chrome at all, just an accent-coloured underlined link. */
.rmfw-store-locator__card-action--outline {
  background: transparent;
  border-color: var(--rmfw-sl-accent);
  color: var(--rmfw-sl-accent);
}
.rmfw-store-locator__card-action--outline:hover,
.rmfw-store-locator__card-action--outline:focus-visible {
  background: var(--rmfw-sl-accent-light);
  border-color: var(--rmfw-sl-accent);
  color: var(--rmfw-sl-accent-hover);
}
.rmfw-store-locator__card-action--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rmfw-sl-accent);
}
.rmfw-store-locator__card-action--ghost:hover,
.rmfw-store-locator__card-action--ghost:focus-visible {
  background: var(--rmfw-sl-accent-light);
  color: var(--rmfw-sl-accent-hover);
}
.rmfw-store-locator__card-action--link {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rmfw-sl-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.rmfw-store-locator__card-action--link:hover,
.rmfw-store-locator__card-action--link:focus-visible {
  color: var(--rmfw-sl-accent-hover);
  text-decoration: underline;
  background: transparent;
}

/* Contact rows — phone and email each get their own `<p>` so they
 * stack vertically. The first row lifts off the address; consecutive
 * rows tighten to 2px so the contact lines read as one group above
 * the action buttons. */
.rmfw-store-locator__card-contact {
  margin-top: 6px !important;
}
.rmfw-store-locator__card-contact + .rmfw-store-locator__card-contact {
  margin-top: 2px;
}
.rmfw-store-locator__card-contact a {
  color: var(--rmfw-sl-accent);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}

.rmfw-store-locator__card-contact a:hover,
.rmfw-store-locator__card-contact a:focus-visible {
  text-decoration: underline;
}
.rmfw-store-locator__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--rmfw-sl-badge-bg);
  color: var(--rmfw-sl-badge-text);
}

.rmfw-store-locator__opening-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.rmfw-store-locator__opening-badge--open {
  background: color-mix(in srgb, #16a34a 20%, transparent);
  color: #15803d;
}
.rmfw-store-locator__opening-badge--soon {
  background: color-mix(in srgb, #eab308 28%, transparent);
  color: #a16207;
}
.rmfw-store-locator__opening-badge--closed {
  background: color-mix(in srgb, #dc2626 18%, transparent);
  color: #b91c1c;
}
.rmfw-store-locator__opening-detail {
  font-weight: 400;
  opacity: 0.92;
}

/* -------------------------------------------------------------------------
   T1.4 — Card variants.

   The `.rmfw-store-locator__card` base rules above render the "horizontal"
   default variant (logo on left, body on right). The selectors below
   override for the three alternate variants — `vertical`, `compact`,
   `minimal` — driven by the `data-card-variant` attribute PHP emits on
   the container.

   CSS-only: the JS per-field card renderer (results-list.js::renderCard)
   always outputs the full DOM subtree — logo, title, meta, address,
   phone, email, actions. Hiding rows here means the DOM stays
   consistent across variants and the cardFields gate in context still
   works as the authoritative "don't render at all" switch.

   Scoped to `.rmfw-store-locator[data-card-variant="X"]` so a locator
   with `horizontal` on the same page as one with `minimal` keeps its
   own look (multi-instance safe).
   ------------------------------------------------------------------------- */

/* ---- vertical: logo full-width on top, body below ----
 *
 * Useful for product-tile catalogues or the "Vibrant" template where
 * the retailer logo doubles as brand hero. The card grows taller per
 * row; pair with a narrower sidebar in the split layout. */
.rmfw-store-locator[data-card-variant="vertical"] .rmfw-store-locator__card {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}
.rmfw-store-locator[data-card-variant="vertical"]
  .rmfw-store-locator__card-logo {
  flex: 0 0 auto;
  width: 100%;
  height: 96px;
  border-radius: calc(var(--rmfw-sl-card-radius) - 2px);
}

/* ---- compact: no logo, dense padding ----
 *
 * "List mode" look — pair with a long list where the user is scanning
 * many retailers quickly. Keeps CTAs and address visible, drops the
 * logo and tightens vertical rhythm. Address truncates to one line so
 * a wordy city never forces a taller card. */
.rmfw-store-locator[data-card-variant="compact"] .rmfw-store-locator__card {
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}
.rmfw-store-locator[data-card-variant="compact"]
  .rmfw-store-locator__card-logo {
  display: none;
}
.rmfw-store-locator[data-card-variant="compact"]
  .rmfw-store-locator__card-title {
  font-size: 13px;
  margin-bottom: 0;
}
.rmfw-store-locator[data-card-variant="compact"]
  .rmfw-store-locator__card-address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rmfw-store-locator[data-card-variant="compact"]
  .rmfw-store-locator__card-actions {
  margin-top: 4px;
}

/* ---- minimal: name + distance + chevron only ----
 *
 * Directory-style row. Hides logo, address, contact rows, actions row,
 * AND the retailer-type badge chip — leaves just the title, distance,
 * and a CSS chevron affordance on the right so the row reads as
 * "tap for detail". Divider border between rows instead of card
 * borders so the list feels like a flat table.
 *
 * NOTE: the chevron is a pure-CSS `::after` pseudo-element; no DOM
 * change in results-list.js. If a future variant needs a different
 * trailing icon, override this `::after` at that variant's selector. */
.rmfw-store-locator[data-card-variant="minimal"] .rmfw-store-locator__card {
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--rmfw-sl-divider);
  gap: 0.5rem;
}

/* .rmfw-store-locator[data-card-variant="minimal"] .rmfw-store-locator__card-logo,
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-address,
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-contact,
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-actions {
  display: none;
} */

.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-meta
  .rmfw-store-locator__badge {
  display: none;
}
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-meta {
  margin: 0;
}
/* .rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card::after {
  content: "›";
  font-size: 22px;
  line-height: 1;
  color: var(--rmfw-sl-text-secondary);
  margin-left: 0.25rem;
  flex: 0 0 auto;
} */

/* -------------------------------------------------------------------------
   Grid template — catalog layout (scoped to data-template="grid" only).

   Two-column result list, tile card chrome, selected card spans full width
   (accordion via aria-selected). Split layout: list left, map right.

   Selectors use :is(data-template, BEM class) so layout survives data-*
   stripping; display:grid / grid-template-* use !important to beat theme
   ul { display:block !important } resets on some storefronts.
   ------------------------------------------------------------------------- */

:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__result-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px 18px;
  align-content: start;
}
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card {
  display: grid;
  grid-template-columns: var(--rmfw-sl-card-logo-size, 52px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px !important;
  margin: 0;
  border: 1px solid var(--rmfw-sl-border);
  border-bottom: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-card-radius);
  background: var(--rmfw-sl-card-bg);
  box-shadow: var(--rmfw-sl-card-shadow);
}
/* Retailers with no logo node in the DOM only. Compact/minimal keep the
 * logo element but hide it with display:none — :has() still matches, so
 * use the compound grid + data-card-variant rules below instead. */
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card:not(:has(.rmfw-store-locator__card-logo)) {
  grid-template-columns: minmax(0, 1fr);
}

/* Grid + card variant — tile layout must not assume logo|body columns when
 * compact hides the logo or vertical stacks logo above body. */
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="compact"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="compact"]
  )
  .rmfw-store-locator__card {
  grid-template-columns: minmax(0, 1fr);
}
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="compact"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="compact"]
  )
  .rmfw-store-locator__card-body {
  grid-column: 1;
}

/* Grid + minimal — mirror default + minimal (flex row, logo visible, flat row). */
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem !important;
  border: 0;
  border-bottom: 1px solid var(--rmfw-sl-divider);
  border-radius: 0;
  box-shadow: none;
  background: var(--rmfw-sl-card-bg);
}
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card:hover,
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card[aria-selected="true"],
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card.rmfw-store-locator__card--selected {
  border-color: transparent;
  border-bottom-color: var(--rmfw-sl-divider);
  box-shadow: none;
  background: var(--rmfw-sl-card-bg-hover);
}
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card-logo {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--rmfw-sl-border);
  background: #f9fafb center/contain no-repeat;
}
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card-body {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="vertical"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="vertical"]
  )
  .rmfw-store-locator__card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
}
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="vertical"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="vertical"]
  )
  .rmfw-store-locator__card-logo {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 96px;
}
:is(
    .rmfw-store-locator[data-template="grid"][data-card-variant="vertical"],
    .rmfw-store-locator.rmfw-store-locator--template-grid[data-card-variant="vertical"]
  )
  .rmfw-store-locator__card-body {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
}

:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--rmfw-sl-card-shadow-hover);
}
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card[aria-selected="true"],
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card.rmfw-store-locator__card--selected {
  grid-column: 1 / -1;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: var(--rmfw-sl-card-bg);
}
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card-logo {
  flex: none;
  width: var(--rmfw-sl-card-logo-size, 52px);
  height: var(--rmfw-sl-card-logo-size, 52px);
  border-radius: 12px;
}
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card-body {
  width: 100%;
  min-width: 0;
}
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card-accordion-panel[data-expanded="true"] {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rmfw-sl-divider);
}
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__card-action {
  justify-content: center;
  text-align: center;
}
:is(
    .rmfw-store-locator[data-template="grid"],
    .rmfw-store-locator.rmfw-store-locator--template-grid
  )
  .rmfw-store-locator__search {
  padding: 16px 16px 12px;
}
@media (max-width: 820px) {
  :is(
      .rmfw-store-locator[data-template="grid"],
      .rmfw-store-locator.rmfw-store-locator--template-grid
    )
    .rmfw-store-locator__result-list {
    grid-template-columns: 1fr;
  }
  :is(
      .rmfw-store-locator[data-template="grid"],
      .rmfw-store-locator.rmfw-store-locator--template-grid
    )
    .rmfw-store-locator__card[aria-selected="true"],
  :is(
      .rmfw-store-locator[data-template="grid"],
      .rmfw-store-locator.rmfw-store-locator--template-grid
    )
    .rmfw-store-locator__card.rmfw-store-locator__card--selected {
    grid-column: auto;
  }
}
@media (min-width: 768px) {
  :is(
      .rmfw-store-locator[data-template="grid"],
      .rmfw-store-locator.rmfw-store-locator--template-grid
    )
    > .rmfw-store-locator__root[data-layout="split"],
  .rmfw-store-locator__root.rmfw-store-locator__root--template-grid[data-layout="split"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "search search"
      "list map" !important;
  }
  :is(
      .rmfw-store-locator[data-template="grid"],
      .rmfw-store-locator.rmfw-store-locator--template-grid
    )
    .rmfw-store-locator__list {
    border-right: 0;
    border-left: 1px solid var(--rmfw-sl-border);
  }
}

/* -------------------------------------------------------------------------
   Overlay template — full-viewport map + floating sidebar + search.

   Requires both list and map (PHP coerces map-only → split). Pair with
   height="100vh" for a Google-Maps-style shell. Sidebar open/close is
   driven by JS (`overlay-chrome.js`) via
   `.rmfw-store-locator--overlay-sidebar-closed` on the container.
   ------------------------------------------------------------------------- */

:is(
  .rmfw-store-locator[data-template="overlay"],
  .rmfw-store-locator.rmfw-store-locator--template-overlay
) {
  position: relative;
  overflow: hidden;
  background: var(--rmfw-sl-bg);
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  > .rmfw-store-locator__root,
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__root.rmfw-store-locator__root--template-overlay,
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__root[data-layout="split"],
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__root[data-layout="map-only"],
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__root[data-layout="list-only"] {
  position: relative;
  display: block !important;
  grid-template: none !important;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__map {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 100%;
  border: 0;
  grid-area: unset;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__map-canvas {
  height: 100%;
  min-height: 100%;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__list {
  position: absolute;
  z-index: 25;
  top: var(--rmfw-sl-overlay-shell-pad, 16px);
  left: var(--rmfw-sl-overlay-shell-pad, 16px);
  bottom: var(--rmfw-sl-overlay-shell-pad, 16px);
  width: var(--rmfw-sl-overlay-sidebar-width, 380px);
  max-width: calc(100% - var(--rmfw-sl-overlay-shell-pad, 16px) * 2);
  max-height: calc(100% - var(--rmfw-sl-overlay-shell-pad, 16px) * 2);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  border-right: 1px solid rgba(226, 232, 240, 0.95);
  background: var(--rmfw-sl-sidebar-bg);
  box-shadow: var(--rmfw-sl-shadow-md, 0 20px 55px rgba(15, 23, 42, 0.18));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  grid-area: unset;
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.24s ease;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__overlay-sidebar-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: #f1f5f9;
  color: #334155;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__overlay-sidebar-close:hover {
  transform: translateY(-1px);
  background: #e2e8f0;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__status,
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__sort-row {
  flex-shrink: 0;
  padding-left: 16px;
  padding-right: 16px;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__status {
  padding-top: 52px;
  font-size: 14px;
  color: var(--rmfw-sl-text-secondary);
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__sort-row {
  padding-bottom: 10px;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__result-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__card {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 0;
  padding: 14px !important;
  border: 1px solid var(--rmfw-sl-border);
  border-bottom: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-card-radius);
  background: var(--rmfw-sl-card-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__card:hover,
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__card[aria-selected="true"] {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: var(--rmfw-sl-card-bg);
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__card-logo {
  flex: 0 0 var(--rmfw-sl-card-logo-size, 52px);
  width: var(--rmfw-sl-card-logo-size, 52px);
  height: var(--rmfw-sl-card-logo-size, 52px);
  border-radius: 12px;
}

/* Overlay + card variant — overlay tile rules use higher specificity than
 * global [data-card-variant] alone; compound selectors restore variant layout. */
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="vertical"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="vertical"]
  )
  .rmfw-store-locator__card {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="vertical"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="vertical"]
  )
  .rmfw-store-locator__card-logo {
  flex: 0 0 auto;
  width: 100%;
  height: 96px;
  border-radius: calc(var(--rmfw-sl-card-radius) - 2px);
}
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="vertical"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="vertical"]
  )
  .rmfw-store-locator__card-body {
  width: 100%;
  min-width: 0;
}
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="compact"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="compact"]
  )
  .rmfw-store-locator__card {
  flex-direction: row;
  align-items: flex-start;
  padding: 0.5rem 14px !important;
  gap: 0.5rem;
}
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="compact"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="compact"]
  )
  .rmfw-store-locator__card-logo {
  display: none;
}
/* Overlay + minimal — mirror default + minimal (flex row, logo visible, flat row). */
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem !important;
  border: 0;
  border-bottom: 1px solid var(--rmfw-sl-divider);
  border-radius: 0;
  box-shadow: none;
  background: var(--rmfw-sl-card-bg);
}
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card:hover,
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card[aria-selected="true"],
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card.rmfw-store-locator__card--selected {
  border-color: transparent;
  border-bottom-color: var(--rmfw-sl-divider);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: var(--rmfw-sl-card-bg-hover);
}
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card-logo {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--rmfw-sl-border);
  background: #f9fafb center/contain no-repeat;
}
:is(
    .rmfw-store-locator[data-template="overlay"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card-body {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__search {
  position: absolute;
  z-index: 30;
  top: var(--rmfw-sl-overlay-shell-pad, 16px);
  left: calc(
    var(--rmfw-sl-overlay-sidebar-width, 380px) +
      var(--rmfw-sl-overlay-shell-pad, 16px) * 2 + 10px
  );
  right: var(--rmfw-sl-overlay-shell-pad, 16px);
  max-width: 520px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  grid-area: unset;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__search
  .rmfw-store-locator__search-row,
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__search
  form.rmfw-store-locator__search-row {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: var(--rmfw-sl-search-bg);
  box-shadow: var(--rmfw-sl-shadow-sm, 0 10px 28px rgba(15, 23, 42, 0.1));
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__overlay-menu-btn {
  display: none;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--rmfw-sl-shadow-sm, 0 10px 28px rgba(15, 23, 42, 0.1));
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__overlay-sidebar-backdrop {
  position: absolute;
  inset: 0;
  z-index: 24;
  background: rgba(15, 23, 42, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__overlay-sidebar-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar closed — desktop collapse + mobile default */
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  ).rmfw-store-locator--overlay-sidebar-closed
  .rmfw-store-locator__list {
  transform: translateX(
    calc(-100% - var(--rmfw-sl-overlay-shell-pad, 16px) * 2)
  );
  opacity: 0;
  pointer-events: none;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  ).rmfw-store-locator--overlay-sidebar-closed
  .rmfw-store-locator__search {
  left: var(--rmfw-sl-overlay-shell-pad, 16px);
  max-width: min(
    520px,
    calc(100% - var(--rmfw-sl-overlay-shell-pad, 16px) * 2)
  );
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  ).rmfw-store-locator--overlay-sidebar-closed
  .rmfw-store-locator__overlay-menu-btn {
  display: block;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__intro {
  display: none;
}

/* Overlay search variants — mirror T1.5 (Modern) inside the floating panel.
 * Global [data-search-style] rules still style inputs/buttons/suggest lists;
 * these only tune flex layout within the overlay search card. */
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )
  .rmfw-store-locator__search
  .rmfw-store-locator__input-wrap {
  max-width: none;
  width: min(100%, 100%);
  margin-right: auto;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )[data-search-style="bar"]
  .rmfw-store-locator__search
  .rmfw-store-locator__input-wrap,
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )[data-search-style="pill"]
  .rmfw-store-locator__search
  .rmfw-store-locator__input-wrap,
:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )[data-search-style="floating"]
  .rmfw-store-locator__search
  .rmfw-store-locator__input-wrap {
  flex: 1 1 220px;
  min-width: 0;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )[data-search-style="stacked"]
  .rmfw-store-locator__search
  .rmfw-store-locator__search-row {
  row-gap: 0.5rem;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )[data-search-style="stacked"]
  .rmfw-store-locator__search
  .rmfw-store-locator__input-wrap {
  flex: 1 1 100%;
  width: 100%;
  margin-right: 0;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )[data-search-style="stacked"]
  .rmfw-store-locator__search
  .rmfw-store-locator__radius-select {
  flex: 0 0 auto;
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )[data-search-style="floating"]
  .rmfw-store-locator__search
  form.rmfw-store-locator__search-row {
  padding: 0.75rem 0.9rem;
  border-radius: calc(var(--rmfw-sl-border-radius) + 4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

:is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  )[data-search-style="floating"]
  .rmfw-store-locator__search
  .rmfw-store-locator__suggest-list {
  z-index: 6;
}

@media (max-width: 1024px) {
  :is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  ) {
    --rmfw-sl-overlay-sidebar-width: 340px;
  }
}

@media (max-width: 980px) {
  :is(
    .rmfw-store-locator[data-template="overlay"],
    .rmfw-store-locator.rmfw-store-locator--template-overlay
  ) {
    --rmfw-sl-overlay-sidebar-width: min(
      360px,
      calc(100% - var(--rmfw-sl-overlay-shell-pad, 16px) * 2)
    );
  }

  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    )
    .rmfw-store-locator__list {
    position: absolute;
    transform: translateX(
      calc(-100% - var(--rmfw-sl-overlay-shell-pad, 16px) * 2)
    );
    opacity: 1;
    pointer-events: auto;
  }

  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    ):not(.rmfw-store-locator--overlay-sidebar-closed)
    .rmfw-store-locator__list {
    transform: translateX(0);
  }

  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    )
    .rmfw-store-locator__overlay-sidebar-close {
    display: none;
  }

  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    )
    .rmfw-store-locator__search {
    left: var(--rmfw-sl-overlay-shell-pad, 16px);
    right: var(--rmfw-sl-overlay-shell-pad, 16px);
    max-width: none;
  }

  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    ).rmfw-store-locator--overlay-sidebar-closed
    .rmfw-store-locator__overlay-menu-btn {
    display: block;
  }
}

@media (max-width: 640px) {
  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    )
    .rmfw-store-locator__list {
    top: auto;
    left: var(--rmfw-sl-overlay-shell-pad, 10px);
    right: var(--rmfw-sl-overlay-shell-pad, 10px);
    bottom: var(--rmfw-sl-overlay-shell-pad, 10px);
    width: auto;
    max-height: min(78vh, calc(100% - 120px));
    border-radius: 22px 22px 18px 18px;
    transform: translateY(
      calc(100% + var(--rmfw-sl-overlay-shell-pad, 10px) * 2)
    );
  }

  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    )
    .rmfw-store-locator__list::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 10px auto 4px;
    border-radius: 999px;
    background: #cbd5e1;
    flex-shrink: 0;
  }

  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    ):not(.rmfw-store-locator--overlay-sidebar-closed)
    .rmfw-store-locator__list {
    transform: translateY(0);
  }

  :is(
      .rmfw-store-locator[data-template="overlay"],
      .rmfw-store-locator.rmfw-store-locator--template-overlay
    ).rmfw-store-locator--overlay-sidebar-closed
    .rmfw-store-locator__list {
    transform: translateY(
      calc(100% + var(--rmfw-sl-overlay-shell-pad, 10px) * 2)
    );
  }
}

/* -------------------------------------------------------------------------
   Distance Board template — map + board tuned for bounded container height
   (Settings height / shortcode height). Fills the inline height budget:
   desktop = search row + map|board split; mobile = stacked with internal scroll.

   Scoped to data-template="distance-board". Uses real map providers;
   distance grouping is handled in results-list.js + lib/distance-board.js.
   ------------------------------------------------------------------------- */

:is(
  .rmfw-store-locator[data-template="distance-board"],
  .rmfw-store-locator.rmfw-store-locator--template-distance-board
) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--rmfw-sl-bg);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__intro {
  flex: 0 0 auto;
  max-height: min(28vh, 160px);
  margin: 0 0 12px;
  padding: 16px 20px;
  overflow-y: auto;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-border-radius, 28px);
  background:
    radial-gradient(
      circle at 85% 18%,
      rgba(36, 60, 150, 0.16),
      transparent 26%
    ),
    linear-gradient(135deg, #ffffff, #eef4ff);
  box-shadow: var(--rmfw-sl-shadow-sm, 0 10px 30px rgba(15, 23, 42, 0.1));
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__intro
  .rmfw-sl-eyebrow,
:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__intro
  > p:first-child {
  display: inline-flex;
  margin: 0 0 10px;
  color: var(--rmfw-sl-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__intro
  h1 {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--rmfw-sl-text);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__root {
  flex: 1 1 auto;
  display: grid !important;
  grid-template-columns: 1fr !important;
  height: 100%;
  min-height: 0;
  gap: 12px;
  overflow: hidden;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__root[data-layout="split"] {
  grid-template-rows: auto minmax(120px, 32%) minmax(0, 1fr) !important;
  grid-template-areas:
    "search"
    "map"
    "list" !important;
}

/* Distance-board — mobile list-collapse override for the shared
 * `is-list-collapsed` toggle (mobile-toggles.js). The base collapse rule in
 * the @media block near the top of the file can't win here: distance-board's
 * split grid above is `!important` AND higher specificity. So restate the
 * collapsed grid with the distance-board scope (so map-card gets `1fr` and the
 * board track shrinks to `auto` = just the sticky toggle). The board / more /
 * sort-row are hidden by the shared collapse rule (`.__board` was added to its
 * hide list). Mobile-only, matching where the toggle buttons are revealed. */
@media (max-width: 767px) {
  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__root.is-list-collapsed[data-layout="split"] {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__root[data-layout="map-only"] {
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "search"
    "map" !important;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__root[data-layout="map-only"]
  .rmfw-store-locator__list {
  display: none !important;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__root[data-layout="list-only"] {
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "search"
    "list" !important;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__root[data-layout="list-only"]
  .rmfw-store-locator__map-card,
:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__root[data-layout="list-only"]
  .rmfw-store-locator__map {
  display: none !important;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__search {
  grid-area: search;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-border-radius, 28px);
  background: var(--rmfw-sl-search-bg, #fff);
  box-shadow: var(--rmfw-sl-shadow-sm);
  border-bottom: 1px solid var(--rmfw-sl-border);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__input-wrap {
  flex: 1 1 260px;
  min-width: 200px;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__radius-select,
:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__type-filter {
  flex: 0 1 170px;
  min-width: 140px;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__map-card {
  grid-area: map;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-border-radius, 28px);
  background: var(--rmfw-sl-sidebar-bg, #fff);
  box-shadow: var(--rmfw-sl-shadow-sm);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__map-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
  min-height: 52px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rmfw-sl-border);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__map-title {
  display: block;
  font-size: 1rem;
  color: var(--rmfw-sl-text);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__map-subtitle {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--rmfw-sl-text-secondary);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border: 0;
  grid-area: unset;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__map-canvas {
  height: 100%;
  min-height: 100%;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  max-height: 100%;
  border: 0;
  background: transparent;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__list
  > .rmfw-store-locator__status,
:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__list
  > .rmfw-store-locator__sort-row {
  display: none !important;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__more {
  flex: 0 0 auto;
  margin-top: 8px;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-border-radius, 28px);
  background: var(--rmfw-sl-sidebar-bg, #fff);
  box-shadow: var(--rmfw-sl-shadow-sm);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tabs {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  padding: 6px 8px 0;
  border-bottom: 1px solid var(--rmfw-sl-border);
  background: var(--rmfw-sl-card-bg-hover, #f8fafc);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tabs-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--rmfw-sl-accent);
  pointer-events: none;
  will-change: transform, width;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tabs.is-indicator-ready
  .rmfw-store-locator__board-tabs-indicator {
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 10px 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 12px 12px 0 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--rmfw-sl-text-secondary);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tab:hover {
  color: var(--rmfw-sl-text);
  background: rgba(255, 255, 255, 0.6);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tab.is-active,
:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tab[aria-selected="true"] {
  color: var(--rmfw-sl-accent);
  background: var(--rmfw-sl-sidebar-bg, #fff);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tab:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: -2px;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tab-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  background: var(--rmfw-sl-accent);
  color: #fff;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tab:not(.is-active)
  .rmfw-store-locator__board-tab-count {
  background: var(--rmfw-sl-border);
  color: var(--rmfw-sl-text-secondary);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tabpanels {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tabpanel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-tabpanel[hidden] {
  display: none;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-all-hint {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 14px 0;
  font-size: 13px;
  color: var(--rmfw-sl-text-secondary);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-column-list {
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  list-style: none;
  align-content: start;
  align-items: start;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-column-list
  > .rmfw-store-locator__card {
  width: 100%;
  height: auto;
  min-height: 0;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__board-empty {
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  color: var(--rmfw-sl-text-secondary);
  text-align: center;
  background: #fff;
  list-style: none;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__card {
  margin: 0;
  padding: 12px !important;
  align-items: flex-start;
  border: 1px solid var(--rmfw-sl-border);
  border-bottom: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-card-radius, 18px);
  background: var(--rmfw-sl-card-bg);
  box-shadow: var(--rmfw-sl-card-shadow);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__card-body {
  flex: 1 1 auto;
  align-self: flex-start;
  width: 100%;
  min-width: 0;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__card-accordion-panel[data-expanded="true"] {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rmfw-sl-divider);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__card:hover {
  transform: translateY(-2px);
  border-color: rgba(36, 60, 150, 0.28);
  box-shadow: var(--rmfw-sl-card-shadow-hover);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__card[aria-selected="true"],
:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__card.rmfw-store-locator__card--selected {
  border-color: rgba(36, 60, 150, 0.78);
  background: var(--rmfw-sl-card-bg-active, #eff6ff);
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__card-logo {
  width: var(--rmfw-sl-card-logo-size, 44px);
  height: var(--rmfw-sl-card-logo-size, 44px);
  border-radius: 14px;
}

:is(
    .rmfw-store-locator[data-template="distance-board"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board
  )
  .rmfw-store-locator__card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Distance Board + card variant compound rules */
:is(
    .rmfw-store-locator[data-template="distance-board"][data-card-variant="compact"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board[data-card-variant="compact"]
  )
  .rmfw-store-locator__card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 14px !important;
}

:is(
    .rmfw-store-locator[data-template="distance-board"][data-card-variant="compact"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board[data-card-variant="compact"]
  )
  .rmfw-store-locator__card-logo {
  display: none;
}

:is(
    .rmfw-store-locator[data-template="distance-board"][data-card-variant="vertical"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board[data-card-variant="vertical"]
  )
  .rmfw-store-locator__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}

:is(
    .rmfw-store-locator[data-template="distance-board"][data-card-variant="vertical"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board[data-card-variant="vertical"]
  )
  .rmfw-store-locator__card-logo {
  flex: 0 0 auto;
  width: 100%;
  height: 96px;
}

:is(
    .rmfw-store-locator[data-template="distance-board"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem !important;
  border: 0;
  border-bottom: 1px solid var(--rmfw-sl-divider);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

:is(
    .rmfw-store-locator[data-template="distance-board"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card:hover,
:is(
    .rmfw-store-locator[data-template="distance-board"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card[aria-selected="true"] {
  transform: none;
  box-shadow: none;
}

:is(
    .rmfw-store-locator[data-template="distance-board"][data-card-variant="minimal"],
    .rmfw-store-locator.rmfw-store-locator--template-distance-board[data-card-variant="minimal"]
  )
  .rmfw-store-locator__card-logo {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

/* Bounded height: map left, distance board right (uses width instead of stacking). */
@media (min-width: 768px) {
  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__root[data-layout="split"] {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "search search"
      "map list" !important;
  }

  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__root[data-layout="map-only"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "search"
      "map" !important;
  }

  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__root[data-layout="list-only"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "search"
      "list" !important;
  }

  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__map-card {
    min-height: 0;
    height: 100%;
  }
}

@media (max-width: 640px) {
  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__input-wrap,
  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__radius-select,
  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__type-filter,
  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__btn {
    flex: 1 1 100%;
    width: 100%;
  }

  :is(
      .rmfw-store-locator[data-template="distance-board"],
      .rmfw-store-locator.rmfw-store-locator--template-distance-board
    )
    .rmfw-store-locator__map-header {
    padding: 16px;
    min-height: auto;
  }
}

/* -------------------------------------------------------------------------
   T1.5 — Search bar variants.

   The `.rmfw-store-locator__search` base rules above render the "bar"
   default (flex row of input + radius select + buttons). Variant rules
   below override for `pill`, `floating`, `stacked`.

   Scoped to `.rmfw-store-locator[data-search-style="X"]` for
   multi-instance safety.

   Search DOM (from search-bar.js):
     .__search
       form.__search-row
         .__input-wrap  >  input.__input  +  ul.__suggest-list
         div.__input.__radius-select  >  button.__radius-trigger  +  ul.__radius-menu
         button.__btn (Use my location)
         button.__btn (Search)
       .__error.__search-error
   ------------------------------------------------------------------------- */

/* ---- pill: rounded-99px inputs + buttons, subtle shadow ----
 *
 * Google-search feel. Keeps the flex-row layout but swaps corner radii
 * and adds a slight elevation under the input. Taller row (44px) so the
 * pill reads as a primary search surface. */
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__input,
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__btn,
.rmfw-store-locator[data-search-style="pill"]
  .rmfw-store-locator__radius-select {
  border-radius: 99px;
  height: 44px;
}
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__input {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__input:focus {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__btn {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.rmfw-store-locator[data-search-style="pill"]
  .rmfw-store-locator__suggest-list {
  border-radius: 16px;
  padding: 6px 0;
}

/* ---- floating: search overlaid on the map ----
 *
 * Only meaningful when `data-layout="map-only"` — on split / list-only
 * the grid-placed search row wins and we leave the layout alone.
 * Requires `position: relative` on the root so the absolute-positioned
 * search anchors to the locator instead of the document. */
.rmfw-store-locator[data-search-style="floating"]
  .rmfw-store-locator__root[data-layout="map-only"] {
  position: relative;
  grid-template-rows: 1fr;
  grid-template-areas: "map";
}
.rmfw-store-locator[data-search-style="floating"]
  .rmfw-store-locator__root[data-layout="map-only"]
  .rmfw-store-locator__search {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 2rem));
  z-index: 5;
  background: var(--rmfw-sl-search-bg);
  border: 1px solid var(--rmfw-sl-border);
  border-radius: calc(var(--rmfw-sl-border-radius) + 4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 0.75rem 0.9rem;
}
/* The suggest listbox needs to poke out of the floating card without
   being clipped by the parent's padding/border. It's already
   `position: absolute` within `.__input-wrap`, so no override needed —
   just bump the z-index above the map surface. */
.rmfw-store-locator[data-search-style="floating"]
  .rmfw-store-locator__root[data-layout="map-only"]
  .rmfw-store-locator__suggest-list {
  z-index: 6;
}

/* ---- stacked: input on its own row, controls below ----
 *
 * For narrow sidebars where the default bar layout wraps awkwardly.
 * Flex-wrap + a 100% flex-basis on the input-wrap forces the input
 * onto its own line; the radius select + buttons share the second
 * line with equal flex-grow. */
.rmfw-store-locator[data-search-style="stacked"]
  .rmfw-store-locator__search-row {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
.rmfw-store-locator[data-search-style="stacked"]
  .rmfw-store-locator__input-wrap {
  flex: 1 1 100%;
  margin-right: 0;
}
.rmfw-store-locator[data-search-style="stacked"]
  .rmfw-store-locator__radius-select {
  flex: 0 0 auto;
}
.rmfw-store-locator[data-search-style="stacked"] .rmfw-store-locator__btn {
  justify-content: center;
}

/* U1 — classes that replace former inline styles in JS modules.
 * Putting the chrome here means template token overrides actually
 * reach the suggest listbox and skip link, which previously used
 * hardcoded white / accent-blue. */
.rmfw-store-locator__input-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
  width: min(100%, 400px);
  max-width: 400px;
  margin-right: auto;
}
.rmfw-store-locator__radius-select {
  position: relative;
  flex: 0 0 130px;
}

.rmfw-store-locator__radius-select.is-open {
  border-color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__radius-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 0.5rem 0 0.4rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: inherit;
}

.rmfw-store-locator__radius-trigger-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
}

.rmfw-store-locator__radius-trigger-pin {
  flex-shrink: 0;
  color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__radius-trigger-label {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rmfw-store-locator__radius-trigger-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--rmfw-sl-text-secondary);
}

.rmfw-store-locator__radius-trigger-chevron-svg {
  display: block;
  transition: transform 0.2s ease;
}

.rmfw-store-locator__radius-select.is-open
  .rmfw-store-locator__radius-trigger-chevron-svg {
  transform: rotate(180deg);
}

.rmfw-store-locator__radius-select:focus-within {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 1px;
  border-color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__radius-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 25;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rmfw-sl-suggest-bg);
  border: 1px solid var(--rmfw-sl-suggest-border);
  border-radius: 10px;
  box-shadow: var(--rmfw-sl-suggest-shadow);
  max-height: var(--rmfw-sl-suggest-max-height);
  overflow-y: auto;
}

.rmfw-store-locator__radius-menu-item {
  margin: 0;
  padding: 0;
}

.rmfw-store-locator__radius-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: var(--rmfw-sl-text);
}

.rmfw-store-locator__radius-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 14px;
}

.rmfw-store-locator__radius-option:hover .rmfw-store-locator__radius-option-row,
.rmfw-store-locator__radius-option:focus-visible
  .rmfw-store-locator__radius-option-row {
  background: var(--rmfw-sl-accent);
  color: #ffffff;
}

.rmfw-store-locator__radius-option:hover[aria-selected="true"]
  .rmfw-store-locator__radius-option-text,
.rmfw-store-locator__radius-option:hover
  .rmfw-store-locator__radius-option-check {
  color: #ffffff;
}

.rmfw-store-locator__radius-option:focus-visible {
  outline: none;
}

.rmfw-store-locator__radius-option-text {
  flex: 1 1 auto;
  min-width: 0;
}

.rmfw-store-locator__radius-option-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__radius-option[aria-selected="true"]
  .rmfw-store-locator__radius-option-check {
  opacity: 1;
}

.rmfw-store-locator__radius-option[aria-selected="true"]
  .rmfw-store-locator__radius-option-text {
  font-weight: 600;
  color: var(--rmfw-sl-accent);
}

/* Reusable custom combobox (lib/combo-select.js) — shares the radius
 * selector's dark/accent theming so the type filter + sort dropdowns match
 * it (green hover, check mark, themed popup) instead of the OS-native option
 * list. The root reuses `.__input` for border/bg/height/radius; a context
 * class (`.__type-filter` / `.__sort`) supplies the flex sizing. */
.rmfw-store-locator__combo {
  position: relative;
  padding: 0;
}
.rmfw-store-locator__combo.is-open {
  border-color: var(--rmfw-sl-accent);
}
.rmfw-store-locator__combo:focus-within {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 1px;
  border-color: var(--rmfw-sl-accent);
}
.rmfw-store-locator__combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 38px;
  margin: 0;
  padding: 0 0.6rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: inherit;
}
.rmfw-store-locator__combo-trigger-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
}
.rmfw-store-locator__combo-trigger-label {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rmfw-store-locator__combo-trigger-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--rmfw-sl-text-secondary);
}
.rmfw-store-locator__combo-trigger-chevron-svg {
  display: block;
  transition: transform 0.2s ease;
}
.rmfw-store-locator__combo.is-open
  .rmfw-store-locator__combo-trigger-chevron-svg {
  transform: rotate(180deg);
}
.rmfw-store-locator__combo-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 25;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rmfw-sl-suggest-bg);
  border: 1px solid var(--rmfw-sl-suggest-border);
  border-radius: 10px;
  box-shadow: var(--rmfw-sl-suggest-shadow);
  max-height: var(--rmfw-sl-suggest-max-height);
  overflow-y: auto;
}
.rmfw-store-locator__combo-menu-item {
  margin: 0;
  padding: 0;
}
.rmfw-store-locator__combo-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__combo-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 14px;
}
.rmfw-store-locator__combo-option:hover .rmfw-store-locator__combo-option-row,
.rmfw-store-locator__combo-option:focus-visible
  .rmfw-store-locator__combo-option-row {
  background: var(--rmfw-sl-accent);
  color: #ffffff;
}
.rmfw-store-locator__combo-option:focus-visible {
  outline: none;
}
.rmfw-store-locator__combo-option-text {
  flex: 1 1 auto;
  min-width: 0;
}
.rmfw-store-locator__combo-option-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  color: var(--rmfw-sl-accent);
}
.rmfw-store-locator__combo-option[aria-selected="true"]
  .rmfw-store-locator__combo-option-check {
  opacity: 1;
}
.rmfw-store-locator__combo-option[aria-selected="true"]
  .rmfw-store-locator__combo-option-text {
  font-weight: 600;
  color: var(--rmfw-sl-accent);
}
/* On hover/focus the row turns accent — force the text + check white even
 * for the currently-selected option (whose text would otherwise stay accent
 * and read as low-contrast on the accent background). Placed last so it wins
 * over the aria-selected text colour at equal specificity. */
.rmfw-store-locator__combo-option:hover .rmfw-store-locator__combo-option-text,
.rmfw-store-locator__combo-option:focus-visible
  .rmfw-store-locator__combo-option-text,
.rmfw-store-locator__combo-option:hover
  .rmfw-store-locator__combo-option-check,
.rmfw-store-locator__combo-option:focus-visible
  .rmfw-store-locator__combo-option-check {
  color: #ffffff;
}

/* T6.2 — interactive retailer-type filter select. Inherits .__input
 * styling (border, radius, focus ring); flex is a little wider than
 * the radius select to give taxonomy labels breathing room. */
.rmfw-store-locator__type-filter {
  flex: 0 0 auto;
  min-width: 140px;
}

/* Mobile (≤767px) — compact search arrangement mirroring the `dark-rail`
 * template so the search section stays short and leaves more room for the map
 * + retailer list below. Input goes full width on its own line; the radius
 * select and type filter then share one 50/50 row (`calc(50% - 0.25rem)`
 * accounts for the 0.5rem search-row gap). Action buttons wrap below.
 *
 * Placed AFTER the base `.__input-wrap` / `.__radius-select` / `.__type-filter`
 * definitions above so it wins on equal specificity by source order. Uses
 * plain base selectors only: templates with their own search chrome
 * (dark-rail, overlay, distance-board) use higher-specificity `:is()` rules
 * and are unaffected. */
@media (max-width: 767px) {
  .rmfw-store-locator__input-wrap {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin-right: 0;
  }
  .rmfw-store-locator__radius-select,
  .rmfw-store-locator__type-filter {
    flex: 1 1 calc(50% - 0.25rem);
    width: auto;
    max-width: none;
    min-width: 0;
  }
}

.rmfw-store-locator__suggest-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rmfw-sl-suggest-bg);
  border: 1px solid var(--rmfw-sl-suggest-border);
  border-radius: 8px;
  box-shadow: var(--rmfw-sl-suggest-shadow);
  max-height: var(--rmfw-sl-suggest-max-height);
  overflow-y: auto;
}
.rmfw-store-locator__suggest-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__suggest-item:hover,
.rmfw-store-locator__suggest-item:focus-visible {
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}
.rmfw-store-locator__skip-link {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 6px 10px;
  background: var(--rmfw-sl-skip-bg);
  color: var(--rmfw-sl-text);
  border: 1px solid var(--rmfw-sl-skip-border);
  border-radius: 4px;
  z-index: 30;
  text-decoration: none;
}
.rmfw-store-locator__skip-link:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}
.rmfw-store-locator__search-error {
  font-size: 12px;
  margin-top: 8px;
}
.rmfw-store-locator__result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Empty / error / status bar (a11y live region). */
.rmfw-store-locator__status {
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--rmfw-sl-text-secondary);
  border-bottom: 1px solid var(--rmfw-sl-border);
  min-height: 38px;
}

/* T6.3 — sort row (select dropdown next to the result count).
 * Hidden until the list has ≥ 2 items; JS toggles `display: none`.
 * Sits between the status row and the list proper, sharing the
 * status row's border styling so the list chrome stays cohesive. */
.rmfw-store-locator__sort-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--rmfw-sl-divider);
}
/* `.__sort` is now the combo-select root (lib/combo-select.js): it carries
 * `.__input` (border/bg/height/radius) + `.__combo` (positioning/trigger),
 * so this rule only handles flex sizing within the sort row. */
.rmfw-store-locator__sort {
  flex: 1 1 auto;
  min-width: 0;
}

/* T8 — "Saved stores" toggle button in the sort row. Matches the
 * other search-chrome buttons dimensionally; fills when active to
 * signal the filter-on state. */
.rmfw-store-locator__saved-toggle {
  padding: 4px 10px;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-btn-radius);
  background: var(--rmfw-sl-input-bg);
  color: var(--rmfw-sl-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.rmfw-store-locator__saved-toggle:hover,
.rmfw-store-locator__saved-toggle:focus-visible {
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}
.rmfw-store-locator__saved-toggle:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 1px;
}
.rmfw-store-locator__saved-toggle.is-active {
  background: var(--rmfw-sl-accent);
  border-color: var(--rmfw-sl-accent);
  color: #ffffff;
}
.rmfw-store-locator__saved-toggle.is-active:hover,
.rmfw-store-locator__saved-toggle.is-active:focus-visible {
  background: var(--rmfw-sl-accent-hover);
  border-color: var(--rmfw-sl-accent-hover);
  color: #ffffff;
}

/* T8 — Heart button inside result cards. Transparent frame so the
 * icon reads as a soft affordance next to the badge + distance. The
 * filled state uses --rmfw-sl-danger since "favourite" reads as a red
 * heart everywhere; keeps themeability via the token. */
.rmfw-store-locator__favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rmfw-sl-text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}
.rmfw-store-locator__favorite svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.rmfw-store-locator__favorite:hover,
.rmfw-store-locator__favorite:focus-visible {
  color: var(--rmfw-sl-danger);
  background: rgba(220, 38, 38, 0.08);
  outline: none;
}
.rmfw-store-locator__favorite:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}
.rmfw-store-locator__favorite.is-favorite {
  color: var(--rmfw-sl-danger);
}
.rmfw-store-locator__favorite.is-favorite svg {
  fill: currentColor;
  stroke: currentColor;
}
.rmfw-store-locator__error {
  color: var(--rmfw-sl-danger);
}

/* Pagination / load-more. */
.rmfw-store-locator__more {
  display: flex;
  justify-content: center;
  padding: 0.75rem;
}

/* Hide until JS mounts. */
.rmfw-store-locator[data-mounted="true"] .rmfw-store-locator__loading {
  display: none;
}

/* -------------------------------------------------------------------------
   Marker popup (popup.js).

   Mounted inside `.rmfw-store-locator__map`, absolutely positioned and
   centered at the top. Width capped so it reads as a floating card rather
   than overlaying the whole map surface. Pointer events stay interactive
   so users can click the action links inside.
   ------------------------------------------------------------------------- */
.rmfw-store-locator__popup {
  position: absolute;
  z-index: 10;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 420px;
  overflow-y: auto;
  padding: 14px 16px 12px;
  background: var(--rmfw-sl-bg, #fff);
  color: var(--rmfw-sl-text, #151619);
  border: 1px solid var(--rmfw-sl-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.5;
  pointer-events: auto;

  /* Cần thêm để ::after hoạt động đúng */
  overflow: visible; /* ⚠️ bỏ overflow-y: auto nếu muốn tam giác hiển thị */
}

.rmfw-store-locator__popup::after {
  content: "";
  position: absolute;
  bottom: -10px; /* Nhô ra ngoài đáy */
  left: 50%; /* Căn giữa — đổi thành giá trị px nếu muốn lệch */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--rmfw-sl-bg, #fff);
  filter: drop-shadow(
    0 2px 1px rgba(0, 0, 0, 0.08)
  ); /* bóng nhẹ cho tam giác */
}

/* Khi popup lật xuống dưới pin, đặt tam giác lên trên và chĩa lên pin. */
.rmfw-store-locator__popup.rmfw-store-locator__popup--below::after {
  top: -10px;
  bottom: auto;
  border-top: 0;
  border-bottom: 10px solid var(--rmfw-sl-bg, #fff);
  filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.08));
}

.rmfw-store-locator__popup[aria-hidden="true"] {
  display: none;
}

.rmfw-store-locator__popup-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--rmfw-sl-text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.rmfw-store-locator__popup-close:hover,
.rmfw-store-locator__popup-close:focus-visible {
  color: var(--rmfw-sl-text);
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}

.rmfw-store-locator__popup-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-right: 26px; /* reserve space for close button */
}

.rmfw-store-locator__popup-logo {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: var(--rmfw-sl-card-bg-hover);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--rmfw-sl-border);
}

.rmfw-store-locator__popup-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rmfw-store-locator__popup-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__popup-title a {
  color: inherit;
  text-decoration: none;
}
.rmfw-store-locator__popup-title a:hover,
.rmfw-store-locator__popup-title a:focus-visible {
  color: var(--rmfw-sl-accent);
  text-decoration: underline;
}

.rmfw-store-locator__popup-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--rmfw-sl-text-secondary);
}

.rmfw-store-locator__popup-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rmfw-store-locator__popup-address {
  margin: 0;
  color: var(--rmfw-sl-text);
}

.rmfw-store-locator__popup-address-text {
  font-size: 13px;
}
/* Each contact line (phone, email) is its own `<p>` so they stack
 * vertically. Margin kept tight so the two rows read as a single
 * grouped block above the action buttons. */
.rmfw-store-locator__popup-contact {
  margin: 0;
  font-size: 12px;
  color: var(--rmfw-sl-text-secondary);
}
.rmfw-store-locator__popup-contact + .rmfw-store-locator__popup-contact {
  margin-top: 2px;
}

.rmfw-store-locator__popup-link {
  color: var(--rmfw-sl-accent);
  text-decoration: none;
  font-weight: 500;
}

.rmfw-store-locator__card-contact a:hover,
.rmfw-store-locator__card-contact a:hover svg,
.rmfw-store-locator__popup-link:hover,
.rmfw-store-locator__popup-link:hover svg,
.rmfw-store-locator__popup-link:focus-visible {
  color: var(--rmfw-sl-accent-hover);
  text-decoration: underline;
}

/* Inline icons next to address / phone / email — mirror the result-card
 * iconography. Address uses the muted text colour to sit on top of the
 * paragraph baseline, phone/email pick up --rmfw-sl-accent so they read
 * as actionable links even before hover. */
.rmfw-store-locator__popup-address-icon {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  color: var(--rmfw-sl-text-secondary);
}

.rmfw-store-locator__popup-phone-icon,
.rmfw-store-locator__popup-email-icon {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.rmfw-store-locator__popup-action {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--rmfw-sl-border);
  background: var(--rmfw-sl-bg);
  color: var(--rmfw-sl-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}
.rmfw-store-locator__popup-action:hover,
.rmfw-store-locator__popup-action:focus-visible {
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}

.rmfw-store-locator__popup-action--primary {
  background: var(--rmfw-sl-accent);
  border-color: var(--rmfw-sl-accent);
  color: #ffffff;
}
.rmfw-store-locator__popup-action--primary:hover,
.rmfw-store-locator__popup-action--primary:focus-visible {
  background: var(--rmfw-sl-accent-hover);
  border-color: var(--rmfw-sl-accent-hover);
  color: #ffffff;
}

/* `position: relative` on .rmfw-store-locator__map is declared inline
 * at the top of this file together with the flex-column layout that
 * makes the inner `__map-canvas` fill the wrapper. */

/* -------------------------------------------------------------------------
   T4.3 — "Showing products from X" banner on the WooCommerce shop
   archive. Not scoped under .rmfw-store-locator because it renders
   outside the locator (`woocommerce_before_shop_loop` hook). Uses
   conservative styling that won't clash with themes; fonts and line-
   height inherit from the theme's shop area.
   ------------------------------------------------------------------------- */
.rmfw-retailer-products-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1e3a8a;
  font-size: 14px;
}
.rmfw-retailer-products-banner strong {
  font-weight: 600;
}
.rmfw-retailer-products-banner__clear {
  color: #1e3a8a;
  text-decoration: underline;
  font-weight: 500;
}
.rmfw-retailer-products-banner__clear:hover,
.rmfw-retailer-products-banner__clear:focus-visible {
  color: #1e40af;
  text-decoration: underline;
}

/* >>> DARK RAIL START -----------------------------------------------------
 * Template `dark-rail` — dark control rail (search + result list) on the
 * left, light map on the right. CSS-only (no JS chrome). Scoped to both the
 * data-attr and the class mirror so it survives data-* stripping and is
 * multi-instance safe. To remove the whole template, delete everything
 * between the START/END markers + the `--rmfw-sl-rail-width` :root token +
 * the dark_rail entry in Templates.php (see docs/TEMPLATE_DARK_RAIL_PLAN.md).
 * ------------------------------------------------------------------------ */

/* Dark backdrop. Painted on BOTH the container and the inner root so the
 * dark fill always reaches the bottom of the box — if the grid content is
 * shorter than the container (e.g. only a few retailers), the container's
 * solid dark base shows through instead of a light gap. The map area paints
 * its own light background over its column, so only the rail reads as dark. */
.rmfw-store-locator[data-template="dark-rail"],
.rmfw-store-locator--template-dark-rail {
  background-color: #08111f;
}
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__root {
  background:
    radial-gradient(circle at 20% 0%, rgba(79, 124, 255, 0.22), transparent 30%),
    linear-gradient(180deg, var(--rmfw-sl-bg), #08111f);
}

/* Dark Rail honours the Layout control (it is NOT coerced to split in PHP,
 * unlike Overlay). Each layout gets its own grid:
 *   - split     → rail (search + list) on the left, map on the right
 *   - map-only  → search on top, map fills the rest (no list)
 *   - list-only → dark rail only (search + list), no map
 * Rules are scoped to the resolved data-layout so a "Map only" selection in
 * the admin actually hides the list. */

/* ---- split: signature rail | map ---- */
/* Mobile-first (< 1024px): stack with the map on top. */
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__root[data-layout="split"] {
  grid-template-columns: 1fr;
  /* Stacked (narrow) split: cap the map so the retailer list keeps a
   * comfortable, scrollable area below it instead of being squeezed into a
   * thin strip. List row is `minmax(200px, 1fr)` so it always gets usable
   * height and grows to fill the container. */
  /* Track mins are 0 so the grid never forces itself taller than the
   * container (which would spill the list below the dark backdrop and show a
   * light gap). The map keeps a 36vh cap; the list takes the rest as `1fr`
   * and scrolls internally. */
  grid-template-rows: auto minmax(0, 36vh) minmax(0, 1fr);
  grid-template-areas:
    "search"
    "map"
    "list";
}

/* Dark-rail — mobile list-collapse override for the shared `is-list-collapsed`
 * toggle (mobile-toggles.js). The stacked split grid above out-specifies the
 * shared collapse rule (`:is(...) .__root[data-layout]` = 0,4,0 vs the shared
 * 0,3,0), so restate the collapsed grid with the dark-rail scope (0,5,0) to
 * give the map the flexible `1fr` track and shrink the list track to `auto`
 * (just the sticky toggle; the list itself is hidden by the shared rule).
 * Mobile-only, matching where the toggle buttons are revealed (≤767px). */
@media (max-width: 767px) {
  :is(
      .rmfw-store-locator[data-template="dark-rail"],
      .rmfw-store-locator--template-dark-rail
    )
    .rmfw-store-locator__root.is-list-collapsed[data-layout="split"] {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
}
/* Desktop (≥ 1024px): rail (~40%) on the left, map filling the right column. */
@media (min-width: 1024px) {
  :is(
    .rmfw-store-locator[data-template="dark-rail"],
    .rmfw-store-locator--template-dark-rail
  )
    .rmfw-store-locator__root[data-layout="split"] {
    grid-template-columns: var(--rmfw-sl-rail-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "search map"
      "list   map";
  }
}

/* ---- map-only: search on top, map fills; no rail list ---- */
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__root[data-layout="map-only"] {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "search"
    "map";
}

/* ---- list-only: dark rail only, no map ---- */
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__root[data-layout="list-only"] {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "search"
    "list";
}

/* Rail items: transparent so the root gradient shows; drop the base list
 * border-right (the colour contrast against the light map is the divider). */
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__list {
  border-right: 0;
  min-height: 0;
}

/* Let the map shrink to its grid track — the base `min-height: 320px` would
 * otherwise force the map taller than a small track (e.g. 36vh on short
 * screens) and overflow the container, leaving the list without a backdrop. */
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__map {
  min-height: 0;
}

/* Search input spans the full rail width — override the base 400px cap on
 * `.__input-wrap` so the address field fills the dark rail. */
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__input-wrap {
  width: 100%;
  max-width: none;
  flex-basis: 100%;
  margin-right: 0;
}

/* Radius + type filter share one row (each ~50%) instead of each taking a
 * full line. The base `.__input` sets `width: 100%`, which — combined with
 * the stacked variant's `flex: 0 0 auto` — makes every control claim its
 * own line; here we hand control back to flex-basis so the two sit side by
 * side. `calc(50% - 0.25rem)` accounts for the 0.5rem search-row gap so both
 * fit on the line and the action buttons wrap below. */
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__radius-select,
:is(
  .rmfw-store-locator[data-template="dark-rail"],
  .rmfw-store-locator--template-dark-rail
)
  .rmfw-store-locator__type-filter {
  flex: 1 1 calc(50% - 0.25rem);
  width: auto;
  max-width: none;
  min-width: 0;
}

/* <<< DARK RAIL END ------------------------------------------------------ */