, 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) { .page-dealers #map-hero { height: 92vh; min-height: 680px; } /* 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; } .page-dealers .pd-cta-inner { padding: 56px 0; } .page-dealers .pd-cta-contact { flex-direction: column; gap: 12px; align-items: center; } } /* ========================================================================== 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; max-height: calc(100% - 24px); 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: 20px; 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. ~55vh sits comfortably inside #map-hero's own 92vh on any real mobile viewport once the collapsed head's height is accounted for. */ .page-dealers .pd-mobile-panel-list { flex: 1; min-height: 0; max-height: 55vh; 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; } } @media all and (max-width: 380px) { .page-dealers .pd-mobile-panel-head h3 { font-size: 18px; } } @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; } }