/* ========================================================================== Air Market - v4, the conversion-order detail page (V4-SPEC.md). v4 is NOT a new visual language. It is a REORDER: the product detail page (#/app/:id) restructures into the decision flow high-converting catalogues use - what is it, why care, can I trust it, show me, details - by moving the value prop and three benefit chips out of the "What this does" card and into the hero, then lifting Ratings & Reviews above the long-form blocks. Discover, browse, search and the report pages are untouched: v4 is a v3-shell listing with one route restyled. See V4-SPEC.md §1 and §2.3. (Naming collision, on purpose: REDESIGN.md's §12/§14 already call their content milestones "v4" and "v4.1". Those are unrelated to this file - this is the `data-ui="v4"` DESIGN, a peer of v1/v2/v3 in the toggle.) This file carries ONLY the detail-page deltas. Everything else - shell, cards, grids, the v2 type system, the v3 top nav - is inherited: v4 rides the same store-v3-*.css and store-v2.css sheets v3 does (those selectors widened to `:is([data-ui="v3"],[data-ui="v4"])` / `:is([data-ui="v2"], [data-ui="v3"],[data-ui="v4"])` as part of the A5 sweep). Do not restate anything those sheets already give v4 for free - the two live rules that matter most here are store-v2.css's `.stats-bar { border-color }` and `.detail-head h1 { letter-spacing }`, both already widened to v4. EVERY rule below is scoped under `:root:is([data-ui="v4"],[data-ui="v5"])` (or an ancestor carrying it) so v0/v1/v2/v3 render byte-identically - the hard acceptance criterion. `.plain-lede` is never rendered under v4 (V4-SPEC.md §1), so it is deliberately not mentioned anywhere in this file either. Colours / spacing / radius / type: existing tokens.css custom properties, or the v2/v3 aliases (`--text`, `--text-2`, `--card-surface`, `--card-r`, `--v2-line`, ...) declared in store.css / store-v2.css / store-v3-core.css. No raw hex. Where the store's own hand-tuned type scale has no matching token (its font-sizes are a bespoke ramp, not tokens.css's --text-h*-size ladder - see .plain-lede p, .v2-hero-copy p, .lede-tasks li for existing precedent), a literal px is used and the sibling rule it was carried over from is cited in a comment. LOAD ORDER (index.html): ... store-v3-stack -> store-v4. Loading last means a selector of equal specificity here beats the v3 sheets; every override below still earns its specificity honestly rather than relying on source order, per the v2/v3 precedent of using :is() to hold a fixed score. ========================================================================== */ /* -------------------------------------------------------------------------- 1. HERO - the value prop line (V4-SPEC.md §2.1: `it.simple`, or desc[0] as the defined fallback - never a gap). Renders on every v4 detail page as `

` between `.dev` and either `.v4-benefits` or `.buy-row`. Structure borrowed from store-v2.css's `.v2-hero-copy p` (the one place the store already solved "one sentence, lede size, capped measure") but NOT its 15px / --text-2 values, and not `.plain-lede p`'s 13px / --text either: that rule is ordinary body copy, not a lede voice. The size and ink are set against their NEIGHBOURS rather than copied from a cousin rule. `.detail-head .dev` immediately above is `15px / --text-2` (store.css), so a 15px / --text-2 lede is byte-identical type sitting directly under the byline: the two fuse into one block of muted secondary text and the value prop stops reading as a promotion at all. QA caught exactly that. 17px in primary ink separates it from the byline on both axes and puts it where the spec asks - between the 26px h1 and 13px body copy - while carrying more weight than the 13px card paragraph it replaces, which is the point of moving it into the hero. -------------------------------------------------------------------------- */ :root:is([data-ui="v4"],[data-ui="v5"]) .v4-lede { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--text); /* Caps the line so it doesn't run the full hero width even though the hero column is wider than v2's stated-hero copy well. */ max-width: 46ch; } /* -------------------------------------------------------------------------- 2. HERO - the benefit chips (V4-SPEC.md §2.1/§2.2). Renders only when `it.benefits` has entries - `.v4-benefits` is absent from the DOM entirely for a chip-less listing (honest-empty, §12.2.5), so nothing here may reserve space for it or assume it exists. `.benefit-chip` reuses `.perm-chip`'s established chip treatment (surface, text colour, padding) so it reads as native to this design system rather than a new component: same `--card-surface` fill, same `--text-2` ink, same 8px/12px padding (--space-8 / --space-12, an exact token match for perm-chip's literal "8px 12px"). Radius uses --radius-md (8px) - the closest token to perm-chip's literal 9px; the 1px difference is not perceptible and a token exists, so it wins per the house rule. The check glyph `.ck` copies `.lede-tasks .tk`'s treatment exactly (font-weight 700, --color-success-700) so "affirmative, not shouting" means the same thing in both places. Sized a step down from the chip's own text with --text-micro-size, mirroring how `.tk` (13px) sits a step below its own 15px row - the same proportion this design system already uses to make a leading glyph read as a mark rather than a second word. -------------------------------------------------------------------------- */ :root:is([data-ui="v4"],[data-ui="v5"]) .v4-benefits { display: flex; flex-wrap: wrap; /* wraps to a second row at narrow widths, per spec */ gap: var(--space-8); margin: 0; } :root:is([data-ui="v4"],[data-ui="v5"]) .benefit-chip { display: inline-flex; align-items: center; gap: var(--space-8); background: var(--card-surface); color: var(--text-2); font-size: var(--text-caption-size); padding: var(--space-8) var(--space-12); border-radius: var(--radius-md); /* One line per chip - the row wraps, not the phrase inside a chip. */ white-space: nowrap; } :root:is([data-ui="v4"],[data-ui="v5"]) .benefit-chip .ck { flex: none; font-size: var(--text-micro-size); font-weight: 700; line-height: 1; color: var(--color-success-700); } /* -------------------------------------------------------------------------- 3. HERO RHYTHM - h1 / .dev / .v4-lede / .v4-benefits / .buy-row now share one column where v1/v2/v3 only ever had three of those five. Each margin below is declared on the element it introduces via an adjacent-sibling selector (rather than restating the whole stack's spacing on one rule), so no pair of margins can double up or collapse to zero by accident: h1 -> .dev unchanged (store.css's own 3px, not v4's to touch) .dev -> .v4-lede +12px (var(--space-12)) - a paragraph following a badge row reads as a new part of the hero, not a continuation of it, but the hero should still feel like one dense unit, not four stacked cards. Was 8px when the lede was 15px muted type; at 17px primary ink it is a heavier block and 8px read tight against the badges. 12px also makes the gaps above and below the lede symmetric, which is what makes the value prop read as one deliberate band in the hero. .v4-lede -> .v4-benefits +12px (var(--space-12)) - the chip row is a visually heavier block than a line of type, so it earns a touch more air than the line above it .v4-lede -> .buy-row unhandled here on purpose: when there are no benefits, store.css's unconditional `.detail-head .buy-row { margin-top: 16px }` already fires (it keys off .buy-row itself, not on what precedes it) and, with .v4-lede's margin reset to 0 above, produces exactly 16px - the same gap the CTA always sits under. Adding a rule here would double it. .v4-benefits -> .buy-row same reasoning: 16px already lands via the unconditional rule with no v4 rule needed. Net effect: the CTA row is always exactly 16px below whatever the hero's last line is, whether that's the lede or the chips, so the buy row reads as the hero's fixed floor and stays comfortably above the fold. -------------------------------------------------------------------------- */ :root:is([data-ui="v4"],[data-ui="v5"]) .detail-head .dev + .v4-lede { margin-top: var(--space-12); } :root:is([data-ui="v4"],[data-ui="v5"]) .v4-lede + .v4-benefits { margin-top: var(--space-12); } /* -------------------------------------------------------------------------- 4. BLOCK ORDER, RESTITCHED (V4-SPEC.md §1 table). The renderer moves Ratings & Reviews to right after the media block and pushes .desc-grid (and everything after it) below it instead. Two of the three new neighbour pairs already carry the right gap with zero changes: hero -> .stats-bar -> .platform-note unchanged order and unchanged spacing (store.css's own padding/margins) - v4 does not touch these three rules. media -> reviews section the media block's `.media-block { margin- bottom: 6px }` collapses against `.section`'s `margin-top: 44px` (store-v2.css, already widened to v4) the same way any two block siblings' margins collapse - the section's 44px wins with nothing extra needed. This exact adjacency already renders in v3 today for non-skill listings (they never got a `.plain-lede` card between platform-note and media), so it is a proven pairing, not a new guess. The one pair that is new and under-spaced: the reviews section ending and `.desc-grid` starting right after it. `.section` only ever declares a TOP margin; it has never needed a bottom one because in v1/v2/v3 it is the last thing standing before whatever section-with-its-own-top-margin follows, or the last thing on the page. Under v4 the very next element is `.desc-grid`, which has never carried a top margin of its own (in v1/v2/v3 it sits directly under the media block by design, tight on purpose). Left alone, that is a fully collapsed 0px seam. Fixed here, scoped to the exact v4 adjacency so v1/v2/v3's tight media -> desc-grid coupling is untouched. -------------------------------------------------------------------------- */ :root:is([data-ui="v4"],[data-ui="v5"]) .section[data-section="ratings-reviews"] + .desc-grid { margin-top: var(--space-40); } /* -------------------------------------------------------------------------- 5. NARROW WIDTH. store-v2.css collapses `.v2-hero` at max-width:1080px; this reuses the same breakpoint rather than inventing a new one so v4's detail page and v2/v3's stated hero change shape at the same place. `.detail-head` itself has no v1/v2/v3 collapse rule to match (it stays a flex row - icon, then the text column - at every width today), so v4 does not invent one either; only the two new elements need a narrow-width correction. `.v4-benefits` already wraps at every width via flex-wrap (rule 2 above), so it needs nothing extra here. `.v4-lede`'s 46ch cap only ever shrinks a wide line - it cannot force overflow - but on a column this narrow the fixed measure just wastes width the reader would rather have back, so it is released below the breakpoint. -------------------------------------------------------------------------- */ @media (max-width: 1080px) { :root:is([data-ui="v4"],[data-ui="v5"]) .v4-lede { max-width: 100%; } }