@bytebrand/fe-ui-core-autobahn 1.0.122 → 1.0.124

package/cards/CarRow.tsx

@@ -30,6 +30,7 @@ import {
   PpActivity,
   GalleryBadges,
   GalleryCounter,
+  GalleryActivityPill,
   OfferBadge,
   PriceTabs,
   PriceHero,
@@ -224,44 +225,19 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({
         <div className="show-mobile">
           <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).
-            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 }}
-        >
-          {car.photos > 1 && (
-            <span className="mcard-photo-chip">
-              <Icon name="maximize" size={16} stroke={1.7} />
-              {photoIndex + 1}|{car.photos}
-            </span>
-          )}
-          {(!!car.viewsCount || !!car.favoritesCount) && (
-            <span className="mcard-photo-chip">
-              {!!car.viewsCount && (
-                <>
-                  <Icon name="eye" size={16} stroke={1.7} />
-                  {car.viewsCount}
-                </>
-              )}
-              {!!car.favoritesCount && (
-                <>
-                  <Icon name="heart" size={16} stroke={1.7} />
-                  {car.favoritesCount}
-                </>
-              )}
-            </span>
-          )}
+        {/* desktop: same light "1|N" photo counter + eye/heart activity pill as CarCard (Figma
+            "mcard" export) — reusing GalleryCounter(light)/GalleryActivityPill (cardParts.tsx)
+            instead of the old inlined "N|M" + combined eye+heart chip this used to render, so
+            list view and grid view can never visually drift again. Same bottom:10/left:10 +
+            bottom:10/right:10 placement, same 3-state policy (both components self-guard:
+            GalleryCounter hides at total<=1, GalleryActivityPill hides when both counts are
+            falsy — loading/zero read the same as "nothing worth showing yet", see their own
+            doc comments in cardParts.tsx) — no manual guards needed here any more. */}
+        <div className="hide-mobile" style={{ position: 'absolute', bottom: 10, left: 10, zIndex: 3 }}>
+          <GalleryCounter current={photoIndex + 1} total={car.photos} light />
+        </div>
+        <div className="hide-mobile" style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+          <GalleryActivityPill viewsCount={car.viewsCount} favoritesCount={car.favoritesCount} />
         </div>
       </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.122",
+  "version": "1.0.124",
   "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",

package/theme/md3.css

@@ -298,9 +298,38 @@ line-height: 31px;
   flex: none;
   transition: background 0.15s;
 }
-.md3 .icon-btn:hover {
+/* :not(:disabled) — same convention as .co-rail-step:hover:not(:disabled) elsewhere in this file:
+   a disabled icon-btn (e.g. VdpViewer's zoom in/out at ZOOM_MIN/MAX) shouldn't show a hover fill
+   that implies it's still clickable. */
+.md3 .icon-btn:hover:not(:disabled) {
   background: var(--md-sc-high);
 }
+.md3 .icon-btn:disabled {
+  cursor: not-allowed;
+}
+/* VDP viewer (desktop) toolbar — zoom out/in, 360°, and close share this white-circle+shadow
+   look; email/call get the primary-blue one below. Both are CLASSES, not inline `style` (an
+   inline style background permanently pins it, blocking :hover entirely — no exceptions, so
+   this used to be the one thing silently killing hover on all five of these buttons). Works
+   without any extra :hover rule of its own for the light variant: .icon-btn:hover:not(:disabled)
+   above is more specific (4 selectors vs. this rule's 2) so it already wins on hover for free. */
+.md3 .vdp-viewer-light {
+  background: var(--md-sc-lowest, #fff);
+  box-shadow: var(--md-e1);
+}
+.md3 .vdp-viewer-contact {
+  background: var(--md-primary);
+  box-shadow: var(--md-e1);
+}
+/* the contact (email/call) pair needs its OWN :hover, and it needs the explicit `.icon-btn`
+   repeated in the selector to match .icon-btn:hover:not(:disabled) above's specificity (4
+   selectors each, :not()'s specificity is its argument's — a plain `.vdp-viewer-contact:hover`
+   is only 3 and would silently lose, tinting these the light pair's neutral grey instead of the
+   deeper blue below, the same "primary button, one shade darker" treatment .mbtn--filled:hover
+   already uses). Source order (this comes after) breaks the tie once specificity is equal. */
+.md3 .icon-btn.vdp-viewer-contact:hover {
+  background: var(--autode-blau-strong);
+}
 .md3 .icon-btn--filled {
   background: #FFFFFF;
   border: 1px solid #D4DDE7;
@@ -2263,6 +2292,12 @@ line-height: 31px;
   display: inline-flex;
   gap: 6px;
   margin: 12px 0;
+  /* .dash-card is display:flex/flex-direction:column (legacy .section) with the default
+     align-items:stretch, so this box (its width left auto) stretches to the card's full width
+     as a flex item regardless of being inline-flex — without justify-content the "0 0 0" digits
+     then just sit at the box's flex-start (left) edge instead of centering like the icon above
+     them (EmployeeIcon centers via its own margin:0 auto, unaffected by this). */
+  justify-content: center;
 }
 .md3 .dash-odo span {
   display: inline-flex;
@@ -2924,11 +2959,132 @@ line-height: 31px;
   .md3 .co-step-label {
     display: none;
   }
-  .md3 .co-step {
+  /* CheckoutPage/CheckoutChromeNext never actually add the `.md3` class anywhere in their own
+     tree (only comments say they expect it — confirmed by grep), so a lone .md3-prefixed rule
+     here would silently never match on this page at all. Every rule below is written twice —
+     `.md3 .x` (wins by source order over the un-media-queried base rule of the same
+     specificity, IF `.md3` ever is present) and plain `.x` (the one that actually matches
+     today, and stays correct even if that .md3 gap gets fixed later) — so the fix holds
+     regardless of that gap. */
+  .md3 .co-step,
+  .co-step {
+    /* was flex: none — with .co-step-label hidden two rules up, each step's only remaining
+       content is a fixed 30px dot + this connector bar; flex:none sized every step off the
+       bar's own min-width instead of sharing the row, and together with the bar's min-width
+       below (was 24px, MORE than the base 16px) the 5 steps' combined min-content width ran
+       past a 390px viewport — hence the horizontal scroll. flex:1 (matches the desktop base)
+       lets them actually share the row and shrink together instead. */
+    flex: 1;
+  }
+  /* last step (5) has no .co-step-bar (nothing after the final dot to connect to) — at an
+     equal flex:1 share like its siblings, its box was still as wide as theirs, leaving empty
+     trailing space after its dot that read as "not stretched to the edge". flex:none sizes it
+     down to just its dot's own 30px instead, and steps 1-4 (still flex:1) automatically absorb
+     the freed-up space into their own bars — dot 5 ends up flush at the row's right edge. */
+  .md3 .co-step:last-child,
+  .co-step:last-child {
     flex: none;
   }
-  .md3 .co-step-bar {
-    min-width: 24px;
+  .md3 .co-step-bar,
+  .co-step-bar {
+    min-width: 10px;
+    margin: 0 4px;
+  }
+  /* was 28px auto 4px / 0 24px (desktop values) at every width — no dedicated mobile value. */
+  .md3 .co-stepper,
+  .co-stepper {
+    margin: 10px auto 10px;
+    padding: 0 14px;
+  }
+  .md3 .co-header-row,
+  .co-header-row {
+    /* was 12px 24px (desktop) at every width — no dedicated mobile value. */
+    padding: 18px 14px;
+    /* was 16px (desktop) at every width. */
+    gap: 10px;
+  }
+  .md3 .co-header-car,
+  .co-header-car {
+    /* was 16px (desktop) at every width. */
+    gap: 10px;
+  }
+  .md3 .co-car-img,
+  .co-car-img {
+    /* was 64x44 (desktop) at every width — same 64:44 aspect ratio, just bigger. */
+    width: 80px;
+    height: 55px;
+  }
+  .md3 .co-price-amount,
+  .co-price-amount {
+    /* was 20px (desktop) at every width. */
+    font-size: 22px;
+  }
+  /* "Weiter"/"Zurück" (.co-next) — the shared Button component's size="lg" gives every mbtn
+     here .mbtn--lg's bigger dimensions (h:48/padding 0 30, or h:46 on phone via the NewMainPage
+     mobile rule elsewhere); on this narrow a sheet that reads oversized next to the rest of the
+     form. Drops back to plain .mbtn's own base sizing instead. (.co-next .mbtn--lg is already
+     2 classes, matching .md3 .mbtn--lg's own specificity, so this one didn't need the
+     dual-selector treatment above to win either way.) */
+  .co-next .mbtn--lg {
+    height: 40px;
+    padding: 0 24px;
+    font-size: 14px;
+    /* same size for both — flex:1 splits whatever's left on their shared row evenly, so
+       Weiter's longer label/icon can't make it wider than back. */
+    flex: 1;
+  }
+  /* .mbtn--outlined ("back"): explicit base .mbtn + .mbtn--outlined properties, not just the
+     size tweak above — same reasoning as the dual-selector rules elsewhere in this block
+     (CheckoutPage never actually adds the `.md3` class anywhere in its own tree), just spelled
+     out in full this time since the request was for this button's whole look, not one property.
+     border-radius/border are explicit per-request overrides (10px + a real 1px border), not
+     the shared design-system's var(--md-r-full) pill + inset-box-shadow border trick — a
+     deliberately different, more "squared" look for just this button. */
+  .md3 .co-next .mbtn--outlined,
+  .co-next .mbtn--outlined {
+    font-family: var(--md-font);
+    font-weight: 600;
+    letter-spacing: 0.1px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    white-space: nowrap;
+    background: transparent;
+    color: #005cff;
+    /* label text renders as the literal lowercase "back" (no matching key in the CheckoutPage
+       locale files — i18next falls back to printing the raw t('back') key itself), next to
+       Weiter's already-capitalized German label. Fixed here rather than chasing down/adding
+       the missing translation key, since the ask was specifically about the letter case. */
+    text-transform: capitalize;
+    border-radius: 10px;
+    border: 1px solid #005cff;
+    box-shadow: none;
+  }
+  /* .mbtn--filled ("Weiter"): hardcoded #005cff per explicit request, not var(--md-primary) —
+     same dual-selector reasoning as above. */
+  .md3 .co-next .mbtn--filled,
+  .co-next .mbtn--filled {
+    background: #005cff;
+  }
+  /* back on the left, Weiter on the right, on their OWN row — .co-error (when a step's
+     validation fails) must not crowd into that same row with them. flex-wrap + the .co-error
+     rule below (flex-basis:100%, forcing it to consume its whole line) does this with the
+     existing flat DOM (.co-next's 3 children are plain siblings — .co-error, then both
+     buttons, no wrapping element around the buttons) — .co-error always lands on its own
+     first line, and whatever's left (the two buttons — or, when there's no error, ALL of
+     .co-next's content) wraps onto the next line and is laid out by flex-direction:row same
+     as before. The existing gap:8px (base .co-next, unmodified) applies between wrapped lines
+     too, so the error/button rows don't need their own separate margin. */
+  .md3 .co-next,
+  .co-next {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
+  .md3 .co-next .co-error,
+  .co-next .co-error {
+    flex: 1 0 100%;
   }
 }
 /* below the 992px desktop breakpoint the content no longer reserves the 424px left
@@ -3456,12 +3612,14 @@ line-height: 31px;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
 }
 /* pin the VDP gallery's own edge offset — the base .car-arrow--l/--r rule above was moved to
-   10px for the SRP card carousels; the VDP viewer keeps its original, larger offset. */
+   10px for the SRP card carousels; the VDP gallery box's OWN overlay elements (push-badges,
+   favorite/share, the photo-count/activity pills) all sit at a 14px inset, so the arrows match
+   that instead (was 22px — inconsistent with the rest of this box). */
 .md3 .vdp-gallerybox .car-arrow--l {
-  left: 22px;
+  left: 14px;
 }
 .md3 .vdp-gallerybox .car-arrow--r {
-  right: 22px;
+  right: 14px;
 }
 
 /* ==========================================================================
@@ -3657,7 +3815,7 @@ line-height: 31px;
 .md3 .vdp-meta > span {
   display: inline-flex;
   align-items: center;
-  gap: 0px;
+  gap: 6px;
   white-space: nowrap;
 }
 .md3 .vdp-meta > span + span::before {
@@ -4082,8 +4240,7 @@ line-height: 31px;
 }
 /* consistent studio treatment for ALL inventory photos: white backdrop + soft grounding floor
    shadow, so mixed-source cutouts look uniform (Carvana/Cinch catalog look) */
-.md3 .cc-media,
-.md3 .listcard-media {
+.md3 .cc-media {
   background: radial-gradient(
       58% 13px at 50% 90%,
       rgba(16, 22, 42, 0.15),
@@ -4091,6 +4248,12 @@ line-height: 31px;
     ),
     #fff;
 }
+/* SRP list card: plain white, no floor shadow under the car — the wider (320px) media column
+   made that soft dark oval read as an actual smudge/shadow under the vehicle instead of a
+   subtle grounding cue. .cc-media (home/offer grid cards) keeps it, unaffected. */
+.md3 .listcard-media {
+  background: #fff;
+}
 /* offer cards: border + soft shadow so they sit on the page (not borderless-floaty) */
 .md3 .cc-card {
   box-shadow: var(--md-e1);
@@ -4099,7 +4262,12 @@ line-height: 31px;
 /* horizontal listing card (SRP): image | info | price */
 .md3 .listcard {
   display: grid;
-  grid-template-columns: 300px 1fr 240px;
+  /* media column widened 300→320 (340 was too much): at the max 6 dots (CardCarousel slices
+     images to 6), the centered dots row got wide enough to visually collide with
+     .cc-activity-pill (bottom-right, anchored 10px from the edge) and came within ~1.5px of
+     .cc-photo-pill (bottom-left) too — both pills are anchored a fixed 10px from the column's
+     edges, so a wider column pushes them further apart without anything else needing to change. */
+  grid-template-columns: 320px 1fr 240px;
   align-items: stretch;
 }
 .md3 .listcard-media {
@@ -4491,6 +4659,19 @@ line-height: 31px;
 .md3 .body-tile .md-label-sm {
   color: var(--md-on-surface-variant);
 }
+/* the label span has no explicit width — as a column-flex item with align-items:center it
+   sizes to its own natural (unwrapped) content width, so a long compound label like
+   "SUV/Geländewagen" (no spaces to wrap at) overflows past the tile's rounded edges instead
+   of wrapping to a 2nd line. Cap it to the tile's own content width so the browser is forced
+   to wrap — plain `overflow-wrap: break-word` prefers a normal break point ("/" counts, same
+   as "and/or" wrapping at the slash in body text) and only breaks mid-word as a genuine last
+   resort. `word-break: break-word` looked like the same fix but isn't: it forces min-content
+   sizing as if EVERY character were a break point, which made the browser ignore the "/" and
+   split "Geländewa" / "gen" instead — do not add it back. */
+.md3 .body-tile > span:not(.md-label-sm) {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
 /* payment paths: financing hero (eyebrow + big rate + terms) on top, Leasing/Kaufen quiet rows */
 .md3 .pricepaths {
   min-width: 0;
@@ -6495,7 +6676,10 @@ line-height: 31px;
     gap: 24px;
   }
   .md3 .listcard {
-    grid-template-columns: 260px 1fr;
+    /* same dots/pill clearance reasoning as the base 300→320 bump above — this range (601–980px,
+       price column dropped to 1 row below) still shows the desktop pills (.hide-mobile only
+       disappears at 600px), so it needs the same margin, proportionally applied. */
+    grid-template-columns: 280px 1fr;
   }
   /* tablet: price column spans full width below image+info, zones stack in a normal column */
   .md3 .listcard-price {
@@ -7432,7 +7616,6 @@ line-height: 31px;
   .md3 .vdp-push-badges {
     gap: 6px;
     margin-bottom: 13px;
-    padding-left: 12px;
   }
 }
 
@@ -7750,9 +7933,14 @@ color: #005CFF;
 @media (max-width: 600px) {
   /* full-bleed gallery: edge-to-edge, app-like. Extra height (vs. the plain photo height)
      reserves room at the bottom for the controls row, now overlaid on the image itself
-     (round 15 — supersedes the earlier "no overlay" layout). */
+     (round 15 — supersedes the earlier "no overlay" layout).
+     -14px, not -24px: cancels .vdp-main's OWN mobile side padding (14px !important, below —
+     .vdp-gallerybox's direct containing block), not the 24px desktop inline value. Was still
+     -24px from before that 14px override existed, so this was overshooting the true viewport
+     edge by 10px — .car-arrow/.vdp-push-badges (positioned against .cardcar, i.e. against THIS
+     box) were landing ~4px from the real edge instead of their own stated 14px. */
   .md3 .vdp-gallerybox {
-    margin: 0 -24px;
+    margin: 0 -14px;
     border-radius: 0;
     border: 0;
     box-shadow: none;
@@ -7764,11 +7952,16 @@ color: #005CFF;
   .md3 .vdp-gallery {
     position: relative;
   }
-  /* controls row now sits ON the image as an overlay, bottom-aligned (round 15) */
+  /* controls row now sits ON the image as an overlay, bottom-aligned (round 15).
+     left/right: 0, not 14px — unlike .vdp-gallerybox above, .vdp-gallery is NOT full-bleed
+     (no negative margin of its own), so it's still sitting inside .vdp-main's 14px padding —
+     that padding alone already supplies the 14px gutter from the true edge. The extra 14px
+     here was stacking on top of it (14+14=28px), pulling .gallery-photos-btn/the share+save
+     icons noticeably further in than .car-arrow/.vdp-push-badges' real 14px on the same edges. */
   .md3 .gallery-controls-row {
     position: absolute;
-    left: 14px;
-    right: 14px;
+    left: 0;
+    right: 0;
     bottom: 12px;
     z-index: 3;
     padding: 0;
@@ -9075,6 +9268,15 @@ color: #005CFF;
     line-height: 16px;
     color: #ffffff;
   }
+  /* the base .mbtn .lucide rule (width/height:18px) was overriding FinanceCalculator.tsx's own
+     size={23} prop on this icon — CSS width/height on an <svg> always wins over its own
+     width/height attributes, so the component-level size bump alone did nothing visible.
+     Scoped to just this button (not .fin-cta-row .mbtn--outlined/"Anrufen" next to it, whose
+     18px icon wasn't part of this request). */
+  .md3 .fin-cta-row .mbtn--filled .lucide {
+    width: 23px;
+    height: 23px;
+  }
   .md3 .fin-cta-row .mbtn--outlined {
     width: 108px;
     background: #ffffff;
@@ -9349,7 +9551,31 @@ color: #005CFF;
   border-radius: var(--md-r-lg, 16px);
   box-shadow: var(--md-e1);
   padding: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
+  /* the legacy .section class (still applied alongside dash-card — see DashboardOverview.tsx
+     and its sibling sections) sets a fixed height: 361px/195px per tier with
+     display:flex/flex-direction:column; min-height:auto only raises the floor, it never cancels
+     that fixed height, so once a card's content (e.g. the table after the padding fix above)
+     grew past 361px it kept overflowing the rounded border instead of growing the card — that
+     was the "676 more vehicles" sitting outside the block.
+     height:100% (not auto) on purpose: each dash-card's immediate parent is a react-flexbox-grid
+     <Col>, and every Row of <Col>s already stretches its columns to the tallest one by default
+     (align-items: normal → stretch) — 100% lets the card fill that already-equalized column
+     height instead of only fitting its own content, which is what keeps e.g. "Create Car" (tall
+     icon + copy) and "Base data" (three short lines) sitting in the same Row at equal height with
+     their bottom edges aligned, the way the old fixed-height tiers did whenever content happened
+     to fit them. A lone/tallest card in a Row still just gets its own content height back, since
+     100% then resolves to exactly that — no clipping either way.
+     BUT plain height:100% + margin-bottom on the SAME box fights itself: the <Col> is a flex
+     item, which per spec always establishes its own block-formatting-context for its children —
+     so dash-card's margin-bottom can never collapse through it into extra Row spacing, it can
+     only overflow past the (exactly 100%-filled) Col edge, which does NOT push the next Row down
+     — net visible gap: 0, cards touching, no matter what the margin-bottom value is set to. Carve
+     the same margin OUT of the height instead (100% − margin) so box + margin together still sum
+     to exactly the stretched Col height, but the box itself stops short and the margin is real,
+     visible empty space above the next Row rather than overflow past this one. Keep this in sync
+     with margin-bottom above if that value ever changes. */
+  height: calc(100% - 15px);
   min-height: auto;
 }
 .md3 .dash-card-title {
@@ -9363,9 +9589,24 @@ color: #005CFF;
   font: 600 14px var(--md-font);
   color: var(--md-primary);
   text-decoration: none;
+  /* the legacy .secondaryLink class (still applied alongside dash-link — see
+     DashboardOverview.tsx) draws a bordered, uppercase, fixed-210px button; dash-link on its own
+     only ever added color/font on top of that, so the "To Overview" link still rendered as the
+     old boxy button underneath. Reset every legacy box property so it reads as a plain md3 text
+     link. */
+  width: auto;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  text-align: left;
+  text-transform: none;
 }
 .md3 .dash-link:hover {
   text-decoration: underline;
+  background: transparent;
 }
 .md3 .dash-link--primary {
   background: var(--md-primary);
@@ -9378,27 +9619,82 @@ color: #005CFF;
   text-decoration: none;
   opacity: 0.92;
 }
+/* DashboardBaseData/CreateCar/DataExport/DataImport render their one trailing link/button as a
+   DIRECT child of the dash-card section (no wrapper) — .dash-card is display:flex;
+   flex-direction:column (from the legacy .section class), so margin-top:auto on it consumes all
+   the column's leftover space and pins it flush to the card's bottom edge, matching cards whose
+   content happens to fill the row exactly. Scoped to a DIRECT child so it does NOT reach
+   DashboardEmployee's two links — those sit inside .linksWrapper (its own already-working
+   margin-top:auto), one level deeper, so this selector never matches them. */
+.md3 .dash-card > .dash-link {
+  margin-top: auto;
+}
+/* the legacy DealerDashboardPage__table/__tableRow classes (still applied alongside dash-table —
+   see DashboardOverview.tsx) render each cell as its own coloured, gapped box (border-spacing:
+   separate + a per-cell background) and split the columns 55/15/15/15/15 (=115%, doesn't even
+   add up) under table-layout:fixed — that's the mismatched-column / disjointed-boxes look
+   reported live. Every property that leaked through below is reset here at matching or higher
+   specificity so it can't win regardless of stylesheet load order. */
 .md3 .dash-table {
+  /* legacy .table also sets width:calc(100% + 30px) + margin-left/right:-15px — a full-bleed
+     trick tuned for .section's OLD 15px padding. width:100% above already wins on specificity,
+     but the negative margins were never a competing declaration (nothing here set `margin`), so
+     they kept shifting the whole table 15px left, leaving a lopsided ~15px extra gap on the
+     right — that's the "more to the left" look reported live. */
+  margin: 0;
   width: 100%;
   border-collapse: collapse;
+  table-layout: fixed;
   font-size: 13.5px;
 }
+.md3 .dash-table th,
+.md3 .dash-table td {
+  background: transparent;
+  width: auto;
+  padding: 10px 12px;
+  text-align: center;
+}
 .md3 .dash-table th {
-  text-align: left;
   font: 600 12.5px var(--md-font);
   color: var(--md-on-surface-variant);
-  padding: 6px 8px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   border-bottom: 1px solid var(--md-outline-variant);
+  white-space: nowrap;
 }
 .md3 .dash-table td {
-  padding: 9px 8px;
   border-bottom: 1px solid var(--md-outline-variant);
   color: var(--md-on-surface);
   vertical-align: middle;
 }
+/* :first-child/:last-child match the legacy rules' own specificity tier (class + pseudo-class +
+   element) — a plain .dash-table td here would only TIE the legacy selector and could lose on
+   load order, so `width` is repeated on :first-child rather than left to the shared rule above. */
+.md3 .dash-table th:first-child,
+.md3 .dash-table td:first-child {
+  /* the 3 middle (★/24h/Total) columns stay unset — table-layout:fixed shares whatever's left
+     over (100 - 46 - 10 = 44, ~14.7% each) evenly between them. */
+  width: 46%;
+  text-align: left;
+  padding-left: 0;
+}
+.md3 .dash-table th:last-child,
+.md3 .dash-table td:last-child {
+  width: 10%;
+  text-align: right;
+  padding-right: 0;
+}
 .md3 .dash-table tr:last-child td {
   border-bottom: 0;
 }
+.md3 .dash-table tbody tr:hover td {
+  background: var(--md-sc-low);
+}
+/* StarIcon's <path> has no fill prop (defaults to solid black) — pick up the same muted grey as
+   the rest of the header text instead of a heavy pure-black star. */
+.md3 .dash-table th [class*="tableIcon"] {
+  fill: var(--md-on-surface-variant);
+}
 
 /* ============================================================================
    LEGACY → md3 IN-PLACE BRIDGE  (account / dealer / admin pages)

package/ui/CardCarousel.tsx

@@ -168,7 +168,12 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
             className="cardcar-dots"
             style={{
               position: 'absolute',
-              bottom: 23,
+              // vertically centered against the sibling bottom-left/right pills (.cc-photo-pill /
+              // .cc-activity-pill, both height:30 at bottom:10 → vertical center at 25px from the
+              // card's bottom edge): dots are 7px tall, so bottom:21.5 puts THEIR center at
+              // 21.5 + 3.5 = 25 too. Shared by CarCard (grid) and CarRow (list) alike — both use
+              // the same pill sizing/position, so one value serves both.
+              bottom: 21.5,
               left: -5,
               right: 0,
               display: 'flex',

package/ui/IconButton.tsx

@@ -14,6 +14,19 @@ export interface IconButtonProps {
   active?: boolean;
   size?: number;
   style?: React.CSSProperties;
+  /** native disabled — also suppresses :hover (.icon-btn:hover:not(:disabled), md3.css), so a
+   *  visually-dimmed/at-limit button (e.g. VdpViewer's zoom in/out at ZOOM_MIN/MAX) doesn't
+   *  still show a hover fill implying it's clickable when the action would be a no-op anyway. */
+  disabled?: boolean;
+  /**
+   * Extra class(es) appended after 'icon-btn'/'icon-btn--filled'. Prefer this over `style` for
+   * anything that should still respond to `:hover` — an inline `style` background always beats
+   * a stylesheet rule (the base `.icon-btn:hover` included), so a caller reaching for `style` to
+   * tint the button silently kills its own hover in the process. A class-based tint doesn't:
+   * `.icon-btn:hover` is more specific than a single extra class, so it keeps winning on hover
+   * for free (see VdpViewer.tsx's `.vdp-viewer-light`/`.vdp-viewer-contact` for exactly this).
+   */
+  className?: string;
 }
 
 const IconButton: React.FunctionComponent<IconButtonProps> = ({
@@ -25,12 +38,15 @@ const IconButton: React.FunctionComponent<IconButtonProps> = ({
   active,
   size = 20,
   style,
+  className,
+  disabled,
 }) => (
   <button
-    className={'icon-btn' + (filled ? ' icon-btn--filled' : '')}
+    className={'icon-btn' + (filled ? ' icon-btn--filled' : '') + (className ? ` ${className}` : '')}
     onClick={onClick}
     aria-label={label}
     style={style}
+    disabled={disabled}
   >
     <Icon
       name={name}

package/vdp/FinanceCalculator.tsx

@@ -1009,10 +1009,14 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
             variant="filled"
             size="lg"
             className={secured ? 'fin-cta-secured' : undefined}
-            style={{ width: 216, height: 50, paddingLeft: 0, paddingRight: 9, gap: 18 }}
+            style={{ width: 216, height: 50, paddingLeft: 0, paddingRight: 9, gap: secured ? 3 : 18 }}
             onClick={onSecure}
           >
-            {secured ? <Icon name="shield-check" size={18} /> : <DocCheckIcon size={23} />}
+            {/* size 23 either way — was 18 for the secured (shield-check) state, notably
+                smaller than DocCheckIcon's 23 in the default state despite sharing the exact
+                same 50px button box; nothing about switching to "already secured" should
+                shrink the icon. */}
+            {secured ? <Icon name="shield-check" size={23} /> : <DocCheckIcon size={23} />}
             {secured && secureLabel ? secureLabel : t('autobahn:finance.secureOffer')}
           </Button>
           <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>

package/vdp/VdpModules.tsx

@@ -252,7 +252,7 @@ export const VdpHeaderCondition: React.FunctionComponent<VdpHeaderCardProps> = (
  * splits these 3 pieces across the "before/after finance card" layout — see the page).
  */
 export const VdpHeaderCard: React.FunctionComponent<VdpHeaderCardProps> = ({ vehicle, t }) => (
-  <div className="mcard" style={{ marginTop: 16, padding: '22px 24px 18px' }}>
+  <div className="mcard" style={{ marginTop: 16, padding: '18px 14px 18px' }}>
     <VdpHeaderSummary vehicle={vehicle} t={t} />
     <div style={{ marginTop: 14 }}>
       <VdpHeaderHighlights vehicle={vehicle} t={t} />

package/vdp/VdpViewer.tsx

@@ -761,9 +761,6 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
     return () => window.removeEventListener('resize', measure);
   }, [images.length, layout]);
 
-  // Desktop-only styles, unchanged from the original layout.
-  const iconBtnStyle: React.CSSProperties = { background: 'var(--md-sc-lowest, #fff)', boxShadow: 'var(--md-e1)' };
-  const contactBtnStyle: React.CSSProperties = { background: 'var(--md-primary)', boxShadow: 'var(--md-e1)' };
 
   const overlay = (
     <div className="md3">
@@ -1469,45 +1466,67 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 {i + 1} / {n}
               </span>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                {/* background/shadow now come from vdp-viewer-light/vdp-viewer-contact CSS classes,
+                    not inline `style` (that used to be iconBtnStyle/contactBtnStyle, see their old
+                    definitions above) — an inline style background permanently pins it, blocking
+                    :hover entirely (that's what killed hover on ALL of these, close included, until
+                    close got fixed the same way just above). Zoom's opacity IS still inline — that
+                    part is genuinely per-render dynamic (zoom-limit state), and plain opacity
+                    doesn't fight :hover the way background did. `disabled` at the zoom limit is
+                    new too — was opacity-only before, so the button still showed a hover fill at
+                    ZOOM_MIN/MAX implying it was clickable when zoomOut/zoomIn there is a no-op;
+                    the portrait/landscape zoom buttons further up already use real `disabled` the
+                    same way (:disabled also suppresses :hover, see .icon-btn:hover:not(:disabled)
+                    in md3.css), this desktop pair was just the one place still missing it. */}
                 <IconButton
                   name="minus"
                   label={t('autobahn:viewer.zoomOutLabel')}
                   onClick={zoomOut}
-                  style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MIN ? 0.4 : 1 }}
+                  className="vdp-viewer-light"
+                  style={{ opacity: zoom === ZOOM_MIN ? 0.4 : 1 }}
+                  disabled={zoom === ZOOM_MIN}
                 />
                 <IconButton
                   name="plus"
                   label={t('autobahn:viewer.zoomInLabel')}
                   onClick={zoomIn}
-                  style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
+                  className="vdp-viewer-light"
+                  style={{ opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
+                  disabled={zoom === ZOOM_MAX}
                 />
                 {has360 && (
                   // IconButton only takes a lucide `name` — Icon360 is a one-off inlined SVG (see
-                  // its own comment above), so this is IconButton's own markup (.icon-btn + the
-                  // same iconBtnStyle) built by hand instead of a name it can't render.
+                  // its own comment above), so this is IconButton's own markup (.icon-btn +
+                  // vdp-viewer-light) built by hand instead of a name it can't render.
                   <button
                     type="button"
-                    className="icon-btn"
+                    className="icon-btn vdp-viewer-light"
                     aria-label={t('autobahn:viewer.threeSixtyLabel')}
                     onClick={() => on360 && on360()}
-                    style={iconBtnStyle}
                   >
                     <Icon360 color="currentColor" />
                   </button>
                 )}
                 {onEmail && (
-                  <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} style={contactBtnStyle} color="#fff" />
+                  <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} className="vdp-viewer-contact" color="#fff" />
                 )}
                 {onCall && (
                   <IconButton
                     name="phone"
                     label={t('autobahn:viewer.callLabel', { phone })}
                     onClick={onCall}
-                    style={contactBtnStyle}
+                    className="vdp-viewer-contact"
                     color="#fff"
                   />
                 )}
-                <IconButton name="x" filled label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
+                {/* was `filled` (.icon-btn--filled forces a hard 34×34, !important) — every other
+                    button in this row (zoom/360/email/call) sits on the plain .icon-btn 40×40 box,
+                    so `filled` made this one visibly smaller than its neighbors. size=24 (was the
+                    IconButton default, 20) scales the X up with the button so it reads just as
+                    filled inside the now-bigger circle as it did in the old 34px one. Same
+                    vdp-viewer-light CLASS the zoom/360 buttons use (not an inline `style`) so
+                    :hover keeps working — see the className doc comment on IconButton itself. */}
+                <IconButton name="x" size={24} className="vdp-viewer-light" label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
               </div>
             </div>
             <div style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff', overflow: 'hidden' }}>