feat: add mobile bottom navigation bar

Replace cramped horizontal nav on mobile with a fixed bottom tab bar
for thumb-friendly navigation. The header nav is now hidden on mobile
(<768px) and the bottom nav provides Home, Shop, About, and Contact
links with icons.

- Add mobile_bottom_nav component with icon + label nav items
- Active page has accent-colored background highlight and larger icon
- Add shadow to lift nav visually off the page
- Update all page templates with bottom padding and bottom nav
- Remove CSS rule that was overriding Tailwind's hidden class
- Responsive header padding (tighter on mobile)

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

lib/simpleshop_theme_web/components/page_templates/about.html.heex

@@ -1,4 +1,4 @@
-<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
@@ -24,4 +24,6 @@
   <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+
+  <.mobile_bottom_nav active_page="about" mode={@mode} />
 </div>

lib/simpleshop_theme_web/components/page_templates/cart.html.heex

@@ -1,4 +1,4 @@
-<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
@@ -16,4 +16,6 @@
 
   <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+
+  <.mobile_bottom_nav active_page="cart" mode={@mode} />
 </div>

lib/simpleshop_theme_web/components/page_templates/collection.html.heex

@@ -1,4 +1,4 @@
-<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
@@ -32,4 +32,6 @@
   <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+
+  <.mobile_bottom_nav active_page="collection" mode={@mode} />
 </div>

lib/simpleshop_theme_web/components/page_templates/contact.html.heex

@@ -1,4 +1,4 @@
-<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
@@ -44,4 +44,6 @@
   <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+
+  <.mobile_bottom_nav active_page="contact" mode={@mode} />
 </div>

lib/simpleshop_theme_web/components/page_templates/home.html.heex

@@ -1,4 +1,4 @@
-<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
@@ -40,4 +40,6 @@
   <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+
+  <.mobile_bottom_nav active_page="home" mode={@mode} />
 </div>

lib/simpleshop_theme_web/components/page_templates/pdp.html.heex

@@ -1,4 +1,4 @@
-<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
@@ -41,4 +41,6 @@
 
   <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+
+  <.mobile_bottom_nav active_page="pdp" mode={@mode} />
 </div>