/* ─── List output ─────────────────────────────────────────────────── */
        .bmp-areas-grouped, .bmp-pills-grouped { display:flex; flex-direction:column; gap:14px; }
        .bmp-areas-heading { margin:0 0 6px; font-size:13px; font-weight:600; color:#666; text-transform:uppercase; letter-spacing:.4px; }
        .bmp-areas-list { margin:0; padding-left:20px; font-size:14px; line-height:1.6; }
        .bmp-areas-list li { margin:2px 0; }
        .bmp-areas-csv { font-size:14px; line-height:1.6; }
        a.bmp-area-link { color:#602276; text-decoration:none; border-bottom:1px solid rgba(96,34,118,.25); transition:border-color .15s ease; }
        a.bmp-area-link:hover { border-bottom-color:#602276; }

        /* ─── Pills ────────────────────────────────────────────────────────
           Linkable: coloured + arrow + hover-lift. Non-linkable: muted grey,
           no arrow. Different by shape so visitors instantly read which are
           clickable and which are just informational. */
        .bmp-pills-wrap { display:flex; flex-wrap:wrap; gap:6px; }

        /* Base pill geometry: fixed 28px height, padding leaves equal whitespace
           around the inner text and badge. Shape is set by a separate class on the
           wrap (.bmp-pills-shape-curved or .bmp-pills-shape-squared). */
        .bmp-pill {
            display:inline-flex; align-items:center;
            height:28px; box-sizing:border-box;
            padding:0 14px;
            gap:8px;
            font-size:13px; font-weight:500; line-height:1;
            white-space:nowrap; transition:all .15s ease;
            border:0.5px solid transparent;
        }
        .bmp-pill-name { display:inline-block; }
        .bmp-pill-arrow { display:inline-block; font-size:15px; line-height:1; opacity:.55; margin-right:-4px; transition:opacity .15s ease, transform .15s ease; }
        a.bmp-pill { text-decoration:none; cursor:pointer; }

        /* Shape variants — applied to the wrap so all child pills inherit. */
        .bmp-pills-shape-curved  .bmp-pill { border-radius:14px; }
        .bmp-pills-shape-squared .bmp-pill { border-radius:7px; }
        /* Default if no shape class set (back-compat for any direct .bmp-pill usage) */
        .bmp-pill { border-radius:14px; }

        /* Linkable pill colour variants */
        .bmp-pills-purple.bmp-pill-link { background:rgba(96,34,118,.08); color:#602276; border-color:rgba(96,34,118,.2); }
        .bmp-pills-pink.bmp-pill-link   { background:rgba(191,74,146,.08); color:#7a2e5e; border-color:rgba(191,74,146,.22); }
        .bmp-pills-grey.bmp-pill-link   { background:#f1f1f3; color:#444; border-color:#e0e0e3; }
        .bmp-pills-outline.bmp-pill-link { background:transparent; color:#602276; border-color:#602276; }

        /* Linkable pill hover / hot states (hot = synced from map hover) */
        .bmp-pill-link:hover, .bmp-pill-link.is-hot {
            transform:translateY(-1px);
            box-shadow:0 2px 8px rgba(96,34,118,.18);
        }
        .bmp-pills-purple.bmp-pill-link:hover, .bmp-pills-purple.bmp-pill-link.is-hot { background:#602276; color:#fff; border-color:#602276; }
        .bmp-pills-pink.bmp-pill-link:hover, .bmp-pills-pink.bmp-pill-link.is-hot { background:#bf4a92; color:#fff; border-color:#bf4a92; }
        .bmp-pills-grey.bmp-pill-link:hover, .bmp-pills-grey.bmp-pill-link.is-hot { background:#555; color:#fff; border-color:#555; }
        .bmp-pills-outline.bmp-pill-link:hover, .bmp-pills-outline.bmp-pill-link.is-hot { background:#602276; color:#fff; }
        .bmp-pill-link:hover .bmp-pill-arrow, .bmp-pill-link.is-hot .bmp-pill-arrow { opacity:1; transform:translateX(2px); }

        /* Non-linkable pill: soft tint of the active colour family so they
           harmonise with the linkable pills rather than reading dishwater grey.
           Same geometry as linkable pills — only the fill differs. */
        .bmp-pill-nolink {
            background:rgba(96,34,118,.04);
            color:#5f5278;
            border-color:rgba(96,34,118,.12);
        }
        .bmp-pill-nolink:hover, .bmp-pill-nolink.is-hot { background:rgba(96,34,118,.08); color:#3C3489; }
        /* Family-specific nolink tints — match the linkable pill colour family */
        .bmp-pills-purple  .bmp-pill-nolink { background:rgba(96,34,118,.04); color:#5f5278; border-color:rgba(96,34,118,.12); }
        .bmp-pills-pink    .bmp-pill-nolink { background:rgba(191,74,146,.05); color:#7a4a65; border-color:rgba(191,74,146,.16); }
        .bmp-pills-grey    .bmp-pill-nolink { background:#f1efe8; color:#5f5e5a; border-color:#d3d1c7; }
        .bmp-pills-outline .bmp-pill-nolink { background:transparent; color:#5f5278; border-color:rgba(96,34,118,.2); }

        .bmp-pill-postcode { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }

        /* Numbered pill — adds a badge on the left. Inset is 3px on top, bottom,
           and left, so the 22px badge fills the pill's interior exactly and the
           outer/inner curves are concentric (radius difference = inset). */
        .bmp-pill-numbered { padding-left:3px; padding-right:14px; gap:8px; }
        .bmp-pill-numbered.bmp-pill-link { padding-right:11px; }
        .bmp-pill-num {
            flex-shrink:0;
            display:inline-flex; align-items:center; justify-content:center;
            width:22px; height:22px;
            font-size:11px; font-weight:500; line-height:1;
            background:#9d92ad; color:#fff;
            transition:background .15s ease, color .15s ease;
        }
        /* Badge radius matches the pill shape: pill radius minus the 3px inset */
        .bmp-pills-shape-curved  .bmp-pill-num { border-radius:11px; }
        .bmp-pills-shape-squared .bmp-pill-num { border-radius:4px; }
        /* Default if no shape class on wrap */
        .bmp-pill-num { border-radius:11px; }
        /* Linkable pills get a strong saturated number circle */
        .bmp-pills-purple.bmp-pill-link  .bmp-pill-num,
        .bmp-pills-outline.bmp-pill-link .bmp-pill-num { background:#3C3489; color:#fff; }
        .bmp-pills-pink.bmp-pill-link    .bmp-pill-num { background:#bf4a92; color:#fff; }
        .bmp-pills-grey.bmp-pill-link    .bmp-pill-num { background:#555; color:#fff; }
        /* Non-linkable pills get a desaturated number circle that pairs with the soft tint */
        .bmp-pills-purple  .bmp-pill-nolink .bmp-pill-num { background:#9d92ad; }
        .bmp-pills-pink    .bmp-pill-nolink .bmp-pill-num { background:#b09098; }
        .bmp-pills-grey    .bmp-pill-nolink .bmp-pill-num { background:#a89880; }
        .bmp-pills-outline .bmp-pill-nolink .bmp-pill-num { background:transparent; color:#7a6a8a; border:1px solid rgba(96,34,118,.25); }
        /* When the linkable pill goes to its solid hot state, invert the circle so
           it stays legible against the new dark background. */
        .bmp-pill-link:hover .bmp-pill-num,
        .bmp-pill-link.is-hot .bmp-pill-num { background:#fff; }
        .bmp-pills-purple.bmp-pill-link:hover .bmp-pill-num,
        .bmp-pills-purple.bmp-pill-link.is-hot .bmp-pill-num,
        .bmp-pills-outline.bmp-pill-link:hover .bmp-pill-num,
        .bmp-pills-outline.bmp-pill-link.is-hot .bmp-pill-num { color:#3C3489; }
        .bmp-pills-pink.bmp-pill-link:hover .bmp-pill-num,
        .bmp-pills-pink.bmp-pill-link.is-hot .bmp-pill-num { color:#bf4a92; }
        .bmp-pills-grey.bmp-pill-link:hover .bmp-pill-num,
        .bmp-pills-grey.bmp-pill-link.is-hot .bmp-pill-num { color:#555; }

        /* Button-form pills get the same shape as anchor/span pills (button resets) */
        button.bmp-pill {
            font-family:inherit; font-size:13px; cursor:pointer;
            -webkit-appearance:none; appearance:none;
        }
        .bmp-pill-clickable { cursor:pointer; }
        .bmp-pill-clickable:hover { transform:translateY(-1px); }

        /* Stacked pill column (legend=pills mode) — pills sit beside the map in a
           narrower 220px column, so we wrap aggressively and allow vertical scroll.
           Pill geometry is unchanged here — same height/padding/badge as anywhere. */
        .bmp-pills-wrap-stacked {
            flex-wrap:wrap; gap:5px;
            align-content:flex-start;
            overflow-y:auto;
            padding-right:4px;
        }

        /* ─── Legend mode: list ─────────────────────────────────────────
           Framed card with bold rows, full-row hover highlight, numbered
           square badges and a footer "call us" prompt. Highlight colour is
           driven by the .bmp-pills-{color} class on the wrap. */
        .bmp-map-legend-list {
            background:#fff;
            border:0.5px solid rgba(0,0,0,.08);
            border-radius:14px;
            padding:18px 4px 14px 4px;
            box-shadow:0 2px 6px rgba(0,0,0,.03);
            max-width:340px;
        }
        .bmp-map-legend-list.bmp-legend-cols-2 { max-width:520px; }
        .bmp-map-wrap-with-legend > .bmp-map-legend-list.bmp-legend-cols-2 { max-width:520px; }
        .bmp-map-legend-list .bmp-legend-hd { margin:0 18px 6px; }
        .bmp-legend-listrows {
            list-style:none; margin:0; padding:0;
            overflow-y:auto;
        }
        .bmp-legend-listrows li { margin:0; }
        .bmp-listrow {
            display:flex; align-items:center;
            gap:12px;
            padding:9px 16px 9px 16px;
            color:#1a1025; text-decoration:none;
            font-size:14px; font-weight:500; line-height:1.3;
            border:none; background:transparent;
            border-radius:10px; margin:0 4px;
            transition:background .12s ease, color .12s ease;
            font-family:inherit; width:calc(100% - 8px);
            cursor:default; text-align:left;
            box-sizing:border-box;
        }
        a.bmp-listrow, button.bmp-listrow { cursor:pointer; text-align:left; }
        .bmp-listrow-num {
            flex-shrink:0;
            display:inline-flex; align-items:center; justify-content:center;
            width:24px; height:24px; border-radius:6px;
            font-size:12px; font-weight:500; line-height:1;
            background:#f1efe8; color:#6e6680;
            transition:background .12s ease, color .12s ease;
        }
        /* Legacy areas (from old branch_locations meta) have no pin on the map,
           so their badge slot renders a faded centred dot instead of a number.
           Keeps the column alignment identical and visually signals "we cover
           this place but it's not pinned". Stays muted on hover too. */
        .bmp-listrow-num-empty {
            background:transparent !important;
            color:#bcbab2 !important;
            font-size:16px;
            font-weight:400;
        }
        .bmp-legend-num-empty {
            background:transparent !important;
            color:#bcbab2 !important;
            font-size:14px;
            font-weight:400;
        }
        /* Names wrap to multiple lines if needed (e.g. "Collingbourne Ducis" in
           a narrow 2-column layout). flex:1 + min-width:0 lets them grow and
           break instead of pushing the indicator off the edge. */
        .bmp-listrow-name { flex:1 1 auto; min-width:0; word-break:break-word; }
        /* "View" indicator — always visible on linkable rows so visitors can see
           at a glance which areas have a dedicated page. Fades to fully opaque on
           hover/active. Only renders on linkable rows (non-linkable rows have no
           .bmp-listrow-view span). */
        .bmp-listrow-view {
            flex-shrink:0;
            font-size:11px; font-weight:600;
            text-transform:uppercase; letter-spacing:.4px;
            color:#3C3489; opacity:.55;
            transition:opacity .12s ease, color .12s ease;
        }
        .bmp-pills-pink .bmp-listrow-view    { color:#bf4a92; }
        .bmp-pills-grey .bmp-listrow-view    { color:#555; }
        .bmp-pills-outline .bmp-listrow-view { color:#3C3489; }
        .bmp-listrow:hover .bmp-listrow-view,
        .bmp-listrow.is-hot .bmp-listrow-view,
        .bmp-listrow:focus-visible .bmp-listrow-view { opacity:1; }
        /* When the row goes solid coloured on hover/hot, the View text inherits white */
        .bmp-listrow:hover .bmp-listrow-view,
        .bmp-listrow.is-hot .bmp-listrow-view { color:inherit; }

        /* 2-column layout uses CSS Grid so the list scrolls vertically (column-count
           breaks badly inside overflow-y:auto, paginating horizontally instead). With
           grid-auto-flow:row, items fill left-then-right, top-to-bottom: 1+2 on row 1,
           3+4 on row 2, etc. */
        .bmp-legend-cols-2 .bmp-legend-listrows {
            display:grid;
            grid-template-columns:1fr 1fr;
            grid-auto-flow:row;
            grid-auto-rows:min-content;
            align-content:start;
            gap:0 4px;
        }
        .bmp-legend-cols-2 .bmp-listrow { margin:0 2px 2px; width:calc(100% - 4px); }
        /* On narrow widths, collapse back to 1 column so rows don't get cramped. */
        @media (max-width:520px) {
            .bmp-legend-cols-2 .bmp-legend-listrows { grid-template-columns:1fr; }
        }
        /* Hover/active row — colour family drives the tint */
        .bmp-pills-purple.bmp-map-legend-list .bmp-listrow:hover,
        .bmp-pills-purple.bmp-map-legend-list .bmp-listrow.is-hot,
        .bmp-pills-purple.bmp-map-legend-list .bmp-listrow:focus-visible {
            background:rgba(96,34,118,.07);
            color:#3C3489;
        }
        .bmp-pills-purple.bmp-map-legend-list .bmp-listrow:hover .bmp-listrow-num,
        .bmp-pills-purple.bmp-map-legend-list .bmp-listrow.is-hot .bmp-listrow-num { background:#3C3489; color:#fff; }

        .bmp-pills-pink.bmp-map-legend-list .bmp-listrow:hover,
        .bmp-pills-pink.bmp-map-legend-list .bmp-listrow.is-hot,
        .bmp-pills-pink.bmp-map-legend-list .bmp-listrow:focus-visible {
            background:rgba(191,74,146,.08);
            color:#7a2e5e;
        }
        .bmp-pills-pink.bmp-map-legend-list .bmp-listrow:hover .bmp-listrow-num,
        .bmp-pills-pink.bmp-map-legend-list .bmp-listrow.is-hot .bmp-listrow-num { background:#bf4a92; color:#fff; }

        .bmp-pills-grey.bmp-map-legend-list .bmp-listrow:hover,
        .bmp-pills-grey.bmp-map-legend-list .bmp-listrow.is-hot,
        .bmp-pills-grey.bmp-map-legend-list .bmp-listrow:focus-visible {
            background:#f1efe8;
            color:#2c2c2a;
        }
        .bmp-pills-grey.bmp-map-legend-list .bmp-listrow:hover .bmp-listrow-num,
        .bmp-pills-grey.bmp-map-legend-list .bmp-listrow.is-hot .bmp-listrow-num { background:#555; color:#fff; }

        .bmp-pills-outline.bmp-map-legend-list .bmp-listrow:hover,
        .bmp-pills-outline.bmp-map-legend-list .bmp-listrow.is-hot,
        .bmp-pills-outline.bmp-map-legend-list .bmp-listrow:focus-visible {
            background:rgba(96,34,118,.05);
            color:#3C3489;
            outline:0.5px solid rgba(96,34,118,.2); outline-offset:-2px;
        }
        .bmp-pills-outline.bmp-map-legend-list .bmp-listrow:hover .bmp-listrow-num,
        .bmp-pills-outline.bmp-map-legend-list .bmp-listrow.is-hot .bmp-listrow-num { background:#3C3489; color:#fff; }

        .bmp-legend-foot {
            margin:14px 18px 0;
            font-size:13px; line-height:1.5;
            color:#6e6680;
        }
        .bmp-legend-foot-link { color:#3C3489; font-weight:500; text-decoration:none; border-bottom:1px solid rgba(96,34,118,.3); }
        .bmp-legend-foot-link:hover { border-bottom-color:#3C3489; }
        .bmp-pills-pink .bmp-legend-foot-link { color:#7a2e5e; border-bottom-color:rgba(191,74,146,.35); }
        .bmp-pills-pink .bmp-legend-foot-link:hover { border-bottom-color:#bf4a92; }

        /* ─── Map wrapper & layout ────────────────────────────────────────
           Side-by-side layout for the legend column. The sidebar width is now
           content-driven (max-content within a min/max bound) so it grows to
           fit long area names or shrinks to be compact when names are short. */
        .bmp-map-wrap { position:relative; }
        .bmp-map-container { position:relative; }
        .bmp-map-wrap-with-legend {
            display:grid;
            /* Sidebar shrinks to fit the longest item but stays in sensible bounds. */
            grid-template-columns:minmax(0,1fr) minmax(200px, max-content);
            gap:16px; align-items:stretch;
        }
        /* The legend column matches the map's height. The map column has its height
           set inline via the height attribute, and stretch aligns the legend to that
           same row height. Inside, the legend is a flex column so the scrollable
           list can take all remaining space below the header. */
        .bmp-map-wrap-with-legend > .bmp-map-legend {
            display:flex; flex-direction:column;
            max-width:340px; min-height:0;
            height:100%; box-sizing:border-box;
        }
        /* The scrollable list area — takes the remaining height inside the card,
           overrides any hard max-height defined elsewhere. */
        .bmp-map-wrap-with-legend > .bmp-map-legend .bmp-legend-list,
        .bmp-map-wrap-with-legend > .bmp-map-legend .bmp-legend-listrows,
        .bmp-map-wrap-with-legend > .bmp-map-legend .bmp-pills-wrap-stacked {
            flex:1 1 0;
            min-height:0;
            max-height:none;
            overflow-y:auto;
        }
        /* The compact numbered mode and pills mode don't need much room. */
        .bmp-map-wrap-with-legend > .bmp-map-legend:not(.bmp-map-legend-list) { max-width:260px; }
        @media (max-width:720px) {
            /* Knock 100px off the configured map height on mobile, but never
               below 200px (in case someone set a tight height to start with). */
            .bmp-map {
                height: max(200px, calc(var(--bmp-map-h, 400px) - 100px)) !important;
            }
            .bmp-map-wrap-with-legend { grid-template-columns:1fr; align-items:start; }
            .bmp-map-wrap-with-legend > .bmp-map-legend,
            .bmp-map-wrap-with-legend > .bmp-map-legend:not(.bmp-map-legend-list) {
                max-width:none;
                height:auto;
                display:block;
            }
            /* Mobile: list/legend sits below the map, content-sized with a soft cap.
               Override the desktop flex:1 1 0 which would collapse to 0 height when
               the parent's height is auto. */
            .bmp-map-wrap-with-legend > .bmp-map-legend .bmp-legend-list,
            .bmp-map-wrap-with-legend > .bmp-map-legend .bmp-legend-listrows,
            .bmp-map-wrap-with-legend > .bmp-map-legend .bmp-pills-wrap-stacked {
                flex:0 1 auto;
                max-height:380px;
                overflow-y:auto;
            }
        }

        /* ─── Legend (alphabetical, numbered, beside map) ──────────────── */
        .bmp-map-legend { font-size:13px; line-height:1.4; }
        .bmp-legend-hd { margin:0 0 8px; font-size:11px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.5px; }
        /* No hard max-height here — the flex-grid rule above governs scrolling. */
        .bmp-legend-list { list-style:none; margin:0; padding:0; }
        .bmp-legend-list li { margin:0; }
        .bmp-legend-item {
            display:flex; align-items:center; gap:8px;
            padding:5px 8px; border-radius:6px;
            color:inherit; text-decoration:none;
            transition:background .12s ease;
            cursor:default;
        }
        a.bmp-legend-item { cursor:pointer; }
        button.bmp-legend-item {
            cursor:pointer; width:100%; text-align:left;
            background:none; border:none;
            font-family:inherit; font-size:inherit;
        }
        .bmp-legend-item:hover, .bmp-legend-item.is-hot { background:rgba(96,34,118,.06); }
        .bmp-legend-num {
            flex-shrink:0;
            display:inline-flex; align-items:center; justify-content:center;
            width:22px; height:22px; border-radius:50%;
            background:#888780; color:#fff;
            font-size:11px; font-weight:600;
            transition:background .12s ease, transform .12s ease;
        }
        .bmp-legend-item-link .bmp-legend-num { background:#602276; }
        .bmp-legend-item.is-hot .bmp-legend-num { transform:scale(1.1); }
        .bmp-legend-name { flex:1; color:#1a1025; }
        .bmp-legend-item-link .bmp-legend-name { color:#602276; font-weight:500; }
        .bmp-legend-item-nolink .bmp-legend-name { color:#5f5e5a; }
        .bmp-legend-arrow { color:#602276; opacity:.5; font-size:16px; line-height:1; }
        .bmp-legend-item:hover .bmp-legend-arrow, .bmp-legend-item.is-hot .bmp-legend-arrow { opacity:1; }

        /* ─── Numbered markers ────────────────────────────────────────────
           Branch = filled purple dot, larger. Areas = numbered pin with the
           sequence number inside. Linkable = filled purple. Non-linkable =
           muted grey. is-hot scales them up (driven by hover sync). */
        .bmp-marker { background:transparent !important; border:none !important; }
        .bmp-marker-inner {
            display:flex; align-items:center; justify-content:center;
            width:28px; height:28px; border-radius:50%;
            /* Soft radial highlight on top of the brand purple */
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%),
                linear-gradient(160deg, #6d2a83 0%, #531c66 100%);
            color:#fff;
            /* Hairline inner ring instead of chunky border, plus layered ambient shadow */
            box-shadow:
                0 0 0 1.5px rgba(255,255,255,.95),
                0 1px 2px rgba(40,12,55,.18),
                0 4px 10px rgba(96,34,118,.22);
            transition:
                transform .22s cubic-bezier(.34,1.56,.64,1),
                box-shadow .22s ease,
                background .22s ease;
            font-family:'Lato',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
            font-size:12px; font-weight:700;
            letter-spacing:.2px;
        }
        .bmp-marker-nolink .bmp-marker-inner {
            background:
                radial-gradient(circle at 30% 28%, rgba(191,74,146,.08) 0%, rgba(255,255,255,0) 55%),
                #ffffff;
            color:#bf4a92;
            box-shadow:
                0 0 0 1.5px #bf4a92,
                0 1px 2px rgba(40,12,55,.10),
                0 3px 8px rgba(191,74,146,.18);
        }
        .bmp-marker-branch .bmp-marker-inner { width:30px; height:30px; }
        .bmp-marker-branch .bmp-marker-dot { width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
        .bmp-marker-num { line-height:1; }
        .bmp-marker:hover .bmp-marker-inner,
        .bmp-marker.is-hot .bmp-marker-inner {
            transform:scale(1.18) translateY(-1px);
            box-shadow:
                0 0 0 1.5px rgba(255,255,255,.95),
                0 2px 4px rgba(40,12,55,.22),
                0 10px 22px rgba(96,34,118,.35);
        }
        .bmp-marker-nolink:hover .bmp-marker-inner,
        .bmp-marker-nolink.is-hot .bmp-marker-inner {
            box-shadow:
                0 0 0 1.5px #bf4a92,
                0 2px 4px rgba(40,12,55,.14),
                0 10px 20px rgba(191,74,146,.30);
        }
        /* Linked area markers: white centre with a brand-purple border — matches
           the no-link style but in purple, so the area circles read as a uniform
           set distinct from the solid-purple branch pin. */
        .bmp-marker-area.bmp-marker-link .bmp-marker-inner {
            background:
                radial-gradient(circle at 30% 28%, rgba(109,42,131,.07) 0%, rgba(255,255,255,0) 55%),
                #ffffff;
            color:#6d2a83;
            box-shadow:
                0 0 0 1.5px #6d2a83,
                0 1px 2px rgba(40,12,55,.10),
                0 3px 8px rgba(96,34,118,.18);
        }
        .bmp-marker-area.bmp-marker-link:hover .bmp-marker-inner,
        .bmp-marker-area.bmp-marker-link.is-hot .bmp-marker-inner {
            box-shadow:
                0 0 0 1.5px #6d2a83,
                0 2px 4px rgba(40,12,55,.14),
                0 10px 20px rgba(96,34,118,.30);
        }

        /* ─── Hover tooltip (follows cursor over pins) ─────────────────── */
        .bmp-tooltip {
            position:absolute; pointer-events:none; z-index:400;
            left:-9999px; top:-9999px;
            background:rgba(96,34,118,.92); color:#fff;
            padding:6px 12px; border-radius:6px;
            font-size:13px; font-weight:500; line-height:1.2;
            white-space:nowrap;
            transform:translate(0, -100%);
            opacity:0; visibility:hidden;
            transition:opacity .12s ease;
            backdrop-filter:blur(2px);
            -webkit-backdrop-filter:blur(2px);
            box-shadow:0 4px 12px rgba(0,0,0,.15);
        }
        .bmp-tooltip.show { opacity:1; visibility:visible; }

        /* ─── Click panel (toast strip overlaid on the map after a pin click) ──
           Solid brand-pink background, white chrome throughout. Slides up from
           the bottom edge of the map. Holds a tick icon, name + sub line, primary
           CTA, and a close button. */
        .bmp-click-panel {
            position:absolute; left:12px; right:12px; bottom:12px;
            display:flex; align-items:center; gap:12px;
            background:#bf4a92; color:#fff;
            border-radius:10px;
            padding:10px 12px;
            box-shadow:0 10px 28px rgba(191,74,146,.28), 0 2px 6px rgba(0,0,0,.08);
            z-index:500;
            opacity:0;
            visibility:hidden;
            pointer-events:none;
            transform:translateY(8px);
            transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
            font-family:inherit;
        }
        .bmp-click-panel.show {
            opacity:1;
            visibility:visible;
            pointer-events:auto;
            transform:translateY(0);
            transition:opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
        }
        .bmp-panel-icon {
            flex-shrink:0;
            width:32px; height:32px; border-radius:50%;
            background:rgba(255,255,255,.18); color:#fff;
            display:flex; align-items:center; justify-content:center;
        }
        .bmp-panel-icon svg { display:block; }
        .bmp-panel-body { flex:1; min-width:0; }
        .bmp-panel-headline { font-size:14px; line-height:1.3; color:#fff; font-weight:500; margin:0; padding:0; }
        .bmp-panel-headline strong { color:#fff; font-weight:700; }
        .bmp-panel-sub { font-size:11.5px; color:rgba(255,255,255,.78); margin-top:2px; line-height:1.3; }
        .bmp-panel-actions { display:flex; gap:6px; flex-shrink:0; }
        .bmp-panel-btn {
            display:inline-flex; align-items:center; justify-content:center;
            padding:8px 14px; border-radius:8px;
            font-size:13px; font-weight:600; text-decoration:none;
            transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
            line-height:1.2;
            font-family:inherit;
            white-space:nowrap;
        }
        .bmp-panel-btn-p { background:#fff; color:#bf4a92 !important; }
        .bmp-panel-btn-p:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.18); }
        .bmp-panel-btn-s { background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.5); }
        .bmp-panel-btn-s:hover { background:rgba(255,255,255,.15); border-color:#fff; }
        .bmp-panel-close {
            background:none; border:none; cursor:pointer;
            font-size:22px; line-height:1; color:rgba(255,255,255,.7);
            width:28px; height:28px; border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            font-family:inherit; padding:0;
            flex-shrink:0;
            transition:background .15s ease, color .15s ease;
        }
        .bmp-panel-close:hover { background:rgba(255,255,255,.18); color:#fff; }

        /* ─── Map loading state ─────────────────────────────────────────
           Shown inside .bmp-map before the map script loads (Leaflet/Google
           may be deferred). The init JS removes this overlay as soon as the
           library is available. A pink circular badge with a white pin icon —
           the badge gently breathes and a soft ring expands outward. */
        .bmp-map { position:relative; }
        .bmp-map-loading {
            position:absolute; inset:0;
            display:flex; flex-direction:column;
            align-items:center; justify-content:center;
            gap:12px;
            background:radial-gradient(ellipse at center, #fdf7fa 0%, #f4dde9 100%);
            border-radius:8px;
            z-index:1;
            pointer-events:none;
            user-select:none;
        }
        .bmp-map-loading-svg { width:96px; height:96px; overflow:visible; }
        .bmp-loading-badge {
            transform-box:fill-box; transform-origin:center;
            animation:bmpBadgePulse 2.4s ease-in-out infinite;
        }
        .bmp-loading-ripple {
            transform-box:fill-box; transform-origin:center;
            opacity:0;
            animation:bmpBadgeRipple 2.4s ease-out infinite;
        }
        @keyframes bmpBadgePulse {
            0%, 100% { transform:scale(1); }
            50%      { transform:scale(1.06); }
        }
        @keyframes bmpBadgeRipple {
            0%   { transform:scale(.95); opacity:0; }
            25%  { opacity:.45; }
            100% { transform:scale(1.8); opacity:0; }
        }
        .bmp-map-loading-label {
            font-family:'Lato',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
            font-size:12.5px; font-weight:600;
            color:#bf4a92; letter-spacing:.4px; opacity:.8;
            display:inline-flex; align-items:baseline;
        }
        .bmp-map-loading-label::after {
            content:'...'; display:inline-block; overflow:hidden;
            vertical-align:baseline; white-space:nowrap;
            width:0; margin-left:2px;
            animation:bmpMapLoadingDots 1.4s steps(4,end) infinite;
        }
        @keyframes bmpMapLoadingDots {
            to { width:1.2em; }
        }
        @media (prefers-reduced-motion: reduce) {
            .bmp-loading-badge,
            .bmp-loading-ripple { animation:none; }
            .bmp-map-loading-label::after { width:1.2em; animation:none; }
        }

        /* ─── Leaflet chrome cleanup + custom attribution toggle ──────── */
        .bmp-map-leaflet .leaflet-control-container,
        .bmp-map-leaflet .leaflet-control-zoom,
        .bmp-map-leaflet .leaflet-control-attribution,
        .bmp-map-leaflet .leaflet-bar { display:none !important; }
        .bmp-map-leaflet .leaflet-container { background:#f5f3f7; outline:none; }
        .bmp-attr-btn { position:absolute; bottom:8px; right:8px; z-index:450;
            width:22px; height:22px; border-radius:50%; border:none;
            background:rgba(255,255,255,.85); color:#602276;
            font-size:13px; font-weight:700; font-family:Georgia,serif; font-style:italic;
            cursor:pointer; line-height:1; padding:0;
            box-shadow:0 1px 3px rgba(0,0,0,.15);
            transition:background .15s ease;
        }
        .bmp-attr-btn:hover { background:rgba(255,255,255,1); }
        .bmp-attr-popup { position:absolute; bottom:36px; right:8px; z-index:450;
            background:rgba(255,255,255,.95); padding:6px 10px; border-radius:6px;
            font-size:11px; color:#555; line-height:1.4;
            max-width:260px; white-space:normal;
            box-shadow:0 2px 8px rgba(0,0,0,.12);
            opacity:0; pointer-events:none; transform:translateY(4px);
            transition:opacity .15s ease, transform .15s ease;
        }
        .bmp-attr-popup.show { opacity:1; pointer-events:auto; transform:translateY(0); }
        .bmp-attr-popup a { color:#602276; text-decoration:underline; }

        /* Google Maps: hide optional UI we disabled JS-side, BUT keep mandatory attribution
           ("Map data ©" / "Terms" / Google logo) visible per Google Maps Platform ToS.
           Also hide the focus-indicator overlay Google injects when a marker receives
           keyboard focus — its accessibility label can leak through with our marker
           name and render as a focused pill at the bottom-left. */
        .bmp-map-google [class*="gm-svpc"],
        .bmp-map-google [aria-label="Keyboard shortcuts"],
        .bmp-map-google [aria-roledescription="focus"],
        .bmp-map-google .gm-style-iw,
        .bmp-map-google .gm-style-cc + div[role="button"]:not([title]) { display:none !important; }

        /* Quarantine — our pill/listrow styles should never apply to elements
           inside the Google Maps overlay layer. This prevents any accidental
           selector overlap from styling Google's a11y/focus DOM. */
        .bmp-map-google .bmp-pill,
        .bmp-map-google .bmp-listrow,
        .bmp-map-google .bmp-pill-link,
        .bmp-map-google .bmp-pill-nolink {
            all: revert !important;
        }

        @media(max-width:600px){
            .bmp-click-panel {
                flex-wrap:wrap; row-gap:10px;
                padding:12px 14px;
            }
            .bmp-panel-icon  { order:1; width:28px; height:28px; flex:0 0 auto; }
            .bmp-panel-body  { order:2; flex:1 1 0; min-width:0; }
            .bmp-panel-close { order:3; flex:0 0 auto; margin-left:auto; }
            .bmp-panel-actions { order:4; flex:1 1 100%; gap:8px; }
            .bmp-panel-btn { flex:1; }
        }

/* Map placeholder: Google Maps loads only when someone taps Show map. */
.bmp-map{position:relative}
.bmp-map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#f5f3f7;background-image:linear-gradient(#ece6f1 1px,transparent 1px),linear-gradient(90deg,#ece6f1 1px,transparent 1px);background-size:32px 32px}
.bmp-map-show{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:0;border-radius:999px;background:#602276;color:#fff;font:700 15px/1 Lato,-apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer}
.bmp-map-show:hover,.bmp-map-show:focus-visible{background:#4e1a61}
.bmp-map-show:focus-visible{outline:2px solid #bf4a92;outline-offset:2px}
.bmp-map-show[disabled]{opacity:.8;cursor:wait}
.bmp-map-placeholder-note{font:600 13px/1.3 Lato,-apple-system,BlinkMacSystemFont,sans-serif;color:#5b4a69}

/* Advanced Marker pins: centred on the point (as the old icon anchor was); bigger while hot. */
.bmp-pin { display: block; transform: translateY(50%); transition: transform .15s ease; cursor: pointer; }
.bmp-pin.is-hot { transform: translateY(50%) scale(1.18); }