/* ============================================================
   TED Digital - dealer finder (loads only where the block renders, after MapLibre's own CSS)
   Under the short hero (patterns/dealers-hero.php). Section one (white): the map as a card - a white frame with the search
   toolbar across its top and the stone-toned map inside - then a status line and the nearest five as cards. Section two
   (stone): "Browse all dealers" - name search + region select over the full A to Z list. A dealer's own page: a details
   card beside the map card (white), then three nearby dealers (stone).
   ============================================================ */
.stockist-map__head .section__title { max-width: 18ch; }
.stockist-map__lede { color: var(--ink-70); max-width: 48ch; }

/* The frame is a card: white padding all round, the toolbar on top, the stone-toned map in its own rounded well beneath */
.stockist-map__frame { position: relative; padding: var(--gap-sm); border-radius: var(--radius-lg); border: 1px solid var(--line-soft); background: var(--ted-white); }
.stockist-map__toolbar { display: flex; flex-wrap: wrap; gap: var(--gap-xs); align-items: stretch; margin-bottom: var(--gap-sm); background: var(--ted-white); }
.stockist-map__locate { flex: 0 0 auto; gap: var(--gap-2xs); padding-inline: var(--gap-sm); }
.stockist-map__locate .ted-icon { width: var(--icon-xs); height: var(--icon-xs); }
.stockist-map__fields { display: flex; flex: 1 1 320px; gap: var(--gap-xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.stockist-map__fields input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 var(--gap-sm); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--ted-white); color: var(--ink); font: inherit; }
.stockist-map__fields input:focus-visible { outline: 2px solid var(--ted-teal); outline-offset: 2px; }
.stockist-map__fields[disabled] { opacity: 0.6; }
.stockist-map__canvas { height: clamp(380px, 52vh, 600px); border-radius: var(--radius); overflow: hidden; background: var(--surface-warm); font-family: var(--font-body); }
/* Without script there is no map, no search and no nearest set: the whole first section goes, the browse section stands alone. */
html:not(.js) .stockist-map--finder, html:not(.js) .stockist-map__frame--single { display: none; }
/* Several of these carry a display of their own (.btn, .util-grid, .util-card): the hidden attribute must still win. */
.stockist-map [hidden], .stockist-browse [hidden], .stockist-nearby [hidden] { display: none !important; }   /* the nearby cards carry the same rank badge, hidden (30 Oct: it showed as a bare black dot) */
.maplibregl-map { font: inherit; }
.maplibregl-canvas:focus-visible { outline: 2px solid var(--ted-teal); outline-offset: -2px; }
.stockist-map__status { margin-top: var(--gap-xs); color: var(--ink-70); font-size: var(--text-sm); min-height: 1.5em; }

/* "You are here": a charcoal dot with a white ring */
.stockist-here { display: block; width: 18px; height: 18px; border-radius: var(--radius-circle); background: var(--ted-charcoal); border: 3px solid var(--ted-white); box-shadow: 0 0 0 1px var(--ted-charcoal); }

/* Pin popup in kit clothes */
.stockist-popup .maplibregl-popup-content { padding: var(--gap-sm); border-radius: var(--radius); box-shadow: 0 4px 24px rgba(10, 10, 10, 0.12); font: inherit; color: var(--ink); }
.stockist-popup .maplibregl-popup-close-button { font-size: 20px; width: 32px; height: 32px; color: var(--ink-70); }
.stockist-pop p { margin: 0; font-size: var(--text-sm); }
.stockist-pop__name { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 500; margin-bottom: var(--gap-3xs); }
.stockist-pop__links { margin-top: var(--gap-2xs); }
.stockist-pop a { color: var(--ink); }

/* The nearest five, under the map */
.stockist-map__nearest { margin-top: var(--gap-md); }
.stockist-map__nearest-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gap-xs); margin-bottom: var(--gap-sm); }
.stockist-map__results-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 500; margin: 0; }
.stockist-map__prompt { color: var(--ink-70); max-width: 60ch; }
.stockist-map__list--nearest { counter-reset: none; }
.stockist-card__rank { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-sm); height: var(--icon-sm); margin-right: var(--gap-2xs); border-radius: var(--radius-circle); background: var(--ted-black); color: var(--ted-white); font-size: var(--text-xs); letter-spacing: 0; vertical-align: middle; }
.stockist-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs) var(--gap-sm); margin-top: auto; padding-top: var(--gap-xs); }
.stockist-card__actions .btn--ghost { height: auto; font-size: var(--text-xs); }
.stockist-card__actions .stockist-card__show { margin-top: 0; padding-top: 0; }

/* The lists (nearest, browse, nearby) share the card */
.stockist-map__list { list-style: none; margin: 0; padding: 0; }
.stockist-card { position: relative; }
.stockist-card__name { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 500; margin: 0 0 var(--gap-3xs); letter-spacing: 0; text-transform: none; }
.stockist-card__name a { color: inherit; text-decoration: none; }
.stockist-card__name a:hover, .stockist-card__name a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.stockist-card__address { font-size: var(--text-sm); color: var(--ink-70); margin: 0; }
.stockist-card__contact { font-size: var(--text-sm); margin: var(--gap-2xs) 0 0; }
.stockist-card__contact a { color: var(--ink); }
.stockist-card__distance { margin: var(--gap-2xs) 0 0; font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.stockist-card__distance:empty { display: none; }
.stockist-card__show { margin-top: auto; padding: var(--gap-xs) 0 0; background: none; border: 0; color: var(--ink-70); font: inherit; font-size: var(--text-sm); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stockist-card__show:hover, .stockist-card__show:focus-visible { color: var(--ink); }
.stockist-card.is-near { border-color: var(--ted-teal); box-shadow: inset 0 0 0 1px var(--ted-teal); }
.stockist-card.is-current { border-color: var(--ted-charcoal); }
.stockist-map__empty { color: var(--ink-70); }
.stockist-map__more { margin-top: var(--gap-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); color: var(--ink-70); }
.stockist-map__reset { align-self: center; background: none; border: 0; padding: 0 var(--gap-xs); color: var(--ink-70); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stockist-map__reset:hover, .stockist-map__reset:focus-visible { color: var(--ink); }

/* Section two: browse */
.stockist-browse__filters { display: flex; flex-wrap: wrap; gap: var(--gap-xs); align-items: stretch; margin-top: var(--gap-md); }
.stockist-browse__name { flex: 1 1 320px; }
.stockist-map__region { flex: 0 1 280px; display: flex; min-width: 0; }
.stockist-map__region select { width: 100%; min-height: 52px; padding: 0 var(--gap-sm); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--ted-white); color: var(--ink); font: inherit; }
.stockist-map__region select:focus-visible { outline: 2px solid var(--ted-teal); outline-offset: 2px; }
.stockist-browse__count { margin: var(--gap-sm) 0; color: var(--ink-70); font-size: var(--text-sm); }

/* A dealer's own page: the details card beside the map card, on white */
.stockist-map__single { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gap-md); align-items: stretch; }
.stockist-map__details { padding: var(--gap-md); }
.stockist-map__address { margin-top: var(--gap-sm); color: var(--ink); }
.stockist-map__details .stockist-map__lede { margin-top: var(--gap-sm); font-size: var(--text-sm); }
.stockist-map__actions { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-top: var(--gap-md); }
.stockist-map__actions .btn { gap: var(--gap-2xs); }
.stockist-map__actions .ted-icon { width: var(--icon-xs); height: var(--icon-xs); }
.stockist-map__website { margin-top: var(--gap-sm); font-size: var(--text-sm); }
.stockist-map__website a { color: var(--ink); }
.stockist-map__back { margin-top: auto; padding-top: var(--gap-md); }
.stockist-map__frame--single { display: flex; flex-direction: column; min-height: 360px; }
.stockist-map__frame--single .stockist-map__canvas { flex: 1 1 auto; height: auto; min-height: 320px; }

/* MapLibre chrome in kit clothes */
.maplibregl-ctrl-group { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--line); }
.maplibregl-ctrl-group button { width: 36px; height: 36px; }
.maplibregl-ctrl-attrib { font-size: 11px; background: rgba(255, 255, 255, 0.75); color: var(--ink-50); }
.maplibregl-ctrl-attrib a { color: var(--ink-70); }

@media (max-width: 900px) {
  .stockist-map__single { grid-template-columns: 1fr; }
  .stockist-map__frame--single .stockist-map__canvas { height: 45vh; min-height: 320px; }
}
@media (max-width: 768px) {
  /* A phone: the map stays short enough that the first result shows beneath it; the toolbar stacks. */
  .stockist-map__canvas { height: 46vh; min-height: 300px; }
  .stockist-map__frame { padding: var(--gap-xs); }
  .stockist-map__toolbar { margin-bottom: var(--gap-xs); }
  .stockist-map__locate { flex-basis: 100%; justify-content: center; }
  .stockist-map__details { padding: var(--gap-sm); }
  .stockist-map__actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .stockist-map__fields { flex-wrap: wrap; }
  .stockist-map__fields .btn, .stockist-map__region { flex-basis: 100%; }
  .stockist-map__fields .btn { justify-content: center; }
}

/* Fixes from the 29 Oct review */
.stockist-map__reset:focus-visible { outline: 2px solid var(--ted-teal); outline-offset: 2px; }
html:not(.js) .stockist-browse__name { display: none; }   /* a name search that only the script can run is not offered without it */
.stockist-card__contact:empty { display: none; }