/* Used Vehicles hub — rebuilt to match design_handoff_cbm_marketplace/pages/CBM Used Vehicles.dc.html exactly (see page-templates/template-used-vehicles.php's header comment). Grid / sidebar / CTA-button / dealer-carousel / offer-card / "View More" / Facebook-box layout reuses Rent Vehicles' .cbm-rv-* classes and New Vehicles' sponsor-row .cbm-nv-* classes (assets/css/rent-vehicles.css, assets/css/new-vehicles.css) — pixel-identical values in all three real sources. Only the pieces unique to this page are defined here. */ /* Feature ad + Featured Dealers, side by side, full page width — sits above the main two-column grid (not inside either column). Ad box fixed width, dealers ticker takes the rest and reverts to its normal (non-compact) 200px tile size now it has real room. */ .cbm-uv-dealers-row { display: flex; gap: 24px; align-items: flex-start; margin-top: 24px; } /* No margin-bottom here — the dealers ticker inside (.cbm-rv-dealers-viewport) already carries its own 40px margin-bottom (rent-vehicles.css); the two were stacking to a 72px gap before the grid below, confirmed live and reported as wasted white space. */ .cbm-uv-dealers-row__ad { flex: 0 0 320px; } /* 320×270 = CBW MPU size, so CBW artwork runs unaltered (2026-10-15, was 300×250) */ /* Unsold: a defined 320×270 box (this slot's spec), not floating text — Jonathan 2026-10-07: ad spaces always stay visible (house ad if unsold). */ .cbm-uv-dealers-row__ad .cbm-ad-empty-slot { height: 270px; margin-bottom: 24px; background: var(--cbm-fill-light); border: 1px dashed var(--cbm-muted-grey); border-radius: 2px; } /* Two or more ads = the shared scrolling carousel: clip it to exactly one 320×270 ad, or every ad spills across the row over Featured Dealers (seen 2026-10-15 when AS Miles joined DH Team). */ .cbm-uv-dealers-row__ad { overflow: hidden; } .cbm-uv-dealers-row__ad > .cbm-ad-carousel { display: block; width: 320px; height: 270px; overflow: hidden; } .cbm-uv-dealers-row__ad .cbm-ad-carousel__item { width: 320px; } .cbm-uv-dealers-row__dealers { flex: 1 1 auto; min-width: 0; } /* 2026-10-07 (Jonathan): dealer logos at 70% of the full-height size (346px → 242px wide, 16:9) and the Featured Dealers block (heading + ticker) centred vertically on the 300×250 ad box beside it. The 24px gap before the grid moves onto the row itself so centring isn't skewed by either column's own bottom margin. */ @media (min-width: 641px) { .cbm-uv-dealers-row { align-items: center; margin-bottom: 24px; } .cbm-uv-dealers-row__ad .cbm-ad-empty-slot { margin-bottom: 0; } .cbm-uv-dealers-row .cbm-rv-dealer-tile { flex-basis: 242px; } .cbm-uv-dealers-row .cbm-rv-dealers-viewport { margin-bottom: 0; } .cbm-uv-dealers-row .cbm-rv-dealers { padding-bottom: 0; } } @media (max-width: 640px) { /* 2026-09-12: align-items:flex-start (correct for the desktop row, top-aligning the ad box against the carousel) becomes a bug once flex-direction flips to column here — in column mode, align-items controls cross-axis WIDTH, and flex-start means "shrink-to-fit content" rather than "stretch to the container", so the dealers carousel (containing a width:max-content auto-scroll track) sized itself to its own ~2982px content and dragged the whole page into horizontal scroll on mobile. stretch here makes both children take the full row width, which is what "stacked" should mean anyway. */ .cbm-uv-dealers-row { flex-direction: column; align-items: stretch; } .cbm-uv-dealers-row__ad { flex-basis: auto; width: 100%; max-width: 320px; margin: 0 auto; } } .cbm-uv-sell-btn { display: block; background: var(--cbm-green); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; padding: 18px; border-radius: 2px; } .cbm-uv-sell-btn:hover { filter: brightness(1.1); } .cbm-uv-compare-btn { background: #1A1A1A; } /* 2026-10-16: link to the CBM Used Vehicles Comparison Tool */ .cbm-uv-steps { background: #1A1A1A; color: #fff; border-radius: 2px; padding: 20px; } .cbm-uv-steps__title { font-family: var(--cbm-font-body); font-weight: 700; font-size: 17px; text-align: center; margin-bottom: 16px; } .cbm-uv-steps__step { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; } .cbm-uv-steps__num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .cbm-uv-steps__cta { display: block; background: var(--cbm-green); color: #fff; font-weight: 700; font-size: 13px; text-align: center; padding: 10px; border-radius: 2px; margin-top: 4px; } .cbm-uv-contact { border: 1px solid var(--cbm-hairline); border-radius: 2px; padding: 18px; text-align: center; } .cbm-uv-contact__label { font-family: var(--cbm-font-body); font-size: 16px; color: #555; } .cbm-uv-contact__divider { border: none; border-top: 1px solid var(--cbm-red); width: 60%; margin: 8px auto; } .cbm-uv-contact__phone { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--cbm-font-mono); font-weight: 700; font-size: 17px; color: var(--cbm-red); } .cbm-uv-contact__phone span { width: 26px; height: 26px; border-radius: 50%; background: var(--cbm-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-family: initial; } .cbm-uv-sidebar-ad { min-height: 150px; } .cbm-uv-sidebar-ad .cbm-ad-empty-slot { background: var(--cbm-fill-light); border: 1px dashed var(--cbm-muted-grey); border-radius: 2px; min-height: 150px; } /* Sticky wandering finance ad — hidden until the visitor scrolls past the hero (used-vehicles.js toggles .cbm-visible), then drifts to a new position every ~16-28s via the transition below (source: the exact same values in CBM Used Vehicles.dc.html's inline