@vtex/faststore 0.0.1

package/dist/docs/pricing.md

@@ -0,0 +1,499 @@
+# Pricing
+
+**Category:** commerce
+**Purpose:** Renders the product offer block of a PDP — selling price, list price (strikethrough), spot/cash price, discount badge, and installments. Reads from the active product's variant offer.
+
+---
+
+## Visual cues (how to identify in an image)
+
+Use these signals to detect that a Pricing block is present. Position on the page is irrelevant for detection — it can appear anywhere, in any orientation. The image is the source of truth for layout.
+
+A Pricing block contains any combination of:
+
+- A **bold/large price** (the current selling price).
+- A **strikethrough price** (the original list price).
+- A **discount badge** like `-30%`, often colored.
+- A secondary line like **"R$ 119,90 à vista no Pix"** (spot price).
+- A second **"save extra X% with Pix"** badge or text — the spot-price percentage.
+- A line like **"em 10x de R$ 11,99 sem juros"** (installments).
+- **Multiple installment rows side-by-side**, one per payment method (e.g. a Visa row and a Pix row), each showing its own best plan.
+- A **link or button** like *"ver todas as formas de pagamento"* / *"see all payment options"* that opens a panel listing every payment plan.
+- A panel/popover with **tabs across the top** (one per payment method — Cartão / Pix / Cartão Cliente) and a content area below listing all installments of the selected method (Americanas, KitchenAid style).
+- **Highlight pills/labels** like *"Black Friday"*, *"Cyber Week"*, *"Exclusivo"* — named seasonal labels.
+- **Promotion text** like *"Compre 3 leve 2"*, *"Buy 3 for R$14.99"*, *"Frete grátis"* — structured deals on the offer.
+
+If the image shows **any one** of the above, use `PricingRoot`. Pick only the sub-components that match what's visible — never include a sub-component for data that isn't shown.
+
+---
+
+## When to use
+
+- PDP price block (canonical use).
+- Anywhere the active product's offer needs to be displayed (e.g. mini-cart upsell using `$data` override).
+
+## When NOT to use
+
+- Cart line items → use `CartItemPrice` / `CartItemListPrice` instead.
+- Product shelf / PLP cards → use the shelf's own price particle.
+- Static / mocked prices unrelated to a product → use a plain text element with a class.
+
+---
+
+## Composition
+
+`PricingRoot` is the only entry point. All sub-components **must** be descendants of it. They render `null` automatically when their data condition is not met, so it is safe to include them speculatively — but for image-to-schema work, **only include what is visible**.
+
+```
+PricingRoot
+├── PricingListPrice              (renders only when listPrice > price)
+├── PricingSellingPrice           (always renders inside Root)
+├── PricingSpotPrice              (renders only when spotPrice < price)
+├── PricingDiscount               (renders only when listPrice > price)
+├── PricingSpotDiscount           (renders only when spotPrice < price)
+├── PricingInstallments           (single best installment; one row total)
+│   └── PricingInstallment        (one entry, picks the best plan)
+├── PricingInstallmentPlans       (one row per payment method)
+│   └── PricingInstallmentPlan
+│       ├── PricingInstallment              (best installment of this plan)
+│       └── PricingInstallmentsForPlan      (full ladder of this plan)
+│           └── PricingInstallment          (one row per installment)
+├── PricingHighlights             (container; null when no discountHighlights)
+│   └── PricingHighlight          (one entry per highlight label)
+├── PricingPromotions             (container; null when no promotions)
+│   └── PricingPromotion          (one entry per promotion)
+└── PopoverRoot                   (merchant-composed disclosure)
+    ├── PricingPaymentMethodsTrigger        (button that opens the panel)
+    └── PopoverPortal
+        └── PopoverPositioner
+            └── PopoverPopup
+                ├── PricingPaymentMethodsList     (flat: every plan in one list)
+                │   └── PricingInstallmentPlan
+                │       └── PricingInstallment   (or PricingInstallmentsForPlan)
+                │
+                └── TabsRoot                      (tab-grouped: one tab per method)
+                    ├── TabsList
+                    │   └── PricingPaymentMethodsTabList
+                    │       └── PricingPaymentMethodName   (tab label)
+                    └── PricingPaymentMethodsTabPanels     (sibling of TabsList under TabsRoot)
+                        └── PricingInstallmentsForPlan
+                            └── PricingInstallment
+```
+
+Child order reflects visual order — place sub-components in the same sequence they appear in the image. CSS handles edge cases like reordering on mobile, but the schema order is the default.
+
+**Composition rules:**
+
+- `PricingInstallment` must be a descendant of either `PricingInstallments`, `PricingInstallmentPlan`, or `PricingInstallmentsForPlan` (any container that provides installment context). Never directly under `PricingRoot`.
+- `PricingInstallmentPlan` must be a descendant of `PricingInstallmentPlans` (or `PricingPaymentMethodsList`, which wraps it internally).
+- `PricingInstallmentsForPlan` must be a descendant of `PricingInstallmentPlan`.
+- `PricingHighlight` must be inside `PricingHighlights`.
+- `PricingPromotion` must be inside `PricingPromotions`.
+- `PricingPaymentMethodsTrigger` must be inside a `PopoverRoot`.
+- `PricingPaymentMethodsList` does **not** require a Popover — it can also live inside a `DialogPopup` or `DrawerPopup`.
+- `PricingPaymentMethodsTabList` must be inside `TabsList` (which itself is inside `TabsRoot`).
+- `PricingPaymentMethodsTabPanels` must be a descendant of `TabsRoot` (typically a sibling of `TabsList`, not nested in it).
+- `PricingPaymentMethodName` must be inside a plan context (`PricingInstallmentPlan`, `PricingPaymentMethodsTabList`, or `PricingPaymentMethodsTabPanels`).
+- Use either `PricingInstallments` (shortcut, one best plan) **or** `PricingInstallmentPlans` (breakdown, one row per method) — not both at the same visual level.
+- Use either `PricingPaymentMethodsList` (flat disclosure) **or** the `TabsRoot + PricingPaymentMethodsTabList + PricingPaymentMethodsTabPanels` trio (tab-grouped disclosure) — not both inside the same `PopoverPopup`.
+
+---
+
+## Components
+
+### PricingRoot
+
+Root container. Provides the pricing context to all descendants.
+
+Prices are formatted from the active storefront context (the resolved binding's locale and
+currency), not from props.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `selectedVariantId` | string | — | Optional pre-selection fallback: the viewed SKU's `Variant` Node ID used to price the block on first paint. A live swatch selection wins over it once the shopper interacts. |
+
+**Data:** declares `fragment PricingData on Query`. The compiler merges it into the page query — no explicit `dataSources` entry needed.
+
+**Variant reactivity:** `PricingRoot` reads the shopper's published variant selection (the same reactive state the VariantSelector swatches write and the product gallery reads), so selling price, list price, discount, spot price, and installments all recompute when a swatch is picked — no page navigation. The selected variant's offer is fetched lazily; on a fetch error or a null payload it falls back silently to the product-level offer (the price is never blanked). Selections are scoped to the product on screen, so a swatch picked on another PDP never leaks in.
+
+### PricingSellingPrice
+
+Current selling price, formatted from the active storefront context. Always renders when inside `PricingRoot` with valid data. No props.
+
+### PricingListPrice
+
+Original price (strikethrough). Renders `null` when `listPrice <= price`. No props.
+
+### PricingSpotPrice
+
+Best cash/instant-payment price (Pix, boleto). Renders `null` when `spotPrice >= price`. No props.
+
+### PricingDiscount
+
+Discount badge for the `listPrice`-vs-`price` markdown. Renders `null` when there is no discount (missing `listPrice`, or `listPrice <= price`) — in either format, so there is never a `-R$ 0,00` / `NaN%` badge. Recomputes automatically when the shopper picks a variant swatch (it reads the variant-reactive pricing context). If `children` are provided, they replace the generated text entirely.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `format` | `"percentage"` \| `"absolute"` | `"percentage"` | `percentage` shows `-25%`; `absolute` shows the currency-formatted markdown `-R$ 10,00` (`listPrice - price`, using the active storefront context). Mirrors `ProductCardDiscount`. |
+| `template` | string | format-derived (`"-{percentage}%"` or `"-{amount}"`) | Placeholders: `{percentage}` (integer markdown) and `{amount}` (currency-formatted `listPrice - price`). Left unset, it defaults to the format-appropriate template; an explicit value overrides it. |
+
+### PricingInstallments
+
+Shortcut container that picks the best installment plan **across all methods** (highest count, prefer interest-free). Renders `null` when no plans exist. No props. Must contain `PricingInstallment` to render anything visible. For a per-method breakdown, use `PricingInstallmentPlans` instead.
+
+### PricingInstallmentPlans
+
+Iterator that renders one row per payment method (e.g. Visa, Pix, StoreCard). Rows are sorted by best installment count ascending — à vista (1x) first, longest plan last. Renders `null` when no plans exist. No props. Must contain `PricingInstallmentPlan` as a direct child template (rendered once per plan).
+
+### PricingInstallmentPlan
+
+A single plan (one method) inside `PricingInstallmentPlans`. By default exposes the plan's best installment via context, so a plain `PricingInstallment` child shows e.g. *"12x de R$ 16,58 sem juros"* for Visa. Wrap a `PricingInstallmentsForPlan` inside it to list every installment (1x, 2x, ... Nx) of the plan instead. No props. Emits `data-fs-pricing-installment-plan-type={paymentType}` for CSS styling per method (`CREDIT_CARD`, `INSTANT`, `DEBIT_CARD`, `BANK_SLIP`, `DIGITAL_WALLET`, `OTHER`).
+
+### PricingInstallmentsForPlan
+
+Iterator that lists every installment of the surrounding plan, preserving API order (count ascending: 1x, 2x, ..., Nx). Renders `null` when the plan has no installments. No props. Must contain `PricingInstallment` as a direct child template.
+
+### PricingPaymentMethodsTrigger
+
+Button that opens the disclosure panel. Wraps Popover's Trigger and inherits its open-state from the enclosing `PopoverRoot`. Use it for links like *"ver todas as formas de pagamento"*. No props beyond standard button attributes (`className`, `children`).
+
+### PricingPaymentMethodsList
+
+Standalone container for the disclosure panel content — renders every plan via `PricingInstallmentPlans` internally. Renders `null` when no plans exist. No props. Place inside any `PopoverPopup`, `DialogPopup`, or `DrawerPopup`.
+
+### PricingPaymentMethodsTabList
+
+Bridge between Pricing and Tabs. Iterates every plan in the same order as `PricingInstallmentPlans` (best installment count ascending) and emits one `TabsTab` per plan with `value=${paymentType}-${paymentMethod}` (composite key prevents collisions when two plans share `paymentType`, e.g. Visa and Mastercard both `CREDIT_CARD`). Children are rendered inside each tab and have access to the plan context. Place inside `TabsList`. Renders `null` when no plans exist. No props.
+
+### PricingPaymentMethodsTabPanels
+
+Mirrors `PricingPaymentMethodsTabList`: iterates plans in the same order and emits one `TabsPanel` per plan with the matching composite-key `value`. Sets `InstallmentPlanItemContext` inside each panel so descendants like `PricingInstallmentsForPlan` and `PricingInstallment` work without further setup. Place inside `TabsRoot` (typically a sibling of `TabsList`). Renders `null` when no plans exist. No props.
+
+### PricingPaymentMethodName
+
+Renders the surrounding plan's `paymentMethod` (e.g. *"Visa"*, *"Pix"*) as a `<span>`. Reads `InstallmentPlanItemContext`. Use as the tab label inside `PricingPaymentMethodsTabList`, or anywhere a plan context is set. When `children` are provided, they replace the text (useful for localized labels). No props.
+
+### PricingInstallment
+
+Single installment line. Must be a descendant of `PricingInstallments`, `PricingInstallmentPlan`, or `PricingInstallmentsForPlan`. If `children` are provided, they replace the template text entirely (useful for CTAs like *"Buy with store card"*).
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `template` | string | `"{count}x de {value}"` | placeholders: `{count}`, `{value}` |
+| `interestFreeLabel` | string | `"sem juros"` | appended when the plan is interest-free; pass `""` to omit |
+
+### PricingSpotDiscount
+
+Discount badge for the cash/Pix difference between `spotPrice` and `price` (e.g. *"com mais 9% OFF no Pix"*). Renders `null` when `spotPrice >= price`. Symmetric to `PricingDiscount` but for the spot-price percentage. Rounding is nearest-integer.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `template` | string | `"-{percentage}%"` | placeholder: `{percentage}` (the rounded spot-discount percentage) |
+
+### PricingHighlights
+
+Iterator over `Offer.discountHighlights` — named labels like *"Black Friday"*, *"Exclusivo"*. Renders `null` when the list is empty. No props. Must contain `PricingHighlight` to render anything visible.
+
+### PricingHighlight
+
+Renders the current highlight string as a `<span>`. Reads from the context set by `PricingHighlights`. Children override the default text (useful when the merchant wants to add icons or wrap the label). No props.
+
+### PricingPromotions
+
+Iterator over `Offer.promotions` — structured deals like *"Compre 3 leve 2"*, *"Frete grátis"*. Renders `null` when the list is empty. No props. Must contain `PricingPromotion` to render anything visible.
+
+### PricingPromotion
+
+Renders the current promotion via the `template` prop. Reads from the context set by `PricingPromotions`. Children override the default text.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `template` | string | `"{name}"` | placeholder: `{name}` (the promotion's display name) |
+
+---
+
+## Canonical schema example
+
+A full PDP pricing block as it would appear in a generated page schema:
+
+```json
+{
+  "pricing": {
+    "type": "PricingRoot",
+    "children": [
+      "pricing-list",
+      "pricing-selling",
+      "pricing-discount",
+      "pricing-spot",
+      "pricing-installments"
+    ]
+  },
+  "pricing-list":      { "type": "PricingListPrice" },
+  "pricing-selling":   { "type": "PricingSellingPrice" },
+  "pricing-discount":  { "type": "PricingDiscount", "props": { "template": "-{percentage}%" } },
+  "pricing-spot":      { "type": "PricingSpotPrice" },
+  "pricing-installments": {
+    "type": "PricingInstallments",
+    "children": ["pricing-installment"]
+  },
+  "pricing-installment": {
+    "type": "PricingInstallment",
+    "props": { "template": "{count}x de {value}", "interestFreeLabel": "sem juros" }
+  }
+}
+```
+
+### Minimal variant (only selling price visible in the image)
+
+```json
+{
+  "pricing": {
+    "type": "PricingRoot",
+    "children": ["pricing-selling"]
+  },
+  "pricing-selling": { "type": "PricingSellingPrice" }
+}
+```
+
+### Multi-method variant (one row per payment method visible in the image)
+
+```json
+{
+  "pricing": {
+    "type": "PricingRoot",
+    "children": ["pricing-selling", "pricing-plans"]
+  },
+  "pricing-selling": { "type": "PricingSellingPrice" },
+  "pricing-plans": {
+    "type": "PricingInstallmentPlans",
+    "children": ["pricing-plan"]
+  },
+  "pricing-plan": {
+    "type": "PricingInstallmentPlan",
+    "children": ["pricing-installment"]
+  },
+  "pricing-installment": {
+    "type": "PricingInstallment",
+    "props": { "template": "{count}x de {value}", "interestFreeLabel": "sem juros" }
+  }
+}
+```
+
+### Disclosure variant ("ver todas as formas de pagamento" link in the image)
+
+```json
+{
+  "pricing": {
+    "type": "PricingRoot",
+    "children": ["pricing-selling", "pricing-installments", "payment-popover"]
+  },
+  "pricing-selling": { "type": "PricingSellingPrice" },
+  "pricing-installments": {
+    "type": "PricingInstallments",
+    "children": ["pricing-installment-default"]
+  },
+  "pricing-installment-default": { "type": "PricingInstallment" },
+  "payment-popover": {
+    "type": "PopoverRoot",
+    "children": ["payment-trigger", "payment-portal"]
+  },
+  "payment-trigger": {
+    "type": "PricingPaymentMethodsTrigger",
+    "props": { "children": "ver todas as formas de pagamento" }
+  },
+  "payment-portal": {
+    "type": "PopoverPortal",
+    "children": ["payment-positioner"]
+  },
+  "payment-positioner": {
+    "type": "PopoverPositioner",
+    "props": { "side": "bottom", "align": "start" },
+    "children": ["payment-popup"]
+  },
+  "payment-popup": {
+    "type": "PopoverPopup",
+    "children": ["payment-list"]
+  },
+  "payment-list": {
+    "type": "PricingPaymentMethodsList",
+    "children": ["payment-plan"]
+  },
+  "payment-plan": {
+    "type": "PricingInstallmentPlan",
+    "children": ["payment-installments-for-plan"]
+  },
+  "payment-installments-for-plan": {
+    "type": "PricingInstallmentsForPlan",
+    "children": ["payment-installment"]
+  },
+  "payment-installment": { "type": "PricingInstallment" }
+}
+```
+
+### Highlights + promotions + spot discount variant
+
+```json
+{
+  "pricing": {
+    "type": "PricingRoot",
+    "children": [
+      "pricing-highlights",
+      "pricing-selling",
+      "pricing-spot-discount",
+      "pricing-promotions"
+    ]
+  },
+  "pricing-highlights": {
+    "type": "PricingHighlights",
+    "children": ["pricing-highlight"]
+  },
+  "pricing-highlight": { "type": "PricingHighlight" },
+  "pricing-selling":   { "type": "PricingSellingPrice" },
+  "pricing-spot-discount": {
+    "type": "PricingSpotDiscount",
+    "props": { "template": "com mais {percentage}% OFF no Pix" }
+  },
+  "pricing-promotions": {
+    "type": "PricingPromotions",
+    "children": ["pricing-promotion"]
+  },
+  "pricing-promotion": {
+    "type": "PricingPromotion",
+    "props": { "template": "{name}" }
+  }
+}
+```
+
+### Tab-grouped disclosure variant (tabs per method inside the popover — Americanas / KitchenAid)
+
+```json
+{
+  "pricing": {
+    "type": "PricingRoot",
+    "children": ["pricing-selling", "payment-popover"]
+  },
+  "pricing-selling": { "type": "PricingSellingPrice" },
+  "payment-popover": {
+    "type": "PopoverRoot",
+    "children": ["payment-trigger", "payment-portal"]
+  },
+  "payment-trigger": {
+    "type": "PricingPaymentMethodsTrigger",
+    "props": { "children": "ver todas as formas de pagamento" }
+  },
+  "payment-portal": {
+    "type": "PopoverPortal",
+    "children": ["payment-positioner"]
+  },
+  "payment-positioner": {
+    "type": "PopoverPositioner",
+    "props": { "side": "bottom", "align": "start" },
+    "children": ["payment-popup"]
+  },
+  "payment-popup": {
+    "type": "PopoverPopup",
+    "children": ["payment-tabs"]
+  },
+  "payment-tabs": {
+    "type": "TabsRoot",
+    "children": ["payment-tabs-list", "payment-tabs-panels"]
+  },
+  "payment-tabs-list": {
+    "type": "TabsList",
+    "children": ["payment-tabs-bridge-list"]
+  },
+  "payment-tabs-bridge-list": {
+    "type": "PricingPaymentMethodsTabList",
+    "children": ["payment-method-name"]
+  },
+  "payment-method-name": { "type": "PricingPaymentMethodName" },
+  "payment-tabs-panels": {
+    "type": "PricingPaymentMethodsTabPanels",
+    "children": ["payment-installments-for-plan"]
+  },
+  "payment-installments-for-plan": {
+    "type": "PricingInstallmentsForPlan",
+    "children": ["payment-installment"]
+  },
+  "payment-installment": { "type": "PricingInstallment" }
+}
+```
+
+---
+
+## Common mistakes
+
+- **Inventing `PricingPrice` or `Price`.** The component is `PricingSellingPrice`. There is no `Price`, no `ProductPrice`, no `PricingPrice`.
+- **Inventing `PricingPaymentMethod` or `PricingMethod`.** The disclosure entry point is `PricingPaymentMethodsTrigger`; the panel content is `PricingPaymentMethodsList` (flat) or `PricingPaymentMethodsTabList` + `PricingPaymentMethodsTabPanels` (tabbed). The leaf for the method name is `PricingPaymentMethodName`. There is no singular `PricingPaymentMethod`.
+- **Inventing `PricingTag`, `PricingLabel`, `PricingBadge` for highlight labels.** The pair is `PricingHighlights` (iterator) + `PricingHighlight` (leaf). There is no singular `PricingLabel`.
+- **Using `PricingDiscount` for the Pix/cash savings.** `PricingDiscount` shows the listPrice-vs-price discount (e.g. *"-30%"* when there is a list-price markdown). For the *"save extra X% on Pix"* badge, use `PricingSpotDiscount`.
+- **Using `paymentType` alone as the tab value.** Two plans with the same `paymentType` (e.g. Visa + Mastercard, both `CREDIT_CARD`) would collide. The bridge particles use the composite key `${paymentType}-${paymentMethod}` automatically — do not override it.
+- **Placing `PricingPaymentMethodsTabList` outside `TabsList`.** Base UI registers tabs via `TabsList`; the bridge must be inside it.
+- **Nesting `PricingPaymentMethodsTabPanels` inside `TabsList`.** It must be a sibling under `TabsRoot`, not a child of `TabsList`.
+- **Putting `PricingInstallment` directly under `PricingRoot`.** It must be inside `PricingInstallments`, `PricingInstallmentPlan`, or `PricingInstallmentsForPlan`. Without an installment-context container, it throws.
+- **Putting `PricingInstallmentPlan` directly under `PricingRoot`.** It must be inside `PricingInstallmentPlans` (or `PricingPaymentMethodsList`, which wraps `PricingInstallmentPlans` internally).
+- **Putting `PricingInstallmentsForPlan` outside `PricingInstallmentPlan`.** It reads the surrounding plan's context and throws otherwise.
+- **Putting `PricingHighlight` directly under `PricingRoot`.** It must be inside `PricingHighlights`; the leaf reads the highlight from a per-item context that only the iterator sets.
+- **Putting `PricingPromotion` directly under `PricingRoot`.** Same rule: must be inside `PricingPromotions`.
+- **Using `PricingInstallments` AND `PricingInstallmentPlans` for the same row.** They are alternatives: `PricingInstallments` shows one global best plan; `PricingInstallmentPlans` shows one row per method. Pick one for the inline area; the other can still appear inside a disclosure panel.
+- **Placing `PricingPaymentMethodsTrigger` without a `PopoverRoot` ancestor.** The trigger only works when a `PopoverRoot` provides the open/close state.
+- **Including sub-components for data not shown in the image.** They will render `null`, but they still bloat the schema and signal wrong intent. If the image has no installments, do not include `PricingInstallments`; the same holds for `PricingHighlights`, `PricingPromotions`, and `PricingSpotDiscount`.
+- **Passing a `price` prop.** Pricing reads from `$data` (the merged fragment). It has no `price` / `listPrice` / `spotPrice` props, and no locale or currency props either — the active storefront context supplies those.
+- **Wrapping `PricingRoot` in a non-PDP page.** It requires `productBySlug` in the page query context. Use only on routes that resolve a product.
+- **Splitting Root across siblings.** `PricingSellingPrice` outside a `PricingRoot` throws at render time.
+
+---
+
+## Styling
+
+Style `PricingRoot` as a vertical stack and each price line as its own typographic line. The selling price is the loud one; list and installment lines are quieter. Read the price color and sizes off the image.
+
+| Component | What you style | Plausible classes |
+|---|---|---|
+| `PricingRoot` | Stacks the price lines | `flex flex-col gap-[4px] mt-[8px] w-full` |
+| `PricingSellingPrice` | The headline price — large, bold, often the brand color | `text-[28px] leading-[1.15] font-bold text-[#C8102E] tracking-[-0.01em] block` |
+| `PricingListPrice` | The struck-through original price — small and muted | `text-[13px] leading-[1.4] font-normal text-[#8A8A8A] line-through` |
+| `PricingDiscount` / `PricingSpotDiscount` | Savings badge — small, often a colored chip | `inline-flex items-center px-[6px] py-[2px] rounded-[4px] bg-[#C8102E] text-white text-[12px] font-semibold` |
+| `PricingInstallments` / `PricingInstallment` | Installment line — small, secondary | `text-[13px] leading-[1.4] text-[#666666] mt-[2px] block` |
+
+Read the selling-price color straight off the image as an arbitrary hex; reuse it on the discount chip. `line-through` is what makes the list price read as the old price.
+
+Styled minimal example (list + selling + installments):
+
+```json
+{
+  "pricing": {
+    "type": "PricingRoot",
+    "children": ["pricing-list", "pricing-selling", "pricing-installments"],
+    "style": ["flex", "flex-col", "gap-[4px]", "mt-[8px]", "w-full"]
+  },
+  "pricing-list": {
+    "type": "PricingListPrice",
+    "style": ["text-[13px]", "leading-[1.4]", "font-normal", "text-[#8A8A8A]", "line-through"]
+  },
+  "pricing-selling": {
+    "type": "PricingSellingPrice",
+    "style": ["text-[28px]", "leading-[1.15]", "font-bold", "text-[#C8102E]", "tracking-[-0.01em]", "block"]
+  },
+  "pricing-installments": {
+    "type": "PricingInstallments",
+    "children": ["pricing-installment"],
+    "style": ["mt-[2px]", "block"]
+  },
+  "pricing-installment": {
+    "type": "PricingInstallment",
+    "props": { "template": "ou em até {count}x de {value}", "interestFreeLabel": "sem juros" },
+    "style": ["text-[13px]", "leading-[1.4]", "text-[#666666]"]
+  }
+}
+```
+
+---
+
+## Related
+
+- [[buy-button]] — the action paired with Pricing on a PDP. Distinct block; do not nest.
+- [[product-information]] — title/description of the same product. Distinct block; do not nest.
+- [[cart-item-price]] — equivalent price particle for cart line items. Use Pricing only on routes that resolve a product.
+- [[popover]] — provides the open/close state and positioning for the payment-methods disclosure pattern. `PricingPaymentMethodsTrigger` is the Pricing-aware Popover trigger; `PricingPaymentMethodsList` is the content rendered inside `PopoverPopup`.
+- [[tabs]] — generic tabbed UI primitive. Used by the tab-grouped payment-methods disclosure (Americanas / KitchenAid pattern) via `PricingPaymentMethodsTabList` and `PricingPaymentMethodsTabPanels`.