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>

lib/simpleshop_theme/settings/theme_settings.ex

@@ -44,7 +44,6 @@ defmodule SimpleshopTheme.Settings.ThemeSettings do
     field :announcement_bar, :boolean, default: true
     field :sticky_header, :boolean, default: false
     field :hover_image, :boolean, default: true
-    field :quick_add, :boolean, default: true
     field :show_prices, :boolean, default: true
     field :pdp_trust_badges, :boolean, default: true
     field :pdp_reviews, :boolean, default: true
@@ -85,7 +84,6 @@ defmodule SimpleshopTheme.Settings.ThemeSettings do
       :announcement_bar,
       :sticky_header,
       :hover_image,
-      :quick_add,
       :show_prices,
       :pdp_trust_badges,
       :pdp_reviews,
@@ -105,5 +103,10 @@ defmodule SimpleshopTheme.Settings.ThemeSettings do
     |> validate_number(:header_position_y, greater_than_or_equal_to: 0, less_than_or_equal_to: 100)
     |> validate_inclusion(:layout_width, ~w(contained wide full))
     |> validate_inclusion(:card_shadow, ~w(none sm md lg))
+    |> validate_inclusion(:font_size, ~w(small medium large))
+    |> validate_inclusion(:heading_weight, ~w(regular medium bold))
+    |> validate_inclusion(:button_style, ~w(filled outline soft))
+    |> validate_inclusion(:product_text_align, ~w(left center))
+    |> validate_inclusion(:image_aspect_ratio, ~w(square portrait landscape))
   end
 end

lib/simpleshop_theme/theme/css_generator.ex

@@ -19,6 +19,12 @@ defmodule SimpleshopTheme.Theme.CSSGenerator do
     .preview-frame, .shop-root {
       #{generate_accent(settings.accent_color)}
       #{generate_secondary_colors(settings)}
+      #{generate_font_size(settings.font_size)}
+      #{generate_heading_weight(settings.heading_weight)}
+      #{generate_layout_width(settings.layout_width)}
+      #{generate_button_style(settings.button_style)}
+      #{generate_product_text_align(settings.product_text_align)}
+      #{generate_image_aspect_ratio(settings.image_aspect_ratio)}
     }
     """
     |> String.trim()
@@ -225,6 +231,82 @@ defmodule SimpleshopTheme.Theme.CSSGenerator do
     """
   end
 
+  # Font size variations
+  # Using 18px as base for better accessibility (WCAG recommends 18px+)
+  # Small: 18px, Medium: 19px, Large: 20px
+  defp generate_font_size("small") do
+    "--t-font-size-scale: 1.125;"
+  end
+
+  defp generate_font_size("medium") do
+    "--t-font-size-scale: 1.1875;"
+  end
+
+  defp generate_font_size("large") do
+    "--t-font-size-scale: 1.25;"
+  end
+
+  # Heading weight (override typography default)
+  defp generate_heading_weight("regular") do
+    "--t-heading-weight-override: 400;"
+  end
+
+  defp generate_heading_weight("medium") do
+    "--t-heading-weight-override: 500;"
+  end
+
+  defp generate_heading_weight("bold") do
+    "--t-heading-weight-override: 700;"
+  end
+
+  # Layout width
+  defp generate_layout_width("contained") do
+    "--t-layout-max-width: 1100px;"
+  end
+
+  defp generate_layout_width("wide") do
+    "--t-layout-max-width: 1400px;"
+  end
+
+  defp generate_layout_width("full") do
+    "--t-layout-max-width: 100%;"
+  end
+
+  # Button style
+  defp generate_button_style("filled") do
+    "--t-button-style: filled;"
+  end
+
+  defp generate_button_style("outline") do
+    "--t-button-style: outline;"
+  end
+
+  defp generate_button_style("soft") do
+    "--t-button-style: soft;"
+  end
+
+  # Product text alignment
+  defp generate_product_text_align("left") do
+    "--t-product-text-align: left;"
+  end
+
+  defp generate_product_text_align("center") do
+    "--t-product-text-align: center;"
+  end
+
+  # Image aspect ratio
+  defp generate_image_aspect_ratio("square") do
+    "--t-image-aspect-ratio: 1 / 1;"
+  end
+
+  defp generate_image_aspect_ratio("portrait") do
+    "--t-image-aspect-ratio: 3 / 4;"
+  end
+
+  defp generate_image_aspect_ratio("landscape") do
+    "--t-image-aspect-ratio: 4 / 3;"
+  end
+
   # Convert hex color to HSL
   defp hex_to_hsl("#" <> hex), do: hex_to_hsl(hex)