@bytebrand/fe-ui-core-autobahn 1.0.65 → 1.0.66

package/cards/cardParts.tsx

@@ -861,6 +861,11 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
   // same real struck-through reference rate PriceHero shows for the financing tab (oldMonthly) —
   // shown here too now that both rows render at once instead of behind a tab.
   const showOldMonthly = car.oldMonthly != null && car.oldMonthly > car.monthly;
+  // same digit-length shrink technique as PriceHero's own rateLenClass, so a long rate (e.g.
+  // 1.612 €) doesn't overflow the desktop hero's much larger 65px base size.
+  const rateDigits = String(Math.round(car.monthly)).length;
+  const rateLenClass =
+    rateDigits >= 6 ? ' pp-hero-val--len6' : rateDigits === 5 ? ' pp-hero-val--len5' : rateDigits === 4 ? ' pp-hero-val--len4' : '';
   return (
     <div className={'pricepaths' + (className ? ' ' + className : '')}>
       <div className="pp-hero">
@@ -871,7 +876,7 @@ export const PricePaths: React.FunctionComponent<PricePathsProps> = ({ car, t, c
               {(car.oldMonthly as number).toLocaleString('de-DE')} €<sup>2</sup>
             </span>
           )}
-          <b className="num pp-hero-val">
+          <b className={'num pp-hero-val' + rateLenClass}>
             {fmtRate(car.monthly)} €<sup>1</sup>
           </b>
           <span className="pp-hero-unit">

package/package.json

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

@@ -4276,6 +4276,40 @@ line-height: 31px;
 /* struck-through reference rate/price shown next to the tabbed hero price (Figma card) —
    same red strike as .pp-old, sized for the hero context rather than the compact list row. */
 .md3 .pp-hero-old { font-size: 15px; color: var(--md-error); text-decoration: line-through; white-space: nowrap; }
+/* desktop mcard financing hero: same 65px/18px scale already proven (real car data, no overflow)
+   for the grid CarCard's identical .cc-price hero — `.pricepaths` only ever exists inside the
+   SRP card's desktop-only PricePaths output (mobile's PriceHero, used by the tab switcher, has
+   no `.pricepaths` ancestor), so this can't leak into mobile without an extra media query. */
+.md3 .listcard-price .pricepaths .pp-hero-val {
+  font-size: 65px;
+  line-height: 58px;
+  letter-spacing: -2px;
+}
+.md3 .listcard-price .pricepaths .pp-hero-val--len4 { font-size: 50px; line-height: 53px; }
+.md3 .listcard-price .pricepaths .pp-hero-val--len5 { font-size: 43px; line-height: 45px; }
+.md3 .listcard-price .pricepaths .pp-hero-val--len6 { font-size: 37px; line-height: 40px; }
+.md3 .listcard-price .pricepaths .pp-hero-unit { font-size: 18px; font-weight: 700; color: #5b6b7f; }
+/* diagonal red strike (Figma), replacing the plain text-decoration:line-through above — same
+   generic technique .cc-price/.fin-calc-card already use, content-width-independent (the ±2px
+   left/right offsets stretch the line across whatever the old price's own width ends up being). */
+.md3 .listcard-price .pricepaths .pp-hero-old {
+  position: relative;
+  display: inline-block;
+  font-size: 17px;
+  font-weight: 400;
+  color: #0e2238;
+  text-decoration: none;
+}
+.md3 .listcard-price .pricepaths .pp-hero-old::after {
+  content: '';
+  position: absolute;
+  left: -2px;
+  right: -2px;
+  top: 50%;
+  border-top: 2px solid #e60000;
+  transform: rotate(12.53deg);
+  transform-origin: center;
+}
 .md3 .pp-hero-terms { margin-top: 9px; font-size: 11.5px; color: var(--md-on-surface-variant); }
 /* "Details" link at the end of the financing/leasing terms lines (Figma "mcard") — quiet, same
    color as the rest of the terms line but underlined so it still reads as tappable. */