/**
 * The distributor directory page, without the page builder.
 *
 * Replaces 48 Kadence blocks. None of these class names come from the builder.
 *
 * ONE CONTAINER, ONE SPACING SCALE. The first cut of this file had three different content
 * widths stacked on one page (intro 680, list 1392, band inner 1280) and two different left
 * edges, so nothing aligned with anything and the page read as broken before you looked at the
 * content. Everything now sits in .endist-container, which is the only place a width or a
 * gutter is declared, and vertical space comes from the --end-space-* scale rather than
 * per-block guesses.
 *
 * The band's inset was measured off prod as calc(100% - 160px). That is an 80px gutter, so the
 * shared container uses 80px and the band keeps prod's geometry while everything above it now
 * lines up with it too.
 *
 * THE DEALER CARDS are the shortcode's own markup, restyled in place. Selectors are scoped
 * under .endist so they cannot reach the same markup where the contact popup uses it.
 */

.endist {
    --end-blue: #0EA5DF;
    --end-blue-deep: #0a7499;
    --end-ink: #1a1a1a;
    --end-ink-2: #4a5057;
    --end-muted: #6c757d;
    --end-line: #e6e8eb;
    --end-line-strong: #d8d8d8;
    --end-surface: #ffffff;
    --end-surface-2: #f7f8fa;
    --end-radius: 8px;
    --end-radius-lg: 12px;
    --end-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px -6px rgba(16, 24, 40, .10);

    /* The band, and the card on it one step darker. Prod outlines that card with a 1px
       rgb(217,217,217) border; Kim's call was to drop it and separate by tone instead. */
    --end-band: #2F2F2F;
    --end-band-ink: #ffffff;
    --end-band-card: #262626;
    --end-band-radius: 10px;

    /* One vertical scale. Every margin and padding below is one of these. */
    --end-space-1: 8px;
    --end-space-2: 16px;
    --end-space-3: 24px;
    --end-space-4: 32px;
    --end-space-5: 48px;
    --end-space-6: 64px;

    /* The shared gutter, matching prod's calc(100% - 160px) band inset. */
    --end-gutter: 80px;
    --end-max: 1760px;

    --end-font-head: var(--enttec-font-display, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --end-font-body: var(--enttec-font-body, 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --end-dur: 170ms;
    --end-ease: cubic-bezier(0.4, 0, 0.2, 1);

    font-family: var(--end-font-body);
    color: var(--end-ink);
}

/* NO BREADCRUMB HERE. The directory is a single top-level page, so "Home / Authorised
   Distributors" tells a visitor nothing they cannot see from the heading directly beneath it.
   The theme prints the H1 and the breadcrumb in the same block, so this hides only the
   breadcrumb and leaves the heading, which is this page's only H1 and has to stay.
   Yoast emits the BreadcrumbList structured data separately in JSON-LD, so search engines
   still get the trail; this is presentation only. */
body.enttec-dealers-ui-directory .title_breadcrumb .woocommerce-breadcrumb { display: none; }

/* THE 52px ABOVE THIS PAGE'S FIRST LINE OF COPY, traced 2026-09-22: the theme's header
   carries `mb-5` (30px margin-bottom) and .header-inner another 20px of padding-bottom. On a
   page whose H1 sits inside that header block, the two stack under the heading and read as a
   hole rather than as separation.
   
   SCOPED TO THIS PAGE'S BODY CLASS, because that header markup is shared with every other
   page on the site and their spacing was not asked about. The body class is added by
   enttec-dealers-ui.php and exists only on the directory and the application form, so this
   cannot reach anything else. */
/* !important is the only thing that reaches it: the 30px comes from the Bootstrap utility
   class `mb-5`, and those utilities declare !important themselves, so nothing without it can
   win no matter how specific.

   THIS IS THE THEME'S OWN PATTERN, not a new one. main-style.css already carries
   `body.enttec-post-prose header.header{margin-bottom:0 !important}` for exactly this
   problem, with a comment naming the same three contributors (main's 70px, .mb-5's 30px,
   .header-inner's 20px). Only the 30px is taken here; the other two are left alone. */
body.enttec-dealers-ui-directory header.header { margin-bottom: 0 !important; }

/* The only width declaration on the page. */
.endist-container {
    max-width: var(--end-max);
    margin: 0 auto;
    padding-left: var(--end-gutter);
    padding-right: var(--end-gutter);
}

/* ---------- intro ----------
   16px on top, not 48px. The theme's title block already leaves 52px between the H1 and
   anything after it, so a 48px padding on top of that put 100px between the page's heading
   and its first line of copy. The remaining 52px is the theme's, above .endist, and is not
   this file's to take. */
.endist-intro { padding: var(--end-space-2) 0 var(--end-space-4); }
.endist-intro h2 {
    font-family: var(--end-font-head);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.01em;
    margin: 0 0 var(--end-space-1);
}
/* The paragraph is capped for readability, but the CONTAINER is full width, so its left edge
   still lines up with everything else. Capping the container instead was the original mistake. */
.endist-intro p {
    margin: 0;
    max-width: 680px;
    color: var(--end-ink-2);
    font-size: 17px;
    line-height: 1.6;
}
/* Brand blue is the link colour; the deep shade is hover only. Previously inverted, so
   links sat on the darker tone and brightened on hover, which read as a different blue. */
.endist-intro a { color: var(--end-blue); font-weight: 600; }
.endist-intro a:hover { color: var(--end-blue-deep); }

/* ---------- directory ---------- */
.endist-directory {
    display: grid;
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: var(--end-space-4);
    padding-bottom: var(--end-space-6);
    align-items: start;
}

/* EXPLICIT PLACEMENT, because the map is FIRST in the DOM now (see the comment at the top of
   authorised-distributors.php: it has to be first so the reading order matches the mobile
   layout, where it is above the list). Placing both children by hand is what keeps it in the
   right-hand column on desktop without an `order` that would desync the keyboard from the
   screen. The mobile query below returns them both to a single column. */
.endist-list { grid-column: 1; grid-row: 1; }
.endist-map  { grid-column: 2; grid-row: 1; }

/* Sticky so the map stays in view while a long list scrolls. On the US site with 16 dealers
   the previous layout scrolled it off the screen entirely. */
.endist-map { position: sticky; top: var(--end-space-3); }
.endist-map #dealers-container-map,
.endist-map #map { border-radius: var(--end-radius-lg); overflow: hidden; }

/* ---------- the map's caption line ----------
   Says what the map is currently framed on, and offers the way back out to every country.
   Both are written by directory-groups.js; the button ships hidden so a failed script leaves
   no dead control behind. */
.endist-maphint {
    display: flex;
    justify-content: space-between;
    /* Centre, not baseline: the row now has a reserved height, and baseline would pin the
       caption to the top of it. */
    align-items: center;
    gap: var(--end-space-2);
    margin: var(--end-space-1) 0 0;
    /* THE ROW KEEPS ITS HEIGHT WHETHER OR NOT THE BUTTON IS IN IT. "Show all" appears the
       moment a country is opened, and it is 32px tall against a 19.5px line of text, so
       without this the map block grew 12.5px and shoved the entire list down 13px at the
       exact moment you tapped a group header. The thing you were aiming at moved because of
       something that appeared somewhere else, which is the worst kind of layout shift.
       Reserving the space costs 12.5px once and never moves again. */
    min-height: 32px;
    font-size: 13px;
    color: var(--end-muted);
}
.endist-maphint-text:empty { display: none; }
.endist-mapall {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    background: none;
    border: 0;
    padding: 6px 0;
    margin-left: auto;
    min-height: 32px;
    color: var(--end-blue);
    cursor: pointer;
    transition: color var(--end-dur) var(--end-ease);
}
.endist-mapall:hover { color: var(--end-blue-deep); text-decoration: underline; }
.endist-mapall:focus-visible { outline: 2px solid var(--end-blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- filter ----------
   11 of the 13 US records sit in one country, so the country groups alone narrow nothing for
   a US visitor. One field over the name, the city and the state is the cheapest thing that
   does, and it is the only part of this page that needs JavaScript to be useful, which is why
   the markup ships `hidden` and the script reveals it. */
.endist-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* FLEX, NOT BLOCK, and this is a bug fix rather than a preference. As a block, the
   whitespace between the icon, the label and the input generated an anonymous line box of
   its own, 22px tall, above the field. That box made the wrapper taller than the input it
   contains, which showed up twice: as a band of dead space above the field, and as a search
   icon sitting 22px high because `top: 50%` centres on the WRAPPER, not on the input. Flex
   containers do not generate line boxes for whitespace, so the wrapper is now exactly the
   height of the field and both symptoms go with it. */
.endist-filter {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 var(--end-space-2);
}
.endist-filter[hidden] { display: none; }
.endist-filter input {
    width: 100%;
    flex: 1 1 auto;
    font-family: var(--end-font-body);
    /* 16px is not a taste choice: iOS zooms the whole page in when a focused field is
       smaller, and the page never zooms back out. */
    font-size: 16px;
    /* DECLARED, because the theme sets line-height: 32px on inputs globally. Inheriting that
       made this field 58px tall, which read as a hero search box rather than a filter on a
       list. 1.25 puts it at 45px, in line with the group headers next to it. */
    line-height: 1.25;
    padding: 12px 40px 12px 42px;
    border: 1px solid var(--end-line-strong);
    border-radius: var(--end-radius);
    background: var(--end-surface);
    color: var(--end-ink);
    transition: border-color var(--end-dur) var(--end-ease), box-shadow var(--end-dur) var(--end-ease);
    -webkit-appearance: none;
    appearance: none;
}
.endist-filter input:focus {
    outline: 0;
    border-color: var(--end-blue);
    box-shadow: 0 0 0 3px rgba(14, 165, 223, .18);
}
/* The browser's own clear button would sit on top of ours. */
.endist-filter input::-webkit-search-cancel-button { display: none; }
.endist-filter-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--end-muted);
    pointer-events: none;
    line-height: 0;
}
.endist-filter-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--end-surface-2);
    color: var(--end-ink-2);
    font: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--end-dur) var(--end-ease), color var(--end-dur) var(--end-ease);
}
.endist-filter-clear[hidden] { display: none; }
.endist-filter-clear:hover { background: var(--end-line); color: var(--end-ink); }
.endist-filter-clear:focus-visible { outline: 2px solid var(--end-blue); outline-offset: 2px; }

.endist-filter-status {
    font-size: 13px;
    color: var(--end-muted);
    margin: 0 0 var(--end-space-2);
}
.endist-filter-status:empty { display: none; margin: 0; }
.endist-filter-status button {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    background: none;
    border: 0;
    padding: 0;
    color: var(--end-blue);
    text-decoration: underline;
    cursor: pointer;
}
.endist-filter-status button:focus-visible { outline: 2px solid var(--end-blue); outline-offset: 2px; border-radius: 4px; }

/* A group with nothing left in it after filtering, and a card that did not match. Both are
   hidden rather than removed, so clearing the field is instant and nothing is re-rendered. */
.endist-grp[hidden],
.endist .endist-grp-body .dealer-deta-wrapper[hidden] { display: none !important; }

/* Beside a map: one scrolling column of stacked cards, capped to the map's own height so the
   two columns end level.

   THE SCROLLBAR. Left to the browser this is the 15px Windows default, a grey trough with a
   grey thumb, which is louder than any border on the page and sits right down the middle of
   the layout. scrollbar-width/scrollbar-color are the standard properties (Firefox, and
   Chrome 121+, where they take precedence over the ::-webkit- rules below); the ::-webkit-
   block covers Safari and older Chrome. Same result either way: a thin bar that only shows
   its thumb, on the page's own line colour.

   padding-right keeps the cards' shadow off the bar rather than tucking under it. */
.endist-list #dealers-container {
    max-height: 700px;
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--end-line-strong) transparent;
}
.endist-list #dealers-container::-webkit-scrollbar { width: 8px; }
.endist-list #dealers-container::-webkit-scrollbar-track { background: transparent; }
.endist-list #dealers-container::-webkit-scrollbar-thumb {
    background: var(--end-line-strong);
    border-radius: 4px;
}
.endist-list #dealers-container::-webkit-scrollbar-thumb:hover { background: #b9bfc6; }

.endist-list .nested-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}



/* ---------- a dealer card ----------
   Separate cards, not one segmented box with hairline dividers, which read as a table that had
   lost its columns. */
/* DENSITY. These cards were 331 to 376px tall, so a 700px column showed barely two of the
   sixteen and the rest was scrolling. A directory is a scanning surface: the job is to get as
   many names on screen as possible while each one stays readable.

   Every saving below is spacing, not content. Nothing is hidden or truncated. */
.endist .dealer-deta-wrapper {
    padding: 16px 18px !important;
    background: var(--end-surface) !important;
    border: 1px solid var(--end-line);
    border-radius: var(--end-radius);
    box-shadow: var(--end-shadow);
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 100%;
}

/* THE BIGGEST SAVING, and it was invisible until the computed styles were read. main-style.css
   sets `#dealers-container section h3 { margin-bottom: 15px }` and
   `#dealers-container section > div { margin-bottom: 1em }`. An ID beats any number of classes,
   so the `margin: 0` in the rules below never applied, and every one of those margins was
   stacking on top of the card's flex gap: four gaps of ~19px where 7px was intended, 57px per
   card, over half a screen across sixteen cards.

   Carrying the same #dealers-container here wins on equal terms rather than with !important,
   the same way the icon size is handled further down. The flex gap is then the only thing
   setting the vertical rhythm inside a card, which is what makes it adjustable in one place. */
.endist #dealers-container section h3,
.endist #dealers-container section > div { margin-bottom: 0; }

/* HIERARCHY. The name is the thing you scan for, so it steps up; the contact rows step down;
   the icons are quieter than the text they label.

   The rule that used to sit under the name is gone. It cost 33px per card (16 padding, 16
   margin, 1 border) to separate two things that weight and size already separate, and sixteen
   of them added half a screen of nothing. Space alone does the same work in 8px. */
.endist .dealer-deta-wrapper h3 {
    font-family: var(--end-font-head);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.3;
    margin: 0 0 var(--end-space-1);
    padding-bottom: 0;
    border-bottom: 0;
    letter-spacing: -0.005em;
    color: var(--end-ink);
}

.endist .dealer-deta-wrapper .address,
.endist .dealer-deta-wrapper .website,
.endist .dealer-deta-wrapper .email,
.endist .dealer-deta-wrapper .phone {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    font-size: 14px;
    /* 1.4, not 1.5: the address is three <br> lines, so this one value is paid three times per
       card. Still comfortably above the 1.3 floor where multi-line text starts to crowd. */
    line-height: 1.4;
    color: var(--end-ink-2);
}
/* The icons were rendering at 19.5px against 15px text, a third larger than the words they
   label, because the theme sets `#dealers-container section > div .icon { font-size: 1.3em }`
   and an ID beats any three classes. This selector carries the same #dealers-container so it
   can win on its own terms rather than with !important.
   13px against 15px text: the icon now reads as a marker beside the line, not a bullet. */
.endist #dealers-container section > div .icon,
.endist .dealer-deta-wrapper .icon {
    flex: none;
    width: 14px;
    margin-top: 2px;
    color: #9aa4ac;
    font-size: 12px;
    line-height: 1.4;
    transition: color var(--end-dur) var(--end-ease);
}
.endist .dealer-deta-wrapper .address:hover .icon,
.endist .dealer-deta-wrapper .website:hover .icon,
.endist .dealer-deta-wrapper .email:hover .icon,
.endist .dealer-deta-wrapper .phone:hover .icon { color: var(--end-blue); }

/* The email, phone and website ARE links in the shortcode's output but read as plain text.
   A dotted underline says so without turning the card into a wall of blue. */
.endist .dealer-deta-wrapper .text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--end-line-strong);
    text-underline-offset: 3px;
    transition: color var(--end-dur) var(--end-ease), text-decoration-color var(--end-dur) var(--end-ease);
}
.endist .dealer-deta-wrapper .text a:hover,
.endist .dealer-deta-wrapper .text a:focus-visible {
    color: var(--end-blue);
    text-decoration-color: var(--end-blue);
}

.endist .dealer-deta-wrapper > a.view-on-map {
    margin-top: auto;
    padding-top: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--end-blue);
    text-decoration: none;
    align-self: flex-start;
    transition: color var(--end-dur) var(--end-ease);
}
.endist .dealer-deta-wrapper > a.view-on-map:hover { color: var(--end-blue-deep); text-decoration: underline; }

/* ---------- the dark band ----------
   Full bleed, so it sits outside the container and re-declares it inside. */
.endist-band { background: var(--end-band); color: var(--end-band-ink); }
.endist-band .endist-container {
    padding-top: 100px;
    padding-bottom: var(--end-space-5);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--end-space-3);
    /* stretch, not center: on prod both columns render at the same height. */
    align-items: stretch;
}
.endist-band-text {
    padding: var(--end-space-4);
    background: var(--end-band-card);
    border-radius: var(--end-band-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* flex-start, or the column's default stretch makes the button full width. */
    align-items: flex-start;
}
.endist-band-text h2 {
    font-family: var(--end-font-head);
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    margin: 0 0 var(--end-space-2);
    letter-spacing: -0.01em;
    color: var(--end-band-ink);
}
.endist-band-text p {
    margin: 0 0 var(--end-space-3);
    color: rgba(255, 255, 255, .82);
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.6;
}

.endist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px, the minimum comfortable touch target. */
    height: 44px;
    padding: 0 26px;
    font-family: var(--end-font-body);
    font-weight: 600;
    font-size: 15px;
    background: var(--end-blue);
    color: #fff;
    border: 0;
    border-radius: var(--end-radius);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--end-dur) var(--end-ease);
    flex: none;
}
.endist-btn:hover { background: var(--end-blue-deep); color: #fff; }
.endist-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(14, 165, 223, .35); }

.endist-band-project { display: flex; }
.endist-showcase {
    position: relative;
    border-radius: var(--end-band-radius);
    overflow: hidden;
    flex: 1;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}
.endist-showcase-body { padding: var(--end-space-3); color: #fff; }
.endist-showcase-body h2 {
    font-family: var(--end-font-head);
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 var(--end-space-1);
    color: #fff;
}
.endist-showcase-body p { margin: 0; font-size: 15px; line-height: 1.45; opacity: .9; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
    .endist { --end-gutter: 40px; }
}
@media (max-width: 900px) {
    .endist { --end-gutter: 24px; }
    .endist-directory { grid-template-columns: 1fr; }

    /* One column, in DOM order: map, then list. The explicit desktop placement has to be
       undone here or both children land in the same cell and overlap. */
    .endist-list,
    .endist-map { grid-column: 1; grid-row: auto; }

    /* No bottom margin: the grid's own `gap` already separates the two rows, and adding one
       here stacked 32px of gap on top of 24px of margin. */
    .endist-map { position: static; margin: 0; }

    /* 260px, and the !important is load-bearing rather than lazy. The map's height is an
       inline `style="height: 700px"` in the theme's show-distributors-map.php, which no
       stylesheet can beat without it. That file is shared with the un-ported production
       layout, where 700px is today's behaviour, so the override lives here, scoped to this
       page's own wrapper, instead of changing a template six regions are currently serving.
       700px on a 667px-tall phone is a full screen of map before a single dealer.

       300px, NOT 260px. Measured: the 13 European dealers span 47 degrees of longitude and
       24 of latitude, which fits at zoom 3 in 300px of height once the marker padding is
       allowed for, and does not in 260px. The difference between the two is the difference
       between a readable map of Europe and a third of the globe, for 40px of page. */
    .endist-map #map { height: 300px !important; }

    .endist-list #dealers-container { max-height: none; overflow: visible; }
    .endist-band .endist-container {
        grid-template-columns: 1fr;
        padding-top: var(--end-space-5);
        align-items: start;
    }
    .endist-showcase { min-height: 260px; }
}
@media (max-width: 560px) {
    .endist { --end-gutter: 16px; }
    .endist-directory--nomap .endist-list .nested-content { grid-template-columns: 1fr; }
    .endist-band-text { padding: var(--end-space-3); }
    .endist-intro h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .endist-btn,
    .endist .dealer-deta-wrapper .icon,
    .endist .dealer-deta-wrapper .text a,
    .endist .dealer-deta-wrapper > a.view-on-map,
    .endist-filter input,
    .endist-filter-clear,
    .endist-mapall { transition-duration: 0.001ms; }

    /* THE ACCORDION IS NOT LISTED HERE. Its rules are declared further down the file (the
       GROUPED BY COUNTRY section), so a cancel written at this point loses to them on source
       order and silently does nothing. It is in the reduced-motion block at the end instead,
       after the rules it has to beat. */
}

/* ==========================================================================
   GROUPED BY COUNTRY

   The group is the card, and the dealers are rows inside it. The first cut had
   three nested boxes: a bordered card, inside a list, under a label floating
   above them that belonged to nothing. Giving the country the container and
   demoting the dealers to rows removes one level, and the grouping then reads
   from the structure rather than being announced by a caption.

   On UK/EU that is eleven boxes on the page instead of twenty three.

   Emitted by show-distributors.php only when the dealer-UI gate is open, so
   none of this can match on a production region.
   ========================================================================== */

.endist .endist-grp {
    background: var(--end-surface);
    border: 1px solid var(--end-line);
    /* 8px, the same radius as the buttons and the dealer rows elsewhere on this page. The
       first cut used the 12px large radius, which on a stack of narrow boxes reads as soft
       and slightly unresolved rather than tidy. */
    border-radius: var(--end-radius);
    box-shadow: var(--end-shadow);
}

/* NO ACCENT BAR. There was a 3px blue left border marking the country the map was showing.
   Rounded corners clip a straight edge, so it broke off short at the top and bottom and read
   as a rendering fault rather than a deliberate mark.

   It was redundant anyway: the sticky header already names the country you are in, and the
   map already lights that country's pins. The header's own colour shift is the whole cue. */

/* NOT STICKY, on purpose.
   It was, on the reasoning that a 700px list would scroll a heading off its own group. That
   reasoning does not survive the actual data: the groups are one or two dealers each, so a
   header is on screen for essentially all of its group without any help. What sticking did
   buy was an artefact, because the header keeps its rounded top corners while the card's top
   edge scrolls away, leaving a rounded bar floating against the card's straight sides.

   If a region ever grows a group long enough to need it (the US list has 13 dealers under one
   heading), the fix is `position: sticky; top: 0` here PLUS squaring the corners while stuck,
   not sticky on its own. */
/* IT IS A <summary> NOW, so it carries the open/close control as well as the label. The
   native disclosure triangle is removed in favour of the chevron the PHP prints, because the
   native one cannot be positioned and sits on the opposite side in every browser.
   `list-style: none` is the standards way, the ::-webkit- rule is Safari. */
.endist .endist-grp-head {
    background: var(--end-surface-2);
    display: flex;
    align-items: center;
    gap: var(--end-space-2);
    padding: 11px 18px;
    /* 48px, because on a phone this is now the control people aim at most on the page, and
       a 40px row is the difference between one tap and two (Fitts's law). */
    min-height: 48px;
    border-bottom: 1px solid var(--end-line);
    border-radius: calc(var(--end-radius) - 1px) calc(var(--end-radius) - 1px) 0 0;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--end-dur) var(--end-ease), background var(--end-dur) var(--end-ease);
}
.endist .endist-grp-head::-webkit-details-marker { display: none; }
.endist .endist-grp-head:hover { background: #f1f3f6; }
/* :focus-visible, not :focus. Clicking a summary focuses it, and a ring drawn on every
   click reads as an error state. */
.endist .endist-grp-head:focus-visible { outline: 2px solid var(--end-blue); outline-offset: -2px; }

/* Closed, the header IS the whole card, so its bottom border would draw a line across the
   card's rounded bottom edge and the square corners would cut the curve. */
.endist .endist-grp:not([open]) > .endist-grp-head {
    border-bottom-color: transparent;
    border-radius: calc(var(--end-radius) - 1px);
}

.endist .endist-grp-chev { line-height: 0; color: var(--end-ink-2); transition: transform var(--end-dur) var(--end-ease); }
.endist .endist-grp-chev svg { display: block; width: 16px; height: 16px; }
.endist .endist-grp[open] > .endist-grp-head .endist-grp-chev { transform: rotate(180deg); }

/* ANIMATING A <details> AT ALL. A panel of unknown height cannot be transitioned with the
   usual properties, so this uses ::details-content with interpolate-size, which is the only
   way to transition to `auto`. Where that is not supported (Safari and Firefox today) the
   group simply snaps open, which is a fine outcome and the reason the feature is not built
   on the animation. @supports keeps the unsupported browsers out of the rule entirely rather
   than leaving them with a zero-height panel. */
@supports selector(::details-content) {
    .endist { interpolate-size: allow-keywords; }
    .endist .endist-grp::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--end-dur) var(--end-ease), content-visibility var(--end-dur) allow-discrete;
    }
    .endist .endist-grp[open]::details-content { block-size: auto; }

    /* Inside the @supports block on purpose: ::details-content only exists here, and a
       reduced-motion cancel written outside it would be parsed by browsers that do not know
       the selector and dropped along with the rest of the rule. */
    @media (prefers-reduced-motion: reduce) {
        .endist .endist-grp::details-content { transition: none; }
    }
}
.endist .endist-grp-name {
    font-family: var(--end-font-head);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.005em;
    color: var(--end-ink);
    transition: color var(--end-dur) var(--end-ease);
}
/* NO COLOUR CHANGE ON THE CURRENT GROUP. It used to turn brand-blue-deep, which was wrong
   twice over: the deep shade is the hover tone on this page, never a resting colour, and
   one header sitting blue while ten sit black reads as a state nobody asked about. The map
   already answers 'which country am I looking at' by lighting that country's pins red, so
   the list does not need to say it a second time in a colour that moves as you scroll.
   .is-current is still set on the group, because the map highlighting keys off it. */
/* The count stays plain text in the header's own tone. A pill here would be a third box on
   the one element whose whole purpose was to remove a box. */
.endist .endist-grp-count {
    font-size: 12.5px;
    color: var(--end-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* A dealer inside a group is a row, so it drops the card chrome the group now carries.
   These have to out-specify the ungrouped card rules earlier in this file, which is what the
   extra .endist-grp-body in the selector is doing. */
.endist .endist-grp-body .dealer-deta-wrapper {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 15px 18px !important;
    height: auto;
    /* Transparent, NOT white. A child's background is not clipped by its parent's
       border-radius, so an opaque white row with square corners painted straight over the
       group's rounded bottom corners and squared them off. The group already paints the
       white, so the row does not need to. */
    background: transparent !important;
}

/* The last row still needs the corner itself, so the active tint follows the curve rather
   than squaring it off again the moment someone clicks a row. Inset by the group's 1px
   border, same as the header's top corners. */
.endist .endist-grp-body .dealer-deta-wrapper:last-child {
    border-radius: 0 0 calc(var(--end-radius) - 1px) calc(var(--end-radius) - 1px);
}
/* Hairline between siblings only, so the group's own border draws every outside edge. */
.endist .endist-grp-body .dealer-deta-wrapper + .dealer-deta-wrapper { border-top: 1px solid var(--end-line); }

/* The theme puts .border-bottom on every card. Inside a group that doubles up with the
   hairline above and draws a line under the last row, against the group's own edge. */
.endist .endist-grp-body .dealer-deta-wrapper.border-bottom { border-bottom: 0 !important; }

/* Groups are what the list stacks now, not cards. */
.endist .endist-list .nested-content { gap: 14px; }

/* .is-actionable IS GONE, and deliberately. It existed because the header only became a
   control once the map could answer a click, so on a map-less region (CN) it had to stay
   plain text. As a <summary> the header is always a control: it opens its own group, with or
   without a map, with or without JavaScript. Framing the map is now the extra it does when
   there is one to frame. The cursor, hover and focus styles moved up to the base rule. */

/* NO HIGHLIGHT ON THE ROW SENT TO THE MAP. It used to keep a pale blue fill, which was
   defensible (you clicked it, so it is feedback you asked for) but redundant: clicking
   "View on Map" zooms the map to that dealer with their pin in the middle, which says the
   same thing better and clears itself the moment you pick another. The fill never cleared,
   and it left one blue block sitting in an otherwise plain list. */

/* A TINT WHILE YOU POINT AT A ROW IS A DIFFERENT THING, and does not reopen the decision
   above. That one was rejected for persisting: a fill left behind by a click that nothing
   cleared. This one exists only while the cursor or the keyboard focus is on the row and goes
   the instant it leaves, which was the entire objection. It earns its place by saying which
   row is driving the pin the map just grew, so the two panes are not left to be matched up by
   position alone.

   Same #f1f3f6 the group header already uses on hover, not a new colour, so the list still has
   one interactive tone. Needs the extra class and !important to out-weigh the transparent
   background the grouped-row rule sets. */
.endist .endist-grp-body .dealer-deta-wrapper.is-picked { background: #f1f3f6 !important; }

/* MAP PINS.
   Google's own AdvancedMarkerElement pin lives in a shadow root and cannot be styled, so
   directory-groups.js replaces each marker's content with this element.

   EVERY PIN IS RED, AT FULL STRENGTH. The first cut greyed the pins back to 45% and lit only
   the country being read in the list. That was wrong about the data, not just the look: all
   sixteen are live distributors, and dimming fifteen of them made them read as closed or
   unavailable. A directory's job is to show every option.

   Red because a Google base map is mostly blue water and blue-grey roads, so a blue marker
   sits INTO the background rather than on top of it. Red is the one hue the base map never
   uses for a large area, which is why map markers have been red since paper. This is Google's
   own marker red, so it reads on both the green land and the blue sea. */
.endist .endist-pin {
    width: 22px;
    height: 28px;
    transition: transform var(--end-dur) var(--end-ease), filter var(--end-dur) var(--end-ease);
    transform-origin: 50% 100%;
}
.endist .endist-pin svg { display: block; width: 22px; height: 28px; }
.endist .endist-pin path { fill: #D93025; }

/* The country being read in the list is emphasised by SIZE AND SHADOW, never by colour or
   opacity, so the emphasis cannot be misread as the others being switched off. A bigger pin
   with a shadow lifts off the map; a darker or fainter one just looks like different data.
   z-index keeps it above its neighbours when pins overlap, which they do in cities. */
.endist .endist-pin.is-lit {
    transform: scale(1.35);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
    z-index: 3;
}
.endist .endist-pin:hover { transform: scale(1.2); }

/* FILTERED OUT, which is not the same statement as any of the above and so is not made in the
   same language. The rule directly above is that emphasis never uses opacity, because a faint
   pin reads as a distributor who has shut down. A filter is not emphasis: the card has left
   the list, so the pin leaves the map, and the count beside the field says how many remain.
   Cleared filter, and it is simply back. */
.endist .endist-pin.is-filtered-out { display: none; }

/* THE ONE DEALER BEING POINTED AT, which is a narrower statement than .is-lit and so steps
   above it: .is-lit says "this is the country you have scrolled to", .is-picked says "this is
   the card under your cursor or focus". Size and shadow again, never colour or opacity, for
   the reason the block above gives: a dimmed pin reads as a closed distributor.

   Declared after :hover deliberately. Both selectors weigh the same, so source order is what
   stops a pin you are pointing at in the LIST from shrinking to the pin-hover size when the
   cursor happens to cross it on the map. */
.endist .endist-pin.is-picked {
    transform: scale(1.6);
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .5));
    z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
    .endist .endist-grp-head,
    .endist .endist-grp-name,
    .endist .endist-grp-body .dealer-deta-wrapper,
    .endist .endist-pin { transition-duration: 0.001ms; }

    /* The accordion, cancelled from here rather than from the earlier block, because these
       selectors have to come after the rules they override. The group still opens and closes,
       it just stops sliding: the state is carried by the chevron's direction and by the
       content itself, never by the movement, so nothing is lost by stopping it. */
    .endist .endist-grp-head,
    .endist .endist-grp-chev { transition-duration: 0.001ms; }
    .endist .endist-pin.is-lit,
    .endist .endist-pin.is-picked { transform: none; }   /* shadow still marks it, and the
                                                            picked pin's is the deeper one */
}

/* "Your location", added by directory-groups.js to the one group it moved to the top. Without
   it that group looks like an alphabetisation bug to anyone scanning down the list. Quiet:
   it explains an order, it does not compete with the country name. */
.endist .endist-grp-here {
    /* 12px is the floor for customer-facing text on this site. It was 11.5px. */
    font-size: 12px;
    font-weight: 600;
    /* The deep shade here is NOT the resting-colour mistake made elsewhere: at this size it is
       small text, and brand blue on white is about 2.8:1, which fails WCAG AA (4.5:1). The
       deep shade is about 5.3:1 and passes. Brand blue stays correct for the links, which are
       larger. */
    color: var(--end-blue-deep);
    background: rgba(14, 165, 223, .10);
    border-radius: var(--end-radius-pill, 999px);
    padding: 2px 8px;
    white-space: nowrap;
}


/* THE COUNTRY TAG ON A CARD.
   Emitted on every grouped card, but only the no-map layout shows it. Where there is a map the
   group heading names the country once, and repeating it on every card underneath would be the
   same redundancy as the "UNITED STATES - " prefixes typed into the dealer names. */
.endist .endist-card-country { display: none; }
.endist-directory--nomap .endist-card-country {
    display: inline-flex;
    align-self: flex-start;
    font-family: var(--end-font-head);
    font-size: 12px;
    font-weight: 600;
    color: var(--end-blue-deep);
    background: rgba(14, 165, 223, .10);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 2px;
}

/* ==========================================================================
   NO MAP on this region (CN, or any host without a Maps key).

   Different problem, different layout. With a map the list is a 430px column, so grouping the
   dealers into country cards reads well. Without one the list owns the full width, and the
   same treatment gave country cards of unequal height sitting in a row with a dangling gap
   where the empty grid tracks were: it read as unfinished rather than as a grid.

   So here the groups stop being containers and the DEALERS are the cards: one flat two-up
   grid, each card tagged with its own country. Kim's call, and the right one at this size.
   The grid is capped at 1100px so a card stays a readable width rather than stretching an
   address across 1600px.

   HOW THE FLATTENING WORKS. The markup is still grouped (group > head > body > cards) because
   the map layout needs it. `display: contents` makes the group and its body vanish from the
   box tree while keeping their children, so every dealer card becomes a direct item of the
   one grid. No second markup path in PHP, no duplicated renderer.
   ========================================================================== */
.endist-directory--nomap { grid-template-columns: 1fr; }
.endist-directory--nomap .endist-list #dealers-container { max-height: none; overflow: visible; }

.endist-directory--nomap .endist-list .nested-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1100px;
    /* NOT align-items: start. Stretch is the grid default and it is what makes every card in
       a row end level, which is the whole reason this layout was chosen over the last one. */
}
.endist-directory--nomap .endist-grp,
.endist-directory--nomap .endist-grp-body { display: contents; }

/* The heading is redundant once each card carries its country. */
.endist-directory--nomap .endist-grp-head { display: none; }

/* The dealer takes the card chrome back that the grouped layout had moved to its container. */
.endist-directory--nomap .endist-grp-body .dealer-deta-wrapper {
    background: var(--end-surface) !important;
    border: 1px solid var(--end-line);
    border-radius: var(--end-radius);
    box-shadow: var(--end-shadow);
    padding: 16px 18px !important;
    height: auto;
}
/* Undo the row treatment: no hairline between siblings, no inherited bottom corners. */
.endist-directory--nomap .endist-grp-body .dealer-deta-wrapper + .dealer-deta-wrapper { border-top: 1px solid var(--end-line); }
.endist-directory--nomap .endist-grp-body .dealer-deta-wrapper:last-child { border-radius: var(--end-radius); }

@media (max-width: 900px) {
    .endist-directory--nomap .endist-list .nested-content { grid-template-columns: 1fr; }
}