Price card

The conversion-critical pricing panel on a product page — the cream card in the PDP hero carrying the term chooser, the headline price, what gets charged, and the CTA.

It is a shell, not a pricing engine. Every region is a slot, rendered in one canonical order: badge → eyebrow + control → anchor / price / unit → children → note → CTA → micro. That ordering is the point — a product page has at least three pricing states (sellable, preview-only, coming-soon) and before this they were three hand-rolled <div>s, two of them carrying their own inline style layout, which drifted from the real card.

Pair with Segmented track for the chooser and MarketingCta for the action. Reach for TermSelector whenever the card carries a price at all — including the states nobody can buy yet, via purchasable={false}. A read-only term list used to exist for those; it was removed because showing the same product in a different layout depending on whether it happens to be sellable made a not-yet-buyable SKU read as a different kind of object.