@bytebrand/fe-ui-core-autobahn 1.0.112 → 1.0.114

package/cards/CarCard.tsx

@@ -6,8 +6,10 @@
 // page, landing pages and "similar cars" grids.
 //
 // Pure / presentational: all data comes via the `AutobahnCar` prop, all behaviour
-// via injected callbacks. No store / API / `window` access. Renders correctly
-// only inside a `<div className="md3">` subtree.
+// via injected callbacks. No store/API access — the one guarded `window`-adjacent
+// read is IntersectionObserver (see `eagerMedia` below), feature-checked so a
+// non-browser render (tests without a polyfill) degrades to a no-op, not a crash.
+// Renders correctly only inside a `<div className="md3">` subtree.
 //
 // Differs from the design kit on purpose:
 //  - favorite state is INJECTED (isFavorite + onToggleFavorite) instead of the
@@ -15,7 +17,7 @@
 //  - the needs-data deal signals (DropChip / SaveChip) only appear when real
 //    `drop` / `savings` data is present.
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { TranslationFunction } from '../types';
 
 import { CardCarousel, IconButton, SaveChip, Button } from '../ui';
@@ -53,6 +55,20 @@ export interface CarCardProps {
   onOpen: (car: AutobahnCar) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
+  /**
+   * Also fire `onMediaEnter` as soon as the card scrolls into view, instead of waiting for a
+   * hover/touch. Off by default — the SRP's grid is effectively unbounded (pagination/infinite
+   * scroll), and firing one getImages() request per card the instant it enters the viewport
+   * reintroduced exactly the failure mode `loadCarImages` was deliberately scoped away from
+   * (SearchNextPage.tsx: "eager per-card getImages() ... raised an error toast PER failed
+   * request, stacked toasts on mobile scroll" whenever the image service is degraded).
+   * Opt into this only for small, BOUNDED grids (e.g. the homepage's ≤6-card "Top-Angebote"),
+   * where without it the gallery's prev/next arrows and image-count dots stay hidden until the
+   * user's first hover/touch on THAT card resolves (async) — on touch devices this reads as
+   * "controls need a preliminary tap", because the very same tap that reveals them is usually
+   * also the tap the user meant as their real interaction with the card.
+   */
+  eagerMedia?: boolean;
   /** i18n translate fn (drilled from the page). */
   t: TranslationFunction;
   /**
@@ -90,6 +106,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   onToggleFavorite,
   onOpen,
   onMediaEnter,
+  eagerMedia,
   t,
   adminAction,
   onRequestOffer,
@@ -100,6 +117,35 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
   const [viewerOpen, setViewerOpen] = useState(false);
+  const mediaRef = useRef<HTMLDivElement | null>(null);
+  // always call the LATEST onMediaEnter without re-arming the observer on every render (the
+  // page callers below construct a fresh closure each render) — the effect itself only needs
+  // to run once per mount.
+  const onMediaEnterRef = useRef(onMediaEnter);
+  onMediaEnterRef.current = onMediaEnter;
+  useEffect(() => {
+    if (!eagerMedia || typeof IntersectionObserver === 'undefined') return undefined;
+    const el = mediaRef.current;
+    if (!el) return undefined;
+    let fired = false;
+    // rootMargin starts the fetch a bit before the card is actually on-screen, so by the time
+    // the user's eye (or finger, on touch) reaches it the gallery has usually already resolved
+    // — the whole point being no tap is required to make prev/next + the counter "real".
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !fired) {
+            fired = true;
+            onMediaEnterRef.current && onMediaEnterRef.current();
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: '200px 0px', threshold: 0 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [eagerMedia]);
   // as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
   // undefined (older AutobahnCar producer not yet updated) fails OPEN, keeping prior behaviour.
   const asGoodAsNew = car.asGoodAsNew !== false;
@@ -119,6 +165,7 @@ const CarCard: React.FunctionComponent<CarCardProps> = ({
     >
       <div
         className="cc-media"
+        ref={mediaRef}
         style={{ position: 'relative' }}
         onMouseEnter={onMediaEnter}
         onTouchStart={onMediaEnter}

package/cards/CarRow.tsx

@@ -6,7 +6,9 @@
 // CTA stop propagation so they don't also trigger the card open.
 //
 // Pure / presentational: all data via the `AutobahnCar` prop, all behaviour via
-// injected callbacks. No store / API / `window` access. Renders correctly only
+// injected callbacks. No store/API access — the one guarded `window`-adjacent read is
+// IntersectionObserver (see `eagerMedia` below), feature-checked so a non-browser render
+// (tests without a polyfill) degrades to a no-op, not a crash. Renders correctly only
 // inside a `<div className="md3">` subtree.
 //
 // Differs from the design kit on purpose:
@@ -18,7 +20,7 @@
 //    no className prop) so the scoped `.pp-cta` margin / responsive rules and the
 //    `.pp-cta + .pp-activity` adjacency in md3.css still apply.
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { TranslationFunction } from '../types';
 
 import { CardCarousel, IconButton, SaveChip, Button, Icon, StatChip } from '../ui';
@@ -53,6 +55,16 @@ export interface CarRowProps {
   onOpen: (car: AutobahnCar) => void;
   /** fired on first hover/touch of the media box — the SRP uses it to lazy-load the gallery. */
   onMediaEnter?: () => void;
+  /**
+   * Also fire `onMediaEnter` as soon as the card scrolls into view, instead of waiting for a
+   * hover/touch. Off by default. See CarCard's identically-named prop for the full rationale —
+   * same trade-off applies here (SRP's list view is the other consumer of this same concern).
+   * Safe to enable even on an effectively-unbounded list AS LONG AS the caller's `onMediaEnter`
+   * itself caps concurrent fetches (e.g. SearchNextPage.tsx's loadCarImages queues through
+   * runQueuedImageLoad) — this component has no opinion on that, it only decides WHEN to call
+   * onMediaEnter, never how many may run at once.
+   */
+  eagerMedia?: boolean;
   /** i18n translate fn (drilled from the page). */
   t: TranslationFunction;
   /**
@@ -75,12 +87,39 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
   onToggleFavorite,
   onOpen,
   onMediaEnter,
+  eagerMedia,
   t,
   adminAction,
   onShowFinancingDetails,
 }) => {
   const [mode, setMode] = useState<PaymentMode>('financing');
   const [photoIndex, setPhotoIndex] = useState(0);
+  const mediaRef = useRef<HTMLDivElement | null>(null);
+  // always call the LATEST onMediaEnter without re-arming the observer on every render (the
+  // page callers construct a fresh closure each render) — the effect itself only needs to run
+  // once per mount. Identical pattern to CarCard.tsx — see its own comment for the rationale.
+  const onMediaEnterRef = useRef(onMediaEnter);
+  onMediaEnterRef.current = onMediaEnter;
+  useEffect(() => {
+    if (!eagerMedia || typeof IntersectionObserver === 'undefined') return undefined;
+    const el = mediaRef.current;
+    if (!el) return undefined;
+    let fired = false;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !fired) {
+            fired = true;
+            onMediaEnterRef.current && onMediaEnterRef.current();
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: '200px 0px', threshold: 0 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [eagerMedia]);
   // as-good-as-new gate (mileage < 1,000 km AND first registration unknown or < 12 months) —
   // undefined (older AutobahnCar producer not yet updated) fails OPEN, keeping prior behaviour.
   const asGoodAsNew = car.asGoodAsNew !== false;
@@ -109,7 +148,7 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
       onClick={() => onOpen(car)}
       style={{ background: 'var(--md-sc-lowest)' }}
     >
-      <div className="listcard-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
+      <div className="listcard-media" ref={mediaRef} style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
         {/* 'auto': desktop picks cover/contain per photo (crops only when it wouldn't lose too
             much of the shot); below 601px this is identical to 'contain', so mobile is unchanged. */}
         <CardCarousel images={car.gallery} height="100%" fit="auto" onChange={setPhotoIndex} />
@@ -173,7 +212,17 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
           <GalleryBadges car={car} t={t} />
         </div>
         {/* desktop: single row — light "1|N" photo counter + a combined eye/heart chip, no
-            availability/Geprüft pill (not present in the Figma "mcard" export). */}
+            availability/Geprüft pill (not present in the Figma "mcard" export).
+            Same 3-state policy as the mobile pills above (GalleryCounter/GalleryBadges,
+            cardParts.tsx) and CarCard's GalleryCounter/GalleryActivityPill, just inlined here
+            instead of reusing those components (different chip markup — one shared "N|M" +
+            eye+heart pill instead of three separate ones):
+             - single-image: car.photos is the real, eagerly-known count (not the lazily-loaded
+               gallery array length) — accurate even before the extra photos have loaded.
+             - loading: viewsCount/favoritesCount are undefined until stats resolve for this car
+               — hidden, no skeleton, same as everywhere else.
+             - zero-value: a real 0 is intentionally treated the same as "not loaded" — hidden,
+               not shown as "eye 0" / "heart 0" (noise on a dense results list otherwise). */}
         <div
           className="hide-mobile"
           style={{ position: 'absolute', bottom: 20, left: 12, zIndex: 3, display: 'flex', alignItems: 'center', gap: 6 }}

package/cards/cardParts.tsx

@@ -203,6 +203,7 @@ export const DropChip: React.FunctionComponent<DropChipProps> = ({ amount, t })
         color: 'var(--md-good)',
         fontSize: 10.5,
         fontWeight: 700,
+        lineHeight: '14px',
         boxShadow: 'var(--md-e1)',
         whiteSpace: 'nowrap',
       }}
@@ -230,7 +231,7 @@ const dealPill: React.CSSProperties = {
 export const PercentChip: React.FunctionComponent<{ pct?: number }> = ({ pct }) => {
   if (pct == null || pct <= 0) return null;
   return (
-    <span className="deal-chip deal-chip--percent" style={{ ...dealPill, background: 'var(--md-error)', color: '#fff' }}>
+    <span className="deal-chip deal-chip--percent" style={{ ...dealPill, background: 'var(--md-error)', color: '#fff', lineHeight: '14px' }}>
       −{pct}%
     </span>
   );
@@ -835,7 +836,15 @@ export interface GalleryCounterProps {
  * Bottom-left gallery overlay: expand icon + "current|total" (Figma). Reuses the existing
  * `.imglabel` pill style (already used for the list-card's photo-count badge) rather than a new
  * class — same dark translucent pill, just with the maximize icon instead of the image icon.
- * Hidden with 0/1 photos (nothing to expand into).
+ *
+ * States (shared policy across GalleryCounter, the carousel's own arrows/dots in CardCarousel,
+ * and GalleryActivityPill below — see its own doc comment for the other two):
+ *  - single-image: `total` is the car's REAL, eagerly-known photo count (car.photos, from the
+ *    search payload — not the lazily-loaded gallery array length), so this is accurate even
+ *    before any image beyond the first has actually loaded. total<=1 → hidden: nothing to expand
+ *    into. Never a "1|1" placeholder.
+ *  - loading: while `total` itself is still unknown (car not yet resolved) the caller simply
+ *    hasn't rendered this component yet — there is no separate in-between skeleton state here.
  */
 export const GalleryCounter: React.FunctionComponent<GalleryCounterProps> = ({ current, total, light, onClick }) => {
   if (total <= 1) return null;
@@ -864,8 +873,18 @@ export interface GalleryActivityPillProps {
 
 /**
  * Bottom-right gallery overlay: eye + views, heart + favorites, in ONE pill (Figma "Push Chips /
- * Likes", node 297:1037). Each half renders independently and the whole pill is omitted when
- * neither figure has loaded yet (same async-stats/NEEDS-DATA discipline as the rest of this file).
+ * Likes", node 297:1037). Each half renders independently.
+ *
+ * States (chosen ONE policy, applied identically to both halves):
+ *  - loading: `viewsCount`/`favoritesCount` are `undefined` until the async stats call
+ *    (UserActionsAPI 'stats/viewers') resolves for this car. No skeleton — the half (or the
+ *    whole pill, if both are still pending) simply doesn't render yet, same "hidden, not a
+ *    placeholder" discipline as GalleryCounter/CardCarousel's arrows above.
+ *  - zero-value: a REAL `0` is treated the same as "not there" — hidden, not shown as "👁 0".
+ *    Deliberate choice over spelling out "0" (the other option the ticket allows): on a dense
+ *    grid of fresh listings a "👁 0 ❤ 0" pill on every card is noise, not signal. `!viewsCount`/
+ *    `!favoritesCount` below intentionally don't distinguish real-0 from not-yet-loaded — both
+ *    read as "nothing worth showing (yet)", which is the same outcome either way.
  */
 export const GalleryActivityPill: React.FunctionComponent<GalleryActivityPillProps> = ({ viewsCount, favoritesCount }) => {
   if (!viewsCount && !favoritesCount) return null;

package/chrome/TopBar.tsx

@@ -110,9 +110,14 @@ export interface TopBarProps {
    *  number/tel: link was confirmed for this, so it defaults to the contact page. Pass a `tel:...`
    *  href here once one is confirmed. */
   phoneHref?: string;
-  /** mobile-only: slide the header out of view on scroll-down, back in on scroll-up (coordinated
-   *  with the VDP sticky offer bottom bar's own show/hide). Off by default — only the car-detail
-   *  page (topBarVariant 'conversion') opts in; every other page keeps the header always docked. */
+  /** mobile-only (the CSS that actually moves the header, `.topbar--hidden`, only exists inside
+   *  the `@media (max-width: 600px)` block — desktop keeps this prop's `hidden` state but never
+   *  renders it): slide the header out of view on scroll-down, back in on scroll-up. On the
+   *  car-detail page this is additionally coordinated with the VDP sticky offer bottom bar (hides
+   *  well before that bar would ever dock — see STICKY_SHOW_AT in VehicleDetailedNextPage.tsx).
+   *  Off by default — the car-detail page (topBarVariant 'conversion'), the homepage ('/') and
+   *  the SRP list page ('/search') opt in (see App.tsx); other pages keep the header always
+   *  docked. */
   autoHideOnScroll?: boolean;
 }
 

package/locales/de/autobahn.json

@@ -382,6 +382,7 @@
     },
     "rate": {
       "upTo": "Rate bis",
+      "upToPlaceholder": "Rate bis, z. B. 350 €/mtl.",
       "perMonth": "/mtl.",
       "downPayment": "Anzahlung",
       "none": "keine",
@@ -389,6 +390,10 @@
       "months": "{{months}} Monate",
       "months_plural": "{{months}} Monate"
     },
+    "mileage": {
+      "upTo": "km bis",
+      "upToPlaceholder": "km bis, z. B. 50000 km"
+    },
     "consumption": {
       "unitLabel": "l / 100 km"
     },
@@ -723,7 +728,7 @@
     "leaseVehiclePrice": "Anschaffungspreis¹",
     "leaseDownPayment": "Einmalige Sonderzahlung",
     "finalPaymentDue": "Schlusszahlung (fällig am Vertragsende)",
-    "residualValue": "Restwert (verpflichtend)",
+    "residualValue": "Verpflichtender Kaufpreis am Vertragsende",
     "rateSumLabel": "Summe der Leasingraten ({{term}} × {{amount}} €)",
     "addServicesRowLease": "Rundum-Sorglos-Paket (Einmalzahlung)",
     "subtotalWithPackage": "Gesamt inkl. Sonderzahl. & Paket",

package/locales/en/autobahn.json

@@ -382,6 +382,7 @@
     },
     "rate": {
       "upTo": "Rate up to",
+      "upToPlaceholder": "Rate up to, e.g. 350 €/month",
       "perMonth": "/month",
       "downPayment": "Down payment",
       "none": "none",
@@ -389,6 +390,10 @@
       "months": "{{months}} months",
       "months_plural": "{{months}} months"
     },
+    "mileage": {
+      "upTo": "Mileage up to",
+      "upToPlaceholder": "Mileage up to, e.g. 50000 km"
+    },
     "consumption": {
       "unitLabel": "l / 100 km"
     },
@@ -723,7 +728,7 @@
     "leaseVehiclePrice": "Acquisition price¹",
     "leaseDownPayment": "One-time special payment",
     "finalPaymentDue": "Final payment (due at contract end)",
-    "residualValue": "Residual value (mandatory)",
+    "residualValue": "Mandatory purchase price at contract end",
     "rateSumLabel": "Sum of leasing installments ({{term}} × {{amount}} €)",
     "addServicesRowLease": "Complete care package (one-time payment)",
     "subtotalWithPackage": "Total incl. special payment & package",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.112",
+  "version": "1.0.114",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.18",
+    "@bytebrand/fe-financing": "^5.14.19",
     "classnames": "2.2.6",
     "clsx": "^2.1.1",
     "d3-format": "1.4.5",

package/theme/md3.css

@@ -453,6 +453,44 @@ line-height: 31px;
   width: 14px;
   height: 14px;
 }
+/* Figma spec for the rating chip in its two "Guter Preis" locations — the VDP header
+   (VdpHeaderSummary, .vdp-headrow) and the SRP list-card's price column (CarRow.tsx,
+   .listcard-price, both its mobile Finanzierung row and desktop Kaufen row share this one class).
+   Scoped to THESE locations only, not every .statchip site-wide (e.g. the price-history "drop"
+   chip a few sections down reuses tone="good" for a completely different purpose — a €-amount,
+   not a price rating — and keeps the theme-aware --md-good-container tokens untouched). min-width
+   (not a hard width) + white-space:nowrap: 108px is tight for icon+"Guter Preis"+⁴ on one line,
+   so this grows past it instead of wrapping/clipping rather than clamping to a width that doesn't fit. */
+.md3 .vdp-headrow .statchip,
+.md3 .listcard-price .statchip {
+  min-width: 108px;
+  height: 27px;
+  border-radius: 11px;
+  font-family: 'Arial';
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  text-align: center;
+  white-space: nowrap;
+  justify-content: center;
+}
+.md3 .vdp-headrow .statchip sup,
+.md3 .listcard-price .statchip sup {
+  position: relative;
+  top: -3px;
+  left: -4px;
+  font-size: 9px;
+  line-height: 9px;
+}
+/* 'good' tone here is specifically the "Guter Preis" rating (same canonical green as the
+   fin-eval-pill "good" tier elsewhere on this page) — literal color, not the --md-good-container
+   token, matching that other pill's own literal-color treatment. --warn (Fairer Preis) is
+   untouched, still tokenized. */
+.md3 .vdp-headrow .statchip--good,
+.md3 .listcard-price .statchip--good {
+  color: rgb(22, 138, 69);
+  background: color-mix(in srgb, rgb(22, 138, 69) 16%, transparent);
+}
 
 /* small image label (views, photo count) */
 .md3 .imglabel {
@@ -3747,7 +3785,7 @@ line-height: 31px;
   min-width: 0;
 }
 /* "NEU" badge on car cards (legacy new-car label). */
-.md3 .neu-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: var(--md-primary); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; box-shadow: var(--md-e1); }
+.md3 .neu-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--md-r-full); background: var(--md-primary); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 14px; letter-spacing: .3px; white-space: nowrap; box-shadow: var(--md-e1); }
 /* "⚡ Angebot" badge — dark neutral pill above the gallery (card mockup), distinct from NEU. */
 .md3 .offer-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--md-r-full); background: var(--md-on-surface); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
 .md3 .offer-badge .lucide { width: 13px; height: 13px; }
@@ -5164,37 +5202,50 @@ line-height: 31px;
     width: 112px;
     flex: none;
   }
-  .md3 .cc-price .fin-eval-pill {
-    font-family: Arial, Helvetica, sans-serif;
-    font-style: normal;
+  /* Figma spec, now identical across all three "Guter Preis" pill locations (CarCard's own
+     .cc-price, incl. the VDP "Ähnliche Fahrzeuge" rail; .fin-calc-card; .fin-modal) — one shared
+     rule instead of three copies. `background`/`color` are deliberately NOT set here: they stay
+     driven by the tier-color inline style each render site sets (see PriceEvalCol in
+     cardParts.tsx / FinanceCalculator.tsx / VdpModules.tsx, all of which already resolve to the
+     canonical rgb(22,138,69) for the 'good' tier) — a `!important` used to hardcode this pill's
+     background to a fixed #dff3e5 here, silently overriding that inline value regardless of tier. */
+  .md3 .cc-price .fin-eval-pill,
+  .md3 .fin-calc-card .fin-eval-pill,
+  .md3 .fin-modal .fin-eval-pill {
+    font-family: 'Arial';
     font-weight: 700;
     font-size: 12px;
     line-height: 14px;
     text-align: center;
   }
-  .md3 .cc-price .fin-eval-pill--good {
-    background: #dff3e5 !important;
-    border-radius: 11px !important;
-    width: 100%;
+  .md3 .cc-price .fin-eval-pill--good,
+  .md3 .fin-calc-card .fin-eval-pill--good,
+  .md3 .fin-modal .fin-eval-pill--good {
+    width: 108px;
     height: 27px;
+    border-radius: 11px;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
     justify-content: center;
   }
   /* footnote 4 ("Top-Preis" claim) — .fin-eval-pill is a flex container, so vertical-align has
      no effect on the sup (it's a flex item, not inline content); position:relative/top raises
-     it instead, same technique as the hero price's own 1/2/3 footnote markers. Shared by the
-     CarCard hero (.cc-price), the VDP FinanceCalculator's own pill (.fin-calc-card), and the
-     FinanceDetailsModal's embedded mobile rate sheet (.fin-modal). */
+     it instead, same technique as the hero price's own 1/2/3 footnote markers. Same -3px lift now
+     shared by all three locations above. */
   .md3 .cc-price .fin-eval-pill sup,
   .md3 .fin-calc-card .fin-eval-pill sup,
   .md3 .fin-modal .fin-eval-pill sup {
     position: relative;
-    top: 0px;
+    top: -3px;
     left: -4px;
     font-size: 9px;
     line-height: 9px;
   }
   .md3 .cc-price .fin-eval-bar {
+    /* matches the pill's own fixed 108px right above (both sit in the same 112px .fin-eval-col),
+       so the two stay visually aligned instead of the bar stretching to the full column width. */
+    width: 108px;
     height: 7px;
   }
   .md3 .cc-price .fin-eval-seg:first-child {
@@ -5424,14 +5475,8 @@ line-height: 31px;
   width: 112px;
   justify-self: end;
 }
-/* pill now sits above the bar in a real flex column (see above) — stretch it to the bar's own
-   width instead of the base .fin-eval-pill's inline-flex/content-hugging size. */
-.md3 .fin-calc-card .fin-eval-pill--good {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+/* .fin-calc-card/.fin-modal's own "Guter Preis" pill text/box/sup sizing now lives in the one
+   shared rule (with .cc-price) further up this file, near .cc-price's own .fin-eval-* rules. */
 /* .fin-calc-card's own "Rate anpassen" panel is compact — the mobile-sheet/modal padding
    (22/28px top, 20px bottom) is too roomy here. */
 .md3 .fin-calc-card .fin-toggle-final,
@@ -6662,13 +6707,36 @@ line-height: 31px;
   }
   .md3 .srp-bar {
     position: sticky;
-    top: 64px;
+    /* was 64px (docked under the always-visible header) — now 0: once the header slides away
+       (autoHideOnScroll, TopBar.tsx) this bar takes its place at the very top instead of leaving
+       a gap, and sits flush under it again the moment the header slides back in. */
+    top: 0px;
     z-index: 20;
-    background: var(--md-surface);
+    background: #fff;
     padding: 8px 0;
     margin: 0 0 8px;
     box-shadow: 0 6px 8px -8px rgba(0, 0, 0, 0.3);
   }
+  /* full-bleed white to the true viewport edges, WITHOUT moving .srp-bar's own text — it stays
+     inside .srp-main's own side padding, this pseudo-element just paints white past it on both
+     sides so no gap of page background shows while the bar is sticky. NOT a box-shadow spread
+     (that bleeds in all 4 directions equally, including a huge slab below the bar covering the
+     cards underneath it — that was tried and broke the page) — an absolutely-positioned layer
+     confined to top:0/bottom:0 of .srp-bar's own box (position:sticky is a containing block for
+     it, same as position:relative) stays exactly as tall as the bar, only wider. z-index:-1 is
+     scoped to .srp-bar's own stacking context (it has z-index:20), so it paints behind the bar's
+     text/buttons but still above the page content scrolling underneath. */
+  .md3 .srp-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 100vw;
+    transform: translateX(-50%);
+    background: #fff;
+    z-index: -1;
+  }
   .md3 .field-grid-2 {
     grid-template-columns: 1fr;
     gap: 10px;
@@ -8703,14 +8771,10 @@ color: #005CFF;
     gap: 16px;
     grid-area: evalcol;
   }
-  .md3 .fin-eval-pill--good {
-    background: #dff3e5 !important;
-    border-radius: 11px !important;
-    width: 100%;
-    height: 27px;
-    box-sizing: border-box;
-    justify-content: center;
-  }
+  /* box sizing for this pill (all three of its locations) lives in the shared, higher-specificity
+     .cc-price/.fin-calc-card/.fin-modal rule near the top of this file — this generic, unscoped
+     copy used to ALSO force `background: #dff3e5 !important`, silently overriding every tier's
+     real inline color (the 'good' tier's canonical rgb(22,138,69) included) at this breakpoint. */
   .md3 .fin-eval-bar {
     height: 7px;
   }
@@ -10334,10 +10398,14 @@ color: #005CFF;
 }
 .md3 .vdp-photosheet {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 100vh;
+  /* was `left/right/bottom: 0` + `height: 100vh` — over-constrained (top was the free value, so
+     it was computed as containerHeight - 100vh) and, on the affected mobile browsers, 100vh can
+     exceed the CURRENT visible height (e.g. address bar still shown), which solved to a NEGATIVE
+     top: the sheet's top edge — its own header, with a close button — rendered above y=0 of this
+     already-safely-sized fixed overlay (see VdpViewer.tsx's own top-of-file portal comment), i.e.
+     behind the browser's UI. `inset: 0` instead just fills the (correctly-sized) positioned
+     ancestor exactly, no viewport unit involved. */
+  inset: 0;
   z-index: 211;
   display: flex;
   flex-direction: column;
@@ -10356,7 +10424,9 @@ color: #005CFF;
   align-items: center;
   justify-content: center;
   min-height: 88px;
-  padding-top: 10px;
+  /* safe-area-aware: with the `inset: 0` fix above this sits flush against the true top edge of
+     the fullscreen overlay — same notch/status-bar territory as the main viewer's own header. */
+  padding-top: max(10px, env(safe-area-inset-top));
   touch-action: none;
 }
 .md3 .vdp-photosheet__handle {
@@ -10371,7 +10441,8 @@ color: #005CFF;
 }
 .md3 .vdp-photosheet__close {
   position: absolute;
-  left: 12px;
+  /* safe-area-aware: in the landscape layout the notch can rotate onto this side. */
+  left: max(12px, env(safe-area-inset-left));
   top: 50%;
   transform: translateY(-50%);
 }
@@ -10385,7 +10456,8 @@ color: #005CFF;
 }
 .md3 .vdp-photosheet__titles {
   flex: none;
-  padding: 0 16px 12px;
+  /* safe-area-aware left/right: landscape can rotate the notch onto either side. */
+  padding: 0 max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
   text-align: left;
 }
 .md3 .vdp-photosheet__title {
@@ -10408,7 +10480,9 @@ color: #005CFF;
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 0 12px 12px;
+  /* safe-area-aware left/right — otherwise the outer grid tiles can sit partly under a
+     landscape-rotated notch, tappable in theory but visually cut off. */
+  padding: 0 max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
 }
 .md3 .vdp-photosheet__grid {
   display: grid;
@@ -10454,8 +10528,10 @@ color: #005CFF;
   align-items: center;
   justify-content: flex-start;
   gap: 6px;
-  height: 44px;
-  padding: 0 16px;
+  /* was a fixed `height: 44px` — swapped for `min-height` so the safe-area bottom padding below
+     (home indicator) grows the bar instead of pushing its text outside a clipped fixed box. */
+  min-height: 44px;
+  padding: 0 max(16px, env(safe-area-inset-right)) max(0px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
   /* rgba(0,0,0,0.5) was invisible here — it darkens whatever's behind it, and the sheet's own
      panel (rgb(6,11,18)) is already almost black, so a 50%-black overlay on top of near-black
      reads as no change at all. #1c222c is lighter/bluer and already used elsewhere in this same

package/ui/CardCarousel.tsx

@@ -132,7 +132,18 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
         ))}
       </div>
       {/* arrows + dots only when there is actually something to switch to — with a single
-          image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls. */}
+          image (e.g. SRP cards before their gallery is lazy-loaded) they are dead controls.
+          States: single-image → n<=1 → hidden here (same "nothing to expand into" case as
+          GalleryCounter, cardParts.tsx). Loading → `images` starts as a 1-element array (the
+          card's main thumbnail) until the caller's lazy-load resolves, so this rule ALSO covers
+          "still loading" — arrows/dots simply aren't rendered yet, no skeleton, same discipline
+          as the other overlay controls. On touch devices this used to mean "hidden until the
+          user's first hover/touch on this exact card" (mouseenter/touchstart was the ONLY lazy-
+          load trigger) — CarCard's `eagerMedia` (see its own doc comment) starts that same load
+          on scroll-into-view instead, so this loading window is normally already closed by the
+          time the user reaches the card, without changing anything in this component. Desktop
+          hover-to-reveal (`.cardcar:hover .car-arrow`) vs. always-visible on touch is a CSS-only
+          concern — see `@media (hover: none)` in md3.css, not component state. */}
       {n > 1 && (
         <>
           <button className="car-arrow car-arrow--l" aria-label="zurück" onClick={(e) => go(-1, e)}>

package/vdp/VdpModules.tsx

@@ -1890,6 +1890,12 @@ export interface FinanceDetailsModalProps {
   oldMonthly?: number;
   /** struck list price (common.highestPrice, isStrikeShown-gated) — cash-tab strike (Figma). */
   listPrice?: number;
+  /** UVP (manufacturer's recommended retail price) for the legal "Repräsentatives Beispiel"
+   *  Listenpreis disclosure row — shown whenever the car has a real UVP on file, UNGATED by
+   *  isStrikeShown (unlike `listPrice` above, which only drives the cash-tab strike-through
+   *  badge off a DIFFERENT figure, the price-drop-tracking highestPrice): a car with no discount
+   *  badge still has a real UVP, and this row must still show it. */
+  listPriceExample?: number;
   apr: number;
   down: number;
   term: number;
@@ -1907,6 +1913,11 @@ export interface FinanceDetailsModalProps {
    *  the simpler Repräsentatives-Beispiel total (uniform Folgerate, no separate 1.Rate), financing
    *  only. Falls back to grossAmount when not supplied. */
   totalFinancingAmount?: number;
+  /** The lender actually driving this calculation (the active mode's config
+   *  `financialInstitution`: the dealer/car bank for custom rateMode/leasingMode, else the
+   *  fe-financing platform default). Shown as the Darlehensgeber/Leasinggeber line; falls
+   *  back to the locale's default lender text when not supplied. */
+  lenderName?: string;
   /** Sollzinssatz p.a. (%); shown only when > 0. */
   nominalRate?: number;
   /** slider bounds — when the change handlers are supplied, the modal shows adjustment sliders. */
@@ -1971,6 +1982,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   monthly,
   oldMonthly,
   listPrice,
+  listPriceExample,
   apr,
   down,
   term,
@@ -1979,6 +1991,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   finalInstallment,
   grossAmount,
   totalFinancingAmount,
+  lenderName,
   nominalRate,
   downMin,
   downMax,
@@ -2087,6 +2100,14 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   const tierIdx = TIER_LABELS.indexOf(ratingLabel as (typeof TIER_LABELS)[number]);
   const evalTier = tierIdx >= 0 ? tierIdx : 1;
   const evalTierLabel = t('autobahn:tier.' + TIER_KEYS[evalTier]);
+  // 'good' ("Guter Preis") always paints with the TOP tier's brighter green (TIER_COLORS[0]),
+  // not its own dimmer TIER_COLORS[1] — same rule FinanceCalculator's collapsed card already
+  // applies (FinanceCalculator.tsx's evalPillColor). The two render blocks below (desktop +
+  // mobile sheet) used TIER_COLORS[evalTier] directly, which for the 'good' tier painted this
+  // modal's pill a visibly different, dimmer green than the same-labeled pill on the card that
+  // opened it — same text, two colors.
+  const isGoodTier = TIER_KEYS[evalTier] === 'good';
+  const evalPillColor = isGoodTier ? TIER_COLORS[0] : TIER_COLORS[evalTier];
   // adjustable only for fin/leasing, and only when the page supplies the change handlers + bounds.
   const adjustable = mode !== 'cash' && !!onDownChange && downMin != null && downMax != null && termMin != null && termMax != null;
   // discrete term chip values (supplied periods, else derived from the bounds).
@@ -2176,7 +2197,9 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
       ...(grandTotal != null
         ? ([[t('autobahn:modal.grandTotalWithResidual'), `${eurCents(grandTotal)} €`, true]] as Array<[string, string, boolean]>)
         : []),
-      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPriceLease'), `${eurCents(listPrice)} €`]] as Array<[string, string]>) : []),
+      ...(listPriceExample != null && listPriceExample > 0
+        ? ([[t('autobahn:modal.listPriceLease'), `${eurCents(listPriceExample)} €`]] as Array<[string, string]>)
+        : []),
     ];
   } else {
     // Ballonfinanzierung: `term` includes the Schlussrate as its final slot, so only
@@ -2208,7 +2231,9 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
             [string, string, boolean]
           >)
         : []),
-      ...(listPrice != null && listPrice > 0 ? ([[t('autobahn:modal.listPrice'), `${eurCents(listPrice)} €`]] as Array<[string, string]>) : []),
+      ...(listPriceExample != null && listPriceExample > 0
+        ? ([[t('autobahn:modal.listPrice'), `${eurCents(listPriceExample)} €`]] as Array<[string, string]>)
+        : []),
     ];
   }
   const breakdownRows = rows.map(([l, v, bold], i) => (
@@ -2438,11 +2463,11 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 <div className="fin-eval-pill-cell">
                   {ratingLabel && (
                     <span
-                      className={`fin-eval-pill${TIER_KEYS[evalTier] === 'good' ? ' fin-eval-pill--good' : ''}`}
-                      style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+                      className={`fin-eval-pill${isGoodTier ? ' fin-eval-pill--good' : ''}`}
+                      style={{ color: evalPillColor, background: `color-mix(in srgb, ${evalPillColor} 16%, transparent)` }}
                     >
                       {evalTierLabel}
-                      {TIER_KEYS[evalTier] === 'good' && <sup>4</sup>}
+                      {isGoodTier && <sup>4</sup>}
                     </span>
                   )}
                 </div>
@@ -2605,7 +2630,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                         margin: 0,
                       }}
                     >
-                      {isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName')}
+                      {lenderName || (isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName'))}
                     </p>
                     {isLease && (
                       <>
@@ -2968,11 +2993,11 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                 <div className="fin-eval-pill-cell">
                   {ratingLabel && (
                     <span
-                      className={`fin-eval-pill${TIER_KEYS[evalTier] === 'good' ? ' fin-eval-pill--good' : ''}`}
-                      style={{ color: TIER_COLORS[evalTier], background: `color-mix(in srgb, ${TIER_COLORS[evalTier]} 16%, transparent)` }}
+                      className={`fin-eval-pill${isGoodTier ? ' fin-eval-pill--good' : ''}`}
+                      style={{ color: evalPillColor, background: `color-mix(in srgb, ${evalPillColor} 16%, transparent)` }}
                     >
                       {evalTierLabel}
-                      {TIER_KEYS[evalTier] === 'good' && <sup>4</sup>}
+                      {isGoodTier && <sup>4</sup>}
                     </span>
                   )}
                 </div>
@@ -3286,7 +3311,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                             margin: 0,
                           }}
                         >
-                          {isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName')}
+                          {lenderName || (isLease ? t('autobahn:modal.leaseLenderName') : t('autobahn:modal.lenderName'))}
                         </p>
                         {/* leasing's Darlehensgeber-style card also discloses the contract type
                             (Figma: "Vertragsart: Restwertleasing"), split off by its own divider */}

package/vdp/VdpViewer.tsx

@@ -64,6 +64,27 @@ const MOBILE_BREAKPOINT = 860;
 /** Landscape thumbnails (Figma node 424:7566 etc.) are 68px, not portrait's 64. */
 const LS_THUMB_W = 68;
 
+/** Safe-area helpers — keep overlay controls (especially the close button) clear of the notch /
+ *  Dynamic Island / status bar (top), home indicator (bottom) and, in landscape, whichever side the
+ *  notch rotates onto. `env(safe-area-inset-*)` only resolves to anything but 0px when the page's
+ *  `<meta name="viewport">` declares `viewport-fit=cover` (see services/fe-main/app.html) — the
+ *  0px fallback inside every `env()` call here means both of these are complete no-ops (identical
+ *  to the previous hardcoded numbers) on any browser/device that has no safe area to begin with, so
+ *  there's no behavioural change for the common case, only where a notch/indicator is actually
+ *  present. Two shapes, used in different structural contexts below:
+ *   - `withInset` ADDS the inset to a design offset — for absolute-positioned controls (landscape's
+ *     floating close/logo/counter/prev-next/zoom/etc.) whose `top`/`right`/… is a gap from the edge
+ *     of the *safe* content area, which needs to grow by however much the notch/indicator eats into
+ *     the raw viewport edge.
+ *   - `atLeastInset` guarantees a MINIMUM gap instead — for padding on a bar that already paints its
+ *     own edge-to-edge background (portrait's header/bottom-CTA bar, the photosheet), where a small
+ *     or absent safe area should still leave the existing 12px breathing room, not shrink it.
+ */
+const withInset = (px: number, side: 'top' | 'right' | 'bottom' | 'left'): string =>
+  `calc(${px}px + env(safe-area-inset-${side}, 0px))`;
+const atLeastInset = (px: number, side: 'top' | 'right' | 'bottom' | 'left'): string =>
+  `max(${px}px, env(safe-area-inset-${side}, 0px))`;
+
 type Layout = 'portrait' | 'landscape' | 'desktop';
 const layoutForWidth = (w: number): Layout => (w <= PORTRAIT_MAX ? 'portrait' : w <= MOBILE_BREAKPOINT ? 'landscape' : 'desktop');
 
@@ -719,7 +740,10 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 display: 'flex',
                 alignItems: 'flex-start',
                 justifyContent: 'space-between',
-                padding: '12px 12px 10px',
+                // safe-area-aware: this bar sits flush against the top of the fullscreen overlay
+                // (the notch/Dynamic Island/status bar's exact territory), and its close button is
+                // the primary control the "always tappable" acceptance criterion is about.
+                padding: `${atLeastInset(12, 'top')} ${atLeastInset(12, 'right')} 10px ${atLeastInset(12, 'left')}`,
                 background: 'rgba(6,11,18,0.8)',
                 borderBottom: '1px solid rgba(255,255,255,0.12)',
               }}
@@ -730,7 +754,10 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 ariaLabel={t('autobahn:viewer.closeLabel')}
                 onClick={onClose}
               />
-              <div style={{ position: 'absolute', left: '50%', top: 10, transform: 'translateX(-50%)', width: 160, height: 71 }}>
+              {/* absolutely positioned (unlike its close/call siblings), so it does NOT
+                  automatically shift down with the header's safe-area padding above — needs its
+                  own top offset. */}
+              <div style={{ position: 'absolute', left: '50%', top: withInset(10, 'top'), transform: 'translateX(-50%)', width: 160, height: 71 }}>
                 <LogoMark />
               </div>
               {onCall ? (
@@ -914,7 +941,23 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
             {/* full-width bottom bar — "Jetzt Anfragen" (primary) + "Anrufen" (dark), Figma nodes
                 424:8128-8134. */}
             {(onEmail || onCall) && (
-              <div style={{ display: 'flex', gap: THUMB_GAP, padding: 12, height: 82, background: '#797979', flex: 'none' }}>
+              // safe-area-aware: last item before the true bottom edge — height is deliberately
+              // NOT fixed anymore (was 82px) so the extra bottom padding on a home-indicator device
+              // grows the bar instead of squeezing its 56px-tall buttons; `alignItems: 'center'`
+              // keeps them centered in that now-variable padding box.
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: THUMB_GAP,
+                  paddingTop: 12,
+                  paddingRight: atLeastInset(12, 'right'),
+                  paddingBottom: atLeastInset(12, 'bottom'),
+                  paddingLeft: atLeastInset(12, 'left'),
+                  background: '#797979',
+                  flex: 'none',
+                }}
+              >
                 {onEmail && (
                   <button
                     type="button"
@@ -1035,25 +1078,54 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 brand-blue/gradient mark (verified against its raw export), i.e. the SAME svg this
                 codebase already ships as `assets/autode-logo.svg` — reused directly, not portrait's
                 white LogoMark (landscape has no dark bar behind it to need a white variant). */}
-            <div style={{ position: 'absolute', left: 4, top: 10, width: 93, height: 42, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div
+              style={{
+                position: 'absolute',
+                left: withInset(4, 'left'),
+                top: withInset(10, 'top'),
+                width: 93,
+                height: 42,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
               <img src={logoUrl} alt="auto.de" style={{ width: 74, height: 21.46, display: 'block' }} />
             </div>
 
             {/* counter pill — Figma node 424:9277 "Counter / BG" */}
-            <div style={lsCounterStyle} aria-label={t('autobahn:viewer.counterLabel', { current: i + 1, total: n })}>
+            <div style={{ ...lsCounterStyle, top: withInset(12, 'top') }} aria-label={t('autobahn:viewer.counterLabel', { current: i + 1, total: n })}>
               <span className="num">
                 {i + 1} | {n}
               </span>
             </div>
 
-            {/* close — Figma nodes 424:7556/7557, no caption text in this layout */}
-            <LsCircleButton icon={<IconClose />} ariaLabel={t('autobahn:viewer.closeLabel')} onClick={onClose} style={{ right: 12, top: 12 }} />
+            {/* close — Figma nodes 424:7556/7557, no caption text in this layout. Rotating the
+                phone moves the notch/Dynamic Island to whichever side is now "up" (device-relative
+                left/right, not a fixed screen side) — safe-area-aware on both axes since this sits
+                at the true top-right corner, the corner most likely to overlap it. */}
+            <LsCircleButton
+              icon={<IconClose />}
+              ariaLabel={t('autobahn:viewer.closeLabel')}
+              onClick={onClose}
+              style={{ right: withInset(12, 'right'), top: withInset(12, 'top') }}
+            />
 
             {/* prev/next — Figma nodes 424:7560/7561 and 424:7563/7564 */}
             {n > 1 && (
               <>
-                <LsCircleButton icon={<IconChevronLeft />} ariaLabel={t('autobahn:viewer.previousLabel')} onClick={() => go(-1)} style={{ left: 12, top: 126 }} />
-                <LsCircleButton icon={<IconChevronRight />} ariaLabel={t('autobahn:viewer.nextLabel')} onClick={() => go(1)} style={{ right: 12, top: 126 }} />
+                <LsCircleButton
+                  icon={<IconChevronLeft />}
+                  ariaLabel={t('autobahn:viewer.previousLabel')}
+                  onClick={() => go(-1)}
+                  style={{ left: withInset(12, 'left'), top: 126 }}
+                />
+                <LsCircleButton
+                  icon={<IconChevronRight />}
+                  ariaLabel={t('autobahn:viewer.nextLabel')}
+                  onClick={() => go(1)}
+                  style={{ right: withInset(12, 'right'), top: 126 }}
+                />
               </>
             )}
 
@@ -1062,8 +1134,8 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
             <div
               style={{
                 position: 'absolute',
-                right: 12,
-                bottom: 12,
+                right: withInset(12, 'right'),
+                bottom: withInset(12, 'bottom'),
                 width: 48,
                 height: 150,
                 borderRadius: 'var(--md-r-full)',
@@ -1126,7 +1198,20 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 align the way the design does, without hardcoding a container width that would break
                 across the 693-860 range. `right: 81` keeps this band clear of the zoom/360 column
                 (12 right-margin + 48 wide + the 21px gap Figma leaves before it = 81). */}
-            <div style={{ position: 'absolute', left: 12, right: 81, bottom: 12, height: 50, display: 'flex', alignItems: 'center' }}>
+            <div
+              style={{
+                position: 'absolute',
+                left: withInset(12, 'left'),
+                // 81 = 12 right-margin + 48 zoom-column width + 21 Figma gap before it; add the
+                // same right inset the zoom/360 column itself got above so this band still clears
+                // it once that column has shifted in from a notched edge.
+                right: withInset(81, 'right'),
+                bottom: withInset(12, 'bottom'),
+                height: 50,
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
               {(() => {
                 const overflow = images.length > lsFitCount;
                 const visibleCount = overflow ? lsFitCount - 1 : images.length;