absorb extra height so the footer sits at the bottom on short pages (no leftover gap below it). */ body.showroom > main{flex:1 0 auto} body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} /* NAV */ .nav{background:var(--brand);position:sticky;top:0;z-index:40} .nav .wrap{display:flex;align-items:center;gap:28px;height:62px} .nav img.logo{height:33px;width:auto;display:block} .nav .links{display:flex;gap:24px;margin-left:8px} .nav .links a{color:#ffd9d2;font-weight:600;font-size:14px;padding:6px 2px;border-bottom:2px solid transparent} .nav .links a:hover{color:#fff}.nav .links a.active{color:#fff;border-bottom-color:#fff} .nav .user{margin-left:auto;display:flex;align-items:center;gap:9px;color:#fff;font-weight:600;font-size:14px} .nav .user .av{width:32px;height:32px;border-radius:50%;background:#ffe7e2;color:var(--brand);display:grid;place-items:center;font-weight:800} .burger{display:none;margin-left:auto;background:transparent;border:0;cursor:pointer;padding:8px} .burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px} /* COMPACT HERO (detail) */ .crumb{font-size:13px;color:var(--muted);margin:14px 2px 0} .crumb a:hover{color:var(--brand)}.crumb .sep{opacity:.5;margin:0 6px} .hero{margin-top:8px;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr; background:linear-gradient(125deg,var(--maroon),var(--maroon-deep));color:#fff;box-shadow:0 12px 30px rgba(94,15,6,.2)} .hero .left{padding:22px 30px 24px;display:flex;flex-direction:column;justify-content:center} .badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:30px;padding:5px 13px; font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;width:fit-content} .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#ffd591} .hero h1{font-family:'Archivo';font-weight:900;font-size:clamp(25px,3.2vw,37px);line-height:1;letter-spacing:-.6px;margin-top:9px} .hero h1 .body-style{display:block;color:#ffd591;font-size:.66em;margin-top:1px} .vinline{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap} .vinline .vin{font-family:'JetBrains Mono';font-weight:700;font-size:clamp(16px,2.6vw,21px);letter-spacing:.14em; background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);padding:8px 14px;border-radius:9px} .vinline button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff; border-radius:9px;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer} .vinline button:hover{background:rgba(255,255,255,.24)} /* Icon-only hero controls (⧉ copy / 🖨 print): bigger glyph + tighter padding so the tap target matches the favorite star's 20px SVG (all three ~40px tall). */ .vinline button.icon-btn{font-size:18px;line-height:20px;padding:9px 11px} .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);border-radius:9px;padding:6px 11px} .pill .v{font-family:'JetBrains Mono';font-weight:700;font-size:14px} .pill .k{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#ffcfc7;margin-top:2px} /* Classic showroom confidence line (promoted out of the spec grid, web_features. classic_confidence_reason_display): label+value match .pill's tokens so it reads as part of the same hero chip family; the reason wraps onto its own line since it is prose, not a chip. */ .confidence-note{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:10px} .confidence-note .cf-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#ffcfc7} .confidence-note .cf-value{font-family:'JetBrains Mono';font-weight:700;font-size:15px} .confidence-note .cf-reason{flex-basis:100%;font-size:13px;color:rgba(255,255,255,.82);line-height:1.4} .hero .right{position:relative;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px} /* When an actual image is shown, fill the whole panel edge-to-edge (no padding); the no-image frame keeps its padded surround. */ .hero .right:not(.no-image){padding:0} .hero .right img{width:100%;height:100%;object-fit:cover;display:block} /* Clickable hero image -> opens the lightbox. */ .hero .right .hero-img{cursor:zoom-in} .hero .right .hero-img-hint{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6); color:#fff;font-size:12px;font-weight:600;padding:4px 9px;border-radius:7px;pointer-events:none;letter-spacing:.01em} /* web_features.showroom_hero_image_3x2: render the image in a fixed 3:2 box, center-cropped (cover), trimming top/bottom whitespace of square renders so the car fills the panel. aspect-ratio is inherently responsive, so this one rule covers desktop + mobile and supersedes the mobile contain override below. High specificity (.right.r32:not(.no-image) img) intentionally beats both the base `.hero .right img` and the mobile `.hero .right:not(.no-image) img` rules. The panel centers any vertical slack (flex align-items:center) as clean white. */ .hero .right.r32:not(.no-image) img{width:100%;aspect-ratio:3/2;height:auto;max-height:none;object-fit:cover;display:block} /* no-image frame */ .hero .right .frame{width:100%;min-height:150px;border:2px dashed #e3c08a;border-radius:12px; background:repeating-linear-gradient(45deg,#fffdf8,#fffdf8 12px,#fdf4e4 12px,#fdf4e4 24px); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#a9772e;text-align:center;padding:14px} /* The frame's display:flex above overrides the [hidden] attribute's display:none, so re-assert it with matching specificity — otherwise an assigned image and the no-image frame would both show. */ .hero .right .frame[hidden]{display:none} .hero .right .frame svg{width:40px;height:40px;opacity:.7} .hero .right .frame .t{font-weight:700;color:#8a5e12} .hero .right .frame .s{font-size:13px;color:#b58a4a} .hero .right .addimg{margin-top:6px;background:var(--gold);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer} /* No-image state: warm the surround so the striped/gold frame reads the same on modern (red) pages as it does on classic (whose .right is already #fff8f0). */ .hero .right.no-image{background:#fff8f0} /* ERA: CLASSIC OVERRIDES */ .era-classic .hero{background:linear-gradient(125deg,var(--maroon),var(--maroon-deep));box-shadow:0 12px 30px rgba(94,15,6,.2)} .era-classic .hero .right{background:#fff8f0} .era-classic .badge{background:rgba(201,130,26,.22);border-color:rgba(201,130,26,.55);color:#ffd591} .era-classic .badge::before{background:var(--gold)} .era-classic .hero h1 .body-style{color:var(--gold)} .era-classic .card h2::before{background:var(--gold)} .era-classic .vintable .val{color:var(--gold)} .era-classic .vintable tr:hover td{background:var(--gold-soft)} /* DECODE BAR */ .decodebar{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-top:16px; padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .decodebar label{font-weight:700;font-size:15px} .decodebar input{flex:1;min-width:200px;font-family:'JetBrains Mono';font-size:15px;letter-spacing:.1em; padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;text-transform:uppercase} .decodebar input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(196,32,16,.12)} .decodebar button{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:11px 22px;font-weight:700;font-size:15px;cursor:pointer} /* ADS */ .ad{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff; border:1px dashed #d4cdc2;color:#a89f93;border-radius:12px;font-family:'JetBrains Mono';font-size:12px;letter-spacing:.1em} .ad::before{content:"Advertisement";position:absolute;top:7px;left:0;right:0;font-size:9px;opacity:.6;letter-spacing:.18em} .ad-lead{height:96px;margin-top:16px}.ad-inline{height:260px;margin:20px 0} .ad-rail{min-height:600px;position:sticky;top:78px} /* DETAIL GRID + CARDS */ /* minmax(0,1fr) (not 1fr) so a fixed-width descendant — e.g. an ad slot filled with a wide banner — can't expand the column past the viewport and stretch the cards. Paired with .ad-zone overflow containment below. */ .grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;margin-top:22px;align-items:start} /* Belt-and-suspenders: clip any oversized ad creative to its slot so a wide banner can't trigger horizontal page scroll. overflow-x:clip (not hidden) so it creates no scroll container — sticky .ad-rail and vertical ad expansion keep working. Correctly-sized mobile ads (<= column width) are unaffected. */ .ad-zone{max-width:100%;overflow-x:clip} /* mobile_ad_lite (body.mobile-ad-lite): on phones, hide the desktop-only sidebar ad slots (their showAds() is also skipped in JS, so nothing loads) and the Ezoic outstream video ad — the heaviest, most intrusive mobile format. */ @media (max-width:900px){ body.mobile-ad-lite .ad-zone-desktop-only{display:none!important} body.mobile-ad-lite #ez-video-container, body.mobile-ad-lite #ez-video-outstream-wrap, body.mobile-ad-lite [id^="ez-video-outstream"]{display:none!important} } .card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)} .card + .card{margin-top:20px} .card h2{font-family:'Archivo';font-weight:800;font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:18px} .card h2::before{content:"";width:4px;height:20px;border-radius:2px;background:var(--brand)} .vintable{width:100%;border-collapse:collapse} .vintable th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:0 10px 12px} .vintable td{padding:14px 10px;border-top:1px solid var(--line);vertical-align:middle} .vintable .pos{font-weight:600}.vintable .val{font-family:'JetBrains Mono';font-weight:700;font-size:17px;color:var(--brand)} .vintable .dec{font-weight:600}.vintable tr:hover td{background:#fbf3f1} .specs{display:grid;grid-template-columns:1fr 1fr;gap:0 28px} .spec{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)} .spec .k{color:var(--muted);font-weight:500;font-size:14px}.spec .v{font-weight:700;text-align:right;font-size:15px} .spec .v.mono{font-family:'JetBrains Mono';font-weight:600} /* Multi-value spec fields (Exterior Color, Interior Trim) render a