From 559798206f13fb4c1a27a6004661ea2fb6608b65 Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Wed, 18 Feb 2026 23:55:42 +0000
Subject: [PATCH] extract setup wizard to dedicated /admin/setup page

Move the setup stepper out of the dashboard into its own LiveView.
Dashboard now redirects to setup when site isn't live, and shows
stats-only view once live. Also cleans up button component variant
handling, fixes alert CSS, and removes stale demo.html.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 assets/css/admin/components.css               |   10 +-
 lib/berrypod/products.ex                      |    7 +
 lib/berrypod_web/admin_layout_hook.ex         |    6 +-
 .../components/core_components.ex             |   18 +-
 .../components/layouts/admin.html.heex        |    8 +
 lib/berrypod_web/live/admin/dashboard.ex      |  651 +-
 lib/berrypod_web/live/admin/product_show.ex   |    2 +-
 .../live/admin/providers/index.html.heex      |    2 +-
 lib/berrypod_web/live/admin/setup.ex          |  660 ++
 lib/berrypod_web/live/auth/confirmation.ex    |   12 +-
 lib/berrypod_web/live/auth/login.ex           |    6 +-
 lib/berrypod_web/live/auth/registration.ex    |    2 +-
 lib/berrypod_web/router.ex                    |    1 +
 lib/berrypod_web/user_auth.ex                 |    5 +-
 priv/static/demo.html                         | 6278 -----------------
 .../user_session_controller_test.exs          |    8 +-
 .../live/admin/dashboard_test.exs             |   68 +-
 test/berrypod_web/live/admin/layout_test.exs  |    6 +-
 test/berrypod_web/live/admin/setup_test.exs   |   88 +
 .../live/auth/confirmation_test.exs           |    2 +-
 test/berrypod_web/live/auth/login_test.exs    |    2 +-
 .../live/auth/registration_test.exs           |    2 +-
 test/berrypod_web/user_auth_test.exs          |    4 +-
 23 files changed, 835 insertions(+), 7013 deletions(-)
 create mode 100644 lib/berrypod_web/live/admin/setup.ex
 delete mode 100644 priv/static/demo.html
 create mode 100644 test/berrypod_web/live/admin/setup_test.exs

diff --git a/assets/css/admin/components.css b/assets/css/admin/components.css
index 6e8f76a..d060229 100644
--- a/assets/css/admin/components.css
+++ b/assets/css/admin/components.css
@@ -375,7 +375,7 @@
   position: fixed;
   top: 1rem;
   right: 1rem;
-  z-index: 50;
+  z-index: 100;
 }
 
 .admin-alert {
@@ -389,15 +389,15 @@
 }
 
 .admin-alert-info {
-  background-color: color-mix(in oklch, var(--color-info) 10%, transparent);
+  background-color: color-mix(in oklch, var(--color-info) 12%, var(--color-base-100));
   color: var(--color-info);
-  border: 1px solid color-mix(in oklch, var(--color-info) 25%, transparent);
+  border: 1px solid color-mix(in oklch, var(--color-info) 25%, var(--color-base-100));
 }
 
 .admin-alert-error {
-  background-color: color-mix(in oklch, var(--color-error) 10%, transparent);
+  background-color: color-mix(in oklch, var(--color-error) 12%, var(--color-base-100));
   color: var(--color-error);
-  border: 1px solid color-mix(in oklch, var(--color-error) 25%, transparent);
+  border: 1px solid color-mix(in oklch, var(--color-error) 25%, var(--color-base-100));
 }
 
 /* ── Modal ── */
diff --git a/lib/berrypod/products.ex b/lib/berrypod/products.ex
index cfb4605..186023a 100644
--- a/lib/berrypod/products.ex
+++ b/lib/berrypod/products.ex
@@ -90,6 +90,13 @@ defmodule Berrypod.Products do
     |> Repo.update_all(set: [sync_status: "idle"])
   end
 
+  @doc """
+  Returns the total count of all products.
+  """
+  def count_products do
+    Repo.aggregate(Product, :count)
+  end
+
   @doc """
   Returns the count of products for a provider connection.
   """
diff --git a/lib/berrypod_web/admin_layout_hook.ex b/lib/berrypod_web/admin_layout_hook.ex
index 62ed2c8..20cf44e 100644
--- a/lib/berrypod_web/admin_layout_hook.ex
+++ b/lib/berrypod_web/admin_layout_hook.ex
@@ -8,10 +8,14 @@ defmodule BerrypodWeb.AdminLayoutHook do
     socket =
       socket
       |> assign(:current_path, "")
+      |> assign(:site_live, Berrypod.Settings.site_live?())
       |> Phoenix.LiveView.attach_hook(:set_current_path, :handle_params, fn _params,
                                                                             uri,
                                                                             socket ->
-        {:cont, assign(socket, :current_path, URI.parse(uri).path)}
+        {:cont,
+         socket
+         |> assign(:current_path, URI.parse(uri).path)
+         |> assign(:site_live, Berrypod.Settings.site_live?())}
       end)
 
     {:cont, socket}
diff --git a/lib/berrypod_web/components/core_components.ex b/lib/berrypod_web/components/core_components.ex
index 314c64f..a070de0 100644
--- a/lib/berrypod_web/components/core_components.ex
+++ b/lib/berrypod_web/components/core_components.ex
@@ -81,16 +81,24 @@ defmodule BerrypodWeb.CoreComponents do
   """
   attr :rest, :global, include: ~w(href navigate patch method download name value disabled)
   attr :class, :string
-  attr :variant, :string, values: ~w(primary)
+  attr :variant, :string, values: ~w(primary outline)
   slot :inner_block, required: true
 
   def button(%{rest: rest} = assigns) do
-    variants = %{"primary" => "admin-btn-primary", nil => "admin-btn-primary admin-btn-soft"}
+    variants = %{
+      "primary" => "admin-btn-primary",
+      "outline" => "admin-btn-outline",
+      nil => "admin-btn-primary admin-btn-soft"
+    }
+
+    variant_class = Map.fetch!(variants, assigns[:variant])
 
     assigns =
-      assign_new(assigns, :class, fn ->
-        ["admin-btn", Map.fetch!(variants, assigns[:variant])]
-      end)
+      assign(assigns, :class, [
+        "admin-btn",
+        variant_class,
+        assigns[:class]
+      ])
 
     if rest[:href] || rest[:navigate] || rest[:patch] do
       ~H"""
diff --git a/lib/berrypod_web/components/layouts/admin.html.heex b/lib/berrypod_web/components/layouts/admin.html.heex
index 8734c43..f480237 100644
--- a/lib/berrypod_web/components/layouts/admin.html.heex
+++ b/lib/berrypod_web/components/layouts/admin.html.heex
@@ -43,6 +43,14 @@
       <%!-- nav links --%>
       <nav class="flex-1 p-2" aria-label="Admin navigation">
         <ul class="admin-nav">
+          <li :if={!@site_live}>
+            <.link
+              navigate={~p"/admin/setup"}
+              class={admin_nav_active?(@current_path, "/admin/setup")}
+            >
+              <.icon name="hero-rocket-launch" class="size-5" /> Setup
+            </.link>
+          </li>
           <li>
             <.link
               navigate={~p"/admin"}
diff --git a/lib/berrypod_web/live/admin/dashboard.ex b/lib/berrypod_web/live/admin/dashboard.ex
index f95a45e..192df25 100644
--- a/lib/berrypod_web/live/admin/dashboard.ex
+++ b/lib/berrypod_web/live/admin/dashboard.ex
@@ -1,227 +1,27 @@
 defmodule BerrypodWeb.Admin.Dashboard do
   use BerrypodWeb, :live_view
 
-  alias Berrypod.{Cart, Orders, Products, Settings, Setup}
-  alias Berrypod.Products.ProviderConnection
-  alias Berrypod.Providers
-  alias Berrypod.Stripe.Setup, as: StripeSetup
+  alias Berrypod.{Cart, Orders, Products, Settings}
 
   @impl true
   def mount(_params, _session, socket) do
-    status = Setup.setup_status()
-    status_counts = Orders.count_orders_by_status()
-    paid_count = Map.get(status_counts, "paid", 0)
-    recent_orders = Orders.list_orders(status: "paid") |> Enum.take(5)
+    if Settings.site_live?() do
+      status_counts = Orders.count_orders_by_status()
+      paid_count = Map.get(status_counts, "paid", 0)
+      recent_orders = Orders.list_orders(status: "paid") |> Enum.take(5)
 
-    conn = Products.get_provider_connection_by_type("printify")
-
-    if conn && connected?(socket) do
-      Phoenix.PubSub.subscribe(Berrypod.PubSub, "sync:#{conn.id}")
-    end
-
-    active_step = determine_active_step(status)
-
-    {:ok,
-     socket
-     |> assign(:page_title, "Dashboard")
-     |> assign(:setup, status)
-     |> assign(:active_step, active_step)
-     # Printify state
-     |> assign(:printify_conn, conn)
-     |> assign(:printify_form, to_form(%{"api_key" => ""}, as: :printify))
-     |> assign(:printify_testing, false)
-     |> assign(:printify_test_result, nil)
-     |> assign(:printify_saving, false)
-     |> assign(:pending_api_key, nil)
-     |> assign(:sync_status, conn && conn.sync_status)
-     # Stripe state
-     |> assign(:stripe_form, to_form(%{"api_key" => ""}, as: :stripe))
-     |> assign(:stripe_connecting, false)
-     |> assign(:stripe_api_key_hint, Settings.secret_hint("stripe_api_key"))
-     # Celebration
-     |> assign(:just_went_live, false)
-     # Stats
-     |> assign(:paid_count, paid_count)
-     |> assign(:revenue, Orders.total_revenue())
-     |> assign(:recent_orders, recent_orders)}
-  end
-
-  # -- Step determination --
-
-  defp determine_active_step(status) do
-    cond do
-      !status.printify_connected -> :printify
-      !status.products_synced -> :printify
-      !status.stripe_connected -> :stripe
-      !status.site_live -> :go_live
-      true -> :complete
-    end
-  end
-
-  # -- Events: Printify --
-
-  @impl true
-  def handle_event("validate_printify", %{"printify" => params}, socket) do
-    {:noreply, assign(socket, pending_api_key: params["api_key"])}
-  end
-
-  def handle_event("test_printify", _params, socket) do
-    api_key = socket.assigns.pending_api_key
-
-    if api_key in [nil, ""] do
-      {:noreply, assign(socket, printify_test_result: {:error, :no_api_key})}
+      {:ok,
+       socket
+       |> assign(:page_title, "Dashboard")
+       |> assign(:paid_count, paid_count)
+       |> assign(:revenue, Orders.total_revenue())
+       |> assign(:product_count, Products.count_products())
+       |> assign(:recent_orders, recent_orders)}
     else
-      socket = assign(socket, printify_testing: true, printify_test_result: nil)
-
-      temp_conn = %ProviderConnection{
-        provider_type: "printify",
-        api_key_encrypted: encrypt_api_key(api_key)
-      }
-
-      result = Providers.test_connection(temp_conn)
-
-      {:noreply, assign(socket, printify_testing: false, printify_test_result: result)}
+      {:ok, push_navigate(socket, to: ~p"/admin/setup")}
     end
   end
 
-  def handle_event("connect_printify", %{"printify" => %{"api_key" => api_key}}, socket) do
-    if api_key == "" do
-      {:noreply, put_flash(socket, :error, "Please enter your Printify API token")}
-    else
-      socket = assign(socket, printify_saving: true)
-
-      params =
-        %{"api_key" => api_key, "provider_type" => "printify"}
-        |> maybe_add_shop_config(socket.assigns.printify_test_result)
-        |> maybe_add_name(socket.assigns.printify_test_result)
-
-      case Products.create_provider_connection(params) do
-        {:ok, connection} ->
-          Products.enqueue_sync(connection)
-
-          if connected?(socket) do
-            Phoenix.PubSub.subscribe(Berrypod.PubSub, "sync:#{connection.id}")
-          end
-
-          status = %{socket.assigns.setup | printify_connected: true}
-
-          {:noreply,
-           socket
-           |> assign(:printify_saving, false)
-           |> assign(:printify_conn, connection)
-           |> assign(:sync_status, "syncing")
-           |> assign(:setup, status)
-           |> put_flash(:info, "Connected to Printify! Syncing products...")}
-
-        {:error, _changeset} ->
-          {:noreply,
-           socket
-           |> assign(:printify_saving, false)
-           |> put_flash(:error, "Failed to save connection")}
-      end
-    end
-  end
-
-  def handle_event("retry_sync", _params, socket) do
-    conn = socket.assigns.printify_conn
-
-    if conn do
-      Products.enqueue_sync(conn)
-      {:noreply, assign(socket, sync_status: "syncing")}
-    else
-      {:noreply, socket}
-    end
-  end
-
-  # -- Events: Stripe --
-
-  def handle_event("connect_stripe", %{"stripe" => %{"api_key" => api_key}}, socket) do
-    if api_key == "" do
-      {:noreply, put_flash(socket, :error, "Please enter your Stripe secret key")}
-    else
-      socket = assign(socket, stripe_connecting: true)
-
-      case StripeSetup.connect(api_key) do
-        {:ok, _result} ->
-          status = %{socket.assigns.setup | stripe_connected: true, can_go_live: true}
-
-          {:noreply,
-           socket
-           |> assign(:stripe_connecting, false)
-           |> assign(:setup, status)
-           |> assign(:stripe_api_key_hint, Settings.secret_hint("stripe_api_key"))
-           |> assign(:active_step, :go_live)
-           |> put_flash(:info, "Stripe connected")}
-
-        {:error, message} ->
-          {:noreply,
-           socket
-           |> assign(:stripe_connecting, false)
-           |> put_flash(:error, "Stripe connection failed: #{message}")}
-      end
-    end
-  end
-
-  # -- Events: Go live --
-
-  def handle_event("go_live", _params, socket) do
-    {:ok, _} = Settings.set_site_live(true)
-    status = %{socket.assigns.setup | site_live: true}
-
-    {:noreply,
-     socket
-     |> assign(:setup, status)
-     |> assign(:just_went_live, true)}
-  end
-
-  # -- Events: Step navigation --
-
-  def handle_event("toggle_step", %{"step" => step}, socket) do
-    step = String.to_existing_atom(step)
-
-    new_active =
-      if socket.assigns.active_step == step do
-        determine_active_step(socket.assigns.setup)
-      else
-        step
-      end
-
-    {:noreply, assign(socket, active_step: new_active)}
-  end
-
-  # -- PubSub: Sync progress --
-
-  @impl true
-  def handle_info({:sync_status, "completed", product_count}, socket) do
-    status = %{
-      socket.assigns.setup
-      | products_synced: true,
-        product_count: product_count
-    }
-
-    active_step = if status.stripe_connected, do: :go_live, else: :stripe
-
-    {:noreply,
-     socket
-     |> assign(:setup, status)
-     |> assign(:sync_status, "completed")
-     |> assign(:active_step, active_step)
-     |> put_flash(:info, "#{product_count} products synced")}
-  end
-
-  def handle_info({:sync_status, "failed"}, socket) do
-    {:noreply,
-     socket
-     |> assign(:sync_status, "failed")
-     |> put_flash(:error, "Product sync failed — try again")}
-  end
-
-  def handle_info({:sync_status, status}, socket) do
-    {:noreply, assign(socket, sync_status: status)}
-  end
-
-  # -- Render --
-
   @impl true
   def render(assigns) do
     ~H"""
@@ -229,25 +29,6 @@ defmodule BerrypodWeb.Admin.Dashboard do
       Dashboard
     </.header>
 
-    <%!-- Celebration state --%>
-    <.celebration :if={@just_went_live} />
-
-    <%!-- Setup stepper (when not live and not celebrating) --%>
-    <.setup_stepper
-      :if={!@setup.site_live and !@just_went_live}
-      setup={@setup}
-      active_step={@active_step}
-      printify_conn={@printify_conn}
-      printify_form={@printify_form}
-      printify_testing={@printify_testing}
-      printify_test_result={@printify_test_result}
-      printify_saving={@printify_saving}
-      sync_status={@sync_status}
-      stripe_form={@stripe_form}
-      stripe_connecting={@stripe_connecting}
-      stripe_api_key_hint={@stripe_api_key_hint}
-    />
-
     <%!-- Stats --%>
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6">
       <.stat_card
@@ -264,7 +45,7 @@ defmodule BerrypodWeb.Admin.Dashboard do
       />
       <.stat_card
         label="Products"
-        value={@setup.product_count}
+        value={@product_count}
         icon="hero-cube"
         href={~p"/admin/products"}
       />
@@ -321,382 +102,7 @@ defmodule BerrypodWeb.Admin.Dashboard do
   end
 
   # ==========================================================================
-  # Setup stepper components
-  # ==========================================================================
-
-  attr :setup, :map, required: true
-  attr :active_step, :atom, required: true
-  attr :printify_conn, :any, required: true
-  attr :printify_form, :any, required: true
-  attr :printify_testing, :boolean, required: true
-  attr :printify_test_result, :any, required: true
-  attr :printify_saving, :boolean, required: true
-  attr :sync_status, :string, required: true
-  attr :stripe_form, :any, required: true
-  attr :stripe_connecting, :boolean, required: true
-  attr :stripe_api_key_hint, :string, required: true
-
-  defp setup_stepper(assigns) do
-    ~H"""
-    <div class="mt-6">
-      <ol class="relative" aria-label="Setup steps">
-        <%!-- Step 1: Printify --%>
-        <.setup_step
-          step={:printify}
-          number={1}
-          title="Connect to Printify"
-          active_step={@active_step}
-          done={@setup.printify_connected and @setup.products_synced}
-          last={false}
-          next_done={@setup.stripe_connected}
-        >
-          <:summary :if={@setup.printify_connected and @setup.products_synced}>
-            Connected &middot; {@setup.product_count} products synced
-          </:summary>
-          <:content>
-            <.printify_step_content
-              setup={@setup}
-              printify_conn={@printify_conn}
-              printify_form={@printify_form}
-              printify_testing={@printify_testing}
-              printify_test_result={@printify_test_result}
-              printify_saving={@printify_saving}
-              sync_status={@sync_status}
-            />
-          </:content>
-        </.setup_step>
-
-        <%!-- Step 2: Stripe --%>
-        <.setup_step
-          step={:stripe}
-          number={2}
-          title="Connect Stripe"
-          active_step={@active_step}
-          done={@setup.stripe_connected}
-          last={false}
-          next_done={@setup.site_live}
-        >
-          <:summary :if={@setup.stripe_connected}>
-            Connected &middot; {@stripe_api_key_hint}
-          </:summary>
-          <:content>
-            <.stripe_step_content
-              stripe_form={@stripe_form}
-              stripe_connecting={@stripe_connecting}
-            />
-          </:content>
-        </.setup_step>
-
-        <%!-- Step 3: Go live --%>
-        <.setup_step
-          step={:go_live}
-          number={3}
-          title="Go live"
-          active_step={@active_step}
-          done={@setup.site_live}
-          last={true}
-          next_done={false}
-        >
-          <:content>
-            <.go_live_step_content setup={@setup} />
-          </:content>
-        </.setup_step>
-      </ol>
-    </div>
-    """
-  end
-
-  attr :step, :atom, required: true
-  attr :number, :integer, required: true
-  attr :title, :string, required: true
-  attr :active_step, :atom, required: true
-  attr :done, :boolean, required: true
-  attr :last, :boolean, required: true
-  attr :next_done, :boolean, required: true
-
-  slot :summary
-  slot :content, required: true
-
-  defp setup_step(assigns) do
-    is_active = assigns.active_step == assigns.step
-    is_clickable = assigns.done
-
-    assigns =
-      assigns
-      |> assign(:is_active, is_active)
-      |> assign(:is_clickable, is_clickable)
-
-    ~H"""
-    <li class="relative pl-10 pb-8 last:pb-0" aria-current={@is_active && "step"}>
-      <%!-- Connector line --%>
-      <div
-        :if={!@last}
-        class={[
-          "absolute left-[0.9375rem] top-8 -bottom-0 w-0.5",
-          if(@done, do: "bg-green-500", else: "bg-base-300")
-        ]}
-        aria-hidden="true"
-      />
-
-      <%!-- Step circle --%>
-      <div class={[
-        "absolute left-0 top-0 flex size-8 items-center justify-center rounded-full text-sm font-semibold ring-4 ring-base-100",
-        cond do
-          @done -> "bg-green-500 text-white"
-          @is_active -> "bg-base-content text-white"
-          true -> "bg-base-200 text-base-content/40"
-        end
-      ]}>
-        <%= if @done do %>
-          <.icon name="hero-check-mini" class="size-5" />
-        <% else %>
-          {@number}
-        <% end %>
-      </div>
-
-      <%!-- Step header --%>
-      <%= if @is_clickable do %>
-        <button
-          type="button"
-          class="flex w-full items-center gap-2 text-left"
-          phx-click="toggle_step"
-          phx-value-step={@step}
-          aria-expanded={to_string(@is_active)}
-        >
-          <h3 class="text-sm font-semibold text-base-content">{@title}</h3>
-          <.icon
-            name={if @is_active, do: "hero-chevron-up-mini", else: "hero-chevron-down-mini"}
-            class="size-4 text-base-content/40"
-          />
-        </button>
-      <% else %>
-        <h3 class={[
-          "text-sm font-semibold",
-          if(@is_active, do: "text-base-content", else: "text-base-content/40")
-        ]}>
-          {@title}
-        </h3>
-      <% end %>
-
-      <%!-- Collapsed summary for completed steps --%>
-      <p :if={@done and !@is_active and @summary != []} class="text-sm text-base-content/60 mt-0.5">
-        {render_slot(@summary)}
-      </p>
-
-      <%!-- Expanded content --%>
-      <div :if={@is_active} class="mt-3">
-        {render_slot(@content)}
-      </div>
-    </li>
-    """
-  end
-
-  # -- Printify step content --
-
-  attr :setup, :map, required: true
-  attr :printify_conn, :any, required: true
-  attr :printify_form, :any, required: true
-  attr :printify_testing, :boolean, required: true
-  attr :printify_test_result, :any, required: true
-  attr :printify_saving, :boolean, required: true
-  attr :sync_status, :string, required: true
-
-  defp printify_step_content(assigns) do
-    ~H"""
-    <%!-- Not yet connected: show form --%>
-    <div :if={!@setup.printify_connected}>
-      <p class="text-sm text-base-content/60 mb-4">
-        Connect your Printify account to import products.
-        Get an API token from <a
-          href="https://printify.com/app/account/connections"
-          target="_blank"
-          rel="noopener"
-          class="text-base-content underline"
-        >
-          Printify &rarr; Account &rarr; Connections
-        </a>.
-      </p>
-
-      <.form
-        for={@printify_form}
-        phx-change="validate_printify"
-        phx-submit="connect_printify"
-      >
-        <.input
-          field={@printify_form[:api_key]}
-          type="password"
-          label="Printify API token"
-          placeholder="Paste your token here"
-          autocomplete="off"
-        />
-
-        <div class="flex flex-col sm:flex-row gap-2 mt-3">
-          <button
-            type="button"
-            phx-click="test_printify"
-            disabled={@printify_testing}
-            class="inline-flex items-center justify-center gap-1.5 rounded-md bg-base-200 px-3 py-2 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset disabled:opacity-50"
-          >
-            <.icon
-              name={if @printify_testing, do: "hero-arrow-path", else: "hero-signal"}
-              class={if @printify_testing, do: "size-4 animate-spin", else: "size-4"}
-            />
-            {if @printify_testing, do: "Checking...", else: "Check connection"}
-          </button>
-          <.button type="submit" disabled={@printify_saving or @printify_testing}>
-            {if @printify_saving, do: "Connecting...", else: "Connect to Printify"}
-          </.button>
-        </div>
-
-        <.printify_test_feedback :if={@printify_test_result} result={@printify_test_result} />
-      </.form>
-    </div>
-
-    <%!-- Connected, syncing --%>
-    <div
-      :if={@setup.printify_connected and @sync_status == "syncing"}
-      class="flex items-center gap-2 text-sm"
-    >
-      <.icon name="hero-arrow-path" class="size-4 animate-spin text-base-content/40" />
-      <span class="text-base-content/60">Syncing products from Printify...</span>
-    </div>
-
-    <%!-- Connected, sync failed --%>
-    <div :if={@setup.printify_connected and @sync_status == "failed"}>
-      <p class="text-sm text-red-600 mb-2">Product sync failed.</p>
-      <button
-        type="button"
-        phx-click="retry_sync"
-        class="inline-flex items-center gap-1.5 rounded-md bg-base-200 px-3 py-2 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
-      >
-        <.icon name="hero-arrow-path" class="size-4" /> Try again
-      </button>
-    </div>
-
-    <%!-- Connected, synced (shown when user expands a completed step) --%>
-    <div :if={@setup.printify_connected and @setup.products_synced}>
-      <p class="text-sm text-base-content/60">
-        {@setup.product_count} products synced from Printify.
-      </p>
-    </div>
-    """
-  end
-
-  attr :result, :any, required: true
-
-  defp printify_test_feedback(assigns) do
-    ~H"""
-    <div class="mt-2 text-sm">
-      <%= case @result do %>
-        <% {:ok, info} -> %>
-          <span class="text-green-600 flex items-center gap-1">
-            <.icon name="hero-check-circle" class="size-4" /> Connected to {info.shop_name}
-          </span>
-        <% {:error, reason} -> %>
-          <span class="text-red-600 flex items-center gap-1">
-            <.icon name="hero-x-circle" class="size-4" />
-            {format_printify_error(reason)}
-          </span>
-      <% end %>
-    </div>
-    """
-  end
-
-  # -- Stripe step content --
-
-  attr :stripe_form, :any, required: true
-  attr :stripe_connecting, :boolean, required: true
-
-  defp stripe_step_content(assigns) do
-    ~H"""
-    <div>
-      <p class="text-sm text-base-content/60 mb-4">
-        Enter your Stripe secret key to accept payments.
-        Find it in your
-        <a
-          href="https://dashboard.stripe.com/apikeys"
-          target="_blank"
-          rel="noopener"
-          class="text-base-content underline"
-        >
-          Stripe dashboard
-        </a>
-        under Developers &rarr; API keys.
-      </p>
-
-      <.form for={@stripe_form} phx-submit="connect_stripe">
-        <.input
-          field={@stripe_form[:api_key]}
-          type="password"
-          label="Secret key"
-          autocomplete="off"
-          placeholder="sk_test_... or sk_live_..."
-        />
-        <p class="text-xs text-base-content/60 mt-1">
-          Starts with <code>sk_test_</code> or <code>sk_live_</code>. Encrypted at rest.
-        </p>
-        <div class="mt-3">
-          <.button phx-disable-with="Connecting...">
-            {if @stripe_connecting, do: "Connecting...", else: "Connect Stripe"}
-          </.button>
-        </div>
-      </.form>
-    </div>
-    """
-  end
-
-  # -- Go live step content --
-
-  attr :setup, :map, required: true
-
-  defp go_live_step_content(assigns) do
-    ~H"""
-    <div>
-      <p class="text-sm text-base-content/60 mb-4">
-        Your shop is ready. Visitors currently see a "coming soon" page &mdash;
-        hit the button to make it live.
-      </p>
-      <button
-        phx-click="go_live"
-        disabled={!@setup.can_go_live}
-        class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-green-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        <.icon name="hero-rocket-launch" class="size-5" /> Go live
-      </button>
-    </div>
-    """
-  end
-
-  # -- Celebration --
-
-  defp celebration(assigns) do
-    ~H"""
-    <div class="mt-6 rounded-lg border border-green-200 bg-green-50 p-6 text-center">
-      <.icon name="hero-check-badge" class="size-12 mx-auto text-green-600 mb-3" />
-      <h2 class="text-lg font-semibold text-green-900">Your shop is live!</h2>
-      <p class="text-sm text-green-700 mt-1 mb-4">
-        Customers can now browse and buy from your shop.
-      </p>
-      <div class="flex flex-col sm:flex-row gap-2 justify-center">
-        <.link
-          navigate={~p"/"}
-          class="inline-flex items-center justify-center gap-1.5 rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white hover:bg-green-500"
-        >
-          <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> View your shop
-        </.link>
-        <.link
-          navigate={~p"/admin/theme"}
-          class="inline-flex items-center justify-center gap-1.5 rounded-md bg-base-100 px-3 py-2 text-sm font-medium text-base-content ring-1 ring-base-300 ring-inset hover:bg-base-200/50"
-        >
-          <.icon name="hero-paint-brush-mini" class="size-4" /> Customise theme
-        </.link>
-      </div>
-    </div>
-    """
-  end
-
-  # ==========================================================================
-  # Stats components
+  # Components
   # ==========================================================================
 
   attr :label, :string, required: true
@@ -757,31 +163,4 @@ defmodule BerrypodWeb.Admin.Dashboard do
   defp format_date(datetime) do
     Calendar.strftime(datetime, "%d %b %Y")
   end
-
-  defp encrypt_api_key(api_key) do
-    case Berrypod.Vault.encrypt(api_key) do
-      {:ok, encrypted} -> encrypted
-      _ -> nil
-    end
-  end
-
-  defp maybe_add_shop_config(params, {:ok, %{shop_id: shop_id}}) do
-    config = Map.get(params, "config", %{}) |> Map.put("shop_id", to_string(shop_id))
-    Map.put(params, "config", config)
-  end
-
-  defp maybe_add_shop_config(params, _), do: params
-
-  defp maybe_add_name(params, {:ok, %{shop_name: shop_name}}) when is_binary(shop_name) do
-    Map.put_new(params, "name", shop_name)
-  end
-
-  defp maybe_add_name(params, _), do: Map.put_new(params, "name", "Printify")
-
-  defp format_printify_error(:no_api_key), do: "Please enter your API token"
-  defp format_printify_error(:unauthorized), do: "That token doesn't seem to be valid"
-  defp format_printify_error(:timeout), do: "Couldn't reach Printify — try again"
-  defp format_printify_error({:http_error, _code}), do: "Something went wrong — try again"
-  defp format_printify_error(error) when is_binary(error), do: error
-  defp format_printify_error(_), do: "Connection failed — check your token and try again"
 end
diff --git a/lib/berrypod_web/live/admin/product_show.ex b/lib/berrypod_web/live/admin/product_show.ex
index 3674e31..0a8d555 100644
--- a/lib/berrypod_web/live/admin/product_show.ex
+++ b/lib/berrypod_web/live/admin/product_show.ex
@@ -203,7 +203,7 @@ defmodule BerrypodWeb.Admin.ProductShow do
               placeholder="e.g. Apparel"
             />
           </label>
-          <.button type="submit" class="admin-btn-sm admin-btn-primary">Save</.button>
+          <.button type="submit" variant="primary" class="admin-btn-sm">Save</.button>
         </.form>
       </div>
     </div>
diff --git a/lib/berrypod_web/live/admin/providers/index.html.heex b/lib/berrypod_web/live/admin/providers/index.html.heex
index e11d983..2e05d30 100644
--- a/lib/berrypod_web/live/admin/providers/index.html.heex
+++ b/lib/berrypod_web/live/admin/providers/index.html.heex
@@ -29,7 +29,7 @@
       <.button navigate={~p"/admin/providers/new?type=printify"}>
         Connect Printify
       </.button>
-      <.button navigate={~p"/admin/providers/new?type=printful"} class="admin-btn-outline">
+      <.button navigate={~p"/admin/providers/new?type=printful"} variant="outline">
         Connect Printful
       </.button>
     </div>
diff --git a/lib/berrypod_web/live/admin/setup.ex b/lib/berrypod_web/live/admin/setup.ex
new file mode 100644
index 0000000..ff7d96f
--- /dev/null
+++ b/lib/berrypod_web/live/admin/setup.ex
@@ -0,0 +1,660 @@
+defmodule BerrypodWeb.Admin.Setup do
+  use BerrypodWeb, :live_view
+
+  alias Berrypod.{Products, Settings, Setup}
+  alias Berrypod.Products.ProviderConnection
+  alias Berrypod.Providers
+  alias Berrypod.Stripe.Setup, as: StripeSetup
+
+  @impl true
+  def mount(_params, _session, socket) do
+    if Settings.site_live?() do
+      {:ok, push_navigate(socket, to: ~p"/admin")}
+    else
+      status = Setup.setup_status()
+      conn = Products.get_provider_connection_by_type("printify")
+
+      if conn && connected?(socket) do
+        Phoenix.PubSub.subscribe(Berrypod.PubSub, "sync:#{conn.id}")
+      end
+
+      active_step = determine_active_step(status)
+
+      {:ok,
+       socket
+       |> assign(:page_title, "Get started")
+       |> assign(:setup, status)
+       |> assign(:active_step, active_step)
+       # Printify state
+       |> assign(:printify_conn, conn)
+       |> assign(:printify_form, to_form(%{"api_key" => ""}, as: :printify))
+       |> assign(:printify_testing, false)
+       |> assign(:printify_test_result, nil)
+       |> assign(:printify_saving, false)
+       |> assign(:pending_api_key, nil)
+       |> assign(:sync_status, conn && conn.sync_status)
+       # Stripe state
+       |> assign(:stripe_form, to_form(%{"api_key" => ""}, as: :stripe))
+       |> assign(:stripe_connecting, false)
+       |> assign(:stripe_api_key_hint, Settings.secret_hint("stripe_api_key"))
+       # Celebration
+       |> assign(:just_went_live, false)}
+    end
+  end
+
+  # -- Step determination --
+
+  defp determine_active_step(status) do
+    cond do
+      !status.printify_connected -> :printify
+      !status.products_synced -> :printify
+      !status.stripe_connected -> :stripe
+      !status.site_live -> :go_live
+      true -> :complete
+    end
+  end
+
+  # -- Events: Printify --
+
+  @impl true
+  def handle_event("validate_printify", %{"printify" => params}, socket) do
+    {:noreply, assign(socket, pending_api_key: params["api_key"])}
+  end
+
+  def handle_event("test_printify", _params, socket) do
+    api_key = socket.assigns.pending_api_key
+
+    if api_key in [nil, ""] do
+      {:noreply, assign(socket, printify_test_result: {:error, :no_api_key})}
+    else
+      socket = assign(socket, printify_testing: true, printify_test_result: nil)
+
+      temp_conn = %ProviderConnection{
+        provider_type: "printify",
+        api_key_encrypted: encrypt_api_key(api_key)
+      }
+
+      result = Providers.test_connection(temp_conn)
+
+      {:noreply, assign(socket, printify_testing: false, printify_test_result: result)}
+    end
+  end
+
+  def handle_event("connect_printify", %{"printify" => %{"api_key" => api_key}}, socket) do
+    if api_key == "" do
+      {:noreply, put_flash(socket, :error, "Please enter your Printify API token")}
+    else
+      socket = assign(socket, printify_saving: true)
+
+      params =
+        %{"api_key" => api_key, "provider_type" => "printify"}
+        |> maybe_add_shop_config(socket.assigns.printify_test_result)
+        |> maybe_add_name(socket.assigns.printify_test_result)
+
+      case Products.create_provider_connection(params) do
+        {:ok, connection} ->
+          Products.enqueue_sync(connection)
+
+          if connected?(socket) do
+            Phoenix.PubSub.subscribe(Berrypod.PubSub, "sync:#{connection.id}")
+          end
+
+          status = %{socket.assigns.setup | printify_connected: true}
+
+          {:noreply,
+           socket
+           |> assign(:printify_saving, false)
+           |> assign(:printify_conn, connection)
+           |> assign(:sync_status, "syncing")
+           |> assign(:setup, status)
+           |> put_flash(:info, "Connected to Printify! Syncing products...")}
+
+        {:error, _changeset} ->
+          {:noreply,
+           socket
+           |> assign(:printify_saving, false)
+           |> put_flash(:error, "Failed to save connection")}
+      end
+    end
+  end
+
+  def handle_event("retry_sync", _params, socket) do
+    conn = socket.assigns.printify_conn
+
+    if conn do
+      Products.enqueue_sync(conn)
+      {:noreply, assign(socket, sync_status: "syncing")}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  # -- Events: Stripe --
+
+  def handle_event("connect_stripe", %{"stripe" => %{"api_key" => api_key}}, socket) do
+    if api_key == "" do
+      {:noreply, put_flash(socket, :error, "Please enter your Stripe secret key")}
+    else
+      socket = assign(socket, stripe_connecting: true)
+
+      case StripeSetup.connect(api_key) do
+        {:ok, _result} ->
+          status = %{socket.assigns.setup | stripe_connected: true, can_go_live: true}
+
+          {:noreply,
+           socket
+           |> assign(:stripe_connecting, false)
+           |> assign(:setup, status)
+           |> assign(:stripe_api_key_hint, Settings.secret_hint("stripe_api_key"))
+           |> assign(:active_step, :go_live)
+           |> put_flash(:info, "Stripe connected")}
+
+        {:error, message} ->
+          {:noreply,
+           socket
+           |> assign(:stripe_connecting, false)
+           |> put_flash(:error, "Stripe connection failed: #{message}")}
+      end
+    end
+  end
+
+  # -- Events: Go live --
+
+  def handle_event("go_live", _params, socket) do
+    {:ok, _} = Settings.set_site_live(true)
+    status = %{socket.assigns.setup | site_live: true}
+
+    {:noreply,
+     socket
+     |> assign(:setup, status)
+     |> assign(:just_went_live, true)}
+  end
+
+  # -- Events: Step navigation --
+
+  def handle_event("toggle_step", %{"step" => step}, socket) do
+    step = String.to_existing_atom(step)
+
+    new_active =
+      if socket.assigns.active_step == step do
+        determine_active_step(socket.assigns.setup)
+      else
+        step
+      end
+
+    {:noreply, assign(socket, active_step: new_active)}
+  end
+
+  # -- PubSub: Sync progress --
+
+  @impl true
+  def handle_info({:sync_status, "completed", product_count}, socket) do
+    status = %{
+      socket.assigns.setup
+      | products_synced: true,
+        product_count: product_count
+    }
+
+    active_step = if status.stripe_connected, do: :go_live, else: :stripe
+
+    {:noreply,
+     socket
+     |> assign(:setup, status)
+     |> assign(:sync_status, "completed")
+     |> assign(:active_step, active_step)
+     |> put_flash(:info, "#{product_count} products synced")}
+  end
+
+  def handle_info({:sync_status, "failed"}, socket) do
+    {:noreply,
+     socket
+     |> assign(:sync_status, "failed")
+     |> put_flash(:error, "Product sync failed — try again")}
+  end
+
+  def handle_info({:sync_status, status}, socket) do
+    {:noreply, assign(socket, sync_status: status)}
+  end
+
+  # -- Render --
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.header>
+      Get started
+    </.header>
+
+    <%!-- Celebration state --%>
+    <.celebration :if={@just_went_live} />
+
+    <%!-- Setup stepper --%>
+    <.setup_stepper
+      :if={!@just_went_live}
+      setup={@setup}
+      active_step={@active_step}
+      printify_conn={@printify_conn}
+      printify_form={@printify_form}
+      printify_testing={@printify_testing}
+      printify_test_result={@printify_test_result}
+      printify_saving={@printify_saving}
+      sync_status={@sync_status}
+      stripe_form={@stripe_form}
+      stripe_connecting={@stripe_connecting}
+      stripe_api_key_hint={@stripe_api_key_hint}
+    />
+    """
+  end
+
+  # ==========================================================================
+  # Setup stepper components
+  # ==========================================================================
+
+  attr :setup, :map, required: true
+  attr :active_step, :atom, required: true
+  attr :printify_conn, :any, required: true
+  attr :printify_form, :any, required: true
+  attr :printify_testing, :boolean, required: true
+  attr :printify_test_result, :any, required: true
+  attr :printify_saving, :boolean, required: true
+  attr :sync_status, :string, required: true
+  attr :stripe_form, :any, required: true
+  attr :stripe_connecting, :boolean, required: true
+  attr :stripe_api_key_hint, :string, required: true
+
+  defp setup_stepper(assigns) do
+    ~H"""
+    <div class="mt-6">
+      <ol class="relative" aria-label="Setup steps">
+        <%!-- Step 1: Printify --%>
+        <.setup_step
+          step={:printify}
+          number={1}
+          title="Connect to Printify"
+          active_step={@active_step}
+          done={@setup.printify_connected and @setup.products_synced}
+          last={false}
+          next_done={@setup.stripe_connected}
+        >
+          <:summary :if={@setup.printify_connected and @setup.products_synced}>
+            Connected &middot; {@setup.product_count} products synced
+          </:summary>
+          <:content>
+            <.printify_step_content
+              setup={@setup}
+              printify_conn={@printify_conn}
+              printify_form={@printify_form}
+              printify_testing={@printify_testing}
+              printify_test_result={@printify_test_result}
+              printify_saving={@printify_saving}
+              sync_status={@sync_status}
+            />
+          </:content>
+        </.setup_step>
+
+        <%!-- Step 2: Stripe --%>
+        <.setup_step
+          step={:stripe}
+          number={2}
+          title="Connect Stripe"
+          active_step={@active_step}
+          done={@setup.stripe_connected}
+          last={false}
+          next_done={@setup.site_live}
+        >
+          <:summary :if={@setup.stripe_connected}>
+            Connected &middot; {@stripe_api_key_hint}
+          </:summary>
+          <:content>
+            <.stripe_step_content
+              stripe_form={@stripe_form}
+              stripe_connecting={@stripe_connecting}
+            />
+          </:content>
+        </.setup_step>
+
+        <%!-- Step 3: Go live --%>
+        <.setup_step
+          step={:go_live}
+          number={3}
+          title="Go live"
+          active_step={@active_step}
+          done={@setup.site_live}
+          last={true}
+          next_done={false}
+        >
+          <:content>
+            <.go_live_step_content setup={@setup} />
+          </:content>
+        </.setup_step>
+      </ol>
+    </div>
+    """
+  end
+
+  attr :step, :atom, required: true
+  attr :number, :integer, required: true
+  attr :title, :string, required: true
+  attr :active_step, :atom, required: true
+  attr :done, :boolean, required: true
+  attr :last, :boolean, required: true
+  attr :next_done, :boolean, required: true
+
+  slot :summary
+  slot :content, required: true
+
+  defp setup_step(assigns) do
+    is_active = assigns.active_step == assigns.step
+    is_clickable = assigns.done
+
+    assigns =
+      assigns
+      |> assign(:is_active, is_active)
+      |> assign(:is_clickable, is_clickable)
+
+    ~H"""
+    <li class="relative pl-10 pb-8 last:pb-0" aria-current={@is_active && "step"}>
+      <%!-- Connector line --%>
+      <div
+        :if={!@last}
+        class={[
+          "absolute left-[0.9375rem] top-8 -bottom-0 w-0.5",
+          if(@done, do: "bg-green-500", else: "bg-base-300")
+        ]}
+        aria-hidden="true"
+      />
+
+      <%!-- Step circle --%>
+      <div class={[
+        "absolute left-0 top-0 flex size-8 items-center justify-center rounded-full text-sm font-semibold ring-4 ring-base-100",
+        cond do
+          @done -> "bg-green-500 text-white"
+          @is_active -> "bg-base-content text-white"
+          true -> "bg-base-200 text-base-content/40"
+        end
+      ]}>
+        <%= if @done do %>
+          <.icon name="hero-check-mini" class="size-5" />
+        <% else %>
+          {@number}
+        <% end %>
+      </div>
+
+      <%!-- Step header --%>
+      <%= if @is_clickable do %>
+        <button
+          type="button"
+          class="flex w-full items-center gap-2 text-left"
+          phx-click="toggle_step"
+          phx-value-step={@step}
+          aria-expanded={to_string(@is_active)}
+        >
+          <h3 class="text-sm font-semibold text-base-content">{@title}</h3>
+          <.icon
+            name={if @is_active, do: "hero-chevron-up-mini", else: "hero-chevron-down-mini"}
+            class="size-4 text-base-content/40"
+          />
+        </button>
+      <% else %>
+        <h3 class={[
+          "text-sm font-semibold",
+          if(@is_active, do: "text-base-content", else: "text-base-content/40")
+        ]}>
+          {@title}
+        </h3>
+      <% end %>
+
+      <%!-- Collapsed summary for completed steps --%>
+      <p :if={@done and !@is_active and @summary != []} class="text-sm text-base-content/60 mt-0.5">
+        {render_slot(@summary)}
+      </p>
+
+      <%!-- Expanded content --%>
+      <div :if={@is_active} class="mt-3">
+        {render_slot(@content)}
+      </div>
+    </li>
+    """
+  end
+
+  # -- Printify step content --
+
+  attr :setup, :map, required: true
+  attr :printify_conn, :any, required: true
+  attr :printify_form, :any, required: true
+  attr :printify_testing, :boolean, required: true
+  attr :printify_test_result, :any, required: true
+  attr :printify_saving, :boolean, required: true
+  attr :sync_status, :string, required: true
+
+  defp printify_step_content(assigns) do
+    ~H"""
+    <%!-- Not yet connected: show form --%>
+    <div :if={!@setup.printify_connected}>
+      <p class="text-sm text-base-content/60 mb-4">
+        Connect your Printify account to import products.
+        Get an API token from <a
+          href="https://printify.com/app/account/connections"
+          target="_blank"
+          rel="noopener"
+          class="text-base-content underline"
+        >
+          Printify &rarr; Account &rarr; Connections
+        </a>.
+      </p>
+
+      <.form
+        for={@printify_form}
+        phx-change="validate_printify"
+        phx-submit="connect_printify"
+      >
+        <.input
+          field={@printify_form[:api_key]}
+          type="password"
+          label="Printify API token"
+          placeholder="Paste your token here"
+          autocomplete="off"
+        />
+
+        <div class="flex flex-col sm:flex-row gap-2 mt-3">
+          <button
+            type="button"
+            phx-click="test_printify"
+            disabled={@printify_testing}
+            class="inline-flex items-center justify-center gap-1.5 rounded-md bg-base-200 px-3 py-2 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset disabled:opacity-50"
+          >
+            <.icon
+              name={if @printify_testing, do: "hero-arrow-path", else: "hero-signal"}
+              class={if @printify_testing, do: "size-4 animate-spin", else: "size-4"}
+            />
+            {if @printify_testing, do: "Checking...", else: "Check connection"}
+          </button>
+          <.button type="submit" disabled={@printify_saving or @printify_testing}>
+            {if @printify_saving, do: "Connecting...", else: "Connect to Printify"}
+          </.button>
+        </div>
+
+        <.printify_test_feedback :if={@printify_test_result} result={@printify_test_result} />
+      </.form>
+    </div>
+
+    <%!-- Connected, syncing --%>
+    <div
+      :if={@setup.printify_connected and @sync_status == "syncing"}
+      class="flex items-center gap-2 text-sm"
+    >
+      <.icon name="hero-arrow-path" class="size-4 animate-spin text-base-content/40" />
+      <span class="text-base-content/60">Syncing products from Printify...</span>
+    </div>
+
+    <%!-- Connected, sync failed --%>
+    <div :if={@setup.printify_connected and @sync_status == "failed"}>
+      <p class="text-sm text-red-600 mb-2">Product sync failed.</p>
+      <button
+        type="button"
+        phx-click="retry_sync"
+        class="inline-flex items-center gap-1.5 rounded-md bg-base-200 px-3 py-2 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
+      >
+        <.icon name="hero-arrow-path" class="size-4" /> Try again
+      </button>
+    </div>
+
+    <%!-- Connected, synced (shown when user expands a completed step) --%>
+    <div :if={@setup.printify_connected and @setup.products_synced}>
+      <p class="text-sm text-base-content/60">
+        {@setup.product_count} products synced from Printify.
+      </p>
+    </div>
+    """
+  end
+
+  attr :result, :any, required: true
+
+  defp printify_test_feedback(assigns) do
+    ~H"""
+    <div class="mt-2 text-sm">
+      <%= case @result do %>
+        <% {:ok, info} -> %>
+          <span class="text-green-600 flex items-center gap-1">
+            <.icon name="hero-check-circle" class="size-4" /> Connected to {info.shop_name}
+          </span>
+        <% {:error, reason} -> %>
+          <span class="text-red-600 flex items-center gap-1">
+            <.icon name="hero-x-circle" class="size-4" />
+            {format_printify_error(reason)}
+          </span>
+      <% end %>
+    </div>
+    """
+  end
+
+  # -- Stripe step content --
+
+  attr :stripe_form, :any, required: true
+  attr :stripe_connecting, :boolean, required: true
+
+  defp stripe_step_content(assigns) do
+    ~H"""
+    <div>
+      <p class="text-sm text-base-content/60 mb-4">
+        Enter your Stripe secret key to accept payments.
+        Find it in your
+        <a
+          href="https://dashboard.stripe.com/apikeys"
+          target="_blank"
+          rel="noopener"
+          class="text-base-content underline"
+        >
+          Stripe dashboard
+        </a>
+        under Developers &rarr; API keys.
+      </p>
+
+      <.form for={@stripe_form} phx-submit="connect_stripe">
+        <.input
+          field={@stripe_form[:api_key]}
+          type="password"
+          label="Secret key"
+          autocomplete="off"
+          placeholder="sk_test_... or sk_live_..."
+        />
+        <p class="text-xs text-base-content/60 mt-1">
+          Starts with <code>sk_test_</code> or <code>sk_live_</code>. Encrypted at rest.
+        </p>
+        <div class="mt-3">
+          <.button phx-disable-with="Connecting...">
+            {if @stripe_connecting, do: "Connecting...", else: "Connect Stripe"}
+          </.button>
+        </div>
+      </.form>
+    </div>
+    """
+  end
+
+  # -- Go live step content --
+
+  attr :setup, :map, required: true
+
+  defp go_live_step_content(assigns) do
+    ~H"""
+    <div>
+      <p class="text-sm text-base-content/60 mb-4">
+        Your shop is ready. Visitors currently see a "coming soon" page &mdash;
+        hit the button to make it live.
+      </p>
+      <button
+        phx-click="go_live"
+        disabled={!@setup.can_go_live}
+        class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-green-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <.icon name="hero-rocket-launch" class="size-5" /> Go live
+      </button>
+    </div>
+    """
+  end
+
+  # -- Celebration --
+
+  defp celebration(assigns) do
+    ~H"""
+    <div class="mt-6 rounded-lg border border-green-200 bg-green-50 p-6 text-center">
+      <.icon name="hero-check-badge" class="size-12 mx-auto text-green-600 mb-3" />
+      <h2 class="text-lg font-semibold text-green-900">Your shop is live!</h2>
+      <p class="text-sm text-green-700 mt-1 mb-4">
+        Customers can now browse and buy from your shop.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-2 justify-center">
+        <.link
+          navigate={~p"/admin"}
+          class="inline-flex items-center justify-center gap-1.5 rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white hover:bg-green-500"
+        >
+          <.icon name="hero-home-mini" class="size-4" /> Go to dashboard
+        </.link>
+        <.link
+          navigate={~p"/"}
+          class="inline-flex items-center justify-center gap-1.5 rounded-md bg-base-100 px-3 py-2 text-sm font-medium text-base-content ring-1 ring-base-300 ring-inset hover:bg-base-200/50"
+        >
+          <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> View your shop
+        </.link>
+        <.link
+          navigate={~p"/admin/theme"}
+          class="inline-flex items-center justify-center gap-1.5 rounded-md bg-base-100 px-3 py-2 text-sm font-medium text-base-content ring-1 ring-base-300 ring-inset hover:bg-base-200/50"
+        >
+          <.icon name="hero-paint-brush-mini" class="size-4" /> Customise theme
+        </.link>
+      </div>
+    </div>
+    """
+  end
+
+  # ==========================================================================
+  # Helpers
+  # ==========================================================================
+
+  defp encrypt_api_key(api_key) do
+    case Berrypod.Vault.encrypt(api_key) do
+      {:ok, encrypted} -> encrypted
+      _ -> nil
+    end
+  end
+
+  defp maybe_add_shop_config(params, {:ok, %{shop_id: shop_id}}) do
+    config = Map.get(params, "config", %{}) |> Map.put("shop_id", to_string(shop_id))
+    Map.put(params, "config", config)
+  end
+
+  defp maybe_add_shop_config(params, _), do: params
+
+  defp maybe_add_name(params, {:ok, %{shop_name: shop_name}}) when is_binary(shop_name) do
+    Map.put_new(params, "name", shop_name)
+  end
+
+  defp maybe_add_name(params, _), do: Map.put_new(params, "name", "Printify")
+
+  defp format_printify_error(:no_api_key), do: "Please enter your API token"
+  defp format_printify_error(:unauthorized), do: "That token doesn't seem to be valid"
+  defp format_printify_error(:timeout), do: "Couldn't reach Printify — try again"
+  defp format_printify_error({:http_error, _code}), do: "Something went wrong — try again"
+  defp format_printify_error(error) when is_binary(error), do: error
+  defp format_printify_error(_), do: "Connection failed — check your token and try again"
+end
diff --git a/lib/berrypod_web/live/auth/confirmation.ex b/lib/berrypod_web/live/auth/confirmation.ex
index cd84d71..9e7043b 100644
--- a/lib/berrypod_web/live/auth/confirmation.ex
+++ b/lib/berrypod_web/live/auth/confirmation.ex
@@ -26,11 +26,12 @@ defmodule BerrypodWeb.Auth.Confirmation do
             name={@form[:remember_me].name}
             value="true"
             phx-disable-with="Confirming..."
-            class="admin-btn-primary w-full"
+            variant="primary"
+            class="w-full"
           >
             Confirm and stay logged in
           </.button>
-          <.button phx-disable-with="Confirming..." class="admin-btn-soft w-full mt-2">
+          <.button phx-disable-with="Confirming..." class="w-full mt-2">
             Confirm and log in only this time
           </.button>
         </.form>
@@ -46,7 +47,7 @@ defmodule BerrypodWeb.Auth.Confirmation do
         >
           <input type="hidden" name={@form[:token].name} value={@form[:token].value} />
           <%= if @current_scope do %>
-            <.button phx-disable-with="Logging in..." class="admin-btn-primary w-full">
+            <.button phx-disable-with="Logging in..." variant="primary" class="w-full">
               Log in
             </.button>
           <% else %>
@@ -54,11 +55,12 @@ defmodule BerrypodWeb.Auth.Confirmation do
               name={@form[:remember_me].name}
               value="true"
               phx-disable-with="Logging in..."
-              class="admin-btn-primary w-full"
+              variant="primary"
+              class="w-full"
             >
               Keep me logged in on this device
             </.button>
-            <.button phx-disable-with="Logging in..." class="admin-btn-soft w-full mt-2">
+            <.button phx-disable-with="Logging in..." class="w-full mt-2">
               Log me in only this time
             </.button>
           <% end %>
diff --git a/lib/berrypod_web/live/auth/login.ex b/lib/berrypod_web/live/auth/login.ex
index 2b4843a..aee388d 100644
--- a/lib/berrypod_web/live/auth/login.ex
+++ b/lib/berrypod_web/live/auth/login.ex
@@ -51,7 +51,7 @@ defmodule BerrypodWeb.Auth.Login do
             required
             phx-mounted={JS.focus()}
           />
-          <.button class="admin-btn-primary w-full">
+          <.button variant="primary" class="w-full">
             Log in with email <span aria-hidden="true">→</span>
           </.button>
         </.form>
@@ -80,10 +80,10 @@ defmodule BerrypodWeb.Auth.Login do
             label="Password"
             autocomplete="current-password"
           />
-          <.button class="admin-btn-primary w-full" name={@form[:remember_me].name} value="true">
+          <.button variant="primary" class="w-full" name={@form[:remember_me].name} value="true">
             Log in and stay logged in <span aria-hidden="true">→</span>
           </.button>
-          <.button class="admin-btn-soft w-full mt-2">
+          <.button class="w-full mt-2">
             Log in only this time
           </.button>
         </.form>
diff --git a/lib/berrypod_web/live/auth/registration.ex b/lib/berrypod_web/live/auth/registration.ex
index a212d76..f4137b9 100644
--- a/lib/berrypod_web/live/auth/registration.ex
+++ b/lib/berrypod_web/live/auth/registration.ex
@@ -32,7 +32,7 @@ defmodule BerrypodWeb.Auth.Registration do
             phx-mounted={JS.focus()}
           />
 
-          <.button phx-disable-with="Creating account..." class="admin-btn-primary w-full">
+          <.button phx-disable-with="Creating account..." variant="primary" class="w-full">
             Create an account
           </.button>
         </.form>
diff --git a/lib/berrypod_web/router.ex b/lib/berrypod_web/router.ex
index 8cd0803..497a4e2 100644
--- a/lib/berrypod_web/router.ex
+++ b/lib/berrypod_web/router.ex
@@ -153,6 +153,7 @@ defmodule BerrypodWeb.Router do
         {BerrypodWeb.AdminLayoutHook, :assign_current_path}
       ] do
       live "/", Admin.Dashboard, :index
+      live "/setup", Admin.Setup, :index
       live "/orders", Admin.Orders, :index
       live "/orders/:id", Admin.OrderShow, :show
       live "/products", Admin.Products, :index
diff --git a/lib/berrypod_web/user_auth.ex b/lib/berrypod_web/user_auth.ex
index 1bbd156..2d8101a 100644
--- a/lib/berrypod_web/user_auth.ex
+++ b/lib/berrypod_web/user_auth.ex
@@ -257,8 +257,9 @@ defmodule BerrypodWeb.UserAuth do
   end
 
   @doc "Returns the path to redirect to after log in."
-  # Single-tenant: every user is the admin, always go to dashboard
-  def signed_in_path(_), do: ~p"/admin"
+  def signed_in_path(_) do
+    if Berrypod.Settings.site_live?(), do: ~p"/admin", else: ~p"/admin/setup"
+  end
 
   @doc """
   Plug for routes that require the user to be authenticated.
diff --git a/priv/static/demo.html b/priv/static/demo.html
deleted file mode 100644
index ec53e69..0000000
--- a/priv/static/demo.html
+++ /dev/null
@@ -1,6278 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Berrypod Theme Studio v28</title>
-  
-  <!-- Google Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&family=Nunito:wght@400;600;700&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600&family=Outfit:wght@300;400;500;600&family=Source+Sans+3:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
-  
-  <style>
-    /* ========================================
-       LAYER 1: PRIMITIVES
-       ======================================== */
-    :root {
-      --p-space-1: 0.25rem;
-      --p-space-2: 0.5rem;
-      --p-space-3: 0.75rem;
-      --p-space-4: 1rem;
-      --p-space-6: 1.5rem;
-      --p-space-8: 2rem;
-      --p-space-12: 3rem;
-      --p-space-16: 4rem;
-      --p-space-24: 6rem;
-      
-      --p-radius-none: 0;
-      --p-radius-sm: 0.25rem;
-      --p-radius-md: 0.5rem;
-      --p-radius-lg: 0.75rem;
-      --p-radius-xl: 1rem;
-      --p-radius-full: 9999px;
-      
-      --p-font-inter: 'Inter', system-ui, sans-serif;
-      --p-font-fraunces: 'Fraunces', serif;
-      --p-font-source: 'Source Sans 3', system-ui, sans-serif;
-      --p-font-space: 'Space Grotesk', system-ui, sans-serif;
-      --p-font-baskerville: 'Libre Baskerville', Georgia, serif;
-      --p-font-nunito: 'Nunito', system-ui, sans-serif;
-      --p-font-outfit: 'Outfit', system-ui, sans-serif;
-      --p-font-avenir: 'Nunito Sans', 'Avenir Next', 'Avenir', system-ui, sans-serif;
-      
-      --p-text-xs: 0.75rem;
-      --p-text-sm: 0.875rem;
-      --p-text-base: 1rem;
-      --p-text-lg: 1.125rem;
-      --p-text-xl: 1.25rem;
-      --p-text-2xl: 1.5rem;
-      --p-text-3xl: 1.875rem;
-      --p-text-4xl: 2.25rem;
-      
-      --p-duration-fast: 0.1s;
-      --p-duration-normal: 0.2s;
-      --p-duration-slow: 0.35s;
-      
-      --p-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-      --p-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
-      
-      --p-shadow-color: 0 0% 0%;
-      --p-shadow-strength: 0.06;
-    }
-    
-    /* ========================================
-       LAYER 2: THEME TOKENS
-       ======================================== */
-    
-    .preview-frame {
-      --t-surface-base: #ffffff;
-      --t-surface-raised: #ffffff;
-      --t-surface-sunken: #f5f5f5;
-      --t-surface-overlay: rgba(255, 255, 255, 0.95);
-      --t-text-primary: #171717;
-      --t-text-secondary: #525252;
-      --t-text-tertiary: #a3a3a3;
-      --t-text-inverse: #ffffff;
-      --t-border-default: #e5e5e5;
-      --t-border-subtle: #f0f0f0;
-    }
-    
-    .preview-frame[data-mood="warm"] {
-      --t-surface-base: #fdf8f3;
-      --t-surface-raised: #fffcf8;
-      --t-surface-sunken: #f5ebe0;
-      --t-text-primary: #1c1917;
-      --t-text-secondary: #57534e;
-      --t-text-tertiary: #a8a29e;
-      --t-border-default: #e7e0d8;
-      --t-border-subtle: #f0ebe4;
-    }
-    
-    .preview-frame[data-mood="cool"] {
-      --t-surface-base: #f4f7fb;
-      --t-surface-raised: #f8fafc;
-      --t-surface-sunken: #e8eff7;
-      --t-text-primary: #0f172a;
-      --t-text-secondary: #475569;
-      --t-text-tertiary: #94a3b8;
-      --t-border-default: #d4dce8;
-      --t-border-subtle: #e8eff5;
-    }
-    
-    .preview-frame[data-mood="dark"] {
-      --t-surface-base: #0a0a0a;
-      --t-surface-raised: #171717;
-      --t-surface-sunken: #000000;
-      --t-surface-overlay: rgba(23, 23, 23, 0.95);
-      --t-text-primary: #fafafa;
-      --t-text-secondary: #a3a3a3;
-      --t-text-tertiary: #737373;
-      --t-text-inverse: #171717;
-      --t-border-default: #262626;
-      --t-border-subtle: #1c1c1c;
-      --p-shadow-strength: 0.25;
-    }
-    
-    /* Typography */
-    .preview-frame {
-      --t-font-heading: var(--p-font-inter);
-      --t-font-body: var(--p-font-inter);
-      --t-heading-weight: 600;
-      --t-heading-tracking: -0.025em;
-    }
-    
-    .preview-frame[data-typography="editorial"] {
-      --t-font-heading: var(--p-font-fraunces);
-      --t-font-body: var(--p-font-source);
-      --t-heading-weight: 600;
-      --t-heading-tracking: -0.02em;
-    }
-    
-    .preview-frame[data-typography="modern"] {
-      --t-font-heading: var(--p-font-space);
-      --t-font-body: var(--p-font-space);
-      --t-heading-weight: 500;
-      --t-heading-tracking: -0.03em;
-    }
-    
-    .preview-frame[data-typography="classic"] {
-      --t-font-heading: var(--p-font-baskerville);
-      --t-font-body: var(--p-font-source);
-      --t-heading-weight: 400;
-      --t-heading-tracking: 0;
-    }
-    
-    .preview-frame[data-typography="friendly"] {
-      --t-font-heading: var(--p-font-nunito);
-      --t-font-body: var(--p-font-nunito);
-      --t-heading-weight: 700;
-      --t-heading-tracking: -0.01em;
-    }
-    
-    .preview-frame[data-typography="minimal"] {
-      --t-font-heading: var(--p-font-outfit);
-      --t-font-body: var(--p-font-outfit);
-      --t-heading-weight: 300;
-      --t-heading-tracking: 0;
-    }
-    
-    .preview-frame[data-typography="impulse"] {
-      --t-font-heading: var(--p-font-avenir);
-      --t-font-body: var(--p-font-avenir);
-      --t-heading-weight: 300;
-      --t-heading-tracking: 0.02em;
-    }
-    
-    /* Shape */
-    .preview-frame {
-      --t-radius-sm: var(--p-radius-sm);
-      --t-radius-md: var(--p-radius-md);
-      --t-radius-lg: var(--p-radius-lg);
-      --t-radius-button: var(--p-radius-md);
-      --t-radius-card: var(--p-radius-lg);
-      --t-radius-input: var(--p-radius-md);
-      --t-radius-image: var(--p-radius-md);
-    }
-    
-    .preview-frame[data-shape="sharp"] {
-      --t-radius-sm: 0;
-      --t-radius-md: 0;
-      --t-radius-lg: 0;
-      --t-radius-button: 0;
-      --t-radius-card: 0;
-      --t-radius-input: 0;
-      --t-radius-image: 0;
-    }
-    
-    .preview-frame[data-shape="round"] {
-      --t-radius-sm: var(--p-radius-md);
-      --t-radius-md: var(--p-radius-lg);
-      --t-radius-lg: var(--p-radius-xl);
-      --t-radius-button: var(--p-radius-lg);
-      --t-radius-card: var(--p-radius-xl);
-      --t-radius-input: var(--p-radius-lg);
-      --t-radius-image: var(--p-radius-lg);
-    }
-    
-    .preview-frame[data-shape="pill"] {
-      --t-radius-sm: var(--p-radius-full);
-      --t-radius-md: var(--p-radius-full);
-      --t-radius-lg: var(--p-radius-xl);
-      --t-radius-button: var(--p-radius-full);
-      --t-radius-card: var(--p-radius-xl);
-      --t-radius-input: var(--p-radius-full);
-      --t-radius-image: var(--p-radius-lg);
-    }
-    
-    /* Density */
-    .preview-frame {
-      --t-density: 1;
-    }
-    
-    .preview-frame[data-density="spacious"] {
-      --t-density: 1.25;
-    }
-    
-    .preview-frame[data-density="compact"] {
-      --t-density: 0.85;
-    }
-    
-    /* ========================================
-       LAYER 3: SEMANTIC TOKENS
-       ======================================== */
-    
-    .preview-frame {
-      --t-accent-h: 24;
-      --t-accent-s: 95%;
-      --t-accent-l: 53%;
-      
-      --t-accent: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
-      --t-accent-hover: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 8%));
-      --t-accent-subtle: hsl(var(--t-accent-h) 40% 95%);
-      --t-accent-ring: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.4);
-      
-      --t-secondary-accent: #ea580c;
-      --t-sale-color: #dc2626;
-      
-      --t-font-size-scale: 1;
-      --t-heading-weight: 600;
-      
-      --t-layout-max-width: 1400px;
-      --t-button-style: filled;
-      --t-card-shadow: none;
-      --t-product-text-align: left;
-      
-      --color-page: var(--t-surface-base);
-      --color-card: var(--t-surface-raised);
-      --color-input: var(--t-surface-raised);
-      
-      --color-heading: var(--t-text-primary);
-      --color-body: var(--t-text-secondary);
-      --color-caption: var(--t-text-tertiary);
-      
-      --color-button-primary: var(--t-accent);
-      --color-button-primary-hover: var(--t-secondary-accent);
-      --color-button-primary-text: var(--t-text-inverse);
-      
-      --color-border: var(--t-border-default);
-      
-      --font-heading: var(--t-font-heading);
-      --font-body: var(--t-font-body);
-      --weight-heading: var(--t-heading-weight);
-      --tracking-heading: var(--t-heading-tracking);
-      
-      --space-xs: calc(var(--p-space-2) * var(--t-density));
-      --space-sm: calc(var(--p-space-3) * var(--t-density));
-      --space-md: calc(var(--p-space-4) * var(--t-density));
-      --space-lg: calc(var(--p-space-6) * var(--t-density));
-      --space-xl: calc(var(--p-space-8) * var(--t-density));
-      --space-2xl: calc(var(--p-space-12) * var(--t-density));
-      
-      --radius-button: var(--t-radius-button);
-      --radius-card: var(--t-radius-card);
-      --radius-input: var(--t-radius-input);
-      --radius-image: var(--t-radius-image);
-      
-      --shadow-sm: 
-        0 1px 2px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5)),
-        0 1px 3px hsl(var(--p-shadow-color) / var(--p-shadow-strength));
-      --shadow-md: 
-        0 2px 4px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5)),
-        0 4px 8px hsl(var(--p-shadow-color) / var(--p-shadow-strength)),
-        0 8px 16px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5));
-      
-      --transition-fast: var(--p-duration-fast) var(--p-ease-out);
-      --transition-normal: var(--p-duration-normal) var(--p-ease-out);
-      --transition-bounce: var(--p-duration-normal) var(--p-ease-out-back);
-    }
-    
-    .preview-frame[data-mood="dark"] {
-      --t-accent-subtle: hsl(var(--t-accent-h) 30% 15%);
-    }
-    
-    /* ========================================
-       PAGE LAYOUT
-       ======================================== */
-    
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    
-    html {
-      font-size: 16px;
-    }
-    
-    body {
-      font-family: var(--p-font-inter);
-      background: #f5f5f5;
-      height: 100vh;
-      overflow: hidden;
-      color: #171717;
-    }
-    
-    .page-layout {
-      display: grid;
-      grid-template-columns: 380px 1fr;
-      height: 100vh;
-    }
-    
-    @media (max-width: 1000px) {
-      .page-layout {
-        grid-template-columns: 1fr;
-      }
-    }
-    
-    /* ========================================
-       CONTROLS PANEL
-       ======================================== */
-    
-    .controls-panel {
-      background: #ffffff;
-      border-right: 1px solid #e5e5e5;
-      padding: var(--p-space-6);
-      overflow-y: auto;
-      max-height: 100vh;
-      position: sticky;
-      top: 0;
-    }
-    
-    .controls-header {
-      margin-bottom: var(--p-space-6);
-    }
-    
-    .controls-header h1 {
-      font-size: var(--p-text-xl);
-      font-weight: 600;
-      margin-bottom: var(--p-space-2);
-      letter-spacing: -0.025em;
-    }
-    
-    .controls-header p {
-      font-size: var(--p-text-sm);
-      color: #737373;
-      line-height: 1.5;
-    }
-    
-    .control-section {
-      margin-bottom: var(--p-space-6);
-    }
-    
-    .control-label {
-      font-size: var(--p-text-xs);
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: #737373;
-      margin-bottom: var(--p-space-3);
-      display: block;
-    }
-    
-    /* Customise accordion */
-    .customise-section {
-      border-top: 1px solid #e5e5e5;
-      margin-top: var(--p-space-6);
-      padding-top: var(--p-space-4);
-    }
-    
-    .customise-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--p-space-3) 0;
-      cursor: pointer;
-      user-select: none;
-    }
-    
-    .customise-header:hover .customise-title {
-      color: #171717;
-    }
-    
-    .customise-title {
-      font-size: var(--p-text-sm);
-      font-weight: 600;
-      color: #525252;
-      transition: color 0.15s ease;
-    }
-    
-    .customise-icon {
-      width: 20px;
-      height: 20px;
-      color: #a3a3a3;
-      transition: transform 0.2s ease;
-    }
-    
-    .customise-section.open .customise-icon {
-      transform: rotate(180deg);
-    }
-    
-    .customise-content {
-      display: none;
-      padding-top: var(--p-space-4);
-    }
-    
-    .customise-section.open .customise-content {
-      display: block;
-    }
-    
-    /* Control groups within customise */
-    .control-group {
-      margin-bottom: var(--p-space-6);
-      padding-bottom: var(--p-space-6);
-      border-bottom: 1px solid #f0f0f0;
-    }
-    
-    .control-group:last-child {
-      margin-bottom: 0;
-      padding-bottom: 0;
-      border-bottom: none;
-    }
-    
-    .control-group-header {
-      display: flex;
-      align-items: center;
-      gap: var(--p-space-2);
-      margin-bottom: var(--p-space-4);
-    }
-    
-    .control-group-icon {
-      width: 16px;
-      height: 16px;
-      color: #a3a3a3;
-    }
-    
-    .control-group-title {
-      font-size: var(--p-text-sm);
-      font-weight: 600;
-      color: #171717;
-    }
-    
-    .control-group .control-section {
-      margin-bottom: var(--p-space-4);
-    }
-    
-    .control-group .control-section:last-child {
-      margin-bottom: 0;
-    }
-    
-    /* Text input */
-    .text-input {
-      width: 100%;
-      padding: var(--p-space-3) var(--p-space-4);
-      border: 1px solid #e5e5e5;
-      border-radius: var(--p-radius-md);
-      font-size: var(--p-text-base);
-      font-family: inherit;
-      transition: border-color 0.15s ease, box-shadow 0.15s ease;
-    }
-    
-    .text-input:focus {
-      outline: none;
-      border-color: #171717;
-      box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
-    }
-    
-    /* Logo/Header section */
-    .branding-section {
-      background: #f9f9f9;
-      border-radius: var(--p-radius-lg);
-      padding: var(--p-space-4);
-      margin-bottom: var(--p-space-6);
-    }
-    
-    .branding-section .control-label {
-      margin-bottom: var(--p-space-4);
-    }
-    
-    .logo-mode-options {
-      display: flex;
-      flex-direction: column;
-      gap: var(--p-space-2);
-      margin-bottom: var(--p-space-4);
-    }
-    
-    .logo-mode-option {
-      display: flex;
-      align-items: center;
-      gap: var(--p-space-3);
-      padding: var(--p-space-3);
-      background: #ffffff;
-      border: 2px solid transparent;
-      border-radius: var(--p-radius-md);
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-    
-    .logo-mode-option:hover {
-      border-color: #e5e5e5;
-    }
-    
-    .logo-mode-option.active {
-      border-color: #171717;
-    }
-    
-    .logo-mode-option input[type="radio"] {
-      display: none;
-    }
-    
-    .logo-mode-radio {
-      width: 18px;
-      height: 18px;
-      border: 2px solid #d4d4d4;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      transition: all 0.15s ease;
-    }
-    
-    .logo-mode-option.active .logo-mode-radio {
-      border-color: #171717;
-    }
-    
-    .logo-mode-radio::after {
-      content: '';
-      width: 8px;
-      height: 8px;
-      background: #171717;
-      border-radius: 50%;
-      opacity: 0;
-      transform: scale(0);
-      transition: all 0.15s ease;
-    }
-    
-    .logo-mode-option.active .logo-mode-radio::after {
-      opacity: 1;
-      transform: scale(1);
-    }
-    
-    .logo-mode-content {
-      flex: 1;
-    }
-    
-    .logo-mode-title {
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      margin-bottom: 2px;
-    }
-    
-    .logo-mode-desc {
-      font-size: var(--p-text-xs);
-      color: #737373;
-    }
-    
-    /* Upload areas */
-    .upload-section {
-      margin-top: var(--p-space-4);
-      padding-top: var(--p-space-4);
-      border-top: 1px solid #e5e5e5;
-    }
-    
-    .upload-row {
-      display: none;
-      margin-bottom: var(--p-space-3);
-    }
-    
-    .upload-row.visible {
-      display: block;
-    }
-    
-    .upload-label {
-      font-size: var(--p-text-xs);
-      font-weight: 500;
-      color: #525252;
-      margin-bottom: var(--p-space-2);
-      display: block;
-    }
-    
-    .upload-area {
-      display: flex;
-      align-items: center;
-      gap: var(--p-space-3);
-    }
-    
-    .upload-btn {
-      flex: 1;
-      background: #ffffff;
-      border: 1px dashed #d4d4d4;
-      border-radius: var(--p-radius-md);
-      padding: var(--p-space-3);
-      font-size: var(--p-text-sm);
-      color: #737373;
-      cursor: pointer;
-      transition: all 0.15s ease;
-      text-align: center;
-    }
-    
-    .upload-btn:hover {
-      border-color: #a3a3a3;
-      color: #525252;
-    }
-    
-    .upload-btn input {
-      display: none;
-    }
-    
-    .upload-preview {
-      width: 64px;
-      height: 40px;
-      background: #ffffff;
-      border: 1px solid #e5e5e5;
-      border-radius: var(--p-radius-md);
-      display: none;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      position: relative;
-    }
-    
-    .upload-preview.has-image {
-      display: flex;
-    }
-    
-    .upload-preview img {
-      max-width: 100%;
-      max-height: 100%;
-      object-fit: contain;
-    }
-    
-    .upload-preview-wide {
-      width: 100%;
-      height: 60px;
-      margin-top: var(--p-space-2);
-    }
-    
-    .upload-preview-wide img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    
-    .remove-upload {
-      position: absolute;
-      top: -6px;
-      right: -6px;
-      width: 18px;
-      height: 18px;
-      background: #171717;
-      color: white;
-      border: none;
-      border-radius: 50%;
-      font-size: 12px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      line-height: 1;
-    }
-    
-    /* Size control slider */
-    .size-control {
-      margin-top: var(--p-space-3);
-      display: none;
-    }
-    
-    .size-control.visible {
-      display: block;
-    }
-    
-    .size-control-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--p-space-2);
-    }
-    
-    .size-control-label {
-      font-size: var(--p-text-xs);
-      font-weight: 500;
-      color: #525252;
-    }
-    
-    .size-control-value {
-      font-family: 'SF Mono', Monaco, monospace;
-      font-size: var(--p-text-xs);
-      color: #737373;
-    }
-    
-    .size-slider {
-      width: 100%;
-      height: 6px;
-      border-radius: 3px;
-      background: #e5e5e5;
-      outline: none;
-      -webkit-appearance: none;
-      appearance: none;
-    }
-    
-    .size-slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      background: #171717;
-      cursor: pointer;
-      transition: transform 0.1s ease;
-    }
-    
-    .size-slider::-webkit-slider-thumb:hover {
-      transform: scale(1.1);
-    }
-    
-    .size-slider::-moz-range-thumb {
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      background: #171717;
-      cursor: pointer;
-      border: none;
-    }
-    
-    /* Header image controls */
-    .header-image-controls {
-      margin-top: var(--p-space-3);
-      display: none;
-      flex-direction: column;
-      gap: var(--p-space-3);
-    }
-    
-    .header-image-controls.visible {
-      display: flex;
-    }
-    
-    .control-row {
-      display: flex;
-      flex-direction: column;
-      gap: var(--p-space-2);
-    }
-    
-    #header-position-x-row {
-      display: none;
-    }
-    
-    #header-position-x-row.visible {
-      display: flex;
-    }
-    
-    /* Logo color control */
-    .logo-color-control {
-      margin-top: var(--p-space-3);
-      display: none;
-    }
-    
-    .logo-color-control.visible {
-      display: block;
-    }
-    
-    .logo-color-toggle {
-      margin-bottom: var(--p-space-2);
-    }
-    
-    .toggle-label {
-      display: flex;
-      align-items: center;
-      gap: var(--p-space-2);
-      cursor: pointer;
-    }
-    
-    .toggle-label input[type="checkbox"] {
-      display: none;
-    }
-    
-    .toggle-switch {
-      width: 36px;
-      height: 20px;
-      background: #e5e5e5;
-      border-radius: 10px;
-      position: relative;
-      transition: background 0.2s ease;
-    }
-    
-    .toggle-switch::after {
-      content: '';
-      position: absolute;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border-radius: 50%;
-      top: 2px;
-      left: 2px;
-      transition: transform 0.2s ease;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-    }
-    
-    .toggle-label input:checked + .toggle-switch {
-      background: #171717;
-    }
-    
-    .toggle-label input:checked + .toggle-switch::after {
-      transform: translateX(16px);
-    }
-    
-    .toggle-text {
-      font-size: var(--p-text-sm);
-      color: #525252;
-    }
-    
-    .toggle-list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--p-space-2);
-    }
-    
-    .toggle-list .toggle-label {
-      padding: var(--p-space-2) 0;
-    }
-    
-    .logo-color-picker-row {
-      display: none;
-      align-items: center;
-      gap: var(--p-space-3);
-      margin-top: var(--p-space-2);
-    }
-    
-    .logo-color-picker-row.visible {
-      display: flex;
-    }
-    
-    .color-picker-small {
-      width: 36px;
-      height: 36px;
-    }
-    
-    /* Preset grid */
-    .preset-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: var(--p-space-2);
-      margin-bottom: var(--p-space-6);
-    }
-    
-    .preset-button {
-      background: #f5f5f5;
-      border: 2px solid transparent;
-      border-radius: var(--p-radius-md);
-      padding: var(--p-space-3);
-      cursor: pointer;
-      text-align: left;
-      transition: all var(--p-duration-normal) var(--p-ease-out);
-      font-family: inherit;
-    }
-    
-    .preset-button:hover {
-      background: #ebebeb;
-    }
-    
-    .preset-button.active {
-      border-color: #171717;
-      background: #ffffff;
-    }
-    
-    .preset-button .preset-name {
-      font-size: var(--p-text-sm);
-      font-weight: 600;
-      margin-bottom: 2px;
-    }
-    
-    .preset-button .preset-desc {
-      font-size: var(--p-text-xs);
-      color: #737373;
-    }
-    
-    /* Option buttons */
-    .option-group {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--p-space-2);
-    }
-    
-    .option-button {
-      background: #f5f5f5;
-      border: 2px solid transparent;
-      border-radius: var(--p-radius-md);
-      padding: var(--p-space-2) var(--p-space-3);
-      cursor: pointer;
-      font-size: var(--p-text-sm);
-      font-family: inherit;
-      transition: all var(--p-duration-normal) var(--p-ease-out);
-    }
-    
-    .option-button:hover {
-      background: #ebebeb;
-    }
-    
-    .option-button.active {
-      border-color: #171717;
-      background: #ffffff;
-    }
-    
-    /* Color picker */
-    .color-picker-wrapper {
-      display: flex;
-      align-items: center;
-      gap: var(--p-space-3);
-    }
-    
-    .color-picker {
-      width: 48px;
-      height: 48px;
-      border: none;
-      border-radius: var(--p-radius-md);
-      cursor: pointer;
-      padding: 0;
-      overflow: hidden;
-    }
-    
-    .color-picker::-webkit-color-swatch-wrapper {
-      padding: 0;
-    }
-    
-    .color-picker::-webkit-color-swatch {
-      border: 2px solid rgba(0,0,0,0.1);
-      border-radius: var(--p-radius-md);
-    }
-    
-    .color-value {
-      font-family: 'SF Mono', Monaco, monospace;
-      font-size: var(--p-text-sm);
-      color: #525252;
-    }
-    
-    /* Combo display */
-    .combo-display {
-      background: #f5f5f5;
-      border-radius: var(--p-radius-md);
-      padding: var(--p-space-4);
-      margin-top: var(--p-space-6);
-    }
-    
-    .combo-display .combo-label {
-      font-size: var(--p-text-xs);
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: #737373;
-      margin-bottom: var(--p-space-2);
-    }
-    
-    .combo-display .combo-value {
-      font-size: var(--p-text-sm);
-      color: #171717;
-      line-height: 1.6;
-    }
-    
-    .combo-display .combo-count {
-      font-size: var(--p-text-xs);
-      color: #a3a3a3;
-      margin-top: var(--p-space-2);
-    }
-    
-    /* ========================================
-       PREVIEW AREA
-       ======================================== */
-    
-    .preview-area {
-      padding: var(--p-space-6);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      height: 100%;
-    }
-    
-    .preview-container {
-      width: 100%;
-      max-width: 1200px;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-height: 0;
-      overflow: hidden;
-    }
-    
-    .page-toggle {
-      display: flex;
-      gap: var(--p-space-1);
-      margin-bottom: var(--p-space-3);
-      background: #e5e5e5;
-      padding: 4px;
-      border-radius: var(--p-radius-md);
-      width: fit-content;
-      flex-shrink: 0;
-    }
-    
-    .page-toggle-btn {
-      padding: var(--p-space-2) var(--p-space-4);
-      border: none;
-      background: transparent;
-      border-radius: var(--p-radius-sm);
-      font-family: inherit;
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      color: #525252;
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-    
-    .page-toggle-btn:hover {
-      color: #171717;
-    }
-    
-    .page-toggle-btn.active {
-      background: #ffffff;
-      color: #171717;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }
-    
-    /* Browser Chrome Mockup - macOS style */
-    .browser-chrome {
-      display: flex;
-      align-items: center;
-      background: linear-gradient(180deg, #e8e8e8 0%, #d8d8d8 100%);
-      border: 1px solid #c0c0c0;
-      border-bottom: 1px solid #b0b0b0;
-      border-radius: 10px 10px 0 0;
-      padding: 10px 14px;
-      gap: 14px;
-      flex-shrink: 0;
-    }
-    
-    .browser-traffic-lights {
-      display: flex;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-    
-    .traffic-light {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      border: 1px solid rgba(0,0,0,0.1);
-    }
-    
-    .traffic-light.red { background: #ff5f57; border-color: #e14640; }
-    .traffic-light.yellow { background: #ffbd2e; border-color: #dfa123; }
-    .traffic-light.green { background: #28c940; border-color: #1aab29; }
-    
-    .browser-nav {
-      display: flex;
-      gap: 6px;
-      flex-shrink: 0;
-    }
-    
-    .browser-nav-btn {
-      width: 24px;
-      height: 24px;
-      border-radius: 4px;
-      background: transparent;
-      border: none;
-      color: #999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: default;
-    }
-    
-    .browser-nav-btn svg {
-      width: 14px;
-      height: 14px;
-    }
-    
-    .browser-url-bar {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      background: #ffffff;
-      border: 1px solid #c0c0c0;
-      border-radius: 6px;
-      padding: 5px 12px;
-      min-width: 0;
-    }
-    
-    .browser-url-icon {
-      width: 14px;
-      height: 14px;
-      color: #28c940;
-      flex-shrink: 0;
-    }
-    
-    .browser-favicon {
-      width: 16px;
-      height: 16px;
-      border-radius: 3px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      flex-shrink: 0;
-      background: var(--t-accent, #e85d04);
-    }
-    
-    .browser-favicon.has-logo {
-      background: transparent;
-    }
-    
-    .favicon-letter {
-      font-family: system-ui, sans-serif;
-      font-size: 10px;
-      font-weight: 600;
-      color: white;
-    }
-    
-    .browser-favicon.has-logo .favicon-letter {
-      display: none;
-    }
-    
-    .favicon-logo {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-    
-    .browser-url-text {
-      font-family: system-ui, sans-serif;
-      font-size: 12px;
-      color: #333;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    .browser-url-text .domain {
-      color: #111;
-    }
-    
-    .browser-actions {
-      display: flex;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-    
-    .browser-action-btn {
-      width: 24px;
-      height: 24px;
-      border-radius: 4px;
-      background: transparent;
-      border: none;
-      color: #666;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: default;
-    }
-    
-    .browser-action-btn svg {
-      width: 16px;
-      height: 16px;
-    }
-    
-    .preview-frame {
-      width: 100%;
-      flex: 1;
-      min-height: 0;
-      background: var(--color-page);
-      border-radius: 0 0 var(--p-radius-lg) var(--p-radius-lg);
-      border: 1px solid #c0c0c0;
-      border-top: none;
-      box-shadow: 
-        0 4px 6px rgba(0,0,0,0.05),
-        0 10px 20px rgba(0,0,0,0.05),
-        0 20px 40px rgba(0,0,0,0.05);
-      overflow-y: auto;
-      overflow-x: hidden;
-      transition: background-color var(--p-duration-slow) var(--p-ease-out);
-    }
-    
-    /* Styled scrollbar for the preview */
-    .preview-frame::-webkit-scrollbar {
-      width: 10px;
-    }
-    
-    .preview-frame::-webkit-scrollbar-track {
-      background: rgba(0,0,0,0.05);
-    }
-    
-    .preview-frame::-webkit-scrollbar-thumb {
-      background: rgba(0,0,0,0.2);
-      border-radius: 5px;
-    }
-    
-    .preview-frame::-webkit-scrollbar-thumb:hover {
-      background: rgba(0,0,0,0.3);
-    }
-    
-    /* Announcement bar */
-    .announcement-bar {
-      background: var(--t-accent);
-      color: var(--t-text-inverse);
-      text-align: center;
-      padding: var(--space-xs) var(--space-md);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      transition: all var(--transition-normal);
-    }
-    
-    .announcement-bar.hidden {
-      display: none;
-    }
-    
-    .announcement-bar p {
-      margin: 0;
-    }
-    
-    /* Sticky header */
-    .preview-frame[data-sticky-header="true"] .shop-header {
-      position: sticky;
-      top: 0;
-      z-index: 100;
-      box-shadow: var(--shadow-sm);
-    }
-    
-    .preview-frame[data-sticky-header="true"][data-has-announcement="true"] .shop-header {
-      top: 0;
-    }
-    
-    /* ========================================
-       SHOP HEADER MODES
-       ======================================== */
-    
-    .shop-header {
-      padding: var(--space-md) var(--space-lg);
-      border-bottom: 1px solid var(--color-border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      transition: all var(--transition-normal);
-      position: relative;
-      background: var(--t-surface-base);
-    }
-    
-    .shop-header[data-header="centered"] {
-      flex-direction: column;
-      gap: var(--space-sm);
-      text-align: center;
-    }
-    
-    .shop-header[data-header="minimal"] .shop-nav {
-      display: none;
-    }
-    
-    /* Header with background image */
-    .shop-header[data-logo-mode="header-image"] {
-      min-height: 160px;
-      padding: var(--space-lg);
-      border-bottom: none;
-      background-size: cover;
-      background-position: center;
-    }
-    
-    .shop-header[data-logo-mode="header-image"]::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
-      pointer-events: none;
-    }
-    
-    .shop-header[data-logo-mode="header-image"] .shop-logo,
-    .shop-header[data-logo-mode="header-image"] .shop-nav a,
-    .shop-header[data-logo-mode="header-image"] .shop-cart {
-      position: relative;
-      z-index: 1;
-      color: #ffffff;
-    }
-    
-    .shop-header[data-logo-mode="header-image"] .shop-logo-text {
-      color: #ffffff;
-      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
-    }
-    
-    .shop-header[data-logo-mode="header-image"] .cart-icon {
-      stroke: #ffffff;
-    }
-    
-    /* Header with logo + background image */
-    .shop-header[data-logo-mode="logo-header-image"] {
-      min-height: 160px;
-      padding: var(--space-lg);
-      border-bottom: none;
-      background-size: cover;
-      background-position: center;
-    }
-    
-    .shop-header[data-logo-mode="logo-header-image"]::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
-      pointer-events: none;
-    }
-    
-    .shop-header[data-logo-mode="logo-header-image"] .shop-logo,
-    .shop-header[data-logo-mode="logo-header-image"] .shop-nav a,
-    .shop-header[data-logo-mode="logo-header-image"] .shop-cart {
-      position: relative;
-      z-index: 1;
-      color: #ffffff;
-    }
-    
-    .shop-header[data-logo-mode="logo-header-image"] .cart-icon {
-      stroke: #ffffff;
-    }
-    
-    /* Logo display */
-    .shop-logo {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-      transition: all var(--transition-normal);
-    }
-    
-    .shop-logo-text {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-xl);
-      letter-spacing: var(--tracking-heading);
-      color: var(--color-heading);
-      transition: all var(--transition-normal);
-    }
-    
-    .shop-logo-image {
-      height: 36px;
-      width: auto;
-      display: none;
-      flex-shrink: 0;
-    }
-    
-    .shop-logo-image.visible {
-      display: block;
-    }
-    
-    .shop-logo-image img {
-      height: 100%;
-      width: auto;
-      object-fit: contain;
-    }
-    
-    .shop-nav {
-      display: flex;
-      gap: var(--space-lg);
-    }
-    
-    .shop-nav a {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      text-decoration: none;
-      transition: color var(--transition-fast);
-    }
-    
-    .shop-nav a:hover {
-      color: var(--color-heading);
-    }
-    
-    .shop-cart {
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      cursor: pointer;
-    }
-    
-    .cart-count {
-      background: var(--t-accent);
-      color: var(--t-text-inverse);
-      font-size: 11px;
-      font-weight: 600;
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    /* Hero */
-    .shop-hero {
-      padding: var(--space-2xl) var(--space-lg);
-      text-align: center;
-      transition: all var(--transition-normal);
-      background: var(--t-surface-base);
-    }
-    
-    .shop-hero h1 {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-4xl);
-      letter-spacing: var(--tracking-heading);
-      color: var(--color-heading);
-      margin-bottom: var(--space-sm);
-      transition: all var(--transition-normal);
-    }
-    
-    /* Minimal/Impulse style - much larger, lighter hero text */
-    .preview-frame[data-typography="minimal"] .shop-hero {
-      padding: var(--space-2xl) var(--space-lg) calc(var(--space-2xl) * 1.5);
-    }
-    
-    .preview-frame[data-typography="minimal"] .shop-hero h1 {
-      font-size: clamp(2.5rem, 5vw, 4rem);
-      font-weight: 300;
-      letter-spacing: -0.02em;
-      margin-bottom: var(--space-md);
-    }
-    
-    .preview-frame[data-typography="minimal"] .shop-hero p {
-      font-weight: 300;
-      font-size: var(--p-text-base);
-      color: var(--color-caption);
-    }
-    
-    .shop-hero p {
-      font-family: var(--font-body);
-      font-size: var(--p-text-lg);
-      color: var(--color-body);
-      max-width: 500px;
-      margin: 0 auto var(--space-lg);
-      line-height: 1.6;
-      transition: all var(--transition-normal);
-    }
-    
-    /* Buttons */
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-family: var(--font-body);
-      font-weight: 500;
-      font-size: var(--p-text-sm);
-      padding: var(--space-sm) var(--space-lg);
-      border-radius: var(--radius-button);
-      border: none;
-      cursor: pointer;
-      transition: 
-        transform var(--transition-bounce),
-        box-shadow var(--transition-normal),
-        background-color var(--transition-fast);
-    }
-    
-    .btn:hover {
-      transform: translateY(-1px);
-      box-shadow: var(--shadow-md);
-    }
-    
-    .btn:active {
-      transform: translateY(0);
-      transition-duration: 0.05s;
-    }
-    
-    .btn-primary {
-      background: var(--color-button-primary);
-      color: var(--color-button-primary-text);
-    }
-    
-    .btn-primary:hover {
-      background: var(--color-button-primary-hover);
-    }
-    
-    /* Button style variations */
-    .preview-frame[data-button-style="outline"] .btn-primary {
-      background: transparent;
-      color: var(--color-button-primary);
-      border: 2px solid var(--color-button-primary);
-    }
-    
-    .preview-frame[data-button-style="outline"] .btn-primary:hover {
-      background: var(--color-button-primary);
-      color: var(--color-button-primary-text);
-    }
-    
-    .preview-frame[data-button-style="soft"] .btn-primary {
-      background: var(--t-accent-subtle);
-      color: var(--color-button-primary);
-    }
-    
-    .preview-frame[data-button-style="soft"] .btn-primary:hover {
-      background: var(--color-button-primary);
-      color: var(--color-button-primary-text);
-    }
-    
-    /* Layout width variations - controls content width within the full-width browser */
-    .preview-frame[data-layout-width="contained"] .shop-hero,
-    .preview-frame[data-layout-width="contained"] .product-section,
-    .preview-frame[data-layout-width="contained"] .home-categories,
-    .preview-frame[data-layout-width="contained"] .home-about,
-    .preview-frame[data-layout-width="contained"] .pdp-container,
-    .preview-frame[data-layout-width="contained"] .pdp-reviews,
-    .preview-frame[data-layout-width="contained"] .pdp-related,
-    .preview-frame[data-layout-width="contained"] .cart-container,
-    .preview-frame[data-layout-width="contained"] .content-page,
-    .preview-frame[data-layout-width="contained"] .error-container,
-    .preview-frame[data-layout-width="contained"] .collection-header,
-    .preview-frame[data-layout-width="contained"] .collection-grid-container {
-      max-width: 800px;
-      margin-left: auto;
-      margin-right: auto;
-      padding-left: var(--space-lg);
-      padding-right: var(--space-lg);
-    }
-    
-    .preview-frame[data-layout-width="wide"] .shop-hero,
-    .preview-frame[data-layout-width="wide"] .product-section,
-    .preview-frame[data-layout-width="wide"] .home-categories,
-    .preview-frame[data-layout-width="wide"] .home-about,
-    .preview-frame[data-layout-width="wide"] .pdp-container,
-    .preview-frame[data-layout-width="wide"] .pdp-reviews,
-    .preview-frame[data-layout-width="wide"] .pdp-related,
-    .preview-frame[data-layout-width="wide"] .cart-container,
-    .preview-frame[data-layout-width="wide"] .content-page,
-    .preview-frame[data-layout-width="wide"] .error-container,
-    .preview-frame[data-layout-width="wide"] .collection-header,
-    .preview-frame[data-layout-width="wide"] .collection-grid-container {
-      max-width: 1000px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-    
-    /* Full width has no max-width constraint */
-    .preview-frame[data-layout-width="full"] .shop-hero,
-    .preview-frame[data-layout-width="full"] .product-section,
-    .preview-frame[data-layout-width="full"] .home-categories,
-    .preview-frame[data-layout-width="full"] .home-about,
-    .preview-frame[data-layout-width="full"] .pdp-container,
-    .preview-frame[data-layout-width="full"] .pdp-reviews,
-    .preview-frame[data-layout-width="full"] .pdp-related,
-    .preview-frame[data-layout-width="full"] .cart-container,
-    .preview-frame[data-layout-width="full"] .content-page,
-    .preview-frame[data-layout-width="full"] .error-container,
-    .preview-frame[data-layout-width="full"] .collection-header,
-    .preview-frame[data-layout-width="full"] .collection-grid-container {
-      max-width: none;
-    }
-    
-    /* Font size scale */
-    .preview-frame[data-font-size="small"] {
-      font-size: 14px;
-    }
-    
-    .preview-frame[data-font-size="medium"] {
-      font-size: 16px;
-    }
-    
-    .preview-frame[data-font-size="large"] {
-      font-size: 18px;
-    }
-    
-    /* Heading weight */
-    .preview-frame[data-heading-weight="regular"] {
-      --weight-heading: 400;
-    }
-    
-    .preview-frame[data-heading-weight="medium"] {
-      --weight-heading: 500;
-    }
-    
-    .preview-frame[data-heading-weight="bold"] {
-      --weight-heading: 700;
-    }
-    
-    /* Impulse typography special styling */
-    .preview-frame[data-typography="impulse"] {
-      --weight-heading: 300;
-    }
-    
-    .preview-frame[data-typography="impulse"] .shop-hero h1 {
-      font-size: 3.5rem;
-      font-weight: 300;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      line-height: 1.1;
-    }
-    
-    .preview-frame[data-typography="impulse"] .shop-hero p {
-      font-size: 1.125rem;
-      font-weight: 300;
-      letter-spacing: 0.02em;
-      max-width: 500px;
-    }
-    
-    .preview-frame[data-typography="impulse"] .section-title {
-      font-size: 1.5rem;
-      font-weight: 400;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-    
-    .preview-frame[data-typography="impulse"] .product-title {
-      font-weight: 400;
-      letter-spacing: 0.02em;
-    }
-    
-    .preview-frame[data-typography="impulse"] .product-price {
-      font-weight: 300;
-      letter-spacing: 0.01em;
-    }
-    
-    .preview-frame[data-typography="impulse"] .btn-primary {
-      font-weight: 500;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-      font-size: 0.75rem;
-      padding: 1rem 2rem;
-    }
-    
-    .preview-frame[data-typography="impulse"] .shop-nav a {
-      font-weight: 400;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      font-size: 0.75rem;
-    }
-    
-    .preview-frame[data-typography="impulse"] .announcement-bar {
-      font-weight: 400;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-      font-size: 0.7rem;
-    }
-    
-    .preview-frame[data-typography="impulse"] .category-name {
-      font-weight: 400;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      font-size: 0.75rem;
-    }
-    
-    /* Product grid */
-    .product-section {
-      padding: var(--space-xl) var(--space-lg);
-      transition: all var(--transition-normal);
-      background: var(--t-surface-sunken);
-    }
-    
-    .section-title {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-2xl);
-      letter-spacing: var(--tracking-heading);
-      color: var(--color-heading);
-      margin-bottom: var(--space-lg);
-      transition: all var(--transition-normal);
-    }
-    
-    .product-grid {
-      display: grid;
-      gap: var(--space-lg);
-      transition: all var(--transition-normal);
-    }
-    
-    .product-grid[data-grid="2"] { grid-template-columns: repeat(2, 1fr); }
-    .product-grid[data-grid="3"] { grid-template-columns: repeat(3, 1fr); }
-    .product-grid[data-grid="4"] { grid-template-columns: repeat(4, 1fr); }
-    
-    .product-card {
-      background: var(--t-surface-raised);
-      border-radius: var(--radius-card);
-      overflow: hidden;
-      cursor: pointer;
-    }
-    
-    /* Card shadow variations */
-    .preview-frame[data-card-shadow="subtle"] .product-card {
-      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
-    }
-    
-    .preview-frame[data-card-shadow="pronounced"] .product-card {
-      box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08);
-    }
-    
-    /* Product text alignment */
-    .preview-frame[data-product-text="center"] .product-info {
-      text-align: center;
-    }
-    
-    /* Show/hide prices */
-    .preview-frame[data-show-prices="false"] .product-price {
-      display: none;
-    }
-      transition: 
-        transform var(--transition-normal),
-        box-shadow var(--transition-normal);
-      cursor: pointer;
-      box-shadow: var(--shadow-sm);
-      position: relative;
-    }
-    
-    .product-card:hover {
-      transform: translateY(-4px);
-      box-shadow: var(--shadow-md);
-    }
-    
-    .product-image {
-      aspect-ratio: 1;
-      overflow: hidden;
-      border-radius: var(--radius-image) var(--radius-image) 0 0;
-      position: relative;
-    }
-    
-    .product-image-primary,
-    .product-image-hover {
-      position: absolute;
-      inset: 0;
-      background-size: cover;
-      background-position: center;
-      transition: opacity 0.3s ease;
-    }
-    
-    .product-image-hover {
-      opacity: 0;
-    }
-    
-    .preview-frame[data-hover-image="true"] .product-card:hover .product-image-hover {
-      opacity: 1;
-    }
-    
-    .quick-add-btn {
-      position: absolute;
-      bottom: var(--space-sm);
-      left: var(--space-sm);
-      right: var(--space-sm);
-      background: var(--t-surface-raised);
-      color: var(--color-heading);
-      border: none;
-      padding: var(--space-xs) var(--space-sm);
-      border-radius: var(--radius-button);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      cursor: pointer;
-      opacity: 0;
-      transform: translateY(8px);
-      transition: all 0.2s ease;
-      box-shadow: var(--shadow-sm);
-    }
-    
-    .preview-frame[data-quick-add="true"] .product-card:hover .quick-add-btn {
-      opacity: 1;
-      transform: translateY(0);
-    }
-    
-    .quick-add-btn:hover {
-      background: var(--color-heading);
-      color: var(--t-text-inverse);
-    }
-    
-    /* Product badges */
-    .product-badge {
-      position: absolute;
-      top: var(--space-sm);
-      left: var(--space-sm);
-      padding: 4px 10px;
-      border-radius: var(--radius-button);
-      font-family: var(--font-body);
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      z-index: 1;
-    }
-    
-    .badge-new {
-      background: var(--t-accent);
-      color: var(--t-text-inverse);
-    }
-    
-    .badge-sale {
-      background: var(--t-sale-color);
-      color: white;
-    }
-    
-    .badge-sold {
-      background: var(--t-surface-raised);
-      color: var(--color-body);
-      border: 1px solid var(--color-border);
-    }
-    
-    .price-was {
-      text-decoration: line-through;
-      color: var(--color-caption);
-      margin-right: 4px;
-    }
-    
-    /* Aspect ratios */
-    .preview-frame[data-aspect="square"] .product-image {
-      aspect-ratio: 1;
-    }
-    
-    .preview-frame[data-aspect="portrait"] .product-image {
-      aspect-ratio: 3 / 4;
-    }
-    
-    .preview-frame[data-aspect="landscape"] .product-image {
-      aspect-ratio: 4 / 3;
-    }
-    
-    /* Header icons */
-    .header-icon-btn {
-      background: none;
-      border: none;
-      padding: var(--space-xs);
-      cursor: pointer;
-      color: var(--color-body);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--radius-button);
-      transition: all 0.15s ease;
-      position: relative;
-    }
-    
-    .header-icon-btn:hover {
-      color: var(--color-heading);
-      background: var(--t-surface-sunken);
-    }
-    
-    .shop-cart {
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
-    }
-    
-    .cart-count {
-      position: absolute;
-      top: -2px;
-      right: -2px;
-      background: var(--t-accent);
-      color: var(--t-text-inverse);
-      font-size: 10px;
-      font-weight: 600;
-      min-width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .shop-header[data-logo-mode="header-image"] .header-icon-btn,
-    .shop-header[data-logo-mode="logo-header-image"] .header-icon-btn {
-      color: #ffffff;
-    }
-    
-    .shop-header[data-logo-mode="header-image"] .header-icon-btn:hover,
-    .shop-header[data-logo-mode="logo-header-image"] .header-icon-btn:hover {
-      background: rgba(255,255,255,0.1);
-    }
-    
-    .product-info {
-      padding: var(--space-md);
-      transition: all var(--transition-normal);
-    }
-    
-    .product-title {
-      font-family: var(--font-body);
-      font-weight: 500;
-      font-size: var(--p-text-sm);
-      color: var(--color-heading);
-      margin-bottom: var(--space-xs);
-      transition: all var(--transition-normal);
-    }
-    
-    .product-price {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      font-variant-numeric: tabular-nums;
-      transition: all var(--transition-normal);
-    }
-    
-    /* Minimal/Impulse style product cards - cleaner, lighter */
-    .preview-frame[data-typography="minimal"] .product-info {
-      padding: var(--space-sm) 0;
-    }
-    
-    .preview-frame[data-typography="minimal"] .product-title {
-      font-weight: 400;
-      font-size: var(--p-text-base);
-      letter-spacing: 0;
-    }
-    
-    .preview-frame[data-typography="minimal"] .product-price {
-      font-weight: 300;
-      color: var(--color-caption);
-    }
-    
-    .preview-frame[data-typography="minimal"] .product-card {
-      background: transparent;
-    }
-    
-    .preview-frame[data-typography="minimal"] .quick-add-btn {
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-    
-    .preview-frame[data-typography="minimal"] .product-card:hover .quick-add-btn {
-      opacity: 1;
-    }
-    
-    /* Minimal section titles */
-    .preview-frame[data-typography="minimal"] .section-title {
-      font-weight: 300;
-      font-size: var(--p-text-xl);
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-    }
-    
-    /* Footer */
-    .shop-footer {
-      padding: var(--space-xl) var(--space-lg);
-      border-top: 1px solid var(--color-border);
-      transition: all var(--transition-normal);
-      background: var(--t-surface-base);
-    }
-    
-    .footer-content {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--space-xl);
-      margin-bottom: var(--space-lg);
-      padding-bottom: var(--space-lg);
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .footer-newsletter {
-      max-width: 320px;
-    }
-    
-    .footer-heading {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-lg);
-      color: var(--color-heading);
-      margin-bottom: var(--space-xs);
-    }
-    
-    .footer-text {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      margin-bottom: var(--space-sm);
-      line-height: 1.5;
-    }
-    
-    .newsletter-form {
-      display: flex;
-      gap: var(--space-xs);
-    }
-    
-    .newsletter-input {
-      flex: 1;
-      padding: var(--space-xs) var(--space-sm);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-input);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      background: var(--t-surface-raised);
-      color: var(--color-heading);
-    }
-    
-    .newsletter-input::placeholder {
-      color: var(--color-caption);
-    }
-    
-    .newsletter-btn {
-      padding: var(--space-xs) var(--space-md);
-      white-space: nowrap;
-    }
-    
-    .footer-links {
-      display: flex;
-      gap: var(--space-xl);
-      justify-content: flex-end;
-    }
-    
-    .footer-column {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-xs);
-    }
-    
-    .footer-column-title {
-      font-family: var(--font-body);
-      font-weight: 600;
-      font-size: var(--p-text-sm);
-      color: var(--color-heading);
-      margin-bottom: var(--space-xs);
-    }
-    
-    .footer-column a {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      text-decoration: none;
-      transition: color 0.15s ease;
-    }
-    
-    .footer-column a:hover {
-      color: var(--color-heading);
-    }
-    
-    .footer-bottom {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    
-    .footer-bottom p {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-caption);
-      margin: 0;
-    }
-    
-    .footer-social {
-      display: flex;
-      gap: var(--space-sm);
-    }
-    
-    .social-link {
-      width: 36px;
-      height: 36px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-body);
-      border-radius: var(--radius-button);
-      transition: all 0.15s ease;
-    }
-    
-    .social-link:hover {
-      color: var(--color-heading);
-      background: var(--t-surface-sunken);
-    }
-    
-    .social-link svg {
-      width: 20px;
-      height: 20px;
-    }
-    
-    /* Product images - using picsum.photos with alt views */
-    .product-image-primary.img-1 { 
-      background-color: #e8e4df;
-      background-image: url('https://picsum.photos/seed/fern/400/400');
-    }
-    .product-image-hover.img-1-alt { 
-      background-color: #e8e4df;
-      background-image: url('https://picsum.photos/seed/fern-alt/400/400');
-    }
-    .product-image-primary.img-2 { 
-      background-color: #f5e6e0;
-      background-image: url('https://picsum.photos/seed/roses/400/400');
-    }
-    .product-image-hover.img-2-alt { 
-      background-color: #f5e6e0;
-      background-image: url('https://picsum.photos/seed/roses-alt/400/400');
-    }
-    .product-image-primary.img-3 { 
-      background-color: #e0e8e4;
-      background-image: url('https://picsum.photos/seed/morning/400/400');
-    }
-    .product-image-hover.img-3-alt { 
-      background-color: #e0e8e4;
-      background-image: url('https://picsum.photos/seed/morning-alt/400/400');
-    }
-    .product-image-primary.img-4 { 
-      background-color: #e4e8e0;
-      background-image: url('https://picsum.photos/seed/oak/400/400');
-    }
-    .product-image-hover.img-4-alt { 
-      background-color: #e4e8e0;
-      background-image: url('https://picsum.photos/seed/oak-alt/400/400');
-    }
-    .product-image-primary.img-5 { 
-      background-color: #f0e8e4;
-      background-image: url('https://picsum.photos/seed/bloom/400/400');
-    }
-    .product-image-hover.img-5-alt { 
-      background-color: #f0e8e4;
-      background-image: url('https://picsum.photos/seed/bloom-alt/400/400');
-    }
-    .product-image-primary.img-6 { 
-      background-color: #e8e0f0;
-      background-image: url('https://picsum.photos/seed/lavender/400/400');
-    }
-    .product-image-hover.img-6-alt { 
-      background-color: #e8e0f0;
-      background-image: url('https://picsum.photos/seed/lavender-alt/400/400');
-    }
-    
-    .icon {
-      width: 20px;
-      height: 20px;
-    }
-    
-    .preview-frame ::selection {
-      background: var(--t-accent-subtle);
-    }
-    
-    /* Page views */
-    .page-view {
-      display: none;
-    }
-    
-    .page-view.active {
-      display: block;
-    }
-    
-    /* PDP Styles */
-    .pdp-container {
-      padding: var(--space-lg);
-      background: var(--t-surface-base);
-    }
-    
-    .pdp-breadcrumb {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-caption);
-      margin-bottom: var(--space-lg);
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
-    }
-    
-    .pdp-breadcrumb a {
-      color: var(--color-body);
-      text-decoration: none;
-    }
-    
-    .pdp-breadcrumb a:hover {
-      color: var(--color-heading);
-    }
-    
-    .breadcrumb-sep {
-      color: var(--color-caption);
-    }
-    
-    .pdp-layout {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--space-xl);
-    }
-    
-    /* Gallery position */
-    .preview-frame[data-gallery-position="right"] .pdp-layout {
-      direction: rtl;
-    }
-    
-    .preview-frame[data-gallery-position="right"] .pdp-layout > * {
-      direction: ltr;
-    }
-    
-    /* PDP section visibility */
-    .preview-frame[data-pdp-trust="false"] .pdp-trust-badges {
-      display: none;
-    }
-    
-    .preview-frame[data-pdp-reviews="false"] .pdp-reviews {
-      display: none;
-    }
-    
-    .preview-frame[data-pdp-related="false"] .pdp-related {
-      display: none;
-    }
-    
-    .pdp-gallery {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-sm);
-    }
-    
-    .pdp-main-image {
-      aspect-ratio: 1;
-      border-radius: var(--radius-image);
-      overflow: hidden;
-    }
-    
-    .pdp-thumbnails {
-      display: flex;
-      gap: var(--space-xs);
-    }
-    
-    .pdp-thumb {
-      width: 64px;
-      height: 64px;
-      border-radius: var(--t-radius-sm);
-      cursor: pointer;
-      opacity: 0.6;
-      transition: opacity 0.15s ease;
-      border: 2px solid transparent;
-    }
-    
-    .pdp-thumb:hover {
-      opacity: 0.8;
-    }
-    
-    .pdp-thumb.active {
-      opacity: 1;
-      border-color: var(--color-heading);
-    }
-    
-    /* PDP images */
-    .pdp-main-image {
-      background-color: #e8e4df;
-      background-size: cover;
-      background-position: center;
-    }
-    
-    .pdp-thumb {
-      background-color: #e8e4df;
-      background-size: cover;
-      background-position: center;
-    }
-    
-    .pdp-thumb[data-image*="fern/"] { background-image: url('https://picsum.photos/seed/fern/100/100'); }
-    .pdp-thumb[data-image*="fern-alt"] { background-image: url('https://picsum.photos/seed/fern-alt/100/100'); }
-    .pdp-thumb[data-image*="fern-detail"] { background-image: url('https://picsum.photos/seed/fern-detail/100/100'); }
-    
-    .pdp-details {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-md);
-    }
-    
-    .pdp-title {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-3xl);
-      letter-spacing: var(--tracking-heading);
-      color: var(--color-heading);
-      margin: 0;
-    }
-    
-    .pdp-price {
-      font-family: var(--font-body);
-      font-size: var(--p-text-xl);
-      color: var(--color-heading);
-      font-variant-numeric: tabular-nums;
-      margin: 0;
-    }
-    
-    .pdp-description {
-      font-family: var(--font-body);
-      font-size: var(--p-text-base);
-      color: var(--color-body);
-      line-height: 1.6;
-    }
-    
-    .pdp-description p {
-      margin: 0;
-    }
-    
-    .pdp-options {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-md);
-      padding: var(--space-md) 0;
-      border-top: 1px solid var(--color-border);
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .pdp-option-group {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-xs);
-    }
-    
-    .pdp-option-label {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      color: var(--color-heading);
-    }
-    
-    .pdp-option-buttons {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--space-xs);
-    }
-    
-    .pdp-option-btn {
-      padding: var(--space-xs) var(--space-sm);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-button);
-      background: var(--t-surface-raised);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-    
-    .pdp-option-btn:hover {
-      border-color: var(--color-heading);
-      color: var(--color-heading);
-    }
-    
-    .pdp-option-btn.active {
-      border-color: var(--color-heading);
-      background: var(--color-heading);
-      color: var(--t-text-inverse);
-    }
-    
-    .pdp-add-btn {
-      width: 100%;
-      padding: var(--space-md);
-      font-size: var(--p-text-base);
-    }
-    
-    /* PDP Expandable Details */
-    .pdp-details-sections {
-      display: flex;
-      flex-direction: column;
-      border-top: 1px solid var(--color-border);
-    }
-    
-    .pdp-details {
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .pdp-details-summary {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: var(--space-md) 0;
-      cursor: pointer;
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      color: var(--color-heading);
-      list-style: none;
-    }
-    
-    .pdp-details-summary::-webkit-details-marker {
-      display: none;
-    }
-    
-    .pdp-details-summary::marker {
-      display: none;
-    }
-    
-    .pdp-details-icon {
-      width: 18px;
-      height: 18px;
-      color: var(--color-caption);
-      transition: transform 0.2s ease;
-    }
-    
-    .pdp-details[open] .pdp-details-icon {
-      transform: rotate(180deg);
-    }
-    
-    .pdp-details-content {
-      padding-bottom: var(--space-md);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      line-height: 1.6;
-    }
-    
-    .size-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: var(--p-text-sm);
-    }
-    
-    .size-table th,
-    .size-table td {
-      padding: var(--space-xs) var(--space-sm);
-      text-align: left;
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .size-table th {
-      font-weight: 500;
-      color: var(--color-heading);
-      background: var(--t-surface-sunken);
-    }
-    
-    .size-table td {
-      color: var(--color-body);
-    }
-    
-    .details-list {
-      margin: 0;
-      padding-left: var(--space-md);
-    }
-    
-    .details-list li {
-      margin-bottom: var(--space-xs);
-    }
-    
-    .details-list li:last-child {
-      margin-bottom: 0;
-    }
-    
-    .pdp-meta {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-sm);
-      padding-top: var(--space-sm);
-    }
-    
-    .pdp-meta-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-    }
-    
-    .pdp-meta-icon {
-      width: 18px;
-      height: 18px;
-      color: var(--color-caption);
-    }
-    
-    .pdp-trust-badges {
-      display: flex;
-      gap: var(--space-md);
-      padding-top: var(--space-md);
-      border-top: 1px solid var(--color-border);
-      flex-wrap: wrap;
-    }
-    
-    .trust-badge {
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
-      font-family: var(--font-body);
-      font-size: var(--p-text-xs);
-      color: var(--color-caption);
-    }
-    
-    .trust-badge-icon {
-      width: 16px;
-      height: 16px;
-    }
-    
-    .pdp-related {
-      padding: var(--space-xl) 0;
-      border-top: 1px solid var(--color-border);
-      margin-top: var(--space-xl);
-    }
-    
-    /* Reviews Section */
-    .pdp-reviews {
-      padding: var(--space-xl) var(--space-lg);
-      background: var(--t-surface-base);
-    }
-    
-    .reviews-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: var(--space-md);
-      margin-bottom: var(--space-lg);
-    }
-    
-    .reviews-summary {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-    }
-    
-    .reviews-stars,
-    .review-stars {
-      display: flex;
-      gap: 2px;
-    }
-    
-    .star {
-      width: 16px;
-      height: 16px;
-      color: var(--color-border);
-    }
-    
-    .star.filled {
-      color: #f59e0b;
-    }
-    
-    .reviews-count {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-caption);
-    }
-    
-    .reviews-list {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-lg);
-      margin-bottom: var(--space-lg);
-    }
-    
-    .review {
-      padding-bottom: var(--space-lg);
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .review:last-child {
-      border-bottom: none;
-    }
-    
-    .review-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--space-xs);
-    }
-    
-    .review-date {
-      font-family: var(--font-body);
-      font-size: var(--p-text-xs);
-      color: var(--color-caption);
-    }
-    
-    .review-title {
-      font-family: var(--font-body);
-      font-size: var(--p-text-base);
-      font-weight: 600;
-      color: var(--color-heading);
-      margin: 0 0 var(--space-xs);
-    }
-    
-    .review-text {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      line-height: 1.6;
-      margin: 0 0 var(--space-sm);
-    }
-    
-    .review-author {
-      display: flex;
-      align-items: center;
-      gap: var(--space-sm);
-    }
-    
-    .review-name {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      color: var(--color-heading);
-    }
-    
-    .review-verified {
-      font-family: var(--font-body);
-      font-size: var(--p-text-xs);
-      color: var(--color-caption);
-      background: var(--t-surface-sunken);
-      padding: 2px 8px;
-      border-radius: var(--radius-button);
-    }
-    
-    .reviews-load-more {
-      display: block;
-      margin: 0 auto;
-    }
-    
-    .related-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--space-md);
-    }
-    
-    /* Section CTA */
-    .section-cta {
-      text-align: center;
-      margin-top: var(--space-lg);
-    }
-    
-    .btn-secondary {
-      background: transparent;
-      color: var(--color-heading);
-      border: 1px solid var(--color-heading);
-    }
-    
-    .btn-secondary:hover {
-      background: var(--color-heading);
-      color: var(--t-text-inverse);
-    }
-    
-    /* Home About Section */
-    .home-about {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--space-xl);
-      padding: var(--space-2xl) var(--space-lg);
-      background: var(--t-surface-base);
-    }
-    
-    .home-about-image {
-      height: 300px;
-      border-radius: var(--radius-image);
-      background: url('https://picsum.photos/seed/studio/600/400') center/cover;
-    }
-    
-    .home-about-content {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-    
-    .home-about-content h2 {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-2xl);
-      letter-spacing: var(--tracking-heading);
-      color: var(--color-heading);
-      margin: 0 0 var(--space-md);
-    }
-    
-    .home-about-content p {
-      font-family: var(--font-body);
-      font-size: var(--p-text-base);
-      color: var(--color-body);
-      line-height: 1.7;
-      margin: 0 0 var(--space-md);
-    }
-    
-    .text-link {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      color: var(--t-accent);
-      text-decoration: none;
-    }
-    
-    .text-link:hover {
-      text-decoration: underline;
-    }
-    
-    /* Home Categories */
-    .home-categories {
-      padding: var(--space-xl) var(--space-lg);
-      background: var(--t-surface-base);
-    }
-    
-    .category-links {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--space-md);
-      max-width: 800px;
-      margin: 0 auto;
-    }
-    
-    .category-link {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--space-sm);
-      text-decoration: none;
-      padding: var(--space-md);
-      border-radius: var(--radius-card);
-      transition: all 0.2s ease;
-    }
-    
-    .category-link:hover {
-      background: var(--t-surface-sunken);
-    }
-    
-    .category-link:focus {
-      outline: 2px solid var(--t-accent);
-      outline-offset: 2px;
-    }
-    
-    .category-image {
-      width: 100px;
-      height: 100px;
-      border-radius: 50%;
-      background-size: cover;
-      background-position: center;
-      transition: transform 0.2s ease;
-    }
-    
-    .category-link:hover .category-image {
-      transform: scale(1.05);
-    }
-    
-    .cat-img-1 { background-image: url('https://picsum.photos/seed/botanicals/200/200'); }
-    .cat-img-2 { background-image: url('https://picsum.photos/seed/florals/200/200'); }
-    .cat-img-3 { background-image: url('https://picsum.photos/seed/landscapes/200/200'); }
-    
-    .category-name {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      color: var(--color-heading);
-    }
-    
-    /* Utility: visually hidden but accessible */
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-    
-    /* Collection Page */
-    .collection-header {
-      padding: var(--space-xl) var(--space-lg) var(--space-md);
-      background: var(--t-surface-base);
-      text-align: center;
-    }
-    
-    .collection-title {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-3xl);
-      letter-spacing: var(--tracking-heading);
-      color: var(--color-heading);
-      margin: 0 0 var(--space-xs);
-    }
-    
-    .collection-count {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-caption);
-      margin: 0;
-    }
-    
-    .collection-toolbar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--space-lg);
-      gap: var(--space-md);
-      flex-wrap: wrap;
-    }
-    
-    .collection-filter {
-      display: flex;
-      gap: var(--space-xs);
-    }
-    
-    .filter-btn {
-      padding: var(--space-xs) var(--space-md);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-button);
-      background: var(--t-surface-raised);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-    
-    .filter-btn:hover {
-      border-color: var(--color-heading);
-      color: var(--color-heading);
-    }
-    
-    .filter-btn.active {
-      background: var(--color-heading);
-      border-color: var(--color-heading);
-      color: var(--t-text-inverse);
-    }
-    
-    .sort-select {
-      padding: var(--space-xs) var(--space-md);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-button);
-      background: var(--t-surface-raised);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-heading);
-      cursor: pointer;
-    }
-    
-    @media (max-width: 1000px) {
-      .controls-panel {
-        position: relative;
-        max-height: none;
-        border-right: none;
-        border-bottom: 1px solid #e5e5e5;
-      }
-      
-      .preview-area {
-        padding: var(--p-space-4);
-      }
-      
-      .product-grid[data-grid="4"] {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      
-      .pdp-layout {
-        grid-template-columns: 1fr;
-      }
-      
-      .related-grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      
-      .footer-content {
-        grid-template-columns: 1fr;
-        gap: var(--space-lg);
-      }
-      
-      .footer-links {
-        justify-content: flex-start;
-      }
-      
-      .cart-layout {
-        grid-template-columns: 1fr;
-      }
-      
-      .contact-layout {
-        grid-template-columns: 1fr;
-      }
-      
-      .home-about {
-        grid-template-columns: 1fr;
-      }
-      
-      .home-about-image {
-        height: 200px;
-      }
-      
-      .category-links {
-        grid-template-columns: repeat(3, 1fr);
-        gap: var(--space-sm);
-      }
-      
-      .category-image {
-        width: 70px;
-        height: 70px;
-      }
-    }
-    
-    /* Cart Page */
-    .cart-container {
-      padding: var(--space-lg);
-      background: var(--t-surface-base);
-      min-height: 60vh;
-    }
-    
-    .cart-header-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--space-lg);
-    }
-    
-    .cart-title {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-3xl);
-      color: var(--color-heading);
-      margin: 0;
-    }
-    
-    .cart-state-toggle {
-      background: none;
-      border: none;
-      font-family: var(--font-body);
-      font-size: var(--p-text-xs);
-      color: var(--color-caption);
-      cursor: pointer;
-      text-decoration: underline;
-      padding: var(--space-xs);
-    }
-    
-    .cart-state-toggle:hover {
-      color: var(--color-body);
-    }
-    
-    .cart-state[hidden] {
-      display: none;
-    }
-    
-    /* Empty State */
-    .empty-state {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      padding: var(--space-2xl) var(--space-lg);
-      min-height: 40vh;
-    }
-    
-    .empty-state-illustration {
-      width: 120px;
-      height: 120px;
-      margin-bottom: var(--space-lg);
-      color: var(--color-caption);
-    }
-    
-    .empty-state-illustration svg {
-      width: 100%;
-      height: 100%;
-    }
-    
-    .empty-state-title {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-2xl);
-      color: var(--color-heading);
-      margin: 0 0 var(--space-sm);
-    }
-    
-    .empty-state-message {
-      font-family: var(--font-body);
-      font-size: var(--p-text-base);
-      color: var(--color-body);
-      max-width: 400px;
-      margin: 0 0 var(--space-lg);
-      line-height: 1.6;
-    }
-    
-    /* Error Page */
-    .error-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 70vh;
-      padding: var(--space-xl) var(--space-lg);
-      background: var(--t-surface-base);
-    }
-    
-    .error-content {
-      text-align: center;
-      max-width: 500px;
-    }
-    
-    .error-illustration {
-      width: 200px;
-      height: 160px;
-      margin: 0 auto var(--space-xl);
-      color: var(--t-accent);
-    }
-    
-    .error-illustration svg {
-      width: 100%;
-      height: 100%;
-    }
-    
-    .error-title {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-3xl);
-      letter-spacing: var(--tracking-heading);
-      color: var(--color-heading);
-      margin: 0 0 var(--space-sm);
-    }
-    
-    .error-message {
-      font-family: var(--font-body);
-      font-size: var(--p-text-base);
-      color: var(--color-body);
-      line-height: 1.6;
-      margin: 0 0 var(--space-xl);
-    }
-    
-    .error-actions {
-      display: flex;
-      gap: var(--space-sm);
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-    
-    .cart-layout {
-      display: grid;
-      grid-template-columns: 1fr 360px;
-      gap: var(--space-xl);
-      align-items: start;
-    }
-    
-    .cart-items {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-md);
-    }
-    
-    .cart-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-md);
-      padding: var(--space-md);
-      background: var(--t-surface-raised);
-      border-radius: var(--radius-card);
-      border: 1px solid var(--color-border);
-    }
-    
-    .cart-item-image {
-      width: 80px;
-      height: 80px;
-      border-radius: var(--radius-image);
-      background-size: cover;
-      background-position: center;
-      flex-shrink: 0;
-    }
-    
-    .cart-item-image.img-1 { background-image: url('https://picsum.photos/seed/fern/200/200'); }
-    .cart-item-image.img-2 { background-image: url('https://picsum.photos/seed/roses/200/200'); }
-    
-    .cart-item-details {
-      flex: 1;
-    }
-    
-    .cart-item-title {
-      font-family: var(--font-body);
-      font-weight: 500;
-      font-size: var(--p-text-base);
-      color: var(--color-heading);
-      margin: 0 0 4px;
-    }
-    
-    .cart-item-variant {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-caption);
-      margin: 0 0 4px;
-    }
-    
-    .cart-item-price {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-heading);
-      margin: 0;
-      font-variant-numeric: tabular-nums;
-    }
-    
-    .cart-item-quantity {
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
-    }
-    
-    .qty-btn {
-      width: 32px;
-      height: 32px;
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-button);
-      background: var(--t-surface-raised);
-      color: var(--color-heading);
-      font-size: 16px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.15s ease;
-    }
-    
-    .qty-btn:hover {
-      border-color: var(--color-heading);
-    }
-    
-    .qty-value {
-      font-family: var(--font-body);
-      font-size: var(--p-text-base);
-      color: var(--color-heading);
-      min-width: 24px;
-      text-align: center;
-    }
-    
-    .cart-item-remove {
-      background: none;
-      border: none;
-      padding: var(--space-xs);
-      color: var(--color-caption);
-      cursor: pointer;
-      transition: color 0.15s ease;
-    }
-    
-    .cart-item-remove:hover {
-      color: #dc2626;
-    }
-    
-    .cart-item-remove svg {
-      width: 18px;
-      height: 18px;
-    }
-    
-    .cart-summary {
-      padding: var(--space-lg);
-      background: var(--t-surface-sunken);
-      border-radius: var(--radius-card);
-    }
-    
-    .cart-summary-row {
-      display: flex;
-      justify-content: space-between;
-      padding: var(--space-sm) 0;
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .cart-summary-row.cart-total {
-      font-weight: 600;
-      font-size: var(--p-text-base);
-      color: var(--color-heading);
-      border-bottom: none;
-      padding-top: var(--space-md);
-    }
-    
-    .cart-checkout-btn {
-      width: 100%;
-      margin-top: var(--space-md);
-      padding: var(--space-md);
-    }
-    
-    .cart-secure-note {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-xs);
-      margin-top: var(--space-md);
-      font-family: var(--font-body);
-      font-size: var(--p-text-xs);
-      color: var(--color-caption);
-    }
-    
-    .cart-secure-note svg {
-      width: 14px;
-      height: 14px;
-    }
-    
-    /* Content Pages (About/Contact) */
-    .content-page {
-      background: var(--t-surface-base);
-    }
-    
-    .content-hero {
-      padding: var(--space-2xl) var(--space-lg);
-      text-align: center;
-      background: var(--t-surface-sunken);
-    }
-    
-    .content-title {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-4xl);
-      letter-spacing: var(--tracking-heading);
-      color: var(--color-heading);
-      margin: 0 0 var(--space-xs);
-    }
-    
-    .content-subtitle {
-      font-family: var(--font-body);
-      font-size: var(--p-text-lg);
-      color: var(--color-body);
-      margin: 0;
-    }
-    
-    .content-body {
-      padding: var(--space-xl) var(--space-lg);
-      max-width: 800px;
-      margin: 0 auto;
-    }
-    
-    .content-image {
-      width: 100%;
-      height: 300px;
-      border-radius: var(--radius-image);
-      margin-bottom: var(--space-lg);
-      background-size: cover;
-      background-position: center;
-    }
-    
-    .about-image {
-      background-image: url('https://picsum.photos/seed/studio/800/400');
-    }
-    
-    .content-text {
-      font-family: var(--font-body);
-      color: var(--color-body);
-      line-height: 1.7;
-    }
-    
-    .content-text p {
-      margin: 0 0 var(--space-md);
-    }
-    
-    .content-text .lead-text {
-      font-size: var(--p-text-lg);
-      color: var(--color-heading);
-    }
-    
-    .content-text h2 {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-xl);
-      color: var(--color-heading);
-      margin: var(--space-lg) 0 var(--space-sm);
-    }
-    
-    /* Contact Page */
-    .contact-layout {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--space-xl);
-      padding: var(--space-xl) var(--space-lg);
-      max-width: 1000px;
-      margin: 0 auto;
-    }
-    
-    .contact-info {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-lg);
-    }
-    
-    .contact-block h3 {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-lg);
-      color: var(--color-heading);
-      margin: 0 0 var(--space-xs);
-    }
-    
-    .contact-block p {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      margin: 0 0 var(--space-sm);
-      line-height: 1.5;
-    }
-    
-    .contact-link {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--t-accent);
-      text-decoration: none;
-    }
-    
-    .contact-link:hover {
-      text-decoration: underline;
-    }
-    
-    .contact-social {
-      display: flex;
-      gap: var(--space-sm);
-    }
-    
-    .contact-form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-md);
-    }
-    
-    .form-group {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-xs);
-    }
-    
-    .form-label {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      color: var(--color-heading);
-    }
-    
-    .form-input {
-      padding: var(--space-sm);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-input);
-      font-family: var(--font-body);
-      font-size: var(--p-text-base);
-      background: var(--t-surface-raised);
-      color: var(--color-heading);
-      transition: border-color 0.15s ease, box-shadow 0.15s ease;
-    }
-    
-    .form-input:focus {
-      outline: none;
-      border-color: var(--t-accent);
-      box-shadow: 0 0 0 3px var(--t-accent-ring);
-    }
-    
-    .form-input::placeholder {
-      color: var(--color-caption);
-    }
-    
-    .form-select {
-      cursor: pointer;
-    }
-    
-    .form-textarea {
-      resize: vertical;
-      min-height: 120px;
-    }
-    
-    .form-submit {
-      align-self: flex-start;
-      padding: var(--space-sm) var(--space-xl);
-    }
-    
-    /* Cart Drawer */
-    .cart-drawer {
-      position: fixed;
-      top: 0;
-      right: -400px;
-      width: 400px;
-      max-width: 90vw;
-      height: 100%;
-      background: var(--t-surface-raised);
-      z-index: 1000;
-      display: flex;
-      flex-direction: column;
-      transition: right 0.3s ease;
-      box-shadow: -4px 0 20px rgba(0,0,0,0.15);
-    }
-    
-    .cart-drawer.open {
-      right: 0;
-    }
-    
-    .cart-drawer-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: var(--space-md) var(--space-lg);
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .cart-drawer-header h2 {
-      font-family: var(--font-heading);
-      font-weight: var(--weight-heading);
-      font-size: var(--p-text-lg);
-      color: var(--color-heading);
-      margin: 0;
-    }
-    
-    .cart-drawer-close {
-      background: none;
-      border: none;
-      padding: var(--space-xs);
-      cursor: pointer;
-      color: var(--color-body);
-    }
-    
-    .cart-drawer-close svg {
-      width: 20px;
-      height: 20px;
-    }
-    
-    .cart-drawer-items {
-      flex: 1;
-      overflow-y: auto;
-      padding: var(--space-md);
-    }
-    
-    .cart-drawer-item {
-      display: flex;
-      gap: var(--space-sm);
-      padding: var(--space-sm) 0;
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .cart-drawer-item-image {
-      width: 60px;
-      height: 60px;
-      border-radius: var(--radius-image);
-      background-size: cover;
-      background-position: center;
-      flex-shrink: 0;
-    }
-    
-    .cart-drawer-item-image.img-1 { background-image: url('https://picsum.photos/seed/fern/120/120'); }
-    .cart-drawer-item-image.img-2 { background-image: url('https://picsum.photos/seed/roses/120/120'); }
-    
-    .cart-drawer-item-details h3 {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      font-weight: 500;
-      color: var(--color-heading);
-      margin: 0 0 2px;
-    }
-    
-    .cart-drawer-item-details p {
-      font-family: var(--font-body);
-      font-size: var(--p-text-xs);
-      color: var(--color-caption);
-      margin: 0;
-    }
-    
-    .cart-drawer-item-price {
-      color: var(--color-heading) !important;
-      font-weight: 500;
-      margin-top: 4px !important;
-    }
-    
-    .cart-drawer-footer {
-      padding: var(--space-md) var(--space-lg);
-      border-top: 1px solid var(--color-border);
-      background: var(--t-surface-sunken);
-    }
-    
-    .cart-drawer-total {
-      display: flex;
-      justify-content: space-between;
-      font-family: var(--font-body);
-      font-size: var(--p-text-base);
-      font-weight: 600;
-      color: var(--color-heading);
-      margin-bottom: var(--space-md);
-    }
-    
-    .cart-drawer-checkout {
-      width: 100%;
-      margin-bottom: var(--space-sm);
-    }
-    
-    .cart-drawer-link {
-      display: block;
-      text-align: center;
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-body);
-      text-decoration: underline;
-    }
-    
-    .cart-drawer-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.4);
-      z-index: 999;
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity 0.3s ease, visibility 0.3s ease;
-    }
-    
-    .cart-drawer-overlay.open {
-      opacity: 1;
-      visibility: visible;
-    }
-    
-    /* Search Modal */
-    .search-modal {
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.5);
-      z-index: 1001;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      padding-top: 100px;
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity 0.2s ease, visibility 0.2s ease;
-    }
-    
-    .search-modal.open {
-      opacity: 1;
-      visibility: visible;
-    }
-    
-    .search-modal-content {
-      background: var(--t-surface-raised);
-      border-radius: var(--radius-card);
-      width: 100%;
-      max-width: 600px;
-      margin: 0 var(--space-md);
-      box-shadow: 0 20px 40px rgba(0,0,0,0.2);
-      overflow: hidden;
-    }
-    
-    .search-input-wrapper {
-      display: flex;
-      align-items: center;
-      padding: var(--space-md);
-      gap: var(--space-sm);
-      border-bottom: 1px solid var(--color-border);
-    }
-    
-    .search-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--color-caption);
-      flex-shrink: 0;
-    }
-    
-    .search-input {
-      flex: 1;
-      border: none;
-      background: none;
-      font-family: var(--font-body);
-      font-size: var(--p-text-lg);
-      color: var(--color-heading);
-      outline: none;
-    }
-    
-    .search-input::placeholder {
-      color: var(--color-caption);
-    }
-    
-    .search-close {
-      background: none;
-      border: none;
-      padding: var(--space-xs);
-      cursor: pointer;
-      color: var(--color-caption);
-    }
-    
-    .search-close:hover {
-      color: var(--color-heading);
-    }
-    
-    .search-close svg {
-      width: 20px;
-      height: 20px;
-    }
-    
-    .search-results {
-      padding: var(--space-lg);
-    }
-    
-    .search-hint {
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      color: var(--color-caption);
-      text-align: center;
-      margin: 0;
-    }
-    
-    /* Zoom button on PDP image */
-    .pdp-main-image {
-      position: relative;
-      cursor: pointer;
-    }
-    
-    .zoom-btn {
-      position: absolute;
-      bottom: var(--space-sm);
-      right: var(--space-sm);
-      width: 40px;
-      height: 40px;
-      background: var(--t-surface-raised);
-      border: none;
-      border-radius: var(--radius-button);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-heading);
-      box-shadow: var(--shadow-sm);
-      transition: all 0.15s ease;
-      opacity: 0;
-    }
-    
-    .pdp-main-image:hover .zoom-btn,
-    .zoom-btn:focus {
-      opacity: 1;
-    }
-    
-    .zoom-btn:hover {
-      background: var(--color-heading);
-      color: var(--t-text-inverse);
-    }
-    
-    .zoom-btn svg {
-      width: 20px;
-      height: 20px;
-    }
-    
-    /* Lightbox - using native dialog */
-    .lightbox {
-      position: fixed;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      max-width: 100%;
-      max-height: 100%;
-      background: rgba(0, 0, 0, 0.95);
-      border: none;
-      padding: 0;
-      z-index: 1002;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .lightbox::backdrop {
-      background: rgba(0, 0, 0, 0.95);
-    }
-    
-    .lightbox:not([open]) {
-      display: none;
-    }
-    
-    .lightbox-content {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .lightbox-close {
-      position: absolute;
-      top: var(--space-md);
-      right: var(--space-md);
-      width: 44px;
-      height: 44px;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--radius-button);
-      transition: background 0.15s ease;
-      z-index: 1;
-    }
-    
-    .lightbox-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-    
-    .lightbox-close svg {
-      width: 24px;
-      height: 24px;
-    }
-    
-    .lightbox-nav {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 50px;
-      height: 50px;
-      background: rgba(255, 255, 255, 0.1);
-      border: none;
-      cursor: pointer;
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      transition: background 0.15s ease;
-    }
-    
-    .lightbox-nav:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-    
-    .lightbox-nav svg {
-      width: 24px;
-      height: 24px;
-    }
-    
-    .lightbox-prev {
-      left: var(--space-md);
-    }
-    
-    .lightbox-next {
-      right: var(--space-md);
-    }
-    
-    .lightbox-image-container {
-      max-width: 90vw;
-      max-height: 75vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .lightbox-image {
-      max-width: 100%;
-      max-height: 75vh;
-      object-fit: contain;
-      border-radius: var(--radius-image);
-    }
-    
-    .lightbox-figure {
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--space-md);
-    }
-    
-    .lightbox-caption {
-      color: rgba(255, 255, 255, 0.8);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-      text-align: center;
-      max-width: 500px;
-      line-height: 1.5;
-    }
-    
-    .lightbox-counter {
-      position: absolute;
-      bottom: var(--space-md);
-      left: 50%;
-      transform: translateX(-50%);
-      color: rgba(255, 255, 255, 0.7);
-      font-family: var(--font-body);
-      font-size: var(--p-text-sm);
-    }
-  </style>
-</head>
-<body>
-  <div class="page-layout">
-    <!-- Controls Panel -->
-    <div class="controls-panel">
-      <div class="controls-header">
-        <h1>Theme Studio</h1>
-        <p>One theme, infinite possibilities. Every combination is designed to work beautifully.</p>
-      </div>
-      
-      <!-- Shop Name -->
-      <div class="control-section">
-        <label class="control-label">Shop name</label>
-        <input type="text" class="text-input" id="shop-name" value="Botanical Studio" placeholder="Your shop name">
-      </div>
-      
-      <!-- Branding Section -->
-      <div class="branding-section">
-        <label class="control-label">Logo &amp; header</label>
-        
-        <div class="logo-mode-options">
-          <label class="logo-mode-option active" data-mode="text-only">
-            <input type="radio" name="logo-mode" value="text-only" checked>
-            <span class="logo-mode-radio"></span>
-            <div class="logo-mode-content">
-              <div class="logo-mode-title">Shop name only</div>
-              <div class="logo-mode-desc">Your name in the heading font</div>
-            </div>
-          </label>
-          
-          <label class="logo-mode-option" data-mode="logo-and-text">
-            <input type="radio" name="logo-mode" value="logo-and-text">
-            <span class="logo-mode-radio"></span>
-            <div class="logo-mode-content">
-              <div class="logo-mode-title">Logo + shop name</div>
-              <div class="logo-mode-desc">Your logo image with name beside it</div>
-            </div>
-          </label>
-          
-          <label class="logo-mode-option" data-mode="logo-only">
-            <input type="radio" name="logo-mode" value="logo-only">
-            <span class="logo-mode-radio"></span>
-            <div class="logo-mode-content">
-              <div class="logo-mode-title">Logo only</div>
-              <div class="logo-mode-desc">Just your logo (with text built in)</div>
-            </div>
-          </label>
-          
-          <label class="logo-mode-option" data-mode="header-image">
-            <input type="radio" name="logo-mode" value="header-image">
-            <span class="logo-mode-radio"></span>
-            <div class="logo-mode-content">
-              <div class="logo-mode-title">Header background</div>
-              <div class="logo-mode-desc">Full-width image with name overlay</div>
-            </div>
-          </label>
-          
-          <label class="logo-mode-option" data-mode="logo-header-image">
-            <input type="radio" name="logo-mode" value="logo-header-image">
-            <span class="logo-mode-radio"></span>
-            <div class="logo-mode-content">
-              <div class="logo-mode-title">Logo + header background</div>
-              <div class="logo-mode-desc">Your logo (use white/light version) on a full-width image</div>
-            </div>
-          </label>
-        </div>
-        
-        <div class="upload-section">
-          <!-- Logo upload (for logo-and-text and logo-only modes) -->
-          <div class="upload-row" id="logo-upload-row">
-            <span class="upload-label" id="logo-upload-label">Upload logo (SVG or PNG)</span>
-            <div class="upload-area">
-              <label class="upload-btn">
-                <span>Choose file...</span>
-                <input type="file" id="logo-upload" accept=".svg,.png,.jpg,.jpeg,.webp">
-              </label>
-              <div class="upload-preview" id="logo-preview">
-                <img id="logo-preview-img" src="" alt="Logo preview">
-                <button class="remove-upload" id="remove-logo">×</button>
-              </div>
-            </div>
-            <div class="size-control" id="logo-size-control">
-              <div class="size-control-header">
-                <span class="size-control-label">Logo size</span>
-                <span class="size-control-value" id="logo-size-value">36px</span>
-              </div>
-              <input type="range" class="size-slider" id="logo-size-slider" min="24" max="120" value="36">
-            </div>
-            
-            <div class="logo-color-control" id="logo-color-control">
-              <div class="logo-color-toggle">
-                <label class="toggle-label">
-                  <input type="checkbox" id="recolor-logo-checkbox">
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Recolour logo</span>
-                </label>
-              </div>
-              <div class="logo-color-picker-row" id="logo-color-picker-row">
-                <input type="color" class="color-picker color-picker-small" id="logo-color-picker" value="#171717">
-                <span class="color-value" id="logo-color-value">#171717</span>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Header background upload -->
-          <div class="upload-row" id="header-upload-row">
-            <span class="upload-label">Upload header image</span>
-            <div class="upload-area">
-              <label class="upload-btn">
-                <span>Choose file...</span>
-                <input type="file" id="header-upload" accept=".jpg,.jpeg,.png,.webp">
-              </label>
-            </div>
-            <div class="upload-preview upload-preview-wide" id="header-preview">
-              <img id="header-preview-img" src="" alt="Header preview">
-              <button class="remove-upload" id="remove-header">×</button>
-            </div>
-            
-            <div class="header-image-controls" id="header-image-controls">
-              <div class="control-row">
-                <div class="size-control-header">
-                  <span class="size-control-label">Zoom</span>
-                  <span class="size-control-value" id="header-zoom-value">100%</span>
-                </div>
-                <input type="range" class="size-slider" id="header-zoom-slider" min="100" max="200" value="100">
-              </div>
-              
-              <div class="control-row" id="header-position-x-row">
-                <div class="size-control-header">
-                  <span class="size-control-label">Horizontal position</span>
-                  <span class="size-control-value" id="header-position-x-value">50%</span>
-                </div>
-                <input type="range" class="size-slider" id="header-position-x-slider" min="0" max="100" value="50">
-              </div>
-              
-              <div class="control-row">
-                <div class="size-control-header">
-                  <span class="size-control-label">Vertical position</span>
-                  <span class="size-control-value" id="header-position-value">50%</span>
-                </div>
-                <input type="range" class="size-slider" id="header-position-slider" min="0" max="100" value="50">
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Presets -->
-      <div class="control-section">
-        <label class="control-label">Start with a preset</label>
-        <div class="preset-grid" id="preset-grid">
-          <button class="preset-button active" data-preset="gallery">
-            <div class="preset-name">Gallery</div>
-            <div class="preset-desc">Warm & spacious</div>
-          </button>
-          <button class="preset-button" data-preset="studio">
-            <div class="preset-name">Studio</div>
-            <div class="preset-desc">Clean & balanced</div>
-          </button>
-          <button class="preset-button" data-preset="boutique">
-            <div class="preset-name">Boutique</div>
-            <div class="preset-desc">Classic & refined</div>
-          </button>
-          <button class="preset-button" data-preset="bold">
-            <div class="preset-name">Bold</div>
-            <div class="preset-desc">Sharp & modern</div>
-          </button>
-          <button class="preset-button" data-preset="playful">
-            <div class="preset-name">Playful</div>
-            <div class="preset-desc">Friendly & round</div>
-          </button>
-          <button class="preset-button" data-preset="minimal">
-            <div class="preset-name">Minimal</div>
-            <div class="preset-desc">Cool & focused</div>
-          </button>
-          <button class="preset-button" data-preset="night">
-            <div class="preset-name">Night</div>
-            <div class="preset-desc">Dark & premium</div>
-          </button>
-          <button class="preset-button" data-preset="classic">
-            <div class="preset-name">Classic</div>
-            <div class="preset-desc">Timeless elegance</div>
-          </button>
-          <button class="preset-button" data-preset="impulse">
-            <div class="preset-name">Impulse</div>
-            <div class="preset-desc">Fashion editorial</div>
-          </button>
-        </div>
-      </div>
-      
-      <!-- Accent Color - stays in essentials -->
-      <div class="control-section">
-        <label class="control-label">Accent colour</label>
-        <div class="color-picker-wrapper">
-          <input type="color" class="color-picker" id="accent-picker" value="#f97316">
-          <span class="color-value" id="color-value">#f97316</span>
-        </div>
-      </div>
-      
-      <!-- Customise Section (collapsible) -->
-      <div class="customise-section" id="customise-section">
-        <div class="customise-header" id="customise-header">
-          <span class="customise-title">Customise</span>
-          <svg class="customise-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </div>
-        
-        <div class="customise-content">
-          <!-- Typography Group -->
-          <div class="control-group">
-            <div class="control-group-header">
-              <svg class="control-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="4 7 4 4 20 4 20 7"></polyline>
-                <line x1="9" y1="20" x2="15" y2="20"></line>
-                <line x1="12" y1="4" x2="12" y2="20"></line>
-              </svg>
-              <span class="control-group-title">Typography</span>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Font style</label>
-              <div class="option-group" id="typography-options">
-                <button class="option-button active" data-typography="clean">Clean</button>
-                <button class="option-button" data-typography="editorial">Editorial</button>
-                <button class="option-button" data-typography="modern">Modern</button>
-                <button class="option-button" data-typography="classic">Classic</button>
-                <button class="option-button" data-typography="friendly">Friendly</button>
-                <button class="option-button" data-typography="minimal">Minimal</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Font size</label>
-              <div class="option-group" id="font-size-options">
-                <button class="option-button" data-font-size="small">Small</button>
-                <button class="option-button active" data-font-size="medium">Medium</button>
-                <button class="option-button" data-font-size="large">Large</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Heading weight</label>
-              <div class="option-group" id="heading-weight-options">
-                <button class="option-button" data-heading-weight="regular">Regular</button>
-                <button class="option-button" data-heading-weight="medium">Medium</button>
-                <button class="option-button active" data-heading-weight="bold">Bold</button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Colours Group -->
-          <div class="control-group">
-            <div class="control-group-header">
-              <svg class="control-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"></circle>
-                <circle cx="12" cy="12" r="3"></circle>
-              </svg>
-              <span class="control-group-title">Colours</span>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Colour mood</label>
-              <div class="option-group" id="mood-options">
-                <button class="option-button" data-mood="warm">Warm</button>
-                <button class="option-button active" data-mood="neutral">Neutral</button>
-                <button class="option-button" data-mood="cool">Cool</button>
-                <button class="option-button" data-mood="dark">Dark</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Hover colour</label>
-              <div class="color-picker-wrapper">
-                <input type="color" class="color-picker" id="secondary-accent-picker" value="#ea580c">
-                <span class="color-value" id="secondary-color-value">#ea580c</span>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Sale badge colour</label>
-              <div class="color-picker-wrapper">
-                <input type="color" class="color-picker" id="sale-color-picker" value="#dc2626">
-                <span class="color-value" id="sale-color-value">#dc2626</span>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Layout Group -->
-          <div class="control-group">
-            <div class="control-group-header">
-              <svg class="control-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                <line x1="3" y1="9" x2="21" y2="9"></line>
-                <line x1="9" y1="21" x2="9" y2="9"></line>
-              </svg>
-              <span class="control-group-title">Layout</span>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Layout width</label>
-              <div class="option-group" id="layout-width-options">
-                <button class="option-button" data-layout-width="contained">Contained</button>
-                <button class="option-button active" data-layout-width="wide">Wide</button>
-                <button class="option-button" data-layout-width="full">Full width</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Density</label>
-              <div class="option-group" id="density-options">
-                <button class="option-button" data-density="spacious">Spacious</button>
-                <button class="option-button active" data-density="balanced">Balanced</button>
-                <button class="option-button" data-density="compact">Compact</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Corner style</label>
-              <div class="option-group" id="shape-options">
-                <button class="option-button" data-shape="sharp">Sharp</button>
-                <button class="option-button active" data-shape="soft">Soft</button>
-                <button class="option-button" data-shape="round">Round</button>
-                <button class="option-button" data-shape="pill">Pill</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Button style</label>
-              <div class="option-group" id="button-style-options">
-                <button class="option-button active" data-button-style="filled">Filled</button>
-                <button class="option-button" data-button-style="outline">Outline</button>
-                <button class="option-button" data-button-style="soft">Soft</button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Product Cards Group -->
-          <div class="control-group">
-            <div class="control-group-header">
-              <svg class="control-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
-                <line x1="8" y1="21" x2="16" y2="21"></line>
-                <line x1="12" y1="17" x2="12" y2="21"></line>
-              </svg>
-              <span class="control-group-title">Product cards</span>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Products per row</label>
-              <div class="option-group" id="grid-options">
-                <button class="option-button" data-grid="2">2</button>
-                <button class="option-button" data-grid="3">3</button>
-                <button class="option-button active" data-grid="4">4</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Image ratio</label>
-              <div class="option-group" id="aspect-options">
-                <button class="option-button active" data-aspect="square">Square</button>
-                <button class="option-button" data-aspect="portrait">Portrait</button>
-                <button class="option-button" data-aspect="landscape">Landscape</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Text alignment</label>
-              <div class="option-group" id="product-text-options">
-                <button class="option-button active" data-product-text="left">Left</button>
-                <button class="option-button" data-product-text="center">Center</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Card shadow</label>
-              <div class="option-group" id="card-shadow-options">
-                <button class="option-button active" data-card-shadow="none">None</button>
-                <button class="option-button" data-card-shadow="subtle">Subtle</button>
-                <button class="option-button" data-card-shadow="pronounced">Pronounced</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Features</label>
-              <div class="toggle-list">
-                <label class="toggle-label">
-                  <input type="checkbox" id="hover-image-toggle" checked>
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Second image on hover</span>
-                </label>
-                <label class="toggle-label">
-                  <input type="checkbox" id="quick-add-toggle" checked>
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Quick add button</span>
-                </label>
-                <label class="toggle-label">
-                  <input type="checkbox" id="show-prices-toggle" checked>
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Show prices</span>
-                </label>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Product Page Group -->
-          <div class="control-group">
-            <div class="control-group-header">
-              <svg class="control-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                <polyline points="14 2 14 8 20 8"></polyline>
-              </svg>
-              <span class="control-group-title">Product page</span>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Gallery position</label>
-              <div class="option-group" id="gallery-position-options">
-                <button class="option-button active" data-gallery-position="left">Left</button>
-                <button class="option-button" data-gallery-position="right">Right</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Sections</label>
-              <div class="toggle-list">
-                <label class="toggle-label">
-                  <input type="checkbox" id="pdp-trust-toggle" checked>
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Trust badges</span>
-                </label>
-                <label class="toggle-label">
-                  <input type="checkbox" id="pdp-reviews-toggle" checked>
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Reviews section</span>
-                </label>
-                <label class="toggle-label">
-                  <input type="checkbox" id="pdp-related-toggle" checked>
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Related products</span>
-                </label>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Header Group -->
-          <div class="control-group">
-            <div class="control-group-header">
-              <svg class="control-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                <line x1="3" y1="9" x2="21" y2="9"></line>
-              </svg>
-              <span class="control-group-title">Header</span>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Layout</label>
-              <div class="option-group" id="header-options">
-                <button class="option-button active" data-header="standard">Standard</button>
-                <button class="option-button" data-header="centered">Centered</button>
-                <button class="option-button" data-header="minimal">Minimal</button>
-              </div>
-            </div>
-            
-            <div class="control-section">
-              <label class="control-label">Features</label>
-              <div class="toggle-list">
-                <label class="toggle-label">
-                  <input type="checkbox" id="announcement-bar-toggle" checked>
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Announcement bar</span>
-                </label>
-                <label class="toggle-label">
-                  <input type="checkbox" id="sticky-header-toggle">
-                  <span class="toggle-switch"></span>
-                  <span class="toggle-text">Sticky header</span>
-                </label>
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </div>
-      
-      <!-- Current combination -->
-      <div class="combo-display">
-        <div class="combo-label">Current combination</div>
-        <div class="combo-value" id="combo-value">Neutral · Clean · Soft · Balanced · 4-up · Standard</div>
-        <div class="combo-count">One of 100,000+ possible combinations</div>
-      </div>
-    </div>
-    
-    <!-- Preview Area -->
-    <div class="preview-area">
-      <div class="preview-container">
-        <div class="page-toggle">
-          <button class="page-toggle-btn active" data-page="home">Home</button>
-          <button class="page-toggle-btn" data-page="collection">Collection</button>
-          <button class="page-toggle-btn" data-page="pdp">Product</button>
-          <button class="page-toggle-btn" data-page="cart">Cart</button>
-          <button class="page-toggle-btn" data-page="about">About</button>
-          <button class="page-toggle-btn" data-page="contact">Contact</button>
-          <button class="page-toggle-btn" data-page="error">Error</button>
-        </div>
-        
-        <div class="browser-chrome">
-          <div class="browser-traffic-lights">
-            <span class="traffic-light red"></span>
-            <span class="traffic-light yellow"></span>
-            <span class="traffic-light green"></span>
-          </div>
-          <div class="browser-nav">
-            <button class="browser-nav-btn" aria-label="Back">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
-            </button>
-            <button class="browser-nav-btn" aria-label="Forward">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
-            </button>
-          </div>
-          <div class="browser-url-bar">
-            <svg class="browser-url-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
-              <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
-            </svg>
-            <div class="browser-favicon" id="browser-favicon">
-              <span class="favicon-letter" id="favicon-letter">B</span>
-            </div>
-            <span class="browser-url-text"><span class="domain" id="browser-domain">botanicalstudio</span>.berrypod.uk</span>
-          </div>
-          <div class="browser-actions">
-            <button class="browser-action-btn" aria-label="Share">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
-                <polyline points="16 6 12 2 8 6"/>
-                <line x1="12" y1="2" x2="12" y2="15"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-        
-        <div class="preview-frame" id="preview-frame" 
-             data-mood="neutral" 
-             data-typography="clean" 
-             data-shape="soft" 
-             data-density="balanced">
-        
-        <!-- Announcement Bar -->
-        <div class="announcement-bar" id="announcement-bar">
-          <p>Free UK shipping on orders over £50 ✨</p>
-        </div>
-        
-        <!-- Shop Header -->
-        <header class="shop-header" id="shop-header" data-header="standard" data-logo-mode="text-only">
-          <div class="shop-logo" id="shop-logo">
-            <div class="shop-logo-image" id="shop-logo-image">
-              <img id="shop-logo-img" src="" alt="">
-            </div>
-            <span class="shop-logo-text" id="shop-logo-text">Botanical Studio</span>
-          </div>
-          <nav class="shop-nav">
-            <a href="#" data-nav="home">Home</a>
-            <a href="#" data-nav="collection">Shop All</a>
-            <a href="#" data-nav="about">About</a>
-            <a href="#" data-nav="contact">Contact</a>
-          </nav>
-          <div class="shop-cart">
-            <button class="header-icon-btn search-btn" id="search-btn" aria-label="Search">
-              <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="11" cy="11" r="8"></circle>
-                <path d="M21 21l-4.35-4.35"></path>
-              </svg>
-            </button>
-            <button class="header-icon-btn cart-btn" id="cart-btn" aria-label="Cart">
-              <svg class="icon cart-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"></path>
-                <line x1="3" y1="6" x2="21" y2="6"></line>
-                <path d="M16 10a4 4 0 01-8 0"></path>
-              </svg>
-              <span class="cart-count">2</span>
-            </button>
-          </div>
-        </header>
-        
-        <!-- Home View -->
-        <div class="page-view home-view active" id="home-view">
-          <!-- Hero -->
-          <section class="shop-hero">
-            <h1 id="hero-title">Nature-inspired art prints</h1>
-            <p>Original botanical illustrations, printed on premium archival paper. Each piece brings a little bit of the outside, inside.</p>
-            <button class="btn btn-primary" id="shop-collection-btn" data-nav="collection">Shop the collection</button>
-          </section>
-          
-          <!-- Categories -->
-          <section class="home-categories">
-            <nav class="category-links" aria-label="Product categories">
-              <a href="#" class="category-link" data-nav="collection">
-                <div class="category-image cat-img-1"></div>
-                <span class="category-name">Botanicals</span>
-              </a>
-              <a href="#" class="category-link" data-nav="collection">
-                <div class="category-image cat-img-2"></div>
-                <span class="category-name">Florals</span>
-              </a>
-              <a href="#" class="category-link" data-nav="collection">
-                <div class="category-image cat-img-3"></div>
-                <span class="category-name">Landscapes</span>
-              </a>
-            </nav>
-          </section>
-          
-          <!-- Featured Products -->
-          <section class="product-section">
-            <h2 class="section-title">Featured prints</h2>
-            <div class="product-grid" id="product-grid" data-grid="4">
-              <article class="product-card">
-                <div class="product-image">
-                  <span class="product-badge badge-new">New</span>
-                  <div class="product-image-primary img-1"></div>
-                  <div class="product-image-hover img-1-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Autumn Fern</h3>
-                  <p class="product-price">£24.00</p>
-                </div>
-              </article>
-              <article class="product-card">
-                <div class="product-image">
-                  <span class="product-badge badge-sale">Sale</span>
-                  <div class="product-image-primary img-2"></div>
-                  <div class="product-image-hover img-2-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Wild Roses</h3>
-                  <p class="product-price"><span class="price-was">£35.00</span> £28.00</p>
-                </div>
-              </article>
-              <article class="product-card">
-                <div class="product-image">
-                  <div class="product-image-primary img-3"></div>
-                  <div class="product-image-hover img-3-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Morning Dew</h3>
-                  <p class="product-price">£24.00</p>
-                </div>
-              </article>
-              <article class="product-card">
-                <div class="product-image">
-                  <div class="product-image-primary img-5"></div>
-                  <div class="product-image-hover img-5-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Spring Bloom</h3>
-                  <p class="product-price">£28.00</p>
-                </div>
-              </article>
-            </div>
-            <div class="section-cta">
-              <button class="btn btn-secondary" data-nav="collection">View all products</button>
-            </div>
-          </section>
-          
-          <!-- About Snippet -->
-          <section class="home-about">
-            <div class="home-about-image"></div>
-            <div class="home-about-content">
-              <h2>Made with care in Yorkshire</h2>
-              <p>Every illustration starts as a pencil sketch, inspired by the plants and flowers found in British woodlands, meadows, and gardens. Printed on museum-quality archival paper using pigment-based inks that will last a lifetime.</p>
-              <a href="#" class="text-link" data-nav="about">Learn more about the studio →</a>
-            </div>
-          </section>
-          
-          <!-- Footer -->
-          <footer class="shop-footer" id="home-footer">
-            <div class="footer-content">
-              <div class="footer-newsletter">
-                <h3 class="footer-heading">Join the studio</h3>
-                <p class="footer-text">Get 10% off your first order and be the first to know about new prints.</p>
-                <form class="newsletter-form">
-                  <input type="email" class="newsletter-input" placeholder="your@email.com">
-                  <button type="submit" class="btn btn-primary newsletter-btn">Subscribe</button>
-                </form>
-              </div>
-              <div class="footer-links">
-                <div class="footer-column">
-                  <h4 class="footer-column-title">Shop</h4>
-                  <a href="#" data-nav="collection">All products</a>
-                  <a href="#" data-nav="collection">New arrivals</a>
-                  <a href="#" data-nav="collection">Best sellers</a>
-                </div>
-                <div class="footer-column">
-                  <h4 class="footer-column-title">Help</h4>
-                  <a href="#" data-nav="contact">Shipping</a>
-                  <a href="#" data-nav="contact">Returns</a>
-                  <a href="#" data-nav="contact">Contact</a>
-                </div>
-              </div>
-            </div>
-            <div class="footer-bottom">
-              <p id="footer-text">© 2025 Botanical Studio</p>
-              <div class="footer-social">
-                <a href="#" class="social-link" aria-label="Instagram">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
-                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
-                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
-                  </svg>
-                </a>
-                <a href="#" class="social-link" aria-label="Pinterest">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="10"></circle>
-                    <path d="M8 12c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4"></path>
-                    <line x1="12" y1="16" x2="9" y2="21"></line>
-                  </svg>
-                </a>
-              </div>
-            </div>
-          </footer>
-        </div>
-        
-        <!-- Collection View -->
-        <div class="page-view collection-view" id="collection-view">
-          <div class="collection-header">
-            <h1 class="collection-title">Shop All</h1>
-            <p class="collection-count">12 products</p>
-          </div>
-          
-          <section class="product-section">
-            <div class="collection-toolbar">
-              <div class="collection-filter" role="group" aria-label="Filter by category">
-                <button class="filter-btn active">All</button>
-                <button class="filter-btn">Botanicals</button>
-                <button class="filter-btn">Florals</button>
-                <button class="filter-btn">Landscapes</button>
-              </div>
-              <div class="collection-sort">
-                <label for="sort-select" class="visually-hidden">Sort products</label>
-                <select id="sort-select" class="sort-select">
-                  <option>Featured</option>
-                  <option>Price: Low to high</option>
-                  <option>Price: High to low</option>
-                  <option>Newest</option>
-                </select>
-              </div>
-            </div>
-            
-            <div class="product-grid" data-grid="4">
-              <article class="product-card">
-                <div class="product-image">
-                  <span class="product-badge badge-new">New</span>
-                  <div class="product-image-primary img-1"></div>
-                  <div class="product-image-hover img-1-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Autumn Fern</h3>
-                  <p class="product-price">£24.00</p>
-                </div>
-              </article>
-              <article class="product-card">
-                <div class="product-image">
-                  <span class="product-badge badge-sale">Sale</span>
-                  <div class="product-image-primary img-2"></div>
-                  <div class="product-image-hover img-2-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Wild Roses</h3>
-                  <p class="product-price"><span class="price-was">£35.00</span> £28.00</p>
-                </div>
-              </article>
-              <article class="product-card">
-                <div class="product-image">
-                  <div class="product-image-primary img-3"></div>
-                  <div class="product-image-hover img-3-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Morning Dew</h3>
-                  <p class="product-price">£24.00</p>
-                </div>
-              </article>
-              <article class="product-card">
-                <div class="product-image">
-                  <span class="product-badge badge-sold">Sold out</span>
-                  <div class="product-image-primary img-4"></div>
-                  <div class="product-image-hover img-4-alt"></div>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Oak Leaves</h3>
-                  <p class="product-price">£32.00</p>
-                </div>
-              </article>
-              <article class="product-card">
-                <div class="product-image">
-                  <div class="product-image-primary img-5"></div>
-                  <div class="product-image-hover img-5-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Spring Bloom</h3>
-                  <p class="product-price">£28.00</p>
-                </div>
-              </article>
-              <article class="product-card">
-                <div class="product-image">
-                  <div class="product-image-primary img-6"></div>
-                  <div class="product-image-hover img-6-alt"></div>
-                  <button class="quick-add-btn">Quick add</button>
-                </div>
-                <div class="product-info">
-                  <h3 class="product-title">Lavender Fields</h3>
-                  <p class="product-price">£24.00</p>
-                </div>
-              </article>
-            </div>
-          </section>
-          
-          <footer class="shop-footer" id="collection-footer">
-            <div class="footer-bottom">
-              <p id="footer-text-collection">© 2025 Botanical Studio</p>
-            </div>
-          </footer>
-        </div>
-        
-        <!-- PDP View -->
-        <div class="page-view pdp-view" id="pdp-view">
-          <div class="pdp-container">
-            <nav class="pdp-breadcrumb">
-              <a href="#" data-nav="home">Home</a>
-              <span class="breadcrumb-sep">›</span>
-              <a href="#" data-nav="collection">Shop All</a>
-              <span class="breadcrumb-sep">›</span>
-              <span>Autumn Fern</span>
-            </nav>
-            
-            <div class="pdp-layout">
-              <div class="pdp-gallery">
-                <div class="pdp-main-image" id="pdp-main-image" style="background-image: url('https://picsum.photos/seed/fern/600/600')">
-                  <button class="zoom-btn" id="zoom-btn" aria-label="View larger image">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <circle cx="11" cy="11" r="8"></circle>
-                      <path d="M21 21l-4.35-4.35"></path>
-                      <line x1="11" y1="8" x2="11" y2="14"></line>
-                      <line x1="8" y1="11" x2="14" y2="11"></line>
-                    </svg>
-                  </button>
-                </div>
-                <div class="pdp-thumbnails">
-                  <div class="pdp-thumb active" 
-                       data-image="https://picsum.photos/seed/fern/600/600"
-                       data-alt="Autumn Fern botanical illustration - front view"
-                       data-description="Delicate hand-drawn fern fronds in graphite and watercolour, showing the full composition"></div>
-                  <div class="pdp-thumb" 
-                       data-image="https://picsum.photos/seed/fern-alt/600/600"
-                       data-alt="Autumn Fern botanical illustration - detail view"
-                       data-description="Close-up detail showing the intricate vein patterns and subtle colour gradations"></div>
-                  <div class="pdp-thumb" 
-                       data-image="https://picsum.photos/seed/fern-detail/600/600"
-                       data-alt="Autumn Fern botanical illustration - framed example"
-                       data-description="Example of the print displayed in an oak frame, showing scale and presentation"></div>
-                </div>
-              </div>
-              
-              <div class="pdp-details">
-                <h1 class="pdp-title">Autumn Fern</h1>
-                <p class="pdp-price">£24.00</p>
-                
-                <div class="pdp-description">
-                  <p>A delicate botanical illustration capturing the intricate fronds of an autumn fern. Each piece is printed on museum-quality 300gsm cotton rag paper using archival inks.</p>
-                </div>
-                
-                <div class="pdp-options">
-                  <div class="pdp-option-group">
-                    <label class="pdp-option-label">Size</label>
-                    <div class="pdp-option-buttons">
-                      <button class="pdp-option-btn active">A5</button>
-                      <button class="pdp-option-btn">A4</button>
-                      <button class="pdp-option-btn">A3</button>
-                    </div>
-                  </div>
-                  
-                  <div class="pdp-option-group">
-                    <label class="pdp-option-label">Frame</label>
-                    <div class="pdp-option-buttons">
-                      <button class="pdp-option-btn active">Unframed</button>
-                      <button class="pdp-option-btn">Oak</button>
-                      <button class="pdp-option-btn">Black</button>
-                      <button class="pdp-option-btn">White</button>
-                    </div>
-                  </div>
-                </div>
-                
-                <div class="pdp-details-sections">
-                  <details class="pdp-details">
-                    <summary class="pdp-details-summary">
-                      <span>Size guide</span>
-                      <svg class="pdp-details-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                      </svg>
-                    </summary>
-                    <div class="pdp-details-content">
-                      <table class="size-table">
-                        <thead>
-                          <tr>
-                            <th>Size</th>
-                            <th>Dimensions</th>
-                            <th>Best for</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr>
-                            <td>A5</td>
-                            <td>14.8 × 21 cm</td>
-                            <td>Desks, shelves</td>
-                          </tr>
-                          <tr>
-                            <td>A4</td>
-                            <td>21 × 29.7 cm</td>
-                            <td>Small wall spaces</td>
-                          </tr>
-                          <tr>
-                            <td>A3</td>
-                            <td>29.7 × 42 cm</td>
-                            <td>Statement pieces</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  </details>
-                  
-                  <details class="pdp-details">
-                    <summary class="pdp-details-summary">
-                      <span>Materials & quality</span>
-                      <svg class="pdp-details-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                      </svg>
-                    </summary>
-                    <div class="pdp-details-content">
-                      <ul class="details-list">
-                        <li>Printed on 300gsm museum-quality cotton rag paper</li>
-                        <li>Archival pigment inks rated 100+ years</li>
-                        <li>FSC-certified sustainable paper</li>
-                        <li>Each print is hand-checked before shipping</li>
-                      </ul>
-                    </div>
-                  </details>
-                  
-                  <details class="pdp-details">
-                    <summary class="pdp-details-summary">
-                      <span>Shipping & returns</span>
-                      <svg class="pdp-details-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                      </svg>
-                    </summary>
-                    <div class="pdp-details-content">
-                      <ul class="details-list">
-                        <li>Free UK shipping on orders over £50</li>
-                        <li>Dispatched within 2-3 business days</li>
-                        <li>Plastic-free packaging</li>
-                        <li>30-day returns for unused items</li>
-                      </ul>
-                    </div>
-                  </details>
-                </div>
-                
-                <button class="btn btn-primary pdp-add-btn">Add to basket</button>
-                
-                <div class="pdp-meta">
-                  <div class="pdp-meta-item">
-                    <svg class="pdp-meta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/>
-                      <circle cx="12" cy="10" r="3"/>
-                    </svg>
-                    <span>Printed in the UK</span>
-                  </div>
-                  <div class="pdp-meta-item">
-                    <svg class="pdp-meta-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <rect x="1" y="3" width="15" height="13"></rect>
-                      <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
-                      <circle cx="5.5" cy="18.5" r="2.5"></circle>
-                      <circle cx="18.5" cy="18.5" r="2.5"></circle>
-                    </svg>
-                    <span>Free UK shipping over £50</span>
-                  </div>
-                </div>
-                
-                <div class="pdp-trust-badges">
-                  <div class="trust-badge">
-                    <svg class="trust-badge-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
-                      <polyline points="9 12 11 14 15 10"></polyline>
-                    </svg>
-                    <span>Secure checkout</span>
-                  </div>
-                  <div class="trust-badge">
-                    <svg class="trust-badge-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
-                      <circle cx="12" cy="10" r="3"></circle>
-                    </svg>
-                    <span>UK based</span>
-                  </div>
-                  <div class="trust-badge">
-                    <svg class="trust-badge-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <polyline points="20 6 9 17 4 12"></polyline>
-                    </svg>
-                    <span>Quality guaranteed</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            
-            <!-- Reviews Section -->
-            <div class="pdp-reviews">
-              <div class="reviews-header">
-                <h2 class="section-title">Customer reviews</h2>
-                <div class="reviews-summary">
-                  <div class="reviews-stars">
-                    <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                    <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                    <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                    <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                    <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                  </div>
-                  <span class="reviews-count">Based on 24 reviews</span>
-                </div>
-              </div>
-              
-              <div class="reviews-list">
-                <article class="review">
-                  <div class="review-header">
-                    <div class="review-stars">
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                    </div>
-                    <span class="review-date">2 weeks ago</span>
-                  </div>
-                  <h3 class="review-title">Absolutely beautiful</h3>
-                  <p class="review-text">The quality exceeded my expectations. The colours are vibrant and the paper feels premium. It's now pride of place in my living room.</p>
-                  <div class="review-author">
-                    <span class="review-name">Sarah M.</span>
-                    <span class="review-verified">Verified purchase</span>
-                  </div>
-                </article>
-                
-                <article class="review">
-                  <div class="review-header">
-                    <div class="review-stars">
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                      <svg class="star filled" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                      <svg class="star" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" fill="currentColor"/></svg>
-                    </div>
-                    <span class="review-date">1 month ago</span>
-                  </div>
-                  <h3 class="review-title">Great gift</h3>
-                  <p class="review-text">Bought this as a gift and it arrived beautifully packaged. Fast shipping too. Would definitely order again.</p>
-                  <div class="review-author">
-                    <span class="review-name">James T.</span>
-                    <span class="review-verified">Verified purchase</span>
-                  </div>
-                </article>
-              </div>
-              
-              <button class="btn btn-secondary reviews-load-more">Load more reviews</button>
-            </div>
-            
-            <!-- Related Products -->
-            <div class="pdp-related">
-              <h2 class="section-title">You might also like</h2>
-              <div class="related-grid">
-                <article class="product-card">
-                  <div class="product-image">
-                    <div class="product-image-primary img-2"></div>
-                    <div class="product-image-hover img-2-alt"></div>
-                    <button class="quick-add-btn">Quick add</button>
-                  </div>
-                  <div class="product-info">
-                    <h3 class="product-title">Wild Roses</h3>
-                    <p class="product-price">£28.00</p>
-                  </div>
-                </article>
-                <article class="product-card">
-                  <div class="product-image">
-                    <div class="product-image-primary img-3"></div>
-                    <div class="product-image-hover img-3-alt"></div>
-                    <button class="quick-add-btn">Quick add</button>
-                  </div>
-                  <div class="product-info">
-                    <h3 class="product-title">Morning Dew</h3>
-                    <p class="product-price">£24.00</p>
-                  </div>
-                </article>
-                <article class="product-card">
-                  <div class="product-image">
-                    <div class="product-image-primary img-4"></div>
-                    <div class="product-image-hover img-4-alt"></div>
-                    <button class="quick-add-btn">Quick add</button>
-                  </div>
-                  <div class="product-info">
-                    <h3 class="product-title">Oak Leaves</h3>
-                    <p class="product-price">£32.00</p>
-                  </div>
-                </article>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Footer -->
-          <footer class="shop-footer" id="pdp-footer">
-            <div class="footer-content">
-              <div class="footer-newsletter">
-                <h3 class="footer-heading">Join the studio</h3>
-                <p class="footer-text">Get 10% off your first order and be the first to know about new prints.</p>
-                <form class="newsletter-form">
-                  <input type="email" class="newsletter-input" placeholder="your@email.com">
-                  <button type="submit" class="btn btn-primary newsletter-btn">Subscribe</button>
-                </form>
-              </div>
-              <div class="footer-links">
-                <div class="footer-column">
-                  <h4 class="footer-column-title">Shop</h4>
-                  <a href="#">All prints</a>
-                  <a href="#">New arrivals</a>
-                  <a href="#">Best sellers</a>
-                </div>
-                <div class="footer-column">
-                  <h4 class="footer-column-title">Help</h4>
-                  <a href="#">Shipping</a>
-                  <a href="#">Returns</a>
-                  <a href="#">Contact</a>
-                </div>
-              </div>
-            </div>
-            <div class="footer-bottom">
-              <p id="footer-text-pdp">© 2025 Botanical Studio</p>
-              <div class="footer-social">
-                <a href="#" class="social-link" aria-label="Instagram">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
-                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
-                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
-                  </svg>
-                </a>
-                <a href="#" class="social-link" aria-label="Pinterest">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="10"></circle>
-                    <path d="M8 12c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4"></path>
-                    <line x1="12" y1="16" x2="9" y2="21"></line>
-                  </svg>
-                </a>
-              </div>
-            </div>
-          </footer>
-        </div>
-        
-        <!-- Cart Page -->
-        <div class="page-view cart-view" id="cart-view">
-          <div class="cart-container">
-            <div class="cart-header-row">
-              <h1 class="cart-title">Your basket</h1>
-              <button class="cart-state-toggle" id="cart-state-toggle">Preview empty state</button>
-            </div>
-            
-            <!-- Full Cart State -->
-            <div class="cart-state cart-state-full" id="cart-full">
-              <div class="cart-layout">
-                <div class="cart-items">
-                  <div class="cart-item">
-                    <div class="cart-item-image img-1"></div>
-                    <div class="cart-item-details">
-                      <h3 class="cart-item-title">Autumn Fern</h3>
-                      <p class="cart-item-variant">A4 / Unframed</p>
-                      <p class="cart-item-price">£24.00</p>
-                    </div>
-                    <div class="cart-item-quantity">
-                      <button class="qty-btn">−</button>
-                      <span class="qty-value">1</span>
-                      <button class="qty-btn">+</button>
-                    </div>
-                    <button class="cart-item-remove" aria-label="Remove">
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <line x1="18" y1="6" x2="6" y2="18"></line>
-                        <line x1="6" y1="6" x2="18" y2="18"></line>
-                      </svg>
-                    </button>
-                  </div>
-                  
-                  <div class="cart-item">
-                    <div class="cart-item-image img-2"></div>
-                    <div class="cart-item-details">
-                      <h3 class="cart-item-title">Wild Roses</h3>
-                      <p class="cart-item-variant">A3 / Oak frame</p>
-                      <p class="cart-item-price">£48.00</p>
-                    </div>
-                    <div class="cart-item-quantity">
-                      <button class="qty-btn">−</button>
-                      <span class="qty-value">1</span>
-                      <button class="qty-btn">+</button>
-                    </div>
-                    <button class="cart-item-remove" aria-label="Remove">
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <line x1="18" y1="6" x2="6" y2="18"></line>
-                        <line x1="6" y1="6" x2="18" y2="18"></line>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                
-                <div class="cart-summary">
-                  <div class="cart-summary-row">
-                    <span>Subtotal</span>
-                    <span>£72.00</span>
-                  </div>
-                  <div class="cart-summary-row">
-                    <span>Shipping</span>
-                    <span>Calculated at checkout</span>
-                  </div>
-                  <div class="cart-summary-row cart-total">
-                    <span>Total</span>
-                    <span>£72.00</span>
-                  </div>
-                  <button class="btn btn-primary cart-checkout-btn">Checkout</button>
-                  <p class="cart-secure-note">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-                    </svg>
-                    Secure checkout powered by Stripe
-                  </p>
-                </div>
-              </div>
-            </div>
-            
-            <!-- Empty Cart State -->
-            <div class="cart-state cart-state-empty" id="cart-empty" hidden>
-              <div class="empty-state">
-                <div class="empty-state-illustration">
-                  <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <!-- Soft background -->
-                    <circle cx="60" cy="60" r="48" fill="currentColor" opacity="0.04"/>
-                    
-                    <!-- Simple elegant shopping bag -->
-                    <rect x="32" y="44" width="56" height="52" rx="4" 
-                          stroke="currentColor" stroke-width="2" fill="none" opacity="0.6"/>
-                    
-                    <!-- Bag handles -->
-                    <path d="M44 44 C44 44 44 32 60 32 C76 32 76 44 76 44" 
-                          stroke="currentColor" stroke-width="2" fill="none" 
-                          stroke-linecap="round" opacity="0.6"/>
-                    
-                    <!-- Simple fold line -->
-                    <line x1="32" y1="52" x2="88" y2="52" 
-                          stroke="currentColor" stroke-width="1" opacity="0.2"/>
-                  </svg>
-                </div>
-                <h2 class="empty-state-title">Your basket is empty</h2>
-                <p class="empty-state-message">Looks like you haven't added anything yet. Start exploring our collection to find something you'll love.</p>
-                <button class="btn btn-primary" data-nav="collection">Continue shopping</button>
-              </div>
-            </div>
-          </div>
-          
-          <footer class="shop-footer" id="cart-footer">
-            <div class="footer-bottom">
-              <p id="footer-text-cart">© 2025 Botanical Studio</p>
-            </div>
-          </footer>
-        </div>
-        
-        <!-- About Page -->
-        <div class="page-view about-view" id="about-view">
-          <div class="content-page">
-            <div class="content-hero">
-              <h1 class="content-title">About the studio</h1>
-              <p class="content-subtitle">Nature-inspired art, made with care</p>
-            </div>
-            
-            <div class="content-body">
-              <div class="content-image about-image"></div>
-              
-              <div class="content-text">
-                <p class="lead-text">Botanical Studio was born from a love of the natural world and a desire to bring its beauty indoors.</p>
-                
-                <p>Every illustration starts as a pencil sketch, inspired by the plants and flowers found in British woodlands, meadows, and gardens. These sketches are then refined and printed on museum-quality archival paper using pigment-based inks that will last a lifetime.</p>
-                
-                <p>Based in the Yorkshire countryside, I work from a small garden studio surrounded by the very nature that inspires each piece. Every print is checked by hand before being carefully packaged and sent on its way.</p>
-                
-                <h2>Sustainability</h2>
-                <p>I believe beautiful art shouldn't cost the earth. All prints are produced on FSC-certified paper, shipped in plastic-free packaging, and printed locally to reduce transport emissions.</p>
-                
-                <h2>The process</h2>
-                <p>Each botanical illustration takes between 20-40 hours to complete, from initial field sketches through to the final digital refinement. I work primarily in graphite and watercolour, which are then scanned and carefully colour-corrected to ensure the prints match the original artwork.</p>
-              </div>
-            </div>
-          </div>
-          
-          <footer class="shop-footer" id="about-footer">
-            <div class="footer-bottom">
-              <p id="footer-text-about">© 2025 Botanical Studio</p>
-            </div>
-          </footer>
-        </div>
-        
-        <!-- Contact Page -->
-        <div class="page-view contact-view" id="contact-view">
-          <div class="content-page">
-            <div class="content-hero">
-              <h1 class="content-title">Get in touch</h1>
-              <p class="content-subtitle">I'd love to hear from you</p>
-            </div>
-            
-            <div class="contact-layout">
-              <div class="contact-info">
-                <div class="contact-block">
-                  <h3>General enquiries</h3>
-                  <p>For questions about prints, shipping, or custom orders.</p>
-                  <a href="mailto:hello@botanicalstudio.com" class="contact-link">hello@botanicalstudio.com</a>
-                </div>
-                
-                <div class="contact-block">
-                  <h3>Response time</h3>
-                  <p>I typically respond within 1-2 business days. For urgent order queries, please include your order number.</p>
-                </div>
-                
-                <div class="contact-block">
-                  <h3>Follow along</h3>
-                  <p>See works in progress and behind-the-scenes on Instagram.</p>
-                  <div class="contact-social">
-                    <a href="#" class="social-link" aria-label="Instagram">
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
-                        <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
-                        <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
-                      </svg>
-                    </a>
-                    <a href="#" class="social-link" aria-label="Pinterest">
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <path d="M8 12c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4"></path>
-                        <line x1="12" y1="16" x2="9" y2="21"></line>
-                      </svg>
-                    </a>
-                  </div>
-                </div>
-              </div>
-              
-              <form class="contact-form">
-                <div class="form-group">
-                  <label class="form-label" for="contact-name">Name</label>
-                  <input type="text" id="contact-name" class="form-input" placeholder="Your name">
-                </div>
-                <div class="form-group">
-                  <label class="form-label" for="contact-email">Email</label>
-                  <input type="email" id="contact-email" class="form-input" placeholder="your@email.com">
-                </div>
-                <div class="form-group">
-                  <label class="form-label" for="contact-subject">Subject</label>
-                  <select id="contact-subject" class="form-input form-select">
-                    <option>General enquiry</option>
-                    <option>Order question</option>
-                    <option>Custom order</option>
-                    <option>Wholesale / Trade</option>
-                    <option>Press / Collaboration</option>
-                  </select>
-                </div>
-                <div class="form-group">
-                  <label class="form-label" for="contact-message">Message</label>
-                  <textarea id="contact-message" class="form-input form-textarea" rows="5" placeholder="How can I help?"></textarea>
-                </div>
-                <button type="submit" class="btn btn-primary form-submit">Send message</button>
-              </form>
-            </div>
-          </div>
-          
-          <footer class="shop-footer" id="contact-footer">
-            <div class="footer-bottom">
-              <p id="footer-text-contact">© 2025 Botanical Studio</p>
-            </div>
-          </footer>
-        </div>
-        
-        <!-- Error Page -->
-        <div class="page-view error-view" id="error-view">
-          <div class="error-container">
-            <div class="error-content">
-              <div class="error-illustration">
-                <svg viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <!-- Soft background -->
-                  <circle cx="100" cy="75" r="55" fill="currentColor" opacity="0.04"/>
-                  
-                  <!-- Magnifying glass - universal "not found" symbol -->
-                  <circle cx="90" cy="70" r="32" 
-                          stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.5"/>
-                  <line x1="113" y1="93" x2="140" y2="120" 
-                        stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
-                  
-                  <!-- Question mark inside magnifying glass -->
-                  <path d="M82 60 C82 52 88 48 95 48 C102 48 108 52 108 60 C108 66 102 68 95 72" 
-                        stroke="currentColor" stroke-width="2" fill="none" 
-                        stroke-linecap="round" opacity="0.4"/>
-                  <circle cx="95" cy="82" r="2.5" fill="currentColor" opacity="0.4"/>
-                  
-                  <!-- Small decorative dots suggesting scattered/lost -->
-                  <circle cx="45" cy="45" r="3" fill="currentColor" opacity="0.15"/>
-                  <circle cx="155" cy="55" r="2" fill="currentColor" opacity="0.1"/>
-                  <circle cx="160" cy="100" r="2.5" fill="currentColor" opacity="0.12"/>
-                  <circle cx="40" cy="110" r="2" fill="currentColor" opacity="0.1"/>
-                </svg>
-              </div>
-              <h1 class="error-title">Something went wrong</h1>
-              <p class="error-message">We couldn't find what you were looking for. The page may have moved, or perhaps it never existed in the first place.</p>
-              <div class="error-actions">
-                <button class="btn btn-primary" data-nav="home">Go to homepage</button>
-                <button class="btn btn-secondary" data-nav="collection">Browse products</button>
-              </div>
-            </div>
-          </div>
-          
-          <footer class="shop-footer" id="error-footer">
-            <div class="footer-bottom">
-              <p id="footer-text-error">© 2025 Botanical Studio</p>
-            </div>
-          </footer>
-        </div>
-        
-        <!-- Cart Drawer -->
-        <div class="cart-drawer" id="cart-drawer">
-          <div class="cart-drawer-header">
-            <h2>Your basket</h2>
-            <button class="cart-drawer-close" id="cart-drawer-close">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-          </div>
-          <div class="cart-drawer-items">
-            <div class="cart-drawer-item">
-              <div class="cart-drawer-item-image img-1"></div>
-              <div class="cart-drawer-item-details">
-                <h3>Autumn Fern</h3>
-                <p>A4 / Unframed</p>
-                <p class="cart-drawer-item-price">£24.00</p>
-              </div>
-            </div>
-            <div class="cart-drawer-item">
-              <div class="cart-drawer-item-image img-2"></div>
-              <div class="cart-drawer-item-details">
-                <h3>Wild Roses</h3>
-                <p>A3 / Oak frame</p>
-                <p class="cart-drawer-item-price">£48.00</p>
-              </div>
-            </div>
-          </div>
-          <div class="cart-drawer-footer">
-            <div class="cart-drawer-total">
-              <span>Subtotal</span>
-              <span>£72.00</span>
-            </div>
-            <button class="btn btn-primary cart-drawer-checkout">Checkout</button>
-            <a href="#" class="cart-drawer-link" id="view-cart-link">View basket</a>
-          </div>
-        </div>
-        <div class="cart-drawer-overlay" id="cart-drawer-overlay"></div>
-        
-        <!-- Search Modal -->
-        <div class="search-modal" id="search-modal">
-          <div class="search-modal-content">
-            <div class="search-input-wrapper">
-              <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="11" cy="11" r="8"></circle>
-                <path d="M21 21l-4.35-4.35"></path>
-              </svg>
-              <input type="text" class="search-input" placeholder="Search products..." autofocus>
-              <button class="search-close" id="search-close">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <line x1="18" y1="6" x2="6" y2="18"></line>
-                  <line x1="6" y1="6" x2="18" y2="18"></line>
-                </svg>
-              </button>
-            </div>
-            <div class="search-results">
-              <p class="search-hint">Try searching for "fern", "roses", or "botanical"</p>
-            </div>
-          </div>
-        </div>
-        
-        <!-- Image Lightbox -->
-        <dialog class="lightbox" id="lightbox" aria-label="Product image gallery">
-          <div class="lightbox-content">
-            <button class="lightbox-close" id="lightbox-close" aria-label="Close gallery">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            </button>
-            <button class="lightbox-nav lightbox-prev" id="lightbox-prev" aria-label="Previous image">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="15 18 9 12 15 6"></polyline>
-              </svg>
-            </button>
-            <figure class="lightbox-figure">
-              <div class="lightbox-image-container">
-                <img class="lightbox-image" id="lightbox-image" src="" alt="">
-              </div>
-              <figcaption class="lightbox-caption" id="lightbox-caption"></figcaption>
-            </figure>
-            <button class="lightbox-nav lightbox-next" id="lightbox-next" aria-label="Next image">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="9 18 15 12 9 6"></polyline>
-              </svg>
-            </button>
-            <div class="lightbox-counter" id="lightbox-counter" aria-live="polite">1 / 3</div>
-          </div>
-        </dialog>
-      </div>
-    </div>
-  </div>
-  
-  <script>
-    // Presets configuration
-    const presets = {
-      gallery: {
-        mood: 'warm',
-        typography: 'editorial',
-        shape: 'soft',
-        density: 'spacious',
-        grid: '3',
-        header: 'centered',
-        accent: '#e85d04'
-      },
-      studio: {
-        mood: 'neutral',
-        typography: 'clean',
-        shape: 'soft',
-        density: 'balanced',
-        grid: '4',
-        header: 'standard',
-        accent: '#3b82f6'
-      },
-      boutique: {
-        mood: 'warm',
-        typography: 'classic',
-        shape: 'soft',
-        density: 'balanced',
-        grid: '3',
-        header: 'centered',
-        accent: '#b45309'
-      },
-      bold: {
-        mood: 'neutral',
-        typography: 'modern',
-        shape: 'sharp',
-        density: 'compact',
-        grid: '4',
-        header: 'standard',
-        accent: '#dc2626'
-      },
-      playful: {
-        mood: 'neutral',
-        typography: 'friendly',
-        shape: 'pill',
-        density: 'balanced',
-        grid: '4',
-        header: 'standard',
-        accent: '#8b5cf6'
-      },
-      minimal: {
-        mood: 'cool',
-        typography: 'clean',
-        shape: 'sharp',
-        density: 'spacious',
-        grid: '2',
-        header: 'minimal',
-        accent: '#171717'
-      },
-      night: {
-        mood: 'dark',
-        typography: 'modern',
-        shape: 'soft',
-        density: 'balanced',
-        grid: '4',
-        header: 'standard',
-        accent: '#f97316'
-      },
-      classic: {
-        mood: 'warm',
-        typography: 'classic',
-        shape: 'soft',
-        density: 'spacious',
-        grid: '3',
-        header: 'standard',
-        accent: '#166534'
-      },
-      impulse: {
-        mood: 'neutral',
-        typography: 'impulse',
-        shape: 'sharp',
-        density: 'spacious',
-        grid: '3',
-        header: 'centered',
-        accent: '#000000',
-        // Additional Impulse-specific settings
-        fontSize: 'medium',
-        headingWeight: 'regular',
-        layoutWidth: 'full',
-        buttonStyle: 'filled',
-        cardShadow: 'none',
-        productText: 'center'
-      }
-    };
-    
-    // State
-    let currentSettings = {
-      mood: 'neutral',
-      typography: 'clean',
-      shape: 'soft',
-      density: 'balanced',
-      grid: '4',
-      header: 'standard',
-      accent: '#f97316'
-    };
-    
-    let shopName = 'Botanical Studio';
-    let logoMode = 'text-only';
-    let logoUrl = null;
-    let logoSvgContent = null; // Store original SVG content
-    let logoIsSvg = false;
-    let headerImageUrl = null;
-    let logoSize = 36;
-    let headerPositionX = 50; // percentage 0-100
-    let headerPositionY = 50; // percentage 0-100
-    let headerZoom = 100;
-    let recolorLogo = false;
-    let logoColor = '#171717';
-    
-    // Feature toggles
-    let showAnnouncementBar = true;
-    let stickyHeader = false;
-    let hoverImage = true;
-    let quickAdd = true;
-    let aspectRatio = 'square';
-    
-    // DOM elements
-    const previewFrame = document.getElementById('preview-frame');
-    const shopHeader = document.getElementById('shop-header');
-    const productGrid = document.getElementById('product-grid');
-    const accentPicker = document.getElementById('accent-picker');
-    const colorValue = document.getElementById('color-value');
-    const comboValue = document.getElementById('combo-value');
-    const shopNameInput = document.getElementById('shop-name');
-    
-    const logoUploadRow = document.getElementById('logo-upload-row');
-    const headerUploadRow = document.getElementById('header-upload-row');
-    const logoUpload = document.getElementById('logo-upload');
-    const headerUpload = document.getElementById('header-upload');
-    const logoPreview = document.getElementById('logo-preview');
-    const logoPreviewImg = document.getElementById('logo-preview-img');
-    const headerPreview = document.getElementById('header-preview');
-    const headerPreviewImg = document.getElementById('header-preview-img');
-    
-    const shopLogoImage = document.getElementById('shop-logo-image');
-    const shopLogoImg = document.getElementById('shop-logo-img');
-    const shopLogoText = document.getElementById('shop-logo-text');
-    
-    const logoSizeControl = document.getElementById('logo-size-control');
-    const logoSizeSlider = document.getElementById('logo-size-slider');
-    const logoSizeValue = document.getElementById('logo-size-value');
-    
-    const logoColorControl = document.getElementById('logo-color-control');
-    const recolorLogoCheckbox = document.getElementById('recolor-logo-checkbox');
-    const logoColorPickerRow = document.getElementById('logo-color-picker-row');
-    const logoColorPicker = document.getElementById('logo-color-picker');
-    const logoColorValue = document.getElementById('logo-color-value');
-    
-    const headerImageControls = document.getElementById('header-image-controls');
-    const headerPositionXRow = document.getElementById('header-position-x-row');
-    const headerPositionXSlider = document.getElementById('header-position-x-slider');
-    const headerPositionXValue = document.getElementById('header-position-x-value');
-    const headerPositionSlider = document.getElementById('header-position-slider');
-    const headerPositionValue = document.getElementById('header-position-value');
-    const headerZoomSlider = document.getElementById('header-zoom-slider');
-    const headerZoomValue = document.getElementById('header-zoom-value');
-    
-    // Recolor SVG by replacing fill and stroke colors
-    function recolorSvg(svgContent, newColor) {
-      if (!svgContent) return svgContent;
-      
-      // Replace fill attributes (but not fill="none")
-      let recolored = svgContent.replace(/fill="(?!none)[^"]*"/gi, `fill="${newColor}"`);
-      
-      // Replace stroke attributes (but not stroke="none")
-      recolored = recolored.replace(/stroke="(?!none)[^"]*"/gi, `stroke="${newColor}"`);
-      
-      // Also handle style attributes with fill/stroke
-      recolored = recolored.replace(/fill:\s*(?!none)[^;}"']+/gi, `fill: ${newColor}`);
-      recolored = recolored.replace(/stroke:\s*(?!none)[^;}"']+/gi, `stroke: ${newColor}`);
-      
-      return recolored;
-    }
-    
-    // Update the logo image in the preview
-    function updateLogoImage() {
-      if (logoIsSvg && logoSvgContent) {
-        let svgToUse = logoSvgContent;
-        if (recolorLogo) {
-          svgToUse = recolorSvg(logoSvgContent, logoColor);
-        }
-        logoUrl = 'data:image/svg+xml,' + encodeURIComponent(svgToUse);
-        
-        // Also update the preview thumbnail
-        logoPreviewImg.src = logoUrl;
-      }
-    }
-    
-    // Helper: Convert hex to HSL
-    function hexToHSL(hex) {
-      let r = parseInt(hex.slice(1, 3), 16) / 255;
-      let g = parseInt(hex.slice(3, 5), 16) / 255;
-      let b = parseInt(hex.slice(5, 7), 16) / 255;
-      
-      let max = Math.max(r, g, b), min = Math.min(r, g, b);
-      let h, s, l = (max + min) / 2;
-      
-      if (max === min) {
-        h = s = 0;
-      } else {
-        let d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        switch (max) {
-          case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
-          case g: h = ((b - r) / d + 2) / 6; break;
-          case b: h = ((r - g) / d + 4) / 6; break;
-        }
-      }
-      
-      return {
-        h: Math.round(h * 360),
-        s: Math.round(s * 100),
-        l: Math.round(l * 100)
-      };
-    }
-    
-    // Update logo/header mode display
-    function updateLogoDisplay() {
-      // Update upload row visibility
-      const needsLogo = logoMode === 'logo-and-text' || logoMode === 'logo-only' || logoMode === 'logo-header-image';
-      const needsHeader = logoMode === 'header-image' || logoMode === 'logo-header-image';
-      
-      logoUploadRow.classList.toggle('visible', needsLogo);
-      headerUploadRow.classList.toggle('visible', needsHeader);
-      
-      // Show size control only when logo is uploaded and mode uses a logo
-      const hasLogo = logoUrl || (logoIsSvg && logoSvgContent);
-      const showSizeControl = needsLogo && hasLogo;
-      logoSizeControl.classList.toggle('visible', showSizeControl);
-      
-      // Show color control only for SVG logos
-      const showColorControl = needsLogo && logoIsSvg && logoSvgContent;
-      logoColorControl.classList.toggle('visible', showColorControl);
-      
-      // Show header image controls when header image is uploaded
-      const showHeaderControls = needsHeader && headerImageUrl;
-      headerImageControls.classList.toggle('visible', showHeaderControls);
-      
-      // Only show horizontal position when zoomed in
-      if (showHeaderControls) {
-        headerPositionXRow.classList.toggle('visible', headerZoom > 100);
-      }
-      
-      // Update logo upload label based on mode
-      const logoUploadLabel = document.getElementById('logo-upload-label');
-      if (logoMode === 'logo-header-image') {
-        logoUploadLabel.textContent = 'Upload logo (use white/light version)';
-      } else {
-        logoUploadLabel.textContent = 'Upload logo (SVG or PNG)';
-      }
-      
-      // Update preview header
-      shopHeader.dataset.logoMode = logoMode;
-      
-      // Apply logo size
-      shopLogoImage.style.height = logoSize + 'px';
-      
-      // Update logo visibility and header background
-      if (logoMode === 'text-only') {
-        shopLogoImage.classList.remove('visible');
-        shopLogoText.style.display = 'block';
-        shopHeader.style.backgroundImage = '';
-        shopHeader.style.backgroundPosition = '';
-        shopHeader.style.backgroundSize = '';
-      } else if (logoMode === 'logo-and-text') {
-        if (logoUrl) {
-          shopLogoImage.classList.add('visible');
-          shopLogoImg.src = logoUrl;
-        } else {
-          shopLogoImage.classList.remove('visible');
-        }
-        shopLogoText.style.display = 'block';
-        shopHeader.style.backgroundImage = '';
-        shopHeader.style.backgroundPosition = '';
-        shopHeader.style.backgroundSize = '';
-      } else if (logoMode === 'logo-only') {
-        if (logoUrl) {
-          shopLogoImage.classList.add('visible');
-          shopLogoImg.src = logoUrl;
-        } else {
-          shopLogoImage.classList.remove('visible');
-        }
-        shopLogoText.style.display = 'none';
-        shopHeader.style.backgroundImage = '';
-        shopHeader.style.backgroundPosition = '';
-        shopHeader.style.backgroundSize = '';
-      } else if (logoMode === 'header-image') {
-        shopLogoImage.classList.remove('visible');
-        shopLogoText.style.display = 'block';
-        if (headerImageUrl) {
-          shopHeader.style.backgroundImage = `url(${headerImageUrl})`;
-          shopHeader.style.backgroundPosition = `${headerPositionX}% ${headerPositionY}%`;
-          shopHeader.style.backgroundSize = `${headerZoom}% auto`;
-        } else {
-          // Default placeholder gradient
-          shopHeader.style.backgroundImage = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
-          shopHeader.style.backgroundPosition = 'center center';
-          shopHeader.style.backgroundSize = 'cover';
-        }
-      } else if (logoMode === 'logo-header-image') {
-        if (logoUrl) {
-          shopLogoImage.classList.add('visible');
-          shopLogoImg.src = logoUrl;
-        } else {
-          shopLogoImage.classList.remove('visible');
-        }
-        shopLogoText.style.display = 'none';
-        if (headerImageUrl) {
-          shopHeader.style.backgroundImage = `url(${headerImageUrl})`;
-          shopHeader.style.backgroundPosition = `${headerPositionX}% ${headerPositionY}%`;
-          shopHeader.style.backgroundSize = `${headerZoom}% auto`;
-        } else {
-          // Default placeholder gradient
-          shopHeader.style.backgroundImage = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
-          shopHeader.style.backgroundPosition = 'center center';
-          shopHeader.style.backgroundSize = 'cover';
-        }
-      }
-    }
-    
-    // Apply settings to preview
-    function applySettings() {
-      // Apply data attributes
-      previewFrame.dataset.mood = currentSettings.mood;
-      previewFrame.dataset.typography = currentSettings.typography;
-      previewFrame.dataset.shape = currentSettings.shape;
-      previewFrame.dataset.density = currentSettings.density;
-      
-      shopHeader.dataset.header = currentSettings.header;
-      productGrid.dataset.grid = currentSettings.grid;
-      
-      // Apply Impulse-specific settings if present
-      if (currentSettings.fontSize) {
-        previewFrame.dataset.fontSize = currentSettings.fontSize;
-        document.querySelectorAll('#font-size-options .option-button').forEach(btn => {
-          btn.classList.toggle('active', btn.dataset.fontSize === currentSettings.fontSize);
-        });
-      }
-      if (currentSettings.headingWeight) {
-        previewFrame.dataset.headingWeight = currentSettings.headingWeight;
-        document.querySelectorAll('#heading-weight-options .option-button').forEach(btn => {
-          btn.classList.toggle('active', btn.dataset.headingWeight === currentSettings.headingWeight);
-        });
-      }
-      if (currentSettings.layoutWidth) {
-        previewFrame.dataset.layoutWidth = currentSettings.layoutWidth;
-        document.querySelectorAll('#layout-width-options .option-button').forEach(btn => {
-          btn.classList.toggle('active', btn.dataset.layoutWidth === currentSettings.layoutWidth);
-        });
-      }
-      if (currentSettings.buttonStyle) {
-        previewFrame.dataset.buttonStyle = currentSettings.buttonStyle;
-        document.querySelectorAll('#button-style-options .option-button').forEach(btn => {
-          btn.classList.toggle('active', btn.dataset.buttonStyle === currentSettings.buttonStyle);
-        });
-      }
-      if (currentSettings.cardShadow) {
-        previewFrame.dataset.cardShadow = currentSettings.cardShadow;
-        document.querySelectorAll('#card-shadow-options .option-button').forEach(btn => {
-          btn.classList.toggle('active', btn.dataset.cardShadow === currentSettings.cardShadow);
-        });
-      }
-      if (currentSettings.productText) {
-        previewFrame.dataset.productText = currentSettings.productText;
-        document.querySelectorAll('#product-text-options .option-button').forEach(btn => {
-          btn.classList.toggle('active', btn.dataset.productText === currentSettings.productText);
-        });
-      }
-      
-      // Apply accent color
-      const hsl = hexToHSL(currentSettings.accent);
-      previewFrame.style.setProperty('--t-accent-h', hsl.h);
-      previewFrame.style.setProperty('--t-accent-s', hsl.s + '%');
-      previewFrame.style.setProperty('--t-accent-l', hsl.l + '%');
-      
-      // Update color picker and display
-      accentPicker.value = currentSettings.accent;
-      colorValue.textContent = currentSettings.accent;
-      
-      // Update shop name in preview
-      shopLogoText.textContent = shopName;
-      const footerTexts = ['footer-text', 'footer-text-collection', 'footer-text-pdp', 'footer-text-cart', 'footer-text-about', 'footer-text-contact', 'footer-text-error'];
-      footerTexts.forEach(id => {
-        const el = document.getElementById(id);
-        if (el) el.textContent = `© 2025 ${shopName}`;
-      });
-      
-      // Update browser tab
-      document.getElementById('favicon-letter').textContent = shopName.charAt(0).toUpperCase();
-      document.getElementById('browser-domain').textContent = shopName.toLowerCase().replace(/\s+/g, '');
-      
-      // Update logo display
-      updateLogoDisplay();
-      
-      // Update combo display
-      const labels = {
-        mood: { warm: 'Warm', neutral: 'Neutral', cool: 'Cool', dark: 'Dark' },
-        typography: { clean: 'Clean', editorial: 'Editorial', modern: 'Modern', classic: 'Classic', friendly: 'Friendly', minimal: 'Minimal', impulse: 'Impulse' },
-        shape: { sharp: 'Sharp', soft: 'Soft', round: 'Round', pill: 'Pill' },
-        density: { spacious: 'Spacious', balanced: 'Balanced', compact: 'Compact' },
-        header: { standard: 'Standard', centered: 'Centered', minimal: 'Minimal' }
-      };
-      
-      comboValue.textContent = [
-        labels.mood[currentSettings.mood],
-        labels.typography[currentSettings.typography],
-        labels.shape[currentSettings.shape],
-        labels.density[currentSettings.density],
-        currentSettings.grid + '-up',
-        labels.header[currentSettings.header]
-      ].join(' · ');
-      
-      updateActiveStates();
-    }
-    
-    // Update active states on buttons
-    function updateActiveStates() {
-      document.querySelectorAll('#mood-options .option-button').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.mood === currentSettings.mood);
-      });
-      document.querySelectorAll('#typography-options .option-button').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.typography === currentSettings.typography);
-      });
-      document.querySelectorAll('#shape-options .option-button').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.shape === currentSettings.shape);
-      });
-      document.querySelectorAll('#density-options .option-button').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.density === currentSettings.density);
-      });
-      document.querySelectorAll('#grid-options .option-button').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.grid === currentSettings.grid);
-      });
-      document.querySelectorAll('#header-options .option-button').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.header === currentSettings.header);
-      });
-    }
-    
-    // Preset buttons
-    document.querySelectorAll('.preset-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const presetName = btn.dataset.preset;
-        const preset = presets[presetName];
-        
-        currentSettings = { ...preset };
-        
-        document.querySelectorAll('.preset-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        
-        applySettings();
-      });
-    });
-    
-    // Individual option buttons
-    function setupOptionGroup(groupId, settingKey) {
-      document.querySelectorAll(`#${groupId} .option-button`).forEach(btn => {
-        btn.addEventListener('click', () => {
-          currentSettings[settingKey] = btn.dataset[settingKey];
-          document.querySelectorAll('.preset-button').forEach(b => b.classList.remove('active'));
-          applySettings();
-        });
-      });
-    }
-    
-    setupOptionGroup('mood-options', 'mood');
-    setupOptionGroup('typography-options', 'typography');
-    setupOptionGroup('shape-options', 'shape');
-    setupOptionGroup('density-options', 'density');
-    setupOptionGroup('grid-options', 'grid');
-    setupOptionGroup('header-options', 'header');
-    
-    // Accent color picker
-    accentPicker.addEventListener('input', (e) => {
-      currentSettings.accent = e.target.value;
-      document.querySelectorAll('.preset-button').forEach(b => b.classList.remove('active'));
-      applySettings();
-    });
-    
-    // Secondary accent (hover) color picker
-    const secondaryAccentPicker = document.getElementById('secondary-accent-picker');
-    const secondaryColorValue = document.getElementById('secondary-color-value');
-    secondaryAccentPicker.addEventListener('input', (e) => {
-      previewFrame.style.setProperty('--t-secondary-accent', e.target.value);
-      secondaryColorValue.textContent = e.target.value;
-    });
-    
-    // Sale color picker
-    const saleColorPicker = document.getElementById('sale-color-picker');
-    const saleColorValue = document.getElementById('sale-color-value');
-    saleColorPicker.addEventListener('input', (e) => {
-      previewFrame.style.setProperty('--t-sale-color', e.target.value);
-      saleColorValue.textContent = e.target.value;
-    });
-    
-    // Font size options
-    document.querySelectorAll('#font-size-options .option-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('#font-size-options .option-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        previewFrame.dataset.fontSize = btn.dataset.fontSize;
-      });
-    });
-    
-    // Heading weight options
-    document.querySelectorAll('#heading-weight-options .option-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('#heading-weight-options .option-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        previewFrame.dataset.headingWeight = btn.dataset.headingWeight;
-      });
-    });
-    
-    // Layout width options
-    document.querySelectorAll('#layout-width-options .option-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('#layout-width-options .option-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        previewFrame.dataset.layoutWidth = btn.dataset.layoutWidth;
-      });
-    });
-    
-    // Button style options
-    document.querySelectorAll('#button-style-options .option-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('#button-style-options .option-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        previewFrame.dataset.buttonStyle = btn.dataset.buttonStyle;
-      });
-    });
-    
-    // Card shadow options
-    document.querySelectorAll('#card-shadow-options .option-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('#card-shadow-options .option-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        previewFrame.dataset.cardShadow = btn.dataset.cardShadow;
-      });
-    });
-    
-    // Product text alignment options
-    document.querySelectorAll('#product-text-options .option-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('#product-text-options .option-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        previewFrame.dataset.productText = btn.dataset.productText;
-      });
-    });
-    
-    // Gallery position options
-    document.querySelectorAll('#gallery-position-options .option-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        document.querySelectorAll('#gallery-position-options .option-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        previewFrame.dataset.galleryPosition = btn.dataset.galleryPosition;
-      });
-    });
-    
-    // Show prices toggle
-    document.getElementById('show-prices-toggle').addEventListener('change', (e) => {
-      previewFrame.dataset.showPrices = e.target.checked;
-    });
-    
-    // PDP toggles
-    document.getElementById('pdp-trust-toggle').addEventListener('change', (e) => {
-      previewFrame.dataset.pdpTrust = e.target.checked;
-    });
-    
-    document.getElementById('pdp-reviews-toggle').addEventListener('change', (e) => {
-      previewFrame.dataset.pdpReviews = e.target.checked;
-    });
-    
-    document.getElementById('pdp-related-toggle').addEventListener('change', (e) => {
-      previewFrame.dataset.pdpRelated = e.target.checked;
-    });
-    
-    // Shop name input
-    shopNameInput.addEventListener('input', (e) => {
-      shopName = e.target.value || 'My Shop';
-      applySettings();
-    });
-    
-    // Logo mode options
-    document.querySelectorAll('.logo-mode-option').forEach(option => {
-      option.addEventListener('click', () => {
-        const mode = option.dataset.mode;
-        logoMode = mode;
-        
-        document.querySelectorAll('.logo-mode-option').forEach(opt => {
-          opt.classList.toggle('active', opt.dataset.mode === mode);
-        });
-        
-        updateLogoDisplay();
-      });
-    });
-    
-    // Logo upload
-    logoUpload.addEventListener('change', (e) => {
-      const file = e.target.files[0];
-      if (!file) return;
-      
-      const browserFavicon = document.getElementById('browser-favicon');
-      
-      logoIsSvg = file.type === 'image/svg+xml' || file.name.toLowerCase().endsWith('.svg');
-      
-      if (logoIsSvg) {
-        // Read SVG as text so we can manipulate it
-        const textReader = new FileReader();
-        textReader.onload = (event) => {
-          logoSvgContent = event.target.result;
-          updateLogoImage();
-          logoPreviewImg.src = 'data:image/svg+xml,' + encodeURIComponent(logoSvgContent);
-          logoPreview.classList.add('has-image');
-          updateLogoDisplay();
-          
-          // Update favicon with logo
-          browserFavicon.classList.add('has-logo');
-          let faviconImg = browserFavicon.querySelector('.favicon-logo');
-          if (!faviconImg) {
-            faviconImg = document.createElement('img');
-            faviconImg.className = 'favicon-logo';
-            browserFavicon.appendChild(faviconImg);
-          }
-          faviconImg.src = 'data:image/svg+xml,' + encodeURIComponent(logoSvgContent);
-        };
-        textReader.readAsText(file);
-      } else {
-        // Read as data URL for non-SVG images
-        logoSvgContent = null;
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          logoUrl = event.target.result;
-          logoPreviewImg.src = logoUrl;
-          logoPreview.classList.add('has-image');
-          updateLogoDisplay();
-          
-          // Update favicon with logo
-          browserFavicon.classList.add('has-logo');
-          let faviconImg = browserFavicon.querySelector('.favicon-logo');
-          if (!faviconImg) {
-            faviconImg = document.createElement('img');
-            faviconImg.className = 'favicon-logo';
-            browserFavicon.appendChild(faviconImg);
-          }
-          faviconImg.src = logoUrl;
-        };
-        reader.readAsDataURL(file);
-      }
-    });
-    
-    // Header upload
-    headerUpload.addEventListener('change', (e) => {
-      const file = e.target.files[0];
-      if (!file) return;
-      
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        headerImageUrl = event.target.result;
-        headerPreviewImg.src = headerImageUrl;
-        headerPreview.classList.add('has-image');
-        updateLogoDisplay();
-      };
-      reader.readAsDataURL(file);
-    });
-    
-    // Remove logo
-    document.getElementById('remove-logo').addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      logoUrl = null;
-      logoSvgContent = null;
-      logoIsSvg = false;
-      recolorLogo = false;
-      recolorLogoCheckbox.checked = false;
-      logoColorPickerRow.classList.remove('visible');
-      logoPreview.classList.remove('has-image');
-      logoUpload.value = '';
-      updateLogoDisplay();
-    });
-    
-    // Remove header
-    document.getElementById('remove-header').addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      headerImageUrl = null;
-      headerPreview.classList.remove('has-image');
-      headerUpload.value = '';
-      updateLogoDisplay();
-    });
-    
-    // Logo size slider
-    logoSizeSlider.addEventListener('input', (e) => {
-      logoSize = parseInt(e.target.value);
-      logoSizeValue.textContent = logoSize + 'px';
-      updateLogoDisplay();
-    });
-    
-    // Recolor logo toggle
-    recolorLogoCheckbox.addEventListener('change', (e) => {
-      recolorLogo = e.target.checked;
-      logoColorPickerRow.classList.toggle('visible', recolorLogo);
-      updateLogoImage();
-      updateLogoDisplay();
-    });
-    
-    // Logo color picker
-    logoColorPicker.addEventListener('input', (e) => {
-      logoColor = e.target.value;
-      logoColorValue.textContent = logoColor;
-      updateLogoImage();
-      updateLogoDisplay();
-    });
-    
-    // Header horizontal position slider
-    headerPositionXSlider.addEventListener('input', (e) => {
-      headerPositionX = parseInt(e.target.value);
-      headerPositionXValue.textContent = headerPositionX + '%';
-      updateLogoDisplay();
-    });
-    
-    // Header vertical position slider
-    headerPositionSlider.addEventListener('input', (e) => {
-      headerPositionY = parseInt(e.target.value);
-      headerPositionValue.textContent = headerPositionY + '%';
-      updateLogoDisplay();
-    });
-    
-    // Header zoom slider
-    headerZoomSlider.addEventListener('input', (e) => {
-      headerZoom = parseInt(e.target.value);
-      headerZoomValue.textContent = headerZoom + '%';
-      
-      // Only show horizontal position when zoomed in
-      headerPositionXRow.classList.toggle('visible', headerZoom > 100);
-      
-      updateLogoDisplay();
-    });
-    
-    // Initialize with Gallery preset
-    document.querySelector('[data-preset="gallery"]').click();
-    
-    // Page view toggle
-    document.querySelectorAll('.page-toggle-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const page = btn.dataset.page;
-        
-        document.querySelectorAll('.page-toggle-btn').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        
-        document.querySelectorAll('.page-view').forEach(view => view.classList.remove('active'));
-        document.getElementById(page + '-view').classList.add('active');
-      });
-    });
-    
-    // Feature toggles
-    document.getElementById('announcement-bar-toggle').addEventListener('change', (e) => {
-      showAnnouncementBar = e.target.checked;
-      document.getElementById('announcement-bar').classList.toggle('hidden', !showAnnouncementBar);
-    });
-    
-    document.getElementById('sticky-header-toggle').addEventListener('change', (e) => {
-      stickyHeader = e.target.checked;
-      previewFrame.dataset.stickyHeader = stickyHeader;
-    });
-    
-    document.getElementById('hover-image-toggle').addEventListener('change', (e) => {
-      hoverImage = e.target.checked;
-      previewFrame.dataset.hoverImage = hoverImage;
-    });
-    
-    document.getElementById('quick-add-toggle').addEventListener('change', (e) => {
-      quickAdd = e.target.checked;
-      previewFrame.dataset.quickAdd = quickAdd;
-    });
-    
-    // Initialize feature data attributes
-    previewFrame.dataset.hoverImage = hoverImage;
-    previewFrame.dataset.quickAdd = quickAdd;
-    previewFrame.dataset.aspect = aspectRatio;
-    previewFrame.dataset.fontSize = 'medium';
-    previewFrame.dataset.headingWeight = 'bold';
-    previewFrame.dataset.layoutWidth = 'wide';
-    previewFrame.dataset.buttonStyle = 'filled';
-    previewFrame.dataset.cardShadow = 'none';
-    previewFrame.dataset.productText = 'left';
-    previewFrame.dataset.galleryPosition = 'left';
-    previewFrame.dataset.showPrices = 'true';
-    previewFrame.dataset.pdpTrust = 'true';
-    previewFrame.dataset.pdpReviews = 'true';
-    previewFrame.dataset.pdpRelated = 'true';
-    
-    // Aspect ratio options
-    document.querySelectorAll('#aspect-options .option-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        aspectRatio = btn.dataset.aspect;
-        previewFrame.dataset.aspect = aspectRatio;
-        document.querySelectorAll('#aspect-options .option-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-      });
-    });
-    
-    // Customise section toggle
-    const customiseSection = document.getElementById('customise-section');
-    const customiseHeader = document.getElementById('customise-header');
-    customiseHeader.addEventListener('click', () => {
-      customiseSection.classList.toggle('open');
-    });
-    
-    // Cart drawer
-    const cartDrawer = document.getElementById('cart-drawer');
-    const cartDrawerOverlay = document.getElementById('cart-drawer-overlay');
-    const cartBtn = document.getElementById('cart-btn');
-    const cartDrawerClose = document.getElementById('cart-drawer-close');
-    const viewCartLink = document.getElementById('view-cart-link');
-    
-    function openCartDrawer() {
-      cartDrawer.classList.add('open');
-      cartDrawerOverlay.classList.add('open');
-    }
-    
-    function closeCartDrawer() {
-      cartDrawer.classList.remove('open');
-      cartDrawerOverlay.classList.remove('open');
-    }
-    
-    cartBtn.addEventListener('click', openCartDrawer);
-    cartDrawerClose.addEventListener('click', closeCartDrawer);
-    cartDrawerOverlay.addEventListener('click', closeCartDrawer);
-    
-    viewCartLink.addEventListener('click', (e) => {
-      e.preventDefault();
-      closeCartDrawer();
-      document.querySelector('[data-page="cart"]').click();
-    });
-    
-    // Quick add buttons open cart drawer
-    document.querySelectorAll('.quick-add-btn').forEach(btn => {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        openCartDrawer();
-      });
-    });
-    
-    // Search modal
-    const searchModal = document.getElementById('search-modal');
-    const searchBtn = document.getElementById('search-btn');
-    const searchClose = document.getElementById('search-close');
-    
-    searchBtn.addEventListener('click', () => {
-      searchModal.classList.add('open');
-      searchModal.querySelector('.search-input').focus();
-    });
-    
-    searchClose.addEventListener('click', () => {
-      searchModal.classList.remove('open');
-    });
-    
-    searchModal.addEventListener('click', (e) => {
-      if (e.target === searchModal) {
-        searchModal.classList.remove('open');
-      }
-    });
-    
-    // Escape key closes modals (dialog handles its own escape)
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        closeCartDrawer();
-        searchModal.classList.remove('open');
-      }
-    });
-    
-    // PDP thumbnail gallery
-    const pdpMainImage = document.getElementById('pdp-main-image');
-    document.querySelectorAll('.pdp-thumb').forEach(thumb => {
-      thumb.addEventListener('click', () => {
-        // Update main image
-        const imageUrl = thumb.dataset.image;
-        pdpMainImage.style.backgroundImage = `url('${imageUrl}')`;
-        
-        // Update active state
-        document.querySelectorAll('.pdp-thumb').forEach(t => t.classList.remove('active'));
-        thumb.classList.add('active');
-      });
-    });
-    
-    // Lightbox - using native dialog
-    const lightbox = document.getElementById('lightbox');
-    const lightboxImage = document.getElementById('lightbox-image');
-    const lightboxCaption = document.getElementById('lightbox-caption');
-    const lightboxCounter = document.getElementById('lightbox-counter');
-    const lightboxClose = document.getElementById('lightbox-close');
-    const lightboxPrev = document.getElementById('lightbox-prev');
-    const lightboxNext = document.getElementById('lightbox-next');
-    const zoomBtn = document.getElementById('zoom-btn');
-    
-    // Get all product images with metadata from thumbnails
-    function getLightboxImages() {
-      return Array.from(document.querySelectorAll('.pdp-thumb')).map(thumb => ({
-        src: thumb.dataset.image,
-        alt: thumb.dataset.alt || 'Product image',
-        description: thumb.dataset.description || ''
-      }));
-    }
-    
-    let currentLightboxIndex = 0;
-    
-    function openLightbox(startIndex = 0) {
-      const images = getLightboxImages();
-      currentLightboxIndex = startIndex;
-      updateLightboxImage(images);
-      lightbox.showModal();
-    }
-    
-    function closeLightbox() {
-      lightbox.close();
-      zoomBtn.focus();
-    }
-    
-    function updateLightboxImage(images) {
-      const current = images[currentLightboxIndex];
-      lightboxImage.src = current.src;
-      lightboxImage.alt = current.alt;
-      lightboxCaption.textContent = current.description;
-      lightboxCounter.textContent = `${currentLightboxIndex + 1} / ${images.length}`;
-    }
-    
-    function nextImage() {
-      const images = getLightboxImages();
-      currentLightboxIndex = (currentLightboxIndex + 1) % images.length;
-      updateLightboxImage(images);
-    }
-    
-    function prevImage() {
-      const images = getLightboxImages();
-      currentLightboxIndex = (currentLightboxIndex - 1 + images.length) % images.length;
-      updateLightboxImage(images);
-    }
-    
-    // Open lightbox from zoom button or clicking main image
-    zoomBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      const activeThumb = document.querySelector('.pdp-thumb.active');
-      const thumbs = Array.from(document.querySelectorAll('.pdp-thumb'));
-      const startIndex = thumbs.indexOf(activeThumb);
-      openLightbox(startIndex >= 0 ? startIndex : 0);
-    });
-    
-    pdpMainImage.addEventListener('click', () => {
-      const activeThumb = document.querySelector('.pdp-thumb.active');
-      const thumbs = Array.from(document.querySelectorAll('.pdp-thumb'));
-      const startIndex = thumbs.indexOf(activeThumb);
-      openLightbox(startIndex >= 0 ? startIndex : 0);
-    });
-    
-    lightboxClose.addEventListener('click', closeLightbox);
-    lightboxNext.addEventListener('click', nextImage);
-    lightboxPrev.addEventListener('click', prevImage);
-    
-    // Close on clicking backdrop (native dialog handles escape key)
-    lightbox.addEventListener('click', (e) => {
-      if (e.target === lightbox) {
-        closeLightbox();
-      }
-    });
-    
-    // Arrow key navigation
-    lightbox.addEventListener('keydown', (e) => {
-      if (e.key === 'ArrowRight') {
-        nextImage();
-      } else if (e.key === 'ArrowLeft') {
-        prevImage();
-      }
-    });
-    
-    // Internal navigation links
-    function navigateToPage(pageId) {
-      document.querySelectorAll('.page-toggle-btn').forEach(b => b.classList.remove('active'));
-      document.querySelector(`[data-page="${pageId}"]`).classList.add('active');
-      
-      document.querySelectorAll('.page-view').forEach(view => view.classList.remove('active'));
-      document.getElementById(pageId + '-view').classList.add('active');
-    }
-    
-    document.querySelectorAll('[data-nav]').forEach(link => {
-      link.addEventListener('click', (e) => {
-        e.preventDefault();
-        navigateToPage(link.dataset.nav);
-      });
-    });
-    
-    // Product cards link to PDP
-    document.querySelectorAll('.product-card').forEach(card => {
-      card.addEventListener('click', (e) => {
-        // Don't navigate if clicking quick-add button
-        if (e.target.closest('.quick-add-btn')) return;
-        navigateToPage('pdp');
-      });
-    });
-    
-    // PDP Add to basket button opens cart drawer
-    document.querySelector('.pdp-add-btn').addEventListener('click', openCartDrawer);
-    
-    // Cart state toggle (full/empty)
-    const cartStateToggle = document.getElementById('cart-state-toggle');
-    const cartFull = document.getElementById('cart-full');
-    const cartEmpty = document.getElementById('cart-empty');
-    let isCartEmpty = false;
-    
-    cartStateToggle.addEventListener('click', () => {
-      isCartEmpty = !isCartEmpty;
-      cartFull.hidden = isCartEmpty;
-      cartEmpty.hidden = !isCartEmpty;
-      cartStateToggle.textContent = isCartEmpty ? 'Preview full cart' : 'Preview empty state';
-    });
-  </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/test/berrypod_web/controllers/user_session_controller_test.exs b/test/berrypod_web/controllers/user_session_controller_test.exs
index 3bc2582..39e5741 100644
--- a/test/berrypod_web/controllers/user_session_controller_test.exs
+++ b/test/berrypod_web/controllers/user_session_controller_test.exs
@@ -18,7 +18,7 @@ defmodule BerrypodWeb.UserSessionControllerTest do
         })
 
       assert get_session(conn, :user_token)
-      assert redirected_to(conn) == ~p"/admin"
+      assert redirected_to(conn) == ~p"/admin/setup"
 
       # Now do a logged in request and assert on the page content
       conn = get(conn, ~p"/admin/settings")
@@ -39,7 +39,7 @@ defmodule BerrypodWeb.UserSessionControllerTest do
         })
 
       assert conn.resp_cookies["_berrypod_web_user_remember_me"]
-      assert redirected_to(conn) == ~p"/admin"
+      assert redirected_to(conn) == ~p"/admin/setup"
     end
 
     test "logs the user in with return to", %{conn: conn, user: user} do
@@ -80,7 +80,7 @@ defmodule BerrypodWeb.UserSessionControllerTest do
         })
 
       assert get_session(conn, :user_token)
-      assert redirected_to(conn) == ~p"/admin"
+      assert redirected_to(conn) == ~p"/admin/setup"
 
       # Now do a logged in request and assert on the page content
       conn = get(conn, ~p"/admin/settings")
@@ -99,7 +99,7 @@ defmodule BerrypodWeb.UserSessionControllerTest do
         })
 
       assert get_session(conn, :user_token)
-      assert redirected_to(conn) == ~p"/admin"
+      assert redirected_to(conn) == ~p"/admin/setup"
       assert Phoenix.Flash.get(conn.assigns.flash, :info) =~ "User confirmed successfully."
 
       assert Accounts.get_user!(user.id).confirmed_at
diff --git a/test/berrypod_web/live/admin/dashboard_test.exs b/test/berrypod_web/live/admin/dashboard_test.exs
index cdbb7f1..115e801 100644
--- a/test/berrypod_web/live/admin/dashboard_test.exs
+++ b/test/berrypod_web/live/admin/dashboard_test.exs
@@ -4,7 +4,6 @@ defmodule BerrypodWeb.Admin.DashboardTest do
   import Phoenix.LiveViewTest
   import Berrypod.AccountsFixtures
   import Berrypod.OrdersFixtures
-  import Berrypod.ProductsFixtures
 
   setup do
     user = user_fixture()
@@ -19,77 +18,20 @@ defmodule BerrypodWeb.Admin.DashboardTest do
     end
   end
 
-  describe "setup stepper" do
+  describe "redirects to setup when not live" do
     setup %{conn: conn, user: user} do
       %{conn: log_in_user(conn, user)}
     end
 
-    test "shows stepper with printify form when nothing connected", %{conn: conn} do
-      {:ok, _view, html} = live(conn, ~p"/admin")
-
-      assert html =~ "Setup steps"
-      assert html =~ "Connect to Printify"
-      assert html =~ "Printify API token"
-      assert html =~ "Connect Stripe"
-      assert html =~ "Go live"
-    end
-
-    test "shows stripe form when printify is done", %{conn: conn} do
-      conn_fixture = provider_connection_fixture(%{provider_type: "printify"})
-      _product = product_fixture(%{provider_connection: conn_fixture})
-
-      {:ok, view, _html} = live(conn, ~p"/admin")
-
-      # Printify step should be completed
-      assert has_element?(view, "li:first-child [class*='bg-green-500']")
-      # Stripe step should be active with form
-      assert has_element?(view, "label", "Secret key")
-    end
-
-    test "shows go live button when all services connected", %{conn: conn} do
-      conn_fixture = provider_connection_fixture(%{provider_type: "printify"})
-      _product = product_fixture(%{provider_connection: conn_fixture})
-      {:ok, _} = Berrypod.Settings.put_secret("stripe_api_key", "sk_test_123")
-
-      {:ok, view, _html} = live(conn, ~p"/admin")
-
-      assert has_element?(view, "button", "Go live")
-    end
-
-    test "go live shows celebration", %{conn: conn} do
-      conn_fixture = provider_connection_fixture(%{provider_type: "printify"})
-      _product = product_fixture(%{provider_connection: conn_fixture})
-      {:ok, _} = Berrypod.Settings.put_secret("stripe_api_key", "sk_test_123")
-
-      {:ok, view, _html} = live(conn, ~p"/admin")
-
-      html = view |> element("button", "Go live") |> render_click()
-
-      assert html =~ "Your shop is live!"
-      assert html =~ "View your shop"
-      assert html =~ "Customise theme"
-    end
-
-    test "hides stepper when shop is live", %{conn: conn} do
-      {:ok, _} = Berrypod.Settings.set_site_live(true)
-      {:ok, _view, html} = live(conn, ~p"/admin")
-
-      refute html =~ "Setup steps"
-      refute html =~ "Printify API token"
-    end
-
-    test "completed steps show summary and are collapsible", %{conn: conn} do
-      conn_fixture = provider_connection_fixture(%{provider_type: "printify"})
-      _product = product_fixture(%{provider_connection: conn_fixture})
-
-      {:ok, _view, html} = live(conn, ~p"/admin")
-
-      assert html =~ "products synced"
+    test "redirects to /admin/setup when site not live", %{conn: conn} do
+      {:error, redirect} = live(conn, ~p"/admin")
+      assert {:live_redirect, %{to: "/admin/setup"}} = redirect
     end
   end
 
   describe "stats" do
     setup %{conn: conn, user: user} do
+      {:ok, _} = Berrypod.Settings.set_site_live(true)
       %{conn: log_in_user(conn, user)}
     end
 
diff --git a/test/berrypod_web/live/admin/layout_test.exs b/test/berrypod_web/live/admin/layout_test.exs
index 0becdc6..3cec1b1 100644
--- a/test/berrypod_web/live/admin/layout_test.exs
+++ b/test/berrypod_web/live/admin/layout_test.exs
@@ -30,10 +30,10 @@ defmodule BerrypodWeb.Admin.LayoutTest do
       refute has_element?(view, ~s(a.active[href="/admin/settings"]))
     end
 
-    test "highlights dashboard on dashboard page", %{conn: conn} do
-      {:ok, view, _html} = live(conn, ~p"/admin")
+    test "highlights setup on setup page", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/setup")
 
-      assert has_element?(view, ~s(a.active[href="/admin"]))
+      assert has_element?(view, ~s(a.active[href="/admin/setup"]))
       refute has_element?(view, ~s(a.active[href="/admin/orders"]))
     end
 
diff --git a/test/berrypod_web/live/admin/setup_test.exs b/test/berrypod_web/live/admin/setup_test.exs
new file mode 100644
index 0000000..44f3164
--- /dev/null
+++ b/test/berrypod_web/live/admin/setup_test.exs
@@ -0,0 +1,88 @@
+defmodule BerrypodWeb.Admin.SetupTest do
+  use BerrypodWeb.ConnCase, async: false
+
+  import Phoenix.LiveViewTest
+  import Berrypod.AccountsFixtures
+  import Berrypod.ProductsFixtures
+
+  setup do
+    user = user_fixture()
+    %{user: user}
+  end
+
+  describe "unauthenticated" do
+    test "redirects to login", %{conn: conn} do
+      {:error, redirect} = live(conn, ~p"/admin/setup")
+      assert {:redirect, %{to: path}} = redirect
+      assert path == ~p"/users/log-in"
+    end
+  end
+
+  describe "setup stepper" do
+    setup %{conn: conn, user: user} do
+      %{conn: log_in_user(conn, user)}
+    end
+
+    test "shows stepper with printify form when nothing connected", %{conn: conn} do
+      {:ok, _view, html} = live(conn, ~p"/admin/setup")
+
+      assert html =~ "Setup steps"
+      assert html =~ "Connect to Printify"
+      assert html =~ "Printify API token"
+      assert html =~ "Connect Stripe"
+      assert html =~ "Go live"
+    end
+
+    test "shows stripe form when printify is done", %{conn: conn} do
+      conn_fixture = provider_connection_fixture(%{provider_type: "printify"})
+      _product = product_fixture(%{provider_connection: conn_fixture})
+
+      {:ok, view, _html} = live(conn, ~p"/admin/setup")
+
+      # Printify step should be completed
+      assert has_element?(view, "li:first-child [class*='bg-green-500']")
+      # Stripe step should be active with form
+      assert has_element?(view, "label", "Secret key")
+    end
+
+    test "shows go live button when all services connected", %{conn: conn} do
+      conn_fixture = provider_connection_fixture(%{provider_type: "printify"})
+      _product = product_fixture(%{provider_connection: conn_fixture})
+      {:ok, _} = Berrypod.Settings.put_secret("stripe_api_key", "sk_test_123")
+
+      {:ok, view, _html} = live(conn, ~p"/admin/setup")
+
+      assert has_element?(view, "button", "Go live")
+    end
+
+    test "go live shows celebration", %{conn: conn} do
+      conn_fixture = provider_connection_fixture(%{provider_type: "printify"})
+      _product = product_fixture(%{provider_connection: conn_fixture})
+      {:ok, _} = Berrypod.Settings.put_secret("stripe_api_key", "sk_test_123")
+
+      {:ok, view, _html} = live(conn, ~p"/admin/setup")
+
+      html = view |> element("button", "Go live") |> render_click()
+
+      assert html =~ "Your shop is live!"
+      assert html =~ "Go to dashboard"
+      assert html =~ "View your shop"
+      assert html =~ "Customise theme"
+    end
+
+    test "redirects to /admin when site is live", %{conn: conn} do
+      {:ok, _} = Berrypod.Settings.set_site_live(true)
+      {:error, redirect} = live(conn, ~p"/admin/setup")
+      assert {:live_redirect, %{to: "/admin"}} = redirect
+    end
+
+    test "completed steps show summary and are collapsible", %{conn: conn} do
+      conn_fixture = provider_connection_fixture(%{provider_type: "printify"})
+      _product = product_fixture(%{provider_connection: conn_fixture})
+
+      {:ok, _view, html} = live(conn, ~p"/admin/setup")
+
+      assert html =~ "products synced"
+    end
+  end
+end
diff --git a/test/berrypod_web/live/auth/confirmation_test.exs b/test/berrypod_web/live/auth/confirmation_test.exs
index ee80f35..2712440 100644
--- a/test/berrypod_web/live/auth/confirmation_test.exs
+++ b/test/berrypod_web/live/auth/confirmation_test.exs
@@ -64,7 +64,7 @@ defmodule BerrypodWeb.Auth.ConfirmationTest do
       assert Accounts.get_user!(user.id).confirmed_at
       # we are logged in now
       assert get_session(conn, :user_token)
-      assert redirected_to(conn) == ~p"/admin"
+      assert redirected_to(conn) == ~p"/admin/setup"
 
       # log out, new conn
       conn = build_conn()
diff --git a/test/berrypod_web/live/auth/login_test.exs b/test/berrypod_web/live/auth/login_test.exs
index eed3f43..6de434f 100644
--- a/test/berrypod_web/live/auth/login_test.exs
+++ b/test/berrypod_web/live/auth/login_test.exs
@@ -56,7 +56,7 @@ defmodule BerrypodWeb.Auth.LoginTest do
 
       conn = submit_form(form, conn)
 
-      assert redirected_to(conn) == ~p"/admin"
+      assert redirected_to(conn) == ~p"/admin/setup"
     end
 
     test "redirects to login page with a flash error if credentials are invalid", %{
diff --git a/test/berrypod_web/live/auth/registration_test.exs b/test/berrypod_web/live/auth/registration_test.exs
index df71fe5..486ecc3 100644
--- a/test/berrypod_web/live/auth/registration_test.exs
+++ b/test/berrypod_web/live/auth/registration_test.exs
@@ -25,7 +25,7 @@ defmodule BerrypodWeb.Auth.RegistrationTest do
         conn
         |> log_in_user(user_fixture())
         |> live(~p"/users/register")
-        |> follow_redirect(conn, ~p"/admin")
+        |> follow_redirect(conn, ~p"/admin/setup")
 
       assert {:ok, _conn} = result
     end
diff --git a/test/berrypod_web/user_auth_test.exs b/test/berrypod_web/user_auth_test.exs
index d835b4c..d9dea2b 100644
--- a/test/berrypod_web/user_auth_test.exs
+++ b/test/berrypod_web/user_auth_test.exs
@@ -25,7 +25,7 @@ defmodule BerrypodWeb.UserAuthTest do
       conn = UserAuth.log_in_user(conn, user)
       assert token = get_session(conn, :user_token)
       assert get_session(conn, :live_socket_id) == "users_sessions:#{Base.url_encode64(token)}"
-      assert redirected_to(conn) == ~p"/admin"
+      assert redirected_to(conn) == ~p"/admin/setup"
       assert Accounts.get_user_by_session_token(token)
     end
 
@@ -80,7 +80,7 @@ defmodule BerrypodWeb.UserAuthTest do
         |> assign(:current_scope, Scope.for_user(user))
         |> UserAuth.log_in_user(user)
 
-      assert redirected_to(conn) == ~p"/admin"
+      assert redirected_to(conn) == ~p"/admin/setup"
     end
 
     test "writes a cookie if remember_me was set in previous session", %{conn: conn, user: user} do