# PHASE 04: THEME SHELL, HEADER, FOOTER, NAVIGATION

Read `docs/02-INFORMATION-ARCHITECTURE.md` section 5 and `docs/03-UX-SPECIFICATION.md`.

## Scope

Everything that wraps a page. After this phase, every page has correct chrome even if its content is empty.

## Build

1. `header.php` and `footer.php`, `inc/setup.php` with theme supports (title-tag, post-thumbnails, html5, responsive-embeds, custom-logo, two nav menus), `inc/woo-support.php` declaring WooCommerce support with the gallery features.
2. Desktop header: a slim top bar with the phone number and WhatsApp link, then logo, the four category items with a one-level dropdown of children, Shop, search icon, Track Order link, cart with count. **No account icon**, accounts are deferred (D-21). Sticky, condensed on scroll. No mega menu.
3. Mobile header: hamburger, logo, search icon, cart with count. The drawer lists the four parents expanding to children, plus Track Order, Size Guide, Contact and the WhatsApp number. **Those three pages are created in phase 11.** Create them here as empty published drafts via `BC_Pages_Installer` so no footer or drawer link is dead at any point in the build. A dead link in the footer of a COD store is a trust failure. Focus trapped while open, closes on Escape and on backdrop click.
4. Search overlay, opens from the icon, focuses the input immediately, submits to the WooCommerce product search.
5. `BC_Nav_Walker` producing the dropdown markup, with correct ARIA.
6. **The cart count replacement for dequeued fragments** (decision D-15): render the count server side in the header, then a REST route `brand/v1/cart-count` returning `{count, total}`, called once on `DOMContentLoaded` from `main.js` and **only when a `woocommerce_cart_hash` cookie exists**. Visitors with an empty cart make zero extra requests.
   **Two traps here.** First, WooCommerce detects REST requests through `WooCommerce::is_rest_api_request()` and skips the frontend includes and the session handler, so `WC()->cart` is **null** inside a REST callback. Call `wc_load_cart()` at the top of the handler or this returns nothing and the whole replacement silently fails. Second, this is one of the three deliberately public endpoints in `CLAUDE.md` section 6: give it a named `permission_callback` with a comment saying why it is public, make it read-only, and rate limit it.
7. Footer: four columns on desktop, stacked on mobile. Shop by category, Help, About, Contact with a real phone, WhatsApp link and physical address, all pulled from Customizer settings.
8. `inc/customizer.php`: logo, WhatsApp number, phone number, address, delivery promise copy, the three trust strip items.
9. `template-parts/global/breadcrumb.php` and `bc_breadcrumb()` in template tags, with correct markup for the JSON-LD to be added in phase 12.
10. `404.php` with useful category links, `searchform.php`, `page.php`, `index.php`.
11. Skip-to-content link, semantic landmarks throughout.

## Acceptance criteria

- [ ] Header and footer render correctly at 360, 390, 430, 768, 1024 and 1440
- [ ] Mobile drawer opens, traps focus, closes on Escape and on backdrop click, and every category is reachable in two taps
- [ ] Desktop dropdowns work on hover and on keyboard focus
- [ ] With an empty cart, the network tab shows zero requests to `cart-count`
- [ ] After adding an item, the count updates on the next page load without an `admin-ajax` request
- [ ] `admin-ajax.php` appears nowhere in the network tab on a normal page load
- [ ] Search overlay works and focuses the input
- [ ] Every Customizer field renders in the footer
- [ ] Skip link works, tab order is sensible, all landmarks present
- [ ] Page weight of a bare page under 200 KB

## Stop

No homepage sections, no product templates. Next phase.