feat: implement header/footer visibility controls for checkout and thankyou pages

- Created LayoutWrapper component to conditionally render header/footer based on route
- Created MinimalHeader component (logo only)
- Created MinimalFooter component (trust badges + policy links)
- Created usePageVisibility hook to get visibility settings per page
- Wrapped ClassicLayout with LayoutWrapper for conditional rendering
- Header/footer visibility now controlled directly in React SPA
- Settings: show/minimal/hide for both header and footer
- Background color support for checkout and thankyou pages

TYPOGRAPHY-PLAN.md

@@ -0,0 +1,101 @@
+# WooNooW Typography System
+
+## Font Pairings
+
+### 1. Modern & Clean
+- **Heading**: Inter (Sans-serif)
+- **Body**: Inter
+- **Use Case**: Tech, SaaS, Modern brands
+
+### 2. Editorial & Professional  
+- **Heading**: Playfair Display (Serif)
+- **Body**: Source Sans Pro
+- **Use Case**: Publishing, Professional services, Luxury
+
+### 3. Friendly & Approachable
+- **Heading**: Poppins (Rounded Sans)
+- **Body**: Open Sans
+- **Use Case**: Lifestyle, Health, Education
+
+### 4. Elegant & Luxury
+- **Heading**: Cormorant Garamond (Serif)
+- **Body**: Lato
+- **Use Case**: Fashion, Beauty, Premium products
+
+## Font Sizes (Responsive)
+
+### Desktop (1024px+)
+- **H1**: 48px / 3rem
+- **H2**: 36px / 2.25rem
+- **H3**: 28px / 1.75rem
+- **H4**: 24px / 1.5rem
+- **Body**: 16px / 1rem
+- **Small**: 14px / 0.875rem
+
+### Tablet (768px - 1023px)
+- **H1**: 40px / 2.5rem
+- **H2**: 32px / 2rem
+- **H3**: 24px / 1.5rem
+- **H4**: 20px / 1.25rem
+- **Body**: 16px / 1rem
+- **Small**: 14px / 0.875rem
+
+### Mobile (< 768px)
+- **H1**: 32px / 2rem
+- **H2**: 28px / 1.75rem
+- **H3**: 20px / 1.25rem
+- **H4**: 18px / 1.125rem
+- **Body**: 16px / 1rem
+- **Small**: 14px / 0.875rem
+
+## Settings Structure
+
+```typescript
+interface TypographySettings {
+  // Predefined pairing
+  pairing: 'modern' | 'editorial' | 'friendly' | 'elegant' | 'custom';
+  
+  // Custom fonts (when pairing = 'custom')
+  custom: {
+    heading: {
+      family: string;
+      weight: number;
+    };
+    body: {
+      family: string;
+      weight: number;
+    };
+  };
+  
+  // Size scale multiplier (0.8 - 1.2)
+  scale: number;
+}
+```
+
+## Download Fonts
+
+Visit these URLs to download WOFF2 files:
+
+1. **Inter**: https://fonts.google.com/specimen/Inter
+2. **Playfair Display**: https://fonts.google.com/specimen/Playfair+Display
+3. **Source Sans Pro**: https://fonts.google.com/specimen/Source+Sans+Pro
+4. **Poppins**: https://fonts.google.com/specimen/Poppins
+5. **Open Sans**: https://fonts.google.com/specimen/Open+Sans
+6. **Cormorant Garamond**: https://fonts.google.com/specimen/Cormorant+Garamond
+7. **Lato**: https://fonts.google.com/specimen/Lato
+
+**Download Instructions:**
+1. Click "Download family"
+2. Extract ZIP
+3. Convert TTF to WOFF2 using: https://cloudconvert.com/ttf-to-woff2
+4. Place in `/customer-spa/public/fonts/[font-name]/`
+
+## Implementation Steps
+
+1. ✅ Create font folder structure
+2. ✅ Download & convert fonts to WOFF2
+3. ✅ Create CSS @font-face declarations
+4. ✅ Add typography settings to Admin SPA
+5. ✅ Create Tailwind typography plugin
+6. ✅ Update Customer SPA to use dynamic fonts
+7. ✅ Test responsive scaling