/*
 * Dealers page — page-specific styles.
 * Loaded after user.css (scripts/info/index.tpl's Dealers bootstrap block
 * renders after <head>, so this link always lands later in the DOM
 * regardless of how user.css itself gets injected). Reuses user.css's
 * tokens/classes wherever possible; only adds what genuinely has no
 * existing LOCA analog (map, markers, popup, translucent permanent dealer
 * panel, dark directory layout). Scoped under .page-dealers — added to
 * <body> at runtime by js/dealers.js, since this file cannot rely on a
 * template-level body class — so nothing here can leak onto other pages.
 */

.page-dealers {
    background: var(--theme-color-white);
    /* The map stays a full-bleed 100vw hero, but a few things on top of it
       (the +/- control, the dealer panel) need to align to the same
       1440px-centered content grid the directory section below already
       uses (.pd-directory-contain: max-width:1440px, margin:0 auto) —
       not user.css's .container, which is percentage-based and doesn't
       hold at a fixed 1440px. 40px mirrors that section's own gutter as
       the floor once the viewport gets narrower than 1440px+80px. */
    --pd-content-inset: max(40px, calc((100vw - 1440px) / 2));
}

/* .logo-bar carries the real production classes ("row container" —
   confirmed against scripts/body_head.tpl), and user.css's own .container
   cascade genuinely renders it wider than .header-inner at some viewport
   widths (a pre-existing characteristic of user.css, not something this
   page introduces or should "fix" by changing the header's layout). The
   overflow this produces is normally invisible either way, but its
   focusable content (user-account/basket links) can end up positioned
   outside the viewport — a second real trigger for the same "focusing an
   off-screen element scrolls <body> sideways" issue fixed for the map
   below. Clipping it here changes nothing visible; it only stops that
   already-invisible overflow from being reachable. */
.page-dealers .header-inner {
    overflow: hidden;
}

.page-dealers .main {
    padding:0;
}

#join-network .cnt-module-box {
    margin:0 auto;
}

/* ==========================================================================
   1. Map hero — the dominant element, full-bleed under the nav bar
   ========================================================================== */

.page-dealers #map-hero {
    position: relative;
    /* General containment for this hero — nothing inside (map controls,
       dropdown, drawer) is meant to extend past its bounds, and keeping
       that enforced here is cheap insurance against the page's scrollable
       width ever silently widening again. */
    overflow: hidden;
    height: 82vh;
    min-height: 560px;
    max-height: 860px;
    background: var(--theme-color-whitef2);
}

.page-dealers .pd-map {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Static safety net for Leaflet's own .leaflet-touch-zoom class toggle
   (js/dealers.js applyMapInteractionMode) — Leaflet only adds that class,
   and its touch-action CSS, once map.touchZoom.enable() runs at init. In
   the brief window before that JS executes, the container has no
   touch-action at all, letting iOS Safari's native page pinch-zoom win a
   fast first touch. Setting the exact same value here from first paint
   closes that gap without ever fighting the JS state. Scoped to the map
   element only — never an ancestor — matching Leaflet's own scope
   exactly, and never touch-action: none, which would also briefly block
   native one-finger page scroll before dragging's mobile/desktop mode is
   applied. */
.page-dealers .pd-map,
.page-dealers .pd-map .leaflet-container {
    touch-action: pan-x pan-y;
}

/* Plain OSM tiles desaturated toward LOCA's restrained monochrome
   language — tile source + filter combination taken from
   reference/loca-leaflet-demo (its UI/layout/markers/popups are NOT
   reused, only this tile appearance). Scoped to the tile pane only —
   never markers, popups, or controls, which live in separate Leaflet
   panes untouched by this rule. */
.page-dealers .leaflet-tile-pane {
    filter: grayscale(1) contrast(0.88) brightness(1.08);
}
.pd-map .leaflet-tile {
     position: absolute !important;
}
/* Leaflet ships its own rounded/shadowed control chrome — bring it in
   line with LOCA's zero-radius, no-shadow, black/white language. */
.page-dealers .leaflet-control-zoom {
    border: 1px solid var(--theme-color-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Left edge aligned to the 1440px content grid's left edge, not the
       raw viewport edge — the map itself stays full-bleed underneath. */
    margin: 20px 20px 20px var(--pd-content-inset) !important;
}
.page-dealers .leaflet-control-zoom a {
    width: 38px !important;
    height: 38px !important;
    line-height: 36px !important;
    border-radius: 0 !important;
    background: var(--theme-color-white);
    color: var(--theme-color-black);
    font-family: var(--theme-font-family);
}
.page-dealers .leaflet-control-zoom a:hover {
    background: var(--theme-color-black);
    color: var(--theme-color-white);
}
.page-dealers .leaflet-control-zoom-in { border-bottom: 1px dashed var(--theme-color-black) !important; }
.page-dealers .leaflet-bar,
.page-dealers .leaflet-bar a:last-child,
.page-dealers .leaflet-bar a:first-child { border-radius: 0 !important; }
.page-dealers .leaflet-touch .leaflet-control-layers,
.page-dealers .leaflet-touch .leaflet-bar { border: 0; }

/* Mobile-only "show all dealers" control (js/dealers.js ShowAllControl) —
   matches the zoom control's chrome so it reads as part of the same
   control family. Positioning (topright corner offset) is set in the
   767px mobile media block below, alongside the zoom control's own
   mobile margin. */
.page-dealers .pd-map-showall {
    border: 1px solid var(--theme-color-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--theme-color-white);
    color: var(--theme-color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    cursor: pointer;
}
.page-dealers .pd-map-showall:hover {
    background: var(--theme-color-black);
    color: var(--theme-color-white);
}

.page-dealers .pd-map-notice {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--theme-color-black);
    color: var(--theme-color-white);
    font-size: 13px;
    padding: 10px 16px;
    max-width: 90%;
    text-align: center;
}

/* ==========================================================================
   2. Permanent dealer panel — a pure overlay on the map's right edge.
   Always visible on desktop (no open/close state, no drawer): its own
   fixed-width box positioned above the map, never reserving layout width
   or resizing the map itself. Exact LOCA translucent-chrome values (map
   must show, blurred, through it) — rgba(255,255,255,.5) + blur(9px), a
   restrained shadow standing in for the outer border to keep it floating
   above the map without a hard edge.
   ========================================================================== */

.page-dealers .pd-panel {
    position: absolute;
    /* Full usable map height minus 24px top/bottom — not vertically
       centered, not clamped to clear the sticky nav; exactly 24px from
       the map's own top and bottom edges. */
    top: 24px;
    bottom: 24px;
    /* Right edge aligned to the 1440px content grid's right edge, not the
       raw viewport edge — the map stays full-bleed behind/beyond it. */
    right: var(--pd-content-inset);
    width: 392px;
    max-width: calc(100% - 40px);
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
}

.page-dealers .pd-panel-head {
    flex: none;
    padding: 28px 26px 18px;
    border-bottom: 1px dashed rgba(0, 0, 0, .16);
}
.page-dealers .pd-panel-head h3 {
    font-size: 26px;
    line-height: 116%;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 18px;
}

.page-dealers .pd-select-wrap { position: relative; }
.page-dealers .pd-select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: 1px solid var(--theme-color-black);
    border-radius: 0;
    background: rgba(255, 255, 255, .5);
    padding: 13px 36px 13px 14px;
    font-family: var(--theme-font-family);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--theme-color-black);
    cursor: pointer;
    outline: none;
}
/* A single intentional focus treatment — the select's own 1px border
   stays as-is, and this is the only focus indicator drawn on top of it.
   Relying on appearance:none + outline:none at rest keeps browsers from
   also drawing their own native focus ring (Firefox's dotted inner ring
   in particular) underneath/alongside this one, which is what produced
   the earlier "double border" look. */
.page-dealers .pd-select-wrap select:focus-visible {
    outline: 2px solid var(--theme-color-yellow);
    outline-offset: 2px;
}
.page-dealers .pd-select-wrap .pd-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .6;
}

.page-dealers .pd-panel-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.page-dealers .pd-panel-group-title {
    padding: 16px 26px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--theme-color-black);
    opacity: .5;
}

/* Mobile-only modifier — the expanded mobile list's "All dealers" row and
   its country headings reuse .pd-panel-group-title's color/font-family
   (same base class, unchanged — desktop's own read-only group titles keep
   using it as a plain <div>, untouched) but override its small-label
   sizing entirely: this needs to read as an interactive "scope row", not
   a passive section heading, so it's sized and weighted much closer to
   the dealer name below it (13.5px/600) than the old 11px/700 caps
   treatment — bigger still, since it sits a level above "dealer name" in
   the selector → country → dealer → city hierarchy, but a plain-cased
   16(ish)px/600 rather than the collapsed selector's own bordered-box
   prominence, so it doesn't compete with that. Name + count are one
   .pd-pgt-label text run (not a separate right-aligned count) so they
   read as a single "AUSTRIA (2)" unit; the arrow is the only thing
   pinned to the row's right edge. Touch gets a tap tint only, no
   hover-only animation left stuck after a tap; a fine hover-capable
   pointer also gets a plain background swap, no translate/scale/slide
   motion — this is a heading, not a dealer row. */
.page-dealers .pd-panel-group-title-clickable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--theme-font-family);
    -webkit-tap-highlight-color: transparent;
    opacity: 1; /* the shared opacity above still mutes the base label; this row's own hit target stays fully opaque so its hover/active tint reads correctly */
}
.page-dealers .pd-pgt-label {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: normal;
    opacity: 1;
}
/* ICON.chevron reused as-is (the same asset the toggle's own expand
   indicator and the desktop select's dropdown arrow already use) —
   rotated to point right instead of down, sized down slightly and kept
   at a clearly secondary opacity so it reads as a supporting affordance,
   not competing with the label text or the dealer avatars below it. */
.page-dealers .pd-pgt-arrow {
    flex: none;
    display: inline-flex;
    opacity: .45;
    transform: rotate(-90deg);
}
.page-dealers .pd-pgt-arrow svg { width: 8px; height: 5px; }
@media (hover: hover) and (pointer: fine) {
    .page-dealers .pd-panel-group-title-clickable:hover { background: rgba(0, 0, 0, .04); }
}
.page-dealers .pd-panel-group-title-clickable:focus-visible {
    outline: 2px solid var(--theme-color-yellow);
    outline-offset: -2px;
    background: rgba(0, 0, 0, .04);
}
.page-dealers .pd-panel-group-title-clickable:active { background: rgba(0, 0, 0, .06); }

/* Hover motion (concept only borrowed from reference/loca-leaflet-demo):
   the row itself never moves — it owns the divider and stays put so the
   panel never shifts — only its inner content wrapper translates.
   color is set explicitly (not left to inherit) so this shared row —
   used by both the desktop panel and the mobile list — can't pick up a
   browser/global button or focus/active text color from outside this
   component; every descendant below reasserts it for the same reason.
   -webkit-tap-highlight-color neutralizes the browser's own default
   translucent-blue tap flash on touch devices — with no explicit value
   here it defaults to a blue overlay on tap, on top of this exact text. */
.page-dealers .pd-panel-row {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .14);
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--theme-font-family);
    color: var(--theme-color-black);
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease;
}
.page-dealers .pd-panel-row:last-child { border-bottom: 0; }
.page-dealers .pd-panel-row:hover,
.page-dealers .pd-panel-row:focus,
.page-dealers .pd-panel-row:focus-visible,
.page-dealers .pd-panel-row:active {
    color: var(--theme-color-black);
}

.page-dealers .pd-panel-row-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    transform: translateX(0);
    transition: transform .2s ease, background-color .15s ease;
}
/* Hover is a mouse-only affordance — touch devices get no :hover event
   worth animating (it either never fires or fires "stuck" after a tap),
   so both the translate and the solid-white row treatment are scoped to
   fine-pointer/hover-capable inputs. Keyboard focus gets the same
   treatment regardless of device, since that's an accessibility need,
   not a hover effect (mirrored below, outside the media query). Divider
   and row container never move — only the background (no layout impact),
   position and text color change; the badge/logo is never touched by any
   of this, so it always renders at full opacity. */
@media (hover: hover) and (pointer: fine) {
    .page-dealers .pd-panel-row:hover { background: #fff; }
    .page-dealers .pd-panel-row:hover .pd-panel-row-inner { transform: translateX(7px); }
    .page-dealers .pd-panel-row:hover .pd-panel-row-name,
    .page-dealers .pd-panel-row:hover .pd-panel-row-addr { color: var(--theme-color-black); }
}
.page-dealers .pd-panel-row:focus-visible { background: #fff; }
.page-dealers .pd-panel-row:focus-visible .pd-panel-row-inner { transform: translateX(7px); }
.page-dealers .pd-panel-row:focus-visible .pd-panel-row-name,
.page-dealers .pd-panel-row:focus-visible .pd-panel-row-addr { color: var(--theme-color-black); }
/* Simple tap feedback for touch — no translate, no solid white, just a
   brief tint (mobile drawer rows share this same component). */
.page-dealers .pd-panel-row:active .pd-panel-row-inner {
    background: rgba(0, 0, 0, .05);
}
.page-dealers .pd-panel-row:active .pd-panel-row-name,
.page-dealers .pd-panel-row:active .pd-panel-row-addr { color: var(--theme-color-black); }

.page-dealers .pd-panel-row-body { min-width: 0; }
.page-dealers .pd-panel-row-name {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 2px;
    color: rgba(0, 0, 0, .72);
    transition: color .2s ease;
}
.page-dealers .pd-panel-row-addr {
    display: block;
    font-size: 11.5px;
    line-height: 145%;
    color: rgba(0, 0, 0, .54);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease;
}
.page-dealers .pd-panel-empty { padding: 40px 26px; text-align: center; opacity: .5; font-size: 14px; }

/* ==========================================================================
   4. Shared dealer badge (placeholder logo) + service tags
   ========================================================================== */

.page-dealers .dealer-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--theme-color-whitef2);
}
.page-dealers .dealer-badge em {
    font-style: normal;
    font-size: 12px;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--theme-color-black);
}
.page-dealers .dealer-badge.dealer-badge-photo { background: none; overflow: hidden; }
.page-dealers .dealer-badge.dealer-badge-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Popup sits on a light background — the default (no-logo) country-code
   badge flips to negative there so it doesn't wash out against it. Real
   dealer photos (.dealer-badge-photo) are untouched; this only targets
   the placeholder country-code badge, and only inside the popup. */
.page-dealers .dealer-popup-head .dealer-badge:not(.dealer-badge-photo) {
    background: var(--theme-color-black);
}
.page-dealers .dealer-popup-head .dealer-badge:not(.dealer-badge-photo) em {
    color: var(--theme-color-white);
}

.page-dealers .dealer-services {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 9px;
    margin: 8px 0;
}
.page-dealers .dealer-services span {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .03em;
    /* text-transform: uppercase; */
    opacity: .8;
}
.page-dealers .dealer-services span:not(:last-child)::after {
    content: "·";
    margin-left: 9px;
    opacity: .8;
}

/* ==========================================================================
   5. Map popup content — same translucent/blur chrome family as
   .pd-chrome / .pd-drawer / .cnt-bread-nav-bar (not a new glass style),
   wider and more horizontal than the original narrow/tall version, no CTA
   ========================================================================== */

.page-dealers .leaflet-popup-content-wrapper {
    border-radius: 0;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .12);
    /* Padding lives here now, not as margin on .leaflet-popup-content
       below — a child's vertical margin collapses through a parent that
       has no padding/border of its own (exactly the case this wrapper
       was in), so the old 16px top/bottom margin was rendering *outside*
       this wrapper's own box instead of inset within it: the translucent
       background stopped short of the popup's actual top/bottom edges,
       leaving bare gaps there. Padding can't collapse, so the background
       now genuinely fills the full popup surface. */
    padding: 16px 18px;
}
/* No width override here — Leaflet computes and sets an inline width
   from the minWidth/maxWidth bindPopup options (js/dealers.js), which is
   exactly the 380–420px target; forcing width:auto would fight that. */
.page-dealers .leaflet-popup-content { margin: 0; }
/* The little triangular tip Leaflet renders below the popup, pointing at
   its marker — identical translucent-white treatment to every other
   surface (panel/popup), plus its own soft shadow so it still reads as a
   distinct pointer despite backdrop-filter being a weaker effect on a
   tiny 45deg-rotated, clipped element than on the flat popup body. */
.page-dealers .leaflet-popup-tip {
    border-radius: 0;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
.page-dealers .leaflet-popup-close-button {
    color: var(--theme-color-black) !important;
    opacity: .5;
    top: 10px !important;
    right: 10px !important;
}
.page-dealers .leaflet-popup-close-button:hover { opacity: 1; }

.page-dealers .dealer-popup-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.page-dealers .dealer-popup-head h3 { font-size: 17px; line-height: 122%; margin-bottom:0;}
.page-dealers .dealer-popup-head .pd-type-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .5;
    margin-top: 2px;
}
.page-dealers .dealer-popup-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(0, 0, 0, .16);
}
.page-dealers .dealer-popup-fields li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 145%; opacity: .8; }
.page-dealers .dealer-popup-fields li svg { flex: none; margin-top: 3px; opacity: .7; }
/* Neutral LOCA link treatment, not the browser's default blue — an
   underline communicates "clickable" on its own, no color needed to
   carry that. Hover is a desktop-only enhancement (see media query
   below); touch devices keep the plain underlined state, no reliance on
   a hover state that mobile browsers won't reliably give them. */
.page-dealers .dealer-popup-fields a {
    color: rgba(26, 26, 26, .7);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
@media (hover: hover) {
    .page-dealers .dealer-popup-fields a:hover {
        color: var(--theme-color-black);
        text-decoration: none;
    }
}

/* Services are the least important line in the popup — small, muted,
   sentence case (not the bold uppercase treatment used elsewhere), and
   free to wrap onto a second line without adding real height. */
.page-dealers .dealer-popup .dealer-services { margin: 0; }
.page-dealers .dealer-popup .dealer-services span {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: .6;
}

/* custom marker pin — yellow outer / black center, inverted from V2 for
   visibility against the light monochrome basemap.
   IMPORTANT: no `transition: transform` here. This class lands on the
   actual .leaflet-marker-icon element (see pinIcon() in js/dealers.js),
   which Leaflet repositions every animation frame via inline `transform:
   translate3d(...)`. A CSS transition on that same property fights
   Leaflet's own per-frame updates — the rendered position lags behind a
   constantly-moving target instead of snapping to it, which combined
   with flyTo's curved zoom+pan path is what previously made the marker
   look like it was travelling along its own independent curved arc. */
.page-dealers .dealer-pin { cursor: pointer; }

/* ==========================================================================
   6. Full directory — full-bleed #1A1A1A background, ~1440px content
   ========================================================================== */

.page-dealers .pd-directory-dark {
    background: var(--theme-color-gray-dark);
    padding: 96px 0;
}
.page-dealers .pd-directory-contain {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

.page-dealers .pd-directory-head { max-width: 640px; margin: 0 0 48px; }
.page-dealers .pd-directory-head h2 { color: #f2f2f2; }
.page-dealers .pd-directory-head p { color: #E5E5E5; opacity: .7; margin-top: 12px; }

.page-dealers .pd-directory-group { margin-bottom: 48px; }
.page-dealers .pd-directory-group:last-child { margin-bottom: 0; }
.page-dealers .pd-directory-group h3 {
    color: #f2f2f2;
    font-size: 27px;
    padding-bottom: 14px;
    margin-bottom: 40px;
    border-bottom: 1px dashed #4D4D4D;
}
.page-dealers .pd-directory-group h3 span { font-weight: 400; opacity: .45; font-size: .55em; margin-left: 6px; }

.page-dealers .pd-directory-list {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 40px;
    /* Items no longer carry their own border/padding for separation (see
       .pd-dealer-row below), so the list itself now owns that spacing. */
    row-gap: 40px;
}
@media all and (min-width: 700px) {
    .page-dealers .pd-directory-list { grid-template-columns: 1fr 1fr; }
}
@media all and (min-width: 1200px) {
    .page-dealers .pd-directory-list { grid-template-columns: 1fr 1fr 1fr; }
}

/* Grid, not flex: col1 (56px) is the avatar, col2 (1fr) is everything
   else. The avatar and .pd-dealer-info fall into the grid's implicit row
   1 (one in each column); .pd-dealer-content is pinned to row 2 of col2
   only. That single structural rule is the entire "72px alignment" — the
   content column's left edge is always exactly 56px avatar + 16px gap,
   with no hardcoded offset duplicated anywhere, and it holds at any
   viewport width the same way. align-items:center keeps the avatar and
   the name/city block centered on each other. */
.page-dealers .pd-dealer-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: top;
}
.page-dealers .pd-dealer-info { min-width: 0; margin-top:9px;}
.page-dealers .pd-dealer-info h4 { color: #f2f2f2; font-size: 17px; margin-bottom: 2px; }
.page-dealers .pd-dealer-locality {
    color: #EEAD1B;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .9;
}
/* Type tag inherits the locality's own size/weight/case — dimmed relative
   to the city so the two read as primary/secondary, not two equal facts. */
.page-dealers .pd-dealer-locality .pd-type-tag { color: #E5E5E5; opacity: .6; }

/* Contact details / services / CTA — three sections, each 8px apart, all
   sharing the same column-2 start. */
.page-dealers .pd-dealer-content {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.page-dealers .dealer-fields { display: flex; flex-direction: column; gap: 8px; padding-left:0;margin-bottom:0;}
.page-dealers .dealer-fields li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 145%; color: #E5E5E5; opacity: .8; }
.page-dealers .dealer-fields li svg { flex: none; margin-top: 3px; opacity: .8; }
/* Neutral LOCA link treatment (matches the popup's identical pattern on
   its light background) — underlined muted text by default, full white
   with the underline dropped on hover; touch devices never rely on that
   hover state since they keep the plain underlined look regardless. */
.page-dealers .dealer-fields a {
    color: #E5E5E5;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
@media (hover: hover) {
    .page-dealers .dealer-fields a:hover { color: #fff; text-decoration: none; }
}
/* Services sit inside .pd-dealer-content's own 8px gap now, so the
   shared .dealer-services rule's general-purpose margin (see section 4 —
   also used by the map popup, which keeps its own spacing) is zeroed out
   here specifically. */
.page-dealers .pd-directory-dark .pd-dealer-content .dealer-services { margin: 0; }
.page-dealers .pd-directory-dark .dealer-services span { color: #E5E5E5; opacity: .8; }

.page-dealers .pd-dealer-actions { display: flex; }

/* "Pokaż na mapie" reuses the real .btn-alt idiom as-is (same black-rest/
   yellow-hover wipe, untouched — see user.css) — only its footprint is
   trimmed down for this repeated, per-card, secondary action. Scoped to
   this one modifier class (not a blanket .btn-alt override) so nothing
   else on the site using plain .btn-alt is affected; .page-dealers keeps
   it out of every other page too. Specificity here (2 classes on the
   button, 3 on its span) already outranks user.css's own font-size
   rules for these elements, so no !important is needed. */
.page-dealers .btn-alt-sm {
    padding: 8px 12px;
    margin: 0 32px 32px 0;
    font-size: 14px;
}
.page-dealers .btn-alt-sm .btn-span {
    font-size: 14px;
}

.page-dealers .pd-load-error { color: #E5E5E5; text-align: center; padding: 40px 0; }

/* ==========================================================================
   7. B2B / join-network CTA — minimal, reuses existing type + .btn only
   ========================================================================== */

/* Full-bleed light band — reads as clearly separate from the dark
   directory immediately above it. */
.page-dealers #join-network { background: var(--theme-color-whitef2); }

.page-dealers .pd-cta-inner { max-width: 620px; margin: 0 auto; text-align: center; padding: 96px 0; }
.page-dealers .pd-cta-inner p {margin: 16px 0 28px; }
.page-dealers .pd-cta-contact { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-bottom: 32px; font-size: 18px; }
.page-dealers .pd-cta-contact span { display: inline-flex; align-items: center; gap: 7px; opacity: .8; }
/* Same neutral LOCA link treatment as the popup/directory, tuned for
   this section's light background — no browser-default blue. */
.page-dealers .pd-cta-contact a {
    color: rgba(26, 26, 26, .7);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
@media (hover: hover) {
    .page-dealers .pd-cta-contact a:hover { color: var(--theme-color-black); text-decoration: none; }
}

/* ==========================================================================
   8. Directory background shapes — shared base styling

   Ring/circle stay position:absolute (they scroll normally with the
   section, only their cursor-parallax translate is dynamic — see
   js/dealers.js). The triangle overrides position to fixed in section 9
   below (it stays put on screen while the section scrolls beneath it).
   ========================================================================== */

.js-scroll-shapes {
    position: relative;
}
.js-scroll-shape {
    position: absolute;
    display: block;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}
.js-scroll-shape svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Both variants only set `color` — the shapes' stroke uses currentColor
   (see js/dealers.js's inlined SVG source), their gradient fill is
   untouched (see section 9 below for why the gradient itself can't
   cleanly become currentColor). */
.scroll-shape--on-dark { color: var(--theme-color-white); }
.scroll-shape--on-light { color: var(--theme-color-black); }

@media (prefers-reduced-motion: reduce) {
    .js-scroll-shape { transform: none !important; }
    .page-dealers .pd-directory-shape--triangle { transition: none; }
}

/* ==========================================================================
   9. Directory decorative shapes composition — position/size/which-SVG,
   plus the triangle's fixed-positioning/opacity setup (its animated
   values are set by js/dealers.js; see that file's own comment for the
   full behavior).
   ========================================================================== */

.page-dealers #directory.pd-directory-dark {
    /* Establishes the crop for the shapes below without affecting the
       section's own height/flow — nothing inside this section relies on
       overflowing it visibly. */
    overflow: hidden;
}
.page-dealers .pd-directory-contain {
    position: relative;
    z-index: 1;
}

/* .page-dealers .pd-directory-shape { opacity: .9; } */

/* left/right below are anchored to the 1440px content column's own edges
   (calc(var(--pd-content-inset) ± Npx) — the same --pd-content-inset used
   elsewhere on this page to align the map controls/panel to that column),
   not to the viewport edge. #directory is full-bleed (cnt-resize-fw), so a
   plain % or fixed px here would drift away from the content column on
   very wide screens — anchoring to --pd-content-inset keeps each shape's
   relationship to the content column constant regardless of browser width. */
.page-dealers .pd-directory-shape--ring {
    top: -180px;
    left: calc(var(--pd-content-inset) - 350px);
    width: 1000px;
    height: 1000px;
}
/* position:fixed (not absolute like ring/circle) — it stays put on screen
   while the section scrolls beneath it; js/dealers.js drifts it downward
   and fades it in/out via this same element's transform/opacity as the
   directory section enters/leaves the viewport. `top` centers it on the
   viewport's vertical middle (594px = half its own 1188px height).
   opacity starts at 0 so it's invisible until JS confirms the section is
   actually in view (this page renders nothing without JS regardless —
   #dealers-page-root is empty until js/dealers.js runs — so there's no
   no-JS fallback concern here). */
.page-dealers .pd-directory-shape--triangle {
    position: fixed;
    top: calc(50vh - 594px);
    right: calc(var(--pd-content-inset) - 300px);
    width: 1000px;
    height: 1188px;
    opacity: 0;
    transition: opacity .25s ease;
}
/* Rotation lives on the inner svg, not on .pd-directory-shape--triangle
   itself — js/dealers.js sets that element's own inline style.transform
   (translate3d, for the scroll drift) every frame, which would silently
   replace (not combine with) a transform declared here. */
.page-dealers .pd-directory-shape--triangle svg {
    transform: rotate(180deg);
}
.page-dealers .pd-directory-shape--circle {
    bottom: -220px;
    /* Centered under the 1440px content column: inset + (1440 - 1000) / 2. */
    left: calc(var(--pd-content-inset) + 220px);
    width: 1000px;
    height: 1000px;
}
@media all and (max-width: 900px) {
    .page-dealers .pd-directory-shape--ring { top: -220px; left: calc(var(--pd-content-inset) - 300px); width: 600px; height: 600px; }
    .page-dealers .pd-directory-shape--triangle { width: 600px; height: 713px; right: calc(var(--pd-content-inset) - 200px); }
    /* Below 900px .pd-directory-contain is no longer capped by its
       max-width:1440px, so its box fills the full section width and its
       true left edge is 0, not --pd-content-inset (that var floors at a
       flat 40px here, which no longer means "content edge" once the box
       itself is edge-to-edge) — centering on the viewport instead is
       exact here since the box's side padding is symmetric either way.
       margin-left (not a translateX transform) so this doesn't collide
       with the JS parallax module's own inline transform on this element
       (see the triangle svg comment above for the same issue). */
    .page-dealers .pd-directory-shape--circle { bottom: -140px; width: 600px; height: 600px; left: 50%; margin-left: -300px; }
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media all and (max-width: 900px) {
    .page-dealers .pd-directory-dark { padding: 64px 0; }
    .page-dealers .pd-directory-contain { padding: 0 24px; }
}

@media all and (max-width: 767px) {
    /* +135px over the previous min(55vh,520px)/380px — applied to both the
       flexible (vh) term and its fixed caps via calc(), so the increase
       holds uniformly regardless of which branch of the formula ends up
       binding on a given device. */
    .page-dealers #map-hero { height: min(calc(55vh + 135px), 655px); min-height: 515px; }

    /* The permanent overlay panel is a desktop pattern only — on mobile
       it's replaced entirely by .pd-mobile-panel, a smaller overlay of
       the same kind (not a separate section above the map). */
    .page-dealers .pd-panel { display: none; }

    /* Zoom controls sit at the map's own top-left, offset by exactly the
       collapsed selector's rendered height (--pd-mobile-panel-h, kept in
       sync by js/dealers.js) plus a small gap — never a guessed fixed
       number, so it holds even if the heading wraps to two lines at very
       narrow widths. The 110px fallback only covers the instant before
       the first JS measurement lands. When the selector is OPEN, its own
       higher z-index intentionally covers the zoom control — that's
       expected, not a bug, and this rule is deliberately not
       re-computed for that state. */
    .page-dealers .leaflet-control-zoom { margin: calc(var(--pd-mobile-panel-h, 110px) + 12px) 12px 12px !important; }

    /* Show-all control sits opposite the zoom control (topright), offset
       by the same collapsed-selector height so it never sits under the
       mobile panel while it's open. Leaflet 1.9.4 emits
       .leaflet-top.leaflet-right for position:"topright". */
    .page-dealers .leaflet-top.leaflet-right { margin-top: calc(var(--pd-mobile-panel-h, 110px) + 12px) !important; margin-right: 12px !important; }

    .page-dealers .pd-cta-inner { padding: 56px 0; }
    .page-dealers .pd-cta-contact { flex-direction: column; gap: 12px; align-items: center; }

    /* Condensed popup chrome — the desktop spacing barely fit a 375px
       screen. Padding here MUST stay in sync with js/dealers.js's
       POPUP_PADDING_X/Y (used to compute popupMaxWidth/popupMinWidth and
       to size the estimatedPopupHeight probe) — both read this same
       breakpoint's actual values via a live (unpadded-override) DOM
       measurement, so changing these numbers alone keeps everything
       else — including the direct-marker-click panel-avoidance math —
       correctly in sync automatically. */
    /* Hard backstop against the rendered wrapper (content + this padding
       + border) ever exceeding ~260px on mobile — a long address could
       otherwise stretch it wider (Leaflet's own maxWidth option only
       constrains .leaflet-popup-content, not this wrapper's padding/
       border on top). js/dealers.js's mobile popupMaxWidth is computed
       to land exactly at this same 260px total, so this rule should
       normally never actually bind — it's a safety net, not the primary
       mechanism, kept here so the two can never silently drift apart
       without also fighting each other when they do. */
    .page-dealers .leaflet-popup-content-wrapper { padding: 12px 14px; max-width: 260px; }
    .page-dealers .dealer-popup-head { gap: 8px; margin-bottom: 8px; }
    /* Same flex min-width:auto gotcha as the fields below — the name+type
       wrapper is a flex item of .dealer-popup-head and would otherwise
       refuse to shrink below a long dealer name's own min-content width,
       pushing the whole popup wider than the 260px cap above. */
    .page-dealers .dealer-popup-head > div { min-width: 0; }
    .page-dealers .dealer-popup-head h3 { font-size: 15px; overflow-wrap: break-word; }
    /* .pd-type-tag renders as a <p> — user.css's global reset
       (`p, .resetcss p, ... { margin: 0 0 20px; }`) gives it a 20px
       margin-bottom that this rule never cleared. A flex item (here,
       .dealer-popup-head's text-wrapping <div>) establishes its own
       formatting context, so that trailing margin doesn't collapse away —
       it sits inside the div, inflating its box well past the visible
       text and throwing off align-items:center against the badge next to
       it (the badge reads centered against the *enlarged* box, so it
       visually sits lower than the actual name+type text). Scoped to this
       popup context only — .pd-type-tag itself (e.g. the directory's
       .pd-dealer-locality usage) is untouched. */
    .page-dealers .dealer-popup-head .pd-type-tag { margin-top: 1px; margin-bottom: 0; }
    .page-dealers .dealer-popup-fields { gap: 6px; padding-bottom: 8px; margin-bottom: 8px; }
    .page-dealers .dealer-popup-fields li { font-size: 12.5px; line-height: 135%; gap: 6px; }
    /* The address/phone/website text is a flex item of its <li> (flex
       row) — flex items default to min-width:auto, which sizes them to
       their *unbreakable* content (the longest single word/token) and can
       silently defeat the wrapper's max-width for a long address. Forcing
       min-width:0 lets normal word-wrapping actually take effect instead
       of pushing the popup wider; overflow-wrap is a second-line defense
       for the rare unbroken long token (e.g. a long email/URL). */
    .page-dealers .dealer-popup-fields li > span,
    .page-dealers .dealer-popup-fields li > a { min-width: 0; overflow-wrap: break-word; }
    .page-dealers .dealer-popup .dealer-services { margin: 0; }
    .page-dealers .dealer-popup .dealer-services span { font-size: 11px; }
}

/* ==========================================================================
   2b. Mobile dealer selector — replaces the permanent panel below 767px.
   ONE control, collapsed by default: a translucent overlay sitting on top
   of the map (never pushing it down), directly under the breadcrumb/
   subnav. Expanding it grows the SAME box downward over the map; the map
   itself never resizes. Same translucent-chrome values as the desktop
   panel/popup — rgba(255,255,255,.5) + blur(9px), shadow instead of a
   border.
   ========================================================================== */

.page-dealers .pd-mobile-panel { display: none; }

@media all and (max-width: 767px) {
    .page-dealers .pd-mobile-panel {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        /* No fixed bottom inset — when expanded (list visible), the panel
           should be able to grow all the way to the map's own bottom
           edge, not stop 24px short of it. #map-hero's own overflow:hidden
           is still the real backstop against ever exceeding it. When
           collapsed (list [hidden], see js/dealers.js), height is auto and
           sized to the head/toggle content only, so this cap is simply
           never reached — no separate collapsed-state rule needed. */
        max-height: 100%;
        background: rgba(255, 255, 255, .5);
        -webkit-backdrop-filter: blur(9px);
        backdrop-filter: blur(9px);
        box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
    }

    .page-dealers .pd-mobile-panel-head {
        flex: none;
        padding: 18px 16px 16px;
    }
    .page-dealers .pd-mobile-panel-head h3 {
        font-size: 16px;
        line-height: 120%;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 12px;
    }

    .page-dealers .pd-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        border: 1px solid var(--theme-color-black);
        background: rgba(255, 255, 255, .5);
        padding: 13px 14px;
        font-family: var(--theme-font-family);
        font-weight: 600;
        font-size: 13.5px;
        text-transform: uppercase;
        color: var(--theme-color-black);
        cursor: pointer;
        outline: none;
    }
    /* Single intentional focus ring, same as the desktop select — no
       native ring left underneath to double up with it. */
    .page-dealers .pd-mobile-toggle:focus-visible { outline: 2px solid var(--theme-color-yellow); outline-offset: 2px; }
    .page-dealers .pd-mobile-toggle .pd-chevron { position: static; transform: none; transition: transform .2s ease; opacity: .6; }
    .page-dealers .pd-mobile-toggle[aria-expanded="true"] .pd-chevron { transform: rotate(180deg); }

    /* The list is the only part that scrolls — the head above stays put.
       No max-height of its own (a fixed 55vh used to cap it well short of
       the actual available space): flex:1 + min-height:0 on this list,
       inside .pd-mobile-panel's own flex column (head is flex:none) with
       max-height:100%, is what makes it fill exactly the remaining space
       down to the map's bottom edge — #map-hero's own overflow:hidden is
       still the real backstop, so this can never push past it. */
    .page-dealers .pd-mobile-panel-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        border-top: 1px dashed rgba(0, 0, 0, .16);
    }
    .page-dealers .pd-mobile-panel-list .pd-panel-row-inner { padding: 12px 16px; }
    .page-dealers .pd-mobile-panel-list .pd-panel-group-title { padding: 16px 16px; }
    .page-dealers .pd-mobile-panel-list .pd-panel-empty { padding: 32px 16px; }

    /* Clickable scope-row headings ("Wszyscy dealerzy", "Polska", ...) —
       only ever rendered on mobile (see .pd-panel-group-title-clickable's
       own comment above) — down from the base 17px, which read too large
       next to the 13.5px dealer rows beneath each heading. */
    .page-dealers .pd-pgt-label { font-size: 14px; }
}

/* No narrower-than-767px override for .pd-mobile-panel-head h3 any more —
   the base mobile size is already 16px, smaller than this breakpoint's
   old 18px override would have produced (that used to shrink further
   from a larger 20px base; keeping it would have made the heading
   *larger* at narrower widths than at 767px, an inversion). */

@media all and (max-width: 500px) {
    /* The 56px + 16px grid (see .pd-dealer-row) already holds cleanly at
       this width without any override — the "72px" relationship is
       structural, not a value that needs re-tuning per breakpoint. */
    .page-dealers .pd-directory-contain { padding: 0 20px; }
}