The VDP is not a route — it is a single overlay above the still-mounted SRP, used for both in-session opens and direct /vehicle/{vin} page loads. Portaled to <body> in light DOM, and the source gives two reasons: third-party scripts scan the document, and any page-content ancestor with a transform would break position: fixed. The scrim is rgb(51 51 51 / 55%) with a 2px backdrop blur at z-index 10010; the scroll container is 10011; the lightbox and the window-sticker modal are 10020; the iframe modal is 10030. Escape closes — but the lightbox owns the first Escape while it is open — and the page behind stays scroll-locked for the duration. The shell caps at 1440px while the content inside caps at 1920px, so on a very wide screen the overlay is narrower than its own max-width grid. The whole experience is inert unless searchConfig.vdp.enabled === true: SRP cards stay plain permalink anchors and no listeners or globals are registered.
The roster is fixed at fourteen slugs and the default order is les-video, assistant, autoverify, highlights, carcutter-360, recurrent, range, history, description, aip, capital-one, features, packages, specs. A dealer's saved config overrides order and visibility: the merge keeps the saved order, drops unknown slugs, appends missing ones in default order, and counts anything but false as enabled. Six defaults ship with an empty header, which renders no header node at all, because those are vendor mounts that bring their own heading. range and history fuse into one shared row when adjacent, and vanish together under hideEpaHistory. les-video gets no section wrapper at all — the vendor script finds #les_video by selector, so position must not matter. Seven slugs are vendor-hydrated and render nothing without their integration key (carcutterToken, ev5ClientId, lesaEnabled, recurrentEmbedId, aipApiKey, autoverifyEnabled, capitalOneCalcEnabled), so a typical dealer sees five or six sections, not fourteen. Everything empty is skipped rather than rendered blank, and the two fixed disclaimer paragraphs are always pinned last. Sections reveal on scroll with a 0.5s fade and 12px rise, honoured by prefers-reduced-motion.
360px fixed, align-self: flex-start, and position: sticky — but its top is written inline by a ResizeObserver, and the rule is unusual: 12px when the sidebar fits the viewport, otherwise window.innerHeight − contentHeight − 80. That is a bottom-anchored sticky: a sidebar taller than the viewport parks so that its END is reachable while scrolling, rather than pinning its top and hiding the CTAs below the fold. Below 1025px the observer removes the property and the CSS unsticks it with top: auto !important — the !important is there to beat that inline value. The dealer card carries a DNI guard: third-party call-tracking scripts rewrite tel links and addresses site-wide, so a MutationObserver reverts any outside change back to the vehicle's own rooftop. The fulfillment block needs estimatedDelivery AND geolocation — both — and the CTA stack disappears entirely when the vehicle is unavailable.
At 1024px the body stacks and the sidebar unsticks. At 767px the header area reorders purely with CSS order: breadcrumb 1, gallery 2, title row 3, pricing bar 4 — while the DOM order stays breadcrumb, title row, pricing bar, gallery. So the gallery jumps two places up and the title row additionally becomes column-reverse, putting the action buttons above the title. Three things are dropped rather than restacked at that width: the pre-qual pill, the action-button labels (icons only) and the meta chips. At 480px the highlights and specs grids go single-column and the fulfillment tabs lose their sub-labels. One breakpoint sits outside that ladder: the Hyundai window-sticker sheet modal breaks at max-width 768, one pixel off every other query in the file — so between 768 and 767 the sheet is already full-bleed while the rest of the VDP is still on its desktop layout. Mirrored verbatim; it reads like a typo for 767 but nothing depends on it either way. The VDP is also the only surface in the widget with print rules: scrim, lightbox, breadcrumb, actions, sidebar and the gallery grid are all hidden, leaving the main image and the content column.
The VDP stylesheet is 2,365 lines / 38KB and holds more untokenized values than the rest of the widget combined: ≈47 distinct raw colours in the light theme plus 16 more in a verbatim body.dark-mode block, 14 uses of font-weight 700 and 4 of 800 (Inter loads 400/500/600, so all 18 render synthesised), 7 unitless line-heights and 3 letter-spacings. None of it is tokenized here, by instruction — the full breakdown with counts is in the VDP palette audit section of readme.md. Three findings worth carrying into that decision: the VDP page colour is #fbfafa, which is not --gray-7 (#f9f9f9); its card border is #ececec and its card radius 12px, replacing --gray-5/6 and --r-7 on every card in the file; and the accent fallback #5b4ccc corresponds to no token at all. The file also reads a sixth host variable, --body-font-color, alongside the SRP card's --primary-color and --primary-button-text-color.