Split AdditionalServicesStep into IncludedServicesStep + ExtrasStep

- IncludedServicesStep: package inclusions at no cost (dressing, viewing,
  prayers, funeral announcement). Sub-options render inside parent card.
- ExtrasStep: optional paid extras for lead generation (catering, music,
  coffin bearing, newspaper notice). POA support, tally of priced items.
- AddOnOption: children prop (sub-options inside card), priceLabel prop
  (custom text like "Price on application" in brand copper italic)
- Flattened sub-option pattern: inline toggle rows inside parent card
  instead of nested card-in-card ("Russian doll") pattern
- Coffin bearing now uses toggle + bearer type radio (consistent UX)
- Removed old AdditionalServicesStep (replaced by two new pages)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/memory/session-log.md

@@ -26,6 +26,73 @@ Each entry follows this structure:
 
 ## Sessions
 
+### Session 2026-03-31b — CoffinDetailsStep rewrite + AdditionalServicesStep split
+
+**Agent(s):** Claude Opus 4.6 (1M context)
+
+**Work completed:**
+- **CoffinDetailsStep rewrite** — two-panel detail-toggles layout with gallery + specs (left), name + description + colour swatches + allowance-aware pricing + CTA (right). Colour selection doesn't affect price. Allowance logic: fully covered / partially covered / no allowance.
+- **AdditionalServicesStep split into two pages:**
+  - **IncludedServicesStep (new)** — services included in the package at no cost. Dressing, viewing (with same-venue sub-option inside card), prayers/vigil, funeral announcement.
+  - **ExtrasStep (new)** — optional paid extras for lead generation. Catering, music (flat inline live musician toggle + musician type), coffin bearing (toggle + bearer preference radio), newspaper notice. POA support via `priceLabel`. Tally of priced selections.
+- **AddOnOption molecule enhanced:**
+  - `children` prop — sub-options render inside the card boundary (below divider) when checked, eliminating nested card "Russian doll" pattern
+  - `priceLabel` prop — custom text like "Price on application" in brand copper italic
+- **AdditionalServicesStep removed** — replaced by the two new pages
+- All quality checks passing (TypeScript, ESLint, Prettier)
+- Playwright visual verification of all key scenarios
+
+**Decisions made:**
+- Split AdditionalServicesStep into two pages for clearer UX distinction between free inclusions and paid extras
+- Sub-options render inside parent card (flat hierarchy) instead of nested cards
+- Coffin bearing changed from always-visible radio to toggle + sub-options (consistent with other items)
+- `bearing` field split into `bearing: boolean` + `bearerType` for toggle pattern
+- Extras page is lead-gen: signals interest, not firm commitment. Director follows up.
+- POA items show "Price on application" in brand copper italic
+- Copy refined through brand lens — no transactional language ("toggle on"), warm professional tone
+
+**Open questions:**
+- None
+
+**Next steps:**
+- Continue page feedback: SummaryStep, PaymentStep, ConfirmationStep
+- Retroactive review Phase 3 (organisms) still pending
+- Batch a11y fix (aria-describedby + aria-invalid) deferred
+
+---
+
+### Session 2026-03-31b — CoffinDetailsStep rewrite: product detail layout
+
+**Agent(s):** Claude Opus 4.6 (1M context)
+
+**Work completed:**
+- **CoffinDetailsStep complete rewrite** — transformed to match VenueDetailStep two-panel pattern:
+  - **Left panel:** ImageGallery (hero + thumbnails), product details as semantic `dl` list (bold label above value)
+  - **Right panel (sticky):** coffin name (h1), description, colour swatch picker, price with allowance-aware display, CTA, save-and-exit
+  - **Colour picker:** circular swatches (36px), `aria-pressed`, controlled via `selectedColourId`/`onColourChange`, does not affect price
+  - **Allowance pricing logic:** fully covered (allowance >= price) → "Included in your package allowance — no change to your plan total." / partially covered → shows "$X package allowance applied" + "+$Y to your plan total" in brand colour / no allowance → price only with extra spacing to CTA
+  - **Removed:** info bubble (redundant with allowance impact text), `priceNote` prop, `termsText` prop, old horizontal specs grid, `CoffinAllowance` type
+  - **Added:** `CoffinColour` type, `allowanceAmount` prop, `onAddCoffin` callback (replaces `onContinue`)
+  - **A11y:** fixed heading hierarchy (price as `<p>` not `<h5>`, Product details as `<h2>`) — 0 violations
+- **Stories:** FullyCovered, PartiallyCovered, NoAllowance, NoColours, Minimal, PrePlanning, Loading
+- **Playwright visual verification** of all key scenarios
+- All quality checks passing (TypeScript, ESLint, Prettier)
+
+**Decisions made:**
+- Allowance impact is computed from `allowanceAmount` vs `coffin.price` — no remaining balance tracking (out of scope)
+- Info bubble removed from detail page (redundant) — kept on CoffinsStep browsing page
+- Product details as single-column stacked `dl` (label above value) — more readable than grid
+
+**Open questions:**
+- None
+
+**Next steps:**
+- Continue page feedback: AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep
+- Retroactive review Phase 3 (organisms) still pending
+- Batch a11y fix (aria-describedby + aria-invalid) deferred
+
+---
+
 ### Session 2026-03-31a — CoffinsStep rewrite: grid-sidebar ecommerce layout
 
 **Agent(s):** Claude Opus 4.6 (1M context)