/* IGNITE Store Locator (own-map Storepoint replacement)
 * Design language: matches the LIVE ignitefiringsystems.com shell -- Anton display
 * + AvenirNext body, neutral white/#FBFBFB surfaces, #212121 ink, and the site's
 * own #CE38F3 brand violet as the single accent. Colour is spent on the MAP (pins
 * + clusters), not on the surfaces, so the widget reads as part of the page.
 * Page chrome (header/footer) comes from the site; this styles only the widget.
 *
 * 2026-08-05 de-beige pass: the previous palette was lifted from the summer-2026
 * EMAIL kit (warm paper #FFF9F4/#F4ECE6, rose #E91E8C, indigo #7C3AED). The site
 * itself is cool neutral white with a brighter violet, so the widget read as a
 * sepia island. Surfaces neutralised; accent re-pointed at the real brand colour. */

#ignite-locator {
  /* accent = sampled from the live site (nav/logo/CTA): rgb(206,56,243) */
  --il-accent: #CE38F3;        /* fills, borders, active states           */
  --il-accent-ink: #A21CC9;    /* accent TEXT on white -- 5.9:1, AA pass  */
  --il-accent-deep: #8A18B0;   /* hover fill -- white on it is 7.4:1      */
  --il-accent-glow: #EFA6FF;   /* focus ring                              */
  /* the map keeps a warm pin so single stores pop against a neutral basemap */
  --il-pin: #E91E8C;
  --il-ink: #212121;           /* site body ink                           */
  --il-ink-muted: #6B6B6B;     /* neutral grey (was warm #6B5560)         */
  --il-green: #15803D;
  --il-surface: #FFFFFF;       /* site body background                    */
  --il-panel: #FBFBFB;         /* site panel/section background           */
  --il-panel-active: #FCF4FE;  /* faintest accent tint for the active card */
  --il-hairline: #E4E4E4;      /* neutral hairline (was pink #E7D9E0)     */
  font-family: 'AvenirNext', -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--il-ink);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

#ignite-locator *, #ignite-locator *::before, #ignite-locator *::after { box-sizing: border-box; }

/* Defensive resets: the host site's global CSS (Bootstrap-era) sets inputs and
 * selects to width:100%/display:block, which stacks the controls bar. Scope
 * hard wins to the widget so page CSS can't reshape it. */
#ignite-locator .il-radius,
#ignite-locator .il-chip,
#ignite-locator .il-locate,
#ignite-locator .il-clear,
#ignite-locator .il-email,
#ignite-locator .il-go {
  width: auto !important;
  display: inline-flex !important;
  margin: 0 !important;
}
#ignite-locator .il-radius { display: inline-block !important; }
#ignite-locator .il-search {
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  height: auto !important;
}

/* 2026-08-05: the reset above only claimed layout, so the host's global
 * `input[type="text"] { border:1px solid #ccc; border-radius:0; padding:8px;
 * font-size:14px }` still won every VISUAL property -- the pill rendered as a
 * square grey box with the placeholder jammed against the left edge. Claim the
 * appearance properties too. Verified live on /find_retailer 2026-08-05:
 * computed radius was 0px and padding 8px against an intended 999px / 11px 18px. */
#ignite-locator .il-search,
#ignite-locator .il-radius,
#ignite-locator .il-go,
#ignite-locator .il-chip,
#ignite-locator .il-clear,
#ignite-locator .il-email,
#ignite-locator .il-locate {
  font-family: inherit !important;
  line-height: normal !important;
  box-shadow: none !important;
  min-height: 0 !important;
  max-width: none !important;
}
/* .il-radius included ON PURPOSE (reverses the 8/5 note that kept it native):
 * the host site sets `select { appearance: none }` GLOBALLY (measured live on
 * /tnt 2026-08-06), so the native arrow is already gone on the storefront and
 * the radius pill read as a dead button. Own the appearance everywhere and
 * draw our own chevron (background SVG on .il-radius below) -- deterministic
 * across hosts instead of hoping the native arrow survives. */
#ignite-locator .il-search,
#ignite-locator .il-go,
#ignite-locator .il-chip,
#ignite-locator .il-radius,
#ignite-locator .il-clear,
#ignite-locator .il-locate {
  -webkit-appearance: none;
  appearance: none;
}
/* 2026-08-06: the TNT page's own stylesheet declares `.content-tnt-area a
 * { color: #FFD720 !important }` (measured live on /tnt preview) -- at
 * specificity (0,1,1) it beats our single-class link rules even with
 * !important, which painted the popup's Directions label yellow-on-yellow.
 * Claim every link-colored element at ID specificity so no host anchor rule
 * can repaint it. */
#ignite-locator .il-btn { color: var(--il-surface) !important; }
#ignite-locator .il-btn-ghost { color: var(--il-accent-ink) !important; }
#ignite-locator .il-pop-link { color: var(--il-accent-ink) !important; }
#ignite-locator .il-social { color: var(--il-ink) !important; }
#ignite-locator .il-search {
  border: 2px solid var(--il-hairline) !important;
  border-right: 0 !important;
  border-radius: 999px 0 0 999px !important;
  padding: 11px 18px !important;
  font-size: 15px !important;
  background: var(--il-surface) !important;
  color: var(--il-ink) !important;
}
#ignite-locator .il-search:focus { border-color: var(--il-accent) !important; }
/* The clear control is a flex sibling INSIDE the pill, not an absolutely
 * positioned overlay: the Search button's width is font-dependent, so any
 * hard-coded right offset would drift on the TNT skin. It carries the input's
 * own top/bottom border so the pill reads as one control, and :focus-within
 * recolours both halves together (a :focus rule on the input alone left a
 * hairline seam mid-pill). */
#ignite-locator .il-clear {
  border: 2px solid var(--il-hairline) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  /* MEASURED at a 390px viewport: the x costs the input its own width, and in
   * area/cluster scope the box is EMPTY while the x is showing -- so the
   * placeholder has to survive alongside it. At 12px padding / 18px glyph the
   * button is 36px and the placeholder overruns by 4px; at 8px / 17px it is
   * 28px and clears by 5px, plus 6px more from the mobile rule below. */
  padding: 0 8px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--il-surface) !important;
  color: var(--il-ink-muted) !important;
  cursor: pointer;
}
#ignite-locator .il-clear:hover,
#ignite-locator .il-clear:focus-visible { color: var(--il-ink) !important; }
/* The host site's Bootstrap-era CSS has no [hidden] rule, and our own
 * display:inline-flex !important above would beat the UA one if it did. */
#ignite-locator .il-clear[hidden] { display: none !important; }
#ignite-locator .il-search-wrap:focus-within .il-search,
#ignite-locator .il-search-wrap:focus-within .il-clear {
  border-color: var(--il-accent) !important;
}
/* The Email control is a <button> for semantics (it reveals an address, it does
 * not navigate) but must read as the sibling of the phone/website links beside
 * it. Strip the button chrome the host site and the UA both apply. */
#ignite-locator .il-email {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  color: var(--il-accent-ink) !important;
  cursor: pointer;
  text-align: left !important;
}
#ignite-locator .il-email:disabled { opacity: .6 !important; cursor: default; }

/* A disabled radius select must LOOK unavailable, not merely refuse clicks. */
#ignite-locator .il-radius:disabled {
  opacity: .5 !important;
  cursor: not-allowed;
}
#ignite-locator .il-go {
  border: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  /* 2026-08-05: the defensive reset above forces display:inline-flex, so the
   * button stretches to the input's height but its label rendered at the TOP of
   * that box -- .il-locate and .il-chip declare align-items:center in their own
   * rules and .il-go never did. Centre the label on both axes. */
  align-items: center !important;
  justify-content: center !important;
}
#ignite-locator .il-radius {
  border: 2px solid var(--il-hairline) !important;
  border-radius: 999px !important;
  /* right padding clears the drawn chevron */
  padding: 9px 34px 9px 14px !important;
  font-size: 14px !important;
  background-color: var(--il-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23212121' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 10px 6px !important;
  color: var(--il-ink) !important;
}

.il-disp {
  font-family: 'Anton', 'Arial Narrow', 'Helvetica Neue Condensed', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 400;
}

/* ---- controls bar ---- */
.il-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--il-panel);
  border: 1px solid var(--il-hairline);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}
/* border-radius here does NOT paint anything -- the wrapper has no background or
 * border of its own. It exists so the :focus-within OUTLINE below traces the
 * pill's shape instead of a rectangle around it. Safe for .il-suggest: that
 * child is position:absolute, so it never enters this element's border box, and
 * there is no overflow rule here to clip it. */
.il-search-wrap { display: flex; flex: 1 1 260px; min-width: 220px; position: relative; border-radius: 999px; }

/* ---- typeahead dropdown (anchored under the search pill) ---- */
.il-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;               /* above the map + its controls */
  background: var(--il-surface);
  border: 1px solid var(--il-hairline);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.il-suggest[hidden] { display: none; }
.il-suggest-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--il-ink-muted);
  padding: 6px 10px 2px;
}
.il-suggest-opt {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  color: var(--il-ink);
}
.il-suggest-opt:hover, .il-suggest-opt[aria-selected="true"] { background: var(--il-panel-active); }
/* "6 of 59" sits in the group header, quiet, right-aligned against it. */
.il-suggest-count {
  float: right;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--il-ink-muted);
}
/* The door out of the cap: reads as an action, not another retailer, and is
   PINNED to the bottom of the scroller. Sitting it at the natural end of the
   list put it below the 320px fold, so the reader had to scroll to find the
   control that exists precisely so they do not have to. */
#ignite-locator .il-suggest-all {
  position: sticky;
  bottom: -6px;                    /* cancels the container's 6px padding */
  background: var(--il-surface);
  border-top: 1px solid var(--il-hairline);
  margin-top: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--il-accent-ink);
  font-weight: 800;
}
#ignite-locator .il-suggest-all .il-suggest-main { font-weight: 800; }
.il-suggest-main { font-weight: 700; min-width: 0; }
.il-suggest-sub {
  margin-left: auto;
  padding-left: 10px;
  font-size: 12.5px;
  color: var(--il-ink-muted);
  white-space: nowrap;
}
.il-search {
  flex: 1;
  border: 2px solid var(--il-hairline);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  padding: 11px 18px;
  font: inherit;
  font-size: 15px;
  color: var(--il-ink);
  background: var(--il-surface);
  outline: none;
  min-width: 0;
}
.il-search:focus { border-color: var(--il-accent); }
.il-search::placeholder { color: var(--il-ink-muted); }
/* Payload-level disclosures (dealers with no coordinates, a stale feed). Quiet
 * by design: they qualify the count beside them, they do not compete with it. */
.il-feed-note { color: var(--il-ink-muted); }
.il-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: var(--il-accent);
  color: var(--il-surface);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 0 22px;
  cursor: pointer;
}
.il-go:hover, .il-go:focus-visible { background: var(--il-accent-ink); }
.il-locate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--il-accent);
  border-radius: 999px;
  background: var(--il-panel);
  color: var(--il-accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
}
.il-locate:hover, .il-locate:focus-visible { background: var(--il-panel-active); border-color: var(--il-accent); }
.il-radius {
  border: 2px solid var(--il-hairline);
  border-radius: 999px;
  background-color: var(--il-surface);
  color: var(--il-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 34px 9px 14px;   /* chevron clearance; drawn in the defensive rule above */
  cursor: pointer;
}
.il-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--il-hairline);
  border-radius: 999px;
  background: var(--il-surface);
  color: var(--il-ink-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
}
.il-chip[aria-pressed="true"] {
  background: var(--il-accent);
  border-color: var(--il-accent);
  color: var(--il-surface);
}
.il-chip:focus-visible, .il-radius:focus-visible {
  outline: 3px solid var(--il-accent-glow);
  outline-offset: 1px;
}
/* The focus ring belongs to the PILL, not the input. .il-search is only the
 * left third of the control (border-radius 999px 0 0 999px), so an outline on
 * it traced that shape faithfully and died mid-pill -- rounded on the left,
 * sheared flat on the right where the x and Search button carry on. Correct
 * when the input WAS the whole bar; wrong since v11 split it into three
 * segments. Reported 2026-08-25: "it kinda looks goofy".
 *
 * :focus-within, not :has(.il-search:focus-visible) -- it matches the sibling
 * rule already governing this pill's border colours, so both halves of the
 * focus treatment key off the same condition and cannot drift. A text input is
 * always :focus-visible on click, so pointer users keep the ring they have now;
 * the x and Search button now light it too, which is right -- they are the same
 * control. */
.il-search-wrap:focus-within {
  outline: 3px solid var(--il-accent-glow);
  outline-offset: 1px;
}

/* ---- status line ---- */
.il-status {
  font-size: 14px;
  font-weight: 700;
  color: var(--il-ink-muted);
  margin: 0 4px 10px;
  min-height: 20px;
}
.il-status strong { color: var(--il-accent-ink); }

/* ---- layout ---- */
.il-body { display: flex; gap: 14px; align-items: stretch; }
.il-list {
  flex: 0 0 360px;
  max-height: 640px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px;
  scrollbar-width: thin;
}
.il-map-wrap { flex: 1 1 auto; position: relative; min-width: 0; }
/* "Search this area" floats over the map, centred at the top. Var-driven so
   the TNT skin re-themes it with everything else. */
#ignite-locator .il-area {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  border: 1px solid var(--il-hairline);
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--il-surface);
  color: var(--il-ink) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
#ignite-locator .il-area:hover { background: var(--il-panel-active); }
#ignite-locator .il-area[hidden] { display: none; }
#il-map {
  width: 100%;
  height: 640px;
  border-radius: 16px;
  border: 1px solid var(--il-hairline);
  overflow: hidden;
  background: var(--il-panel);
}

/* ---- dealer cards ---- */
.il-card {
  display: flex;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--il-panel);
  border: 1px solid var(--il-hairline);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.il-card:hover { border-color: var(--il-accent-glow); }
.il-card:focus-visible { outline: 3px solid var(--il-accent-glow); outline-offset: 1px; }
.il-card.il-active {
  border-color: var(--il-accent);
  box-shadow: 0 0 0 2px rgba(206, 56, 243, .18);
  background: var(--il-panel-active);
}
.il-logo {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--il-hairline);
  background: var(--il-surface) center/contain no-repeat;
  object-fit: contain;   /* logo imgs; harmless on the span fallback */
  padding: 3px;
}
.il-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--il-accent);
  font-size: 22px;
}
.il-card-main { flex: 1 1 auto; min-width: 0; }
.il-card-name { display: block; font-weight: 800; font-size: 15px; margin: 0 0 2px; color: var(--il-ink); }
.il-card-addr { display: block; font-size: 13px; color: var(--il-ink-muted); margin: 0; }
.il-card-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; align-items: center; }
.il-dist {
  font-size: 12px;
  font-weight: 800;
  color: var(--il-accent-ink);
  white-space: nowrap;
}
.il-open { font-size: 12px; font-weight: 700; color: var(--il-green); }
.il-badge-glow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--il-surface);
  background: var(--il-accent);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.il-badge-shows {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #9A5B00;
  background: rgba(247, 168, 35, .18);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

/* ---- card CTAs ---- */
/* Link colors claimed at ID specificity: see the host-anchor note above the
 * defensive block (`.content-tnt-area a` carries !important). */
.il-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
#ignite-locator .il-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--il-accent);
  border-radius: 999px;
  background: var(--il-panel);
  color: var(--il-accent-ink) !important;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 6px 13px;
  text-decoration: none !important;
  white-space: nowrap;
}
#ignite-locator .il-card-cta:hover,
#ignite-locator .il-card-cta:focus-visible { background: var(--il-panel-active); }
#ignite-locator .il-card-cta:focus-visible { outline: 3px solid var(--il-accent-glow); outline-offset: 1px; }
#ignite-locator .il-card-cta-primary {
  background: var(--il-accent);
  border-color: var(--il-accent);
  color: var(--il-surface) !important;
}
#ignite-locator .il-card-cta-primary:hover,
#ignite-locator .il-card-cta-primary:focus-visible {
  background: var(--il-accent-deep);
  border-color: var(--il-accent-deep);
}

/* ---- never-zero fallback note ---- */
/* The list always states where it ends: either the page position or an
   explicit "showing all N". A silent slice is what made the directory look
   like it stopped at Brumbaugh Fireworks. */
.il-list-foot {
  padding: 14px 4px 4px;
  text-align: center;
  position: relative;   /* contains the visually-hidden auto-load button */
}
/* Zero-height tripwire at the end of the list. An IntersectionObserver rooted
   on .il-list (not the viewport) with 200px of lead fires the next page before
   the reader reaches the end. */
.il-sentinel { height: 1px; margin-top: -1px; }
.il-list-count {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--il-ink-muted);
}
.il-list-count b { color: var(--il-ink); }
#ignite-locator .il-more {
  border: 1px solid var(--il-hairline);
  border-radius: 999px;
  padding: 10px 20px;
  background: var(--il-surface);
  color: var(--il-accent-ink) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
#ignite-locator .il-more:hover {
  background: var(--il-accent-deep);
  color: var(--il-surface) !important;
  border-color: var(--il-accent-deep);
}
/* With auto-load armed the button is the KEYBOARD and screen-reader control,
   not something a sighted mouse user should have to find and click. It stays
   in the DOM and in the tab order, and becomes visible the moment it takes
   focus. Without IntersectionObserver the class is never applied and the
   button renders exactly as it did before. */
#ignite-locator .il-more-auto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#ignite-locator .il-more-auto:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 20px;
  border: 1px solid var(--il-hairline);
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Escape hatch from any narrowed scope, shown in the status line. */
#ignite-locator .il-clear-scope {
  border: 0;
  padding: 0;
  margin-left: 6px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--il-accent-ink) !important;
  text-decoration: underline;
  cursor: pointer;
}

/* Offered after a name search that also matches a place name. */
#ignite-locator .il-place-chip {
  border: 1px solid var(--il-hairline);
  border-radius: 999px;
  padding: 4px 12px;
  margin-left: 4px;
  background: var(--il-panel);
  color: var(--il-accent-ink) !important;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
}
#ignite-locator .il-place-chip:hover { background: var(--il-panel-active); }

/* Members of a cluster that cannot zoom apart (co-located dealers). */
.il-pop-multi-head {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--il-ink);
}
#ignite-locator .il-pop-multi-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--il-hairline);
  padding: 9px 2px;
  background: none;
  font: inherit;
  cursor: pointer;
}
#ignite-locator .il-pop-multi-item:hover { background: var(--il-panel-active); }
.il-pop-multi-name {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--il-accent-ink);
}
.il-pop-multi-addr {
  display: block;
  font-size: 12px;
  color: var(--il-ink-muted);
}

.il-fallback-note {
  background: var(--il-panel-active);
  border: 1px solid var(--il-hairline);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--il-ink);
}
.il-fallback-note p { margin: 0 0 8px; }
.il-fallback-note b { color: var(--il-accent-ink); }
#ignite-locator .il-fallback-show-all {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--il-accent-ink) !important;
  text-decoration: underline;
  cursor: pointer;
}
#ignite-locator .il-fallback-show-all:focus-visible { outline: 3px solid var(--il-accent-glow); outline-offset: 1px; }

/* ---- popup ---- */
#ignite-locator .maplibregl-popup-content {
  /* NOT `inherit`: the popup is a child of .maplibregl-map, and MapLibre's own
   * stylesheet sets a Helvetica Neue stack there -- so `inherit` silently
   * resolved to Helvetica Neue instead of the site face. Verified live
   * 2026-08-05 (computed popup font came back "Helvetica Neue"). State the
   * stack explicitly. */
  font-family: 'AvenirNext', -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border-radius: 14px;
  border: 1px solid var(--il-hairline);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
  padding: 14px 16px;
  color: var(--il-ink);
  background: var(--il-panel);
  max-width: 290px;
}
#ignite-locator .maplibregl-popup-close-button {
  font-size: 18px;
  color: var(--il-ink-muted);
  right: 6px;
  top: 4px;
}
.il-pop-head { display: flex; gap: 10px; align-items: flex-start; margin: 0 14px 6px 0; }
.il-pop-logo {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  border: 1px solid var(--il-hairline);
  background: var(--il-surface);
  object-fit: contain;
  padding: 2px;
}
.il-pop-head-text { flex: 1 1 auto; min-width: 0; }
.il-pop-name { font-weight: 800; font-size: 15px; margin: 0 0 3px; }
.il-pop-addr { font-size: 13px; color: var(--il-ink-muted); margin: 0; }
.il-pop-hours { font-size: 12.5px; color: var(--il-ink-muted); margin: 0 0 6px; }
.il-pop-hours b { color: var(--il-green); font-weight: 800; }
.il-pop-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 10px;
  font-size: 13px;
}
.il-pop-link {
  color: var(--il-accent-ink) !important;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}
.il-pop-link:hover { text-decoration: underline !important; }
/* Social row -- 57% of dealers carry at least one handle (audited 2026-08-05),
 * and the old Storepoint popup showed them, so dropping them would have been a
 * regression at cutover. Icon-only: the popup already carries phone + domain as
 * text, and three more text links would bury the Directions action. */
.il-pop-social {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  align-items: center;
}
.il-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 34/20 not 28/16: at 100% zoom the 16px glyphs read as unidentifiable
   * dots (preview pass, 2026-08-10) */
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid var(--il-hairline);
  background: var(--il-surface);
  /* full ink, not --il-ink-muted: at 16px inside a 28px circle the muted grey
   * washed out to "three grey dots" and you could not tell the platforms apart
   * (checked on the rendered popup 2026-08-05). Monochrome still keeps these
   * subordinate to the magenta Directions button. */
  color: var(--il-ink) !important;
  text-decoration: none !important;
  transition: color .15s, border-color .15s, background .15s;
}
.il-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.il-social:hover, .il-social:focus-visible {
  color: var(--il-accent-ink) !important;
  border-color: var(--il-accent);
  background: var(--il-panel-active);
}
.il-social:focus-visible { outline: 3px solid var(--il-accent-glow); outline-offset: 1px; }

.il-pop-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.il-btn {
  display: inline-block;
  border-radius: 999px;
  background: var(--il-accent);
  color: var(--il-surface) !important;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 7px 14px;
  text-decoration: none !important;
  border: 2px solid var(--il-accent);
}
.il-btn:hover { background: var(--il-accent-ink); border-color: var(--il-accent-ink); }
.il-btn-ghost {
  background: var(--il-panel);
  color: var(--il-accent-ink) !important;
  border: 2px solid var(--il-accent);
}
.il-btn-ghost:hover { background: var(--il-panel-active); }
/* GLOW "Build a show" sits next to Directions in the popup -- it must stay
 * DISTINGUISHABLE from it. Pre-de-beige that was magenta vs indigo; now both
 * live in one accent family, so the GLOW action takes the deep tone. */
.il-btn-violet { background: var(--il-accent-deep); border-color: var(--il-accent-deep); }
.il-btn-violet:hover { background: #6F0F8E; border-color: #6F0F8E; }

/* ---- empty / error panels ---- */
.il-empty {
  background: var(--il-panel-active);
  border: 1px solid var(--il-hairline);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
}
.il-empty p { margin: 0 0 12px; font-size: 14.5px; color: var(--il-ink); }
.il-reset {
  border: 0;
  border-radius: 999px;
  background: var(--il-accent);
  color: var(--il-surface);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 22px;
  cursor: pointer;
}
.il-reset:hover { background: var(--il-accent-ink); }

/* ---- map attribution ---- */
/* Required by OpenStreetMap licensing -- it must stay VISIBLE, but it must
 * also be READABLE: the TNT host's `.content-tnt-area a` !important repaints
 * MapLibre's links yellow on the white bar (same host-anchor landmine as the
 * popup buttons). Claim it at ID specificity; the TNT skin gets a dark bar. */
#ignite-locator .maplibregl-ctrl-attrib { font-size: 11px; }
#ignite-locator .maplibregl-ctrl-attrib,
#ignite-locator .maplibregl-ctrl-attrib a { color: #333333 !important; }
#ignite-locator .maplibregl-ctrl-attrib a:hover { color: #111111 !important; text-decoration: underline; }

/* ---- map pins ---- */
.il-pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--il-pin);
  border: 2.5px solid var(--il-surface);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .30);
  cursor: pointer;
}
.il-pin::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--il-surface);
}
.il-pin.il-pin-active { background: var(--il-accent); }

/* ---- mobile ---- */
@media (max-width: 860px) {
  .il-body { flex-direction: column; }
  .il-list { flex: 1 1 auto; order: 2; max-height: 420px; }
  .il-map-wrap { order: 1; }
  #il-map { height: 420px; }
  .il-controls { padding: 12px; }
  /* Buys back 6px of placeholder room where it is scarcest. The input's text is
   * left-aligned, so trimming the RIGHT pad is invisible until it is needed. */
  #ignite-locator .il-search { padding-right: 12px !important; }
}

/* ==== TNT theme (opt-in via data-theme="tnt" on the embed div) ====
 * The /tnt page shell is PURE BLACK with TNT yellow accents (measured live
 * 2026-08-06: section bg #000, .yellow heading = #FFD720, body ink white) --
 * the default light skin read as a pasted-in white island there. Everything
 * var-driven re-themes in the first block; the hard-coded colours (active-card
 * ring, shows badge, popup tip/shadow, GLOW button) get explicit overrides.
 * MAP paint colours (clusters/pins) are MapLibre paint props set in JS -- they
 * live in locator.js's THEMES table, not here. Default IGNITE skin untouched. */
#ignite-locator[data-theme="tnt"] {
  --il-accent: #FFD720;         /* the page's own .yellow                    */
  --il-accent-ink: #FFD720;     /* accent TEXT on dark panels -- 12.7:1 AAA  */
  --il-accent-deep: #E8C200;    /* hover fill -- black text on it is 10.4:1  */
  --il-accent-glow: rgba(255, 215, 32, .45);
  --il-pin: #EE1C25;            /* TNT red (legacy teardrop class)           */
  --il-ink: #FFFFFF;
  --il-ink-muted: #B9B9B9;
  --il-green: #4ADE80;          /* open-hours green readable on dark         */
  --il-surface: #000000;        /* page bg; also .il-go/.il-btn TEXT colour,
                                   so yellow buttons get black labels        */
  --il-panel: #141414;
  --il-panel-active: #221C04;   /* faint yellow-tinted dark for active card  */
  --il-hairline: #2F2F2F;
}
/* Hover fills: the base rules hover into --il-accent-ink, but on this skin
 * accent-ink == accent (both the page yellow), so hovers gave no feedback.
 * Deep gold keeps the black labels at 10.4:1. Placed BEFORE the .il-btn-violet
 * overrides so the violet (GLOW) hover, at equal specificity, still wins. */
#ignite-locator[data-theme="tnt"] .il-go:hover,
#ignite-locator[data-theme="tnt"] .il-go:focus-visible,
#ignite-locator[data-theme="tnt"] .il-reset:hover { background: var(--il-accent-deep); }
#ignite-locator[data-theme="tnt"] .il-btn:hover {
  background: var(--il-accent-deep);
  border-color: var(--il-accent-deep);
}
/* white chevron for the radius select on dark */
#ignite-locator[data-theme="tnt"] .il-radius {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
#ignite-locator[data-theme="tnt"] .il-card.il-active {
  box-shadow: 0 0 0 2px rgba(255, 215, 32, .25);
}
/* dealer logos are drawn for a white ground -- keep their wells white even
 * on the dark skin, or dark-ink transparent PNGs vanish */
#ignite-locator[data-theme="tnt"] .il-logo { background-color: #FFFFFF; }
#ignite-locator[data-theme="tnt"] .il-pop-logo { background: #FFFFFF; }
#ignite-locator[data-theme="tnt"] .il-logo-fallback { color: #141414; }
#ignite-locator[data-theme="tnt"] .il-badge-shows {
  color: #FFC85C;
  background: rgba(247, 168, 35, .16);
}
/* GLOW "Build a show": stays visually SECONDARY to the yellow Directions pill */
#ignite-locator[data-theme="tnt"] .il-btn-violet { background: #2F2F2F; border-color: #2F2F2F; color: #FFFFFF !important; }
#ignite-locator[data-theme="tnt"] .il-btn-violet:hover { background: #3D3D3D; border-color: #3D3D3D; }
#ignite-locator[data-theme="tnt"] .maplibregl-popup-content {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
/* MapLibre's popup tip is a CSS border triangle defaulting to white -- match
 * it to the dark panel on every anchor side */
#ignite-locator[data-theme="tnt"] .maplibregl-popup-anchor-top .maplibregl-popup-tip,
#ignite-locator[data-theme="tnt"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
#ignite-locator[data-theme="tnt"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #141414; }
#ignite-locator[data-theme="tnt"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
#ignite-locator[data-theme="tnt"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
#ignite-locator[data-theme="tnt"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #141414; }
#ignite-locator[data-theme="tnt"] .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #141414; }
#ignite-locator[data-theme="tnt"] .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #141414; }
/* attribution: dark bar, muted-light text, white on hover; the (i) toggle
 * icon is a black background-SVG, so invert it to read on the dark bar */
#ignite-locator[data-theme="tnt"] .maplibregl-ctrl-attrib { background: rgba(0, 0, 0, .78); }
#ignite-locator[data-theme="tnt"] .maplibregl-ctrl-attrib,
#ignite-locator[data-theme="tnt"] .maplibregl-ctrl-attrib a { color: #C9C9C9 !important; }
#ignite-locator[data-theme="tnt"] .maplibregl-ctrl-attrib a:hover { color: #FFFFFF !important; }
#ignite-locator[data-theme="tnt"] .maplibregl-ctrl-attrib-button { filter: invert(.85); }