docs: consolidate markdown documentation into master guides and remove obsolete files

docs/PRODUCT_PAGE_ARCHITECTURE.md

@@ -0,0 +1,91 @@
+# WooNooW Product Page Architecture & UX Guide
+
+**Version:** 2.0.0  
+**Status:** Production Ready
+
+This document serves as the master guide for the WooNooW Customer SPA Product Page. It consolidates our design decision framework, standard operating procedures (SOP), and implementation phases.
+
+---
+
+## 📋 Table of Contents
+
+1. [Design Decision Framework](#design-decision-framework)
+2. [Layout & Structure SOP](#layout--structure-sop)
+3. [Implementation Phases](#implementation-phases)
+
+---
+
+## 1. Design Decision Framework
+
+When building the WooNooW SPA, we constantly face the dilemma: **Should we follow E-commerce Convention (e.g. Tokopedia, Shopify) or UX Research (e.g. Baymard Institute)?**
+
+**Our Approach: Context-Driven Hybrid Decisions**
+
+| Pattern | Convention | Research | Our Decision | Rationale |
+|---|---|---|---|---|
+| **Image Thumbnails** | Dots (Mobile) | Visible Thumbs | **Hybrid** | Small thumbnails + dots underneath. Retains swipeability but adds information scent. |
+| **Variation Selector** | Pills | Pills | **Pills** | Clear winner. Dropdowns add unnecessary friction. |
+| **Typography** | Varies | Title > Price | **Title > Price** | We optimize for Brand Stores (product focus) rather than Marketplaces (price focus). |
+| **Description** | Varies | Visible | **Auto-Expand** | Primary content must be visible. Secondary tabs (Reviews/Specs) can be categorized. |
+| **Sticky Bottom Bar** | Common | Good | **Yes** | Essential for long-scrolling mobile experiences. |
+
+**The Meta-Lesson:** 
+- Follow Convention for strongly learned behaviors (e.g., swiping).
+- Follow Research when convention is weak or when research points to a clear, frictionless improvement.
+- Always optimize for OUR context: We are building a high-conversion, brand-focused store SPA, not a massive chaotic marketplace.
+
+---
+
+## 2. Layout & Structure SOP
+
+### 2.1 Hero Section (Above the Fold)
+The visual hierarchy must prioritize the core purchasing loop:
+1. **Product Images** (Left on Desktop, Top on Mobile)
+2. **Title & Price** (Right on Desktop, Below Image on Mobile)
+3. **Rating & Review Count**
+4. **Variation Selectors** (Pills)
+5. **Quantity & Add to Cart CTA**
+6. **Trust Badges**
+
+### 2.2 Image Gallery Requirements
+- **Main Image:** High-res, zoomable/lightbox enabled.
+- **Thumbnail Slider:** Horizontal scrolling, 4-6 visible thumbnails. Active thumbnail highlighted.
+- **Variation Auto-Switch:** Selecting a color pill MUST instantly switch the main gallery image to the corresponding photo.
+
+### 2.3 Product Information (Below the Fold)
+**AVOID HORIZONTAL TABS.** Research indicates 27% of users overlook them.
+Instead, use **Vertical Collapsed Sections (Accordions)**:
+- Description (Auto-expanded)
+- Specifications Table
+- Shipping / Returns Policy
+- Reviews
+- Related Products
+
+### 2.4 Mobile Optimization
+- Image gallery must be native-feel swipeable.
+- Sticky Add-to-Cart bottom bar on scroll.
+- Touch targets minimum 44x44px.
+
+---
+
+## 3. Implementation Phases
+
+If extending or modifying the product page, follow this feature prioritization:
+
+### Phase 1: Core E-Commerce Loop (MVP)
+- Horizontal thumbnail slider with arrow navigation on desktop.
+- Variation selector with automatic image switching and price updating.
+- Add to Cart functionality with stock validation (disable button if no variation chosen).
+- Vertical accordion layout for Description and Info.
+
+### Phase 2: Trust & Conversion Optimization
+- Inject WooCommerce native Reviews.
+- Inject Trust elements (Secure checkout, Payment methods).
+- Auto-calculate and display Free Shipping thresholds.
+- Related products carousel.
+
+### Phase 3: Advanced Media & Personalization (Future)
+- Wishlist / Save for later.
+- Social Proof badges ("20 people viewing this").
+- 360° product views and Video embeds.
+- Auto-apply coupons and bulk tier discounts.