# PHASE 07: PRODUCT DETAIL PAGE

Read `docs/03-UX-SPECIFICATION.md` section 3 and `docs/04-DESIGN-SYSTEM.md` sections 5, 6 and 7.

## Scope

The highest-value page in the build. Most paid traffic lands here and it has to stand alone.

## Build

Twenty blocks in the mobile order given in the UX spec. Key requirements:

1. Gallery: 1:1 main image, swipe track with CSS scroll-snap, dot indicator, thumbnail rail on desktop. **No lightbox library.** Tap-to-zoom is a CSS transform on a higher-resolution image loaded on demand. First image is the LCP element and gets the eager treatment.
2. Price block showing the genuine rupee amount saved when there is a real sale price. Never a strikethrough for a price the item never sold at.
3. Colour swatches: 36px circles, 44px tap target, selected state is a ring **plus a checkmark**, never colour alone.
4. Size as pills, never a select, with a Size Guide link.
5. A live "Selected: Queen, Ivory" line under the swatches.
6. Variation behaviour: selecting a colour swaps the gallery's first image and updates price, SKU and stock, without scrolling the page or collapsing the gallery. Unavailable combinations are struck through, `aria-disabled`, still tappable, and tapping shows the specific out-of-stock message from the microcopy table.
7. Add to Cart and Buy Now side by side. Buy Now goes straight to checkout and does not duplicate an existing cart line.
8. **The COD and delivery card, directly under the buttons.** COD badge, delivery estimate computed from the configured lead days, and the return policy summary in two lines linked to the full page. This is the block that converts in this market.
9. Specifications accordion driven by `BC_Product_Spec_Render::get_spec_rows()` from phase 2. Sections with no value hide themselves, no empty headings.
10. Reviews with the Verified Purchase mark from WooCommerce's own verified flag. Star rating and text only, **no photo uploads** (decision D-21).
11. Related products from the same child category, then the same `pa_fabric`.
12. Sticky bottom bar appearing once the main CTA scrolls out, showing price and Add to Cart.
13. Desktop: gallery left 58 percent, sticky buy column right 42 percent, accordions open in two columns, no sticky bar.
14. Video, if `_bc_video_url` is set: a facade image that swaps to the YouTube or Vimeo iframe on click. Never an autoloaded iframe, never a self-hosted file.

## Acceptance criteria

- [ ] Every QA test in `docs/08-QA-TEST-PLAN.md` section B passes
- [ ] Selecting size then colour updates price, image, SKU and stock every time
- [ ] Selecting an unavailable combination shows the specific message and disables add to cart
- [ ] Add to cart with no variation chosen is blocked with an inline message, not silently
- [ ] The gallery does not shift layout at any point during load
- [ ] A product with three of eight spec fields shows exactly three rows
- [ ] The sticky bar appears and disappears at the right scroll position and never covers the footer
- [ ] Buy Now does not duplicate an existing cart line
- [ ] Video renders as a facade and loads the iframe only on click
- [ ] LCP under 2.5s, CLS under 0.05, page weight under 800 KB, JS under 110 KB
- [ ] Keyboard operable throughout: gallery, swatches, accordion, reviews

## Stop

No cart or checkout work. Next phase.