refactor: add themed form components for consistent shop styling

Adds reusable Phoenix components (shop_input, shop_textarea, shop_select,
shop_button, shop_card) backed by semantic CSS classes (.themed-input,
.themed-button, etc.) to eliminate repeated inline styles across templates.

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

lib/simpleshop_theme_web/live/shop_live/collection.ex

@@ -205,16 +205,13 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
       </nav>
 
       <form phx-change="sort_changed">
-        <select
+        <.shop_select
           name="sort"
+          options={@sort_options}
+          selected={@current_sort}
           class="px-4 py-2 text-sm"
-          style="background-color: var(--t-surface-raised); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
           aria-label="Sort products"
-        >
-          <%= for {value, label} <- @sort_options do %>
-            <option value={value} selected={@current_sort == value}>{label}</option>
-          <% end %>
-        </select>
+        />
       </form>
     </div>
     """

lib/simpleshop_theme_web/live/theme_live/index.html.heex

@@ -252,7 +252,7 @@
             </div>
 
             <!-- Header Image Controls -->
-            <div class="mt-3 space-y-3">
+            <div class="mt-3 flex flex-col gap-3">
               <form phx-change="update_setting" phx-value-field="header_zoom">
                 <div class="flex justify-between items-center mb-2">
                   <span class="text-xs font-medium text-base-content/70">Zoom</span>

lib/simpleshop_theme_web/live/user_live/login.ex

@@ -7,7 +7,7 @@ defmodule SimpleshopThemeWeb.UserLive.Login do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_scope={@current_scope}>
-      <div class="mx-auto max-w-sm space-y-4">
+      <div class="mx-auto max-w-sm flex flex-col gap-4">
         <div class="text-center">
           <.header>
             <p>Log in</p>