# Changed Files — Before → After

This summarizes what changed between the broken `before/` version and the fixed
`after/` version. The full line-by-line diff is in `diff.patch`.

> Demo diagnostic — not real client work.

---

## `index.html` (product page markup)

| Area | Before (broken) | After (fixed) |
|---|---|---|
| Viewport | No `<meta name="viewport">` | Added — correct mobile scaling |
| Cart count | `<span id="cart-count">` present but never updated | Updated by JS on every add, with a bump animation |
| Variant buttons | Buttons crammed on one line, no wrap | Spaced pills via flex/gap/wrap |
| CTA | Single low button | Full-width button; on mobile the price sits on its own line directly above it |
| Cart drawer | Markup present but `display:none`, never opened | Slide-in drawer + backdrop, line items, qty, subtotal, remove |
| Feedback | None | Toast confirmation ("Added to cart") |

## `styles.css`

- **Product image:** removed fixed `min-height: 520px` (which caused an
  oversized mobile image + layout shift) and switched to `aspect-ratio` with a
  mobile `max-height`.
- **Variant selector:** changed `.variant-options` from `display:block` to
  `display:flex; flex-wrap:wrap; gap:10px;` and gave pills consistent padding,
  radius, hover, and selected states.
- **CTA:** stronger styling and hover state. On mobile, CSS `order` sets a clean
  reading order (color, size, price, CTA) so the price sits on its own line
  directly above a full-width button — with a divider before the shipping text.
- **Cart drawer:** replaced `display:none` with a transform-based open/close
  (`.open` class), added a dimmed `.cart-backdrop`, styled line items, quantity
  stepper, remove button, subtotal, and a `.toast`.
- **Breakpoints:** added real handling at `860px` and `430px` (the broken version
  only had an inadequate `480px` rule that just stacked the columns).

## `script.js`

- **Add-to-cart handler:** the broken version pushed to an array and stopped.
  The fixed `addToCart()` now: merges/creates the line → `updateCount()` →
  `renderCart()` → `openDrawer()` → `showToast()`.
- **New functions:** `openDrawer()`, `closeDrawer()`, `updateCount()`,
  `renderCart()`, `showToast()`, `money()`, `selectedVariant()`.
- **Drawer controls:** close button, backdrop-click close, and Escape-to-close.
- **Quantity / remove:** event-delegated `inc` / `dec` / `remove` handlers that
  re-render the cart and count.

---

## Files in this proof pack

```
index.html                         Comparison / landing page (links both demos)
before/index.html | styles.css | script.js   Broken version (bugs intentional)
after/index.html  | styles.css | script.js   Fixed version
report/shopify-demo-diagnostic.md            Diagnostic writeup (Markdown)
report/shopify-demo-diagnostic.html          Diagnostic writeup (styled HTML)
proof-assets/screenshot-before-desktop.png   1440x1000
proof-assets/screenshot-before-mobile.png    390x844
proof-assets/screenshot-after-desktop.png    1440x1000 (cart drawer open)
proof-assets/screenshot-after-mobile.png     390x844
proof-assets/diff.patch                      Full before→after code diff
proof-assets/changed-files.md                This file
proof-assets/_capture.mjs                    Local Playwright screenshot script
site-copy/shopify-proof-section.html         Paste-ready landing-page section
site-copy/shopify-proof-section.md           Same content, Markdown
site-copy/outreach-snippet.txt               Short cold-outreach message
README.md                                    How to use this pack
```