feat: redesign contact page for POD sellers & add theme enhancements

Contact page redesign:
- Replace retail-style contact info (phone, address, hours) with POD-appropriate layout
- Add order tracking card with email input
- Add "Handy to know" section with printing/delivery/returns info
- Add email contact with response time promise
- Add social links (Instagram, Pinterest)
- Update intro text to be warmer and more personal

Collection page improvements:
- Replace sidebar filters with horizontal category pills
- Add filter pill CSS with theme token integration

PDP enhancements:
- Add image lightbox with keyboard navigation
- Add thumbnail gallery with active state
- Add reviews section (toggleable)
- Add related products section (toggleable)
- Add trust badges section (toggleable)

Theme system additions:
- Add button_style setting (filled/outline/soft)
- Add product_text_align setting (left/center)
- Add image_aspect_ratio setting (square/portrait/landscape)
- Add responsive form layouts with flex-wrap

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/theme-semantic.css

@@ -18,10 +18,30 @@
   --t-secondary-accent: #ea580c;
   --t-sale-color: #dc2626;
 
-  /* Font size scale */
+  /* Font size scale - all sizes use em so they scale with --t-font-size-scale */
   --t-font-size-scale: 1;
   --t-heading-weight: 600;
 
+  /*
+   * Type Scale - Limited to 6 body sizes for design consistency
+   * These use em units so they scale with the base font size setting
+   * Body: caption, small, base, large
+   * Display: xl, 2xl (for headings and hero text)
+   */
+  --t-text-caption: 0.75em;   /* ~12px at 16px base, ~14px at 18px base */
+  --t-text-small: 0.875em;    /* ~14px at 16px base, ~16px at 18px base */
+  --t-text-base: 1em;         /* matches base font size setting */
+  --t-text-large: 1.125em;    /* ~18px at 16px base, ~20px at 18px base */
+  --t-text-xl: 1.25em;        /* ~20px at 16px base, ~22px at 18px base */
+  --t-text-2xl: 1.5em;        /* ~24px at 16px base, ~27px at 18px base */
+
+  /* Heading sizes - separate scale for headings */
+  --t-heading-sm: 1.25em;     /* h4, h5, h6 */
+  --t-heading-md: 1.5em;      /* h3 */
+  --t-heading-lg: 2em;        /* h2 */
+  --t-heading-xl: 2.5em;      /* h1 */
+  --t-heading-display: 3em;   /* hero/display text */
+
   /* Layout */
   --t-layout-max-width: 1400px;
   --t-button-style: filled;