From 336b2bb81da072adec0c1747a6015ec6c56be6af Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Sat, 31 Jan 2026 14:24:58 +0000
Subject: [PATCH] chore: apply mix format to codebase

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 lib/mix/tasks/generate_mockups.ex             |    4 +-
 lib/simpleshop_theme/images/optimizer.ex      |   18 +-
 lib/simpleshop_theme/images/variant_cache.ex  |    4 +-
 lib/simpleshop_theme/media.ex                 |   14 +-
 lib/simpleshop_theme/media/image.ex           |    3 +-
 lib/simpleshop_theme/media/svg_recolorer.ex   |    3 +-
 lib/simpleshop_theme/mockups/generator.ex     |   55 +-
 lib/simpleshop_theme/products.ex              |    7 +-
 .../products/product_variant.ex               |    3 +-
 .../settings/theme_settings.ex                |   15 +-
 lib/simpleshop_theme/theme/fonts.ex           |    1 -
 lib/simpleshop_theme/theme/preview_data.ex    |   54 +-
 lib/simpleshop_theme_web.ex                   |    3 +-
 .../components/layouts/shop.html.heex         |    2 +-
 .../components/layouts/shop_root.html.heex    |   14 +-
 .../components/page_templates/about.html.heex |   14 +-
 .../components/page_templates/cart.html.heex  |   14 +-
 .../page_templates/collection.html.heex       |   14 +-
 .../page_templates/contact.html.heex          |   27 +-
 .../components/page_templates/error.html.heex |   20 +-
 .../components/page_templates/home.html.heex  |   14 +-
 .../components/page_templates/pdp.html.heex   |   39 +-
 .../components/shop_components.ex             | 1081 +++++++---
 .../controllers/error_html.ex                 |   46 +-
 .../live/shop_live/about.ex                   |    4 +-
 .../live/shop_live/cart.ex                    |   12 +-
 .../live/shop_live/collection.ex              |   49 +-
 .../live/shop_live/contact.ex                 |    4 +-
 .../live/shop_live/home.ex                    |    4 +-
 .../live/shop_live/product_show.ex            |    4 +-
 .../live/theme_live/index.ex                  |    5 +-
 .../live/theme_live/index.html.heex           | 1834 +++++++++--------
 .../live/user_live/login.ex                   |    3 +-
 .../20260128235846_create_products.exs        |    5 +-
 .../20260128235847_create_product_images.exs  |    5 +-
 ...20260128235848_create_product_variants.exs |    5 +-
 .../media/svg_recolorer_test.exs              |    4 +
 .../products/product_test.exs                 |    5 +-
 test/simpleshop_theme/products_test.exs       |    4 +-
 test/simpleshop_theme/settings_test.exs       |    6 +-
 .../sync/product_sync_worker_test.exs         |    4 +-
 .../theme/preview_data_test.exs               |    1 +
 .../controllers/error_json_test.exs           |    4 +-
 43 files changed, 2227 insertions(+), 1204 deletions(-)

diff --git a/lib/mix/tasks/generate_mockups.ex b/lib/mix/tasks/generate_mockups.ex
index be22bd0..e4541b0 100644
--- a/lib/mix/tasks/generate_mockups.ex
+++ b/lib/mix/tasks/generate_mockups.ex
@@ -194,7 +194,9 @@ defmodule Mix.Tasks.GenerateMockups do
         """)
 
         if failed > 0 do
-          Mix.shell().error("Some products failed to generate. Check the output above for details.")
+          Mix.shell().error(
+            "Some products failed to generate. Check the output above for details."
+          )
         end
     end
   end
diff --git a/lib/simpleshop_theme/images/optimizer.ex b/lib/simpleshop_theme/images/optimizer.ex
index 01fd556..79a4b2f 100644
--- a/lib/simpleshop_theme/images/optimizer.ex
+++ b/lib/simpleshop_theme/images/optimizer.ex
@@ -31,7 +31,8 @@ defmodule SimpleshopTheme.Images.Optimizer do
          {width, _height, _} <- Image.shape(image),
          {:ok, resized} <- maybe_resize(image, width),
          {final_width, final_height, _} <- Image.shape(resized),
-         {:ok, webp_data} <- Image.write(resized, :memory, suffix: ".webp", quality: @storage_quality) do
+         {:ok, webp_data} <-
+           Image.write(resized, :memory, suffix: ".webp", quality: @storage_quality) do
       {:ok, webp_data, final_width, final_height}
     end
   rescue
@@ -191,9 +192,20 @@ defmodule SimpleshopTheme.Images.Optimizer do
       widths = applicable_widths(source_width)
 
       tasks = [
-        Task.async(fn -> generate_variant_to_dir(vips_image, output_basename, output_dir, "thumb", :jpg, @thumb_size) end)
+        Task.async(fn ->
+          generate_variant_to_dir(
+            vips_image,
+            output_basename,
+            output_dir,
+            "thumb",
+            :jpg,
+            @thumb_size
+          )
+        end)
         | for w <- widths, fmt <- @pregenerated_formats do
-            Task.async(fn -> generate_variant_to_dir(vips_image, output_basename, output_dir, w, fmt, w) end)
+            Task.async(fn ->
+              generate_variant_to_dir(vips_image, output_basename, output_dir, w, fmt, w)
+            end)
           end
       ]
 
diff --git a/lib/simpleshop_theme/images/variant_cache.ex b/lib/simpleshop_theme/images/variant_cache.ex
index ee62d33..fc387c0 100644
--- a/lib/simpleshop_theme/images/variant_cache.ex
+++ b/lib/simpleshop_theme/images/variant_cache.ex
@@ -59,7 +59,9 @@ defmodule SimpleshopTheme.Images.VariantCache do
     if to_process == [] do
       Logger.info("[VariantCache] All database image variants up to date")
     else
-      Logger.info("[VariantCache] Enqueueing #{length(to_process)} database images for processing")
+      Logger.info(
+        "[VariantCache] Enqueueing #{length(to_process)} database images for processing"
+      )
 
       Enum.each(to_process, fn image ->
         image
diff --git a/lib/simpleshop_theme/media.ex b/lib/simpleshop_theme/media.ex
index fd1cb30..16077b2 100644
--- a/lib/simpleshop_theme/media.ex
+++ b/lib/simpleshop_theme/media.ex
@@ -119,7 +119,12 @@ defmodule SimpleshopTheme.Media do
 
   """
   def get_logo do
-    Repo.one(from i in ImageSchema, where: i.image_type == "logo", order_by: [desc: i.inserted_at], limit: 1)
+    Repo.one(
+      from i in ImageSchema,
+        where: i.image_type == "logo",
+        order_by: [desc: i.inserted_at],
+        limit: 1
+    )
   end
 
   @doc """
@@ -132,7 +137,12 @@ defmodule SimpleshopTheme.Media do
 
   """
   def get_header do
-    Repo.one(from i in ImageSchema, where: i.image_type == "header", order_by: [desc: i.inserted_at], limit: 1)
+    Repo.one(
+      from i in ImageSchema,
+        where: i.image_type == "header",
+        order_by: [desc: i.inserted_at],
+        limit: 1
+    )
   end
 
   @doc """
diff --git a/lib/simpleshop_theme/media/image.ex b/lib/simpleshop_theme/media/image.ex
index 3e4c965..5529699 100644
--- a/lib/simpleshop_theme/media/image.ex
+++ b/lib/simpleshop_theme/media/image.ex
@@ -46,7 +46,8 @@ defmodule SimpleshopTheme.Media.Image do
   defp detect_svg(changeset) do
     content_type = get_change(changeset, :content_type)
 
-    if content_type == "image/svg+xml" or String.ends_with?(get_change(changeset, :filename) || "", ".svg") do
+    if content_type == "image/svg+xml" or
+         String.ends_with?(get_change(changeset, :filename) || "", ".svg") do
       changeset
       |> put_change(:is_svg, true)
       |> maybe_store_svg_content()
diff --git a/lib/simpleshop_theme/media/svg_recolorer.ex b/lib/simpleshop_theme/media/svg_recolorer.ex
index 294018e..d2022e4 100644
--- a/lib/simpleshop_theme/media/svg_recolorer.ex
+++ b/lib/simpleshop_theme/media/svg_recolorer.ex
@@ -23,7 +23,8 @@ defmodule SimpleshopTheme.Media.SVGRecolorer do
 
   """
   @spec recolor(String.t(), String.t()) :: String.t()
-  def recolor(svg_content, target_color) when is_binary(svg_content) and is_binary(target_color) do
+  def recolor(svg_content, target_color)
+      when is_binary(svg_content) and is_binary(target_color) do
     svg_content
     |> recolor_fill_attributes(target_color)
     |> recolor_stroke_attributes(target_color)
diff --git a/lib/simpleshop_theme/mockups/generator.ex b/lib/simpleshop_theme/mockups/generator.ex
index a4bd350..955f68c 100644
--- a/lib/simpleshop_theme/mockups/generator.ex
+++ b/lib/simpleshop_theme/mockups/generator.ex
@@ -163,9 +163,17 @@ defmodule SimpleshopTheme.Mockups.Generator do
       hoodie: %{blueprint_id: nil, print_provider_id: nil, search_term: "Pullover Hoodie"},
       tote: %{blueprint_id: nil, print_provider_id: nil, search_term: "Cotton Tote Bag"},
       mug: %{blueprint_id: nil, print_provider_id: nil, search_term: "Mug 11oz"},
-      cushion: %{blueprint_id: nil, print_provider_id: nil, search_term: "Spun Polyester Square Pillow"},
+      cushion: %{
+        blueprint_id: nil,
+        print_provider_id: nil,
+        search_term: "Spun Polyester Square Pillow"
+      },
       blanket: %{blueprint_id: nil, print_provider_id: nil, search_term: "Sherpa Fleece Blanket"},
-      notebook: %{blueprint_id: nil, print_provider_id: nil, search_term: "Hardcover Journal Matte"},
+      notebook: %{
+        blueprint_id: nil,
+        print_provider_id: nil,
+        search_term: "Hardcover Journal Matte"
+      },
       phone_case: %{blueprint_id: nil, print_provider_id: nil, search_term: "Tough Phone Cases"},
       laptop_sleeve: %{blueprint_id: nil, print_provider_id: nil, search_term: "Laptop Sleeve"}
     }
@@ -253,12 +261,12 @@ defmodule SimpleshopTheme.Mockups.Generator do
   """
   def calculate_cover_scale(artwork_width, artwork_height, placeholder_width, placeholder_height)
       when is_number(artwork_width) and is_number(artwork_height) and
-           is_number(placeholder_width) and is_number(placeholder_height) and
-           artwork_width > 0 and artwork_height > 0 and
-           placeholder_width > 0 and placeholder_height > 0 do
+             is_number(placeholder_width) and is_number(placeholder_height) and
+             artwork_width > 0 and artwork_height > 0 and
+             placeholder_width > 0 and placeholder_height > 0 do
     # For cover: use the larger scale to ensure full coverage
     width_scale = 1.0
-    height_scale = (placeholder_height * artwork_width) / (artwork_height * placeholder_width)
+    height_scale = placeholder_height * artwork_width / (artwork_height * placeholder_width)
     max(width_scale, height_scale)
   end
 
@@ -267,21 +275,36 @@ defmodule SimpleshopTheme.Mockups.Generator do
   @doc """
   Create a product with the uploaded artwork.
   """
-  def create_product(shop_id, product_def, image_id, image_width, image_height, blueprint_id, print_provider_id, variants) do
+  def create_product(
+        shop_id,
+        product_def,
+        image_id,
+        image_width,
+        image_height,
+        blueprint_id,
+        print_provider_id,
+        variants
+      ) do
     # Get the first variant for simplicity (typically a standard size/color)
     variant = hd(variants)
     variant_id = variant["id"]
 
     # Get placeholder info
     placeholders = variant["placeholders"] || []
-    front_placeholder = Enum.find(placeholders, fn p -> p["position"] == "front" end) || hd(placeholders)
+
+    front_placeholder =
+      Enum.find(placeholders, fn p -> p["position"] == "front" end) || hd(placeholders)
 
     # Extract placeholder dimensions and calculate cover scale
     placeholder_width = front_placeholder["width"]
     placeholder_height = front_placeholder["height"]
-    scale = calculate_cover_scale(image_width, image_height, placeholder_width, placeholder_height)
 
-    IO.puts("  Scale calculation: artwork #{image_width}x#{image_height}, placeholder #{placeholder_width}x#{placeholder_height} -> scale #{Float.round(scale, 3)}")
+    scale =
+      calculate_cover_scale(image_width, image_height, placeholder_width, placeholder_height)
+
+    IO.puts(
+      "  Scale calculation: artwork #{image_width}x#{image_height}, placeholder #{placeholder_width}x#{placeholder_height} -> scale #{Float.round(scale, 3)}"
+    )
 
     product_data = %{
       title: product_def.name,
@@ -439,7 +462,17 @@ defmodule SimpleshopTheme.Mockups.Generator do
          image_height = upload["height"],
          _ = IO.puts("  Artwork uploaded (ID: #{image_id}, #{image_width}x#{image_height})"),
          _ = IO.puts("  Creating product..."),
-         {:ok, product} <- create_product(shop_id, product_def, image_id, image_width, image_height, blueprint_id, provider_id, variants),
+         {:ok, product} <-
+           create_product(
+             shop_id,
+             product_def,
+             image_id,
+             image_width,
+             image_height,
+             blueprint_id,
+             provider_id,
+             variants
+           ),
          product_id = product["id"],
          mockup_urls = extract_mockup_urls(product),
          _ = IO.puts("  Product created (ID: #{product_id})"),
diff --git a/lib/simpleshop_theme/products.ex b/lib/simpleshop_theme/products.ex
index c5c3613..2a94e6f 100644
--- a/lib/simpleshop_theme/products.ex
+++ b/lib/simpleshop_theme/products.ex
@@ -287,14 +287,17 @@ defmodule SimpleshopTheme.Products do
 
     if MapSet.size(removed_ids) > 0 do
       from(v in ProductVariant,
-        where: v.product_id == ^product_id and v.provider_variant_id in ^MapSet.to_list(removed_ids)
+        where:
+          v.product_id == ^product_id and v.provider_variant_id in ^MapSet.to_list(removed_ids)
       )
       |> Repo.delete_all()
     end
 
     # Upsert incoming variants
     Enum.map(variants, fn variant_data ->
-      provider_variant_id = variant_data[:provider_variant_id] || variant_data["provider_variant_id"]
+      provider_variant_id =
+        variant_data[:provider_variant_id] || variant_data["provider_variant_id"]
+
       attrs = Map.put(variant_data, :product_id, product_id)
 
       case get_variant_by_provider(product_id, provider_variant_id) do
diff --git a/lib/simpleshop_theme/products/product_variant.ex b/lib/simpleshop_theme/products/product_variant.ex
index 144044f..a6353a8 100644
--- a/lib/simpleshop_theme/products/product_variant.ex
+++ b/lib/simpleshop_theme/products/product_variant.ex
@@ -88,7 +88,8 @@ defmodule SimpleshopTheme.Products.ProductVariant do
   Formats the options as a human-readable title.
   E.g., %{"Size" => "Large", "Color" => "Blue"} -> "Large / Blue"
   """
-  def options_title(%__MODULE__{options: options}) when is_map(options) and map_size(options) > 0 do
+  def options_title(%__MODULE__{options: options})
+      when is_map(options) and map_size(options) > 0 do
     options
     |> Map.values()
     |> Enum.join(" / ")
diff --git a/lib/simpleshop_theme/settings/theme_settings.ex b/lib/simpleshop_theme/settings/theme_settings.ex
index 13f6dd8..c6e098c 100644
--- a/lib/simpleshop_theme/settings/theme_settings.ex
+++ b/lib/simpleshop_theme/settings/theme_settings.ex
@@ -93,7 +93,10 @@ defmodule SimpleshopTheme.Settings.ThemeSettings do
     ])
     |> validate_required([:mood, :typography, :shape, :density])
     |> validate_inclusion(:mood, ~w(neutral warm cool dark))
-    |> validate_inclusion(:typography, ~w(clean editorial modern classic friendly minimal impulse))
+    |> validate_inclusion(
+      :typography,
+      ~w(clean editorial modern classic friendly minimal impulse)
+    )
     |> validate_inclusion(:shape, ~w(sharp soft round pill))
     |> validate_inclusion(:density, ~w(spacious balanced compact))
     |> validate_inclusion(:grid_columns, ~w(2 3 4))
@@ -101,8 +104,14 @@ defmodule SimpleshopTheme.Settings.ThemeSettings do
     |> validate_inclusion(:logo_mode, ~w(text-only logo-text logo-only))
     |> validate_number(:logo_size, greater_than_or_equal_to: 24, less_than_or_equal_to: 120)
     |> validate_number(:header_zoom, greater_than_or_equal_to: 100, less_than_or_equal_to: 200)
-    |> validate_number(:header_position_x, greater_than_or_equal_to: 0, less_than_or_equal_to: 100)
-    |> validate_number(:header_position_y, greater_than_or_equal_to: 0, less_than_or_equal_to: 100)
+    |> validate_number(:header_position_x,
+      greater_than_or_equal_to: 0,
+      less_than_or_equal_to: 100
+    )
+    |> validate_number(:header_position_y,
+      greater_than_or_equal_to: 0,
+      less_than_or_equal_to: 100
+    )
     |> validate_inclusion(:layout_width, ~w(contained wide full))
     |> validate_inclusion(:card_shadow, ~w(none sm md lg))
     |> validate_inclusion(:font_size, ~w(small medium large))
diff --git a/lib/simpleshop_theme/theme/fonts.ex b/lib/simpleshop_theme/theme/fonts.ex
index e4680a6..732aaeb 100644
--- a/lib/simpleshop_theme/theme/fonts.ex
+++ b/lib/simpleshop_theme/theme/fonts.ex
@@ -234,5 +234,4 @@ defmodule SimpleshopTheme.Theme.Fonts do
         ""
     end
   end
-
 end
diff --git a/lib/simpleshop_theme/theme/preview_data.ex b/lib/simpleshop_theme/theme/preview_data.ex
index 16f224a..7139f16 100644
--- a/lib/simpleshop_theme/theme/preview_data.ex
+++ b/lib/simpleshop_theme/theme/preview_data.ex
@@ -67,7 +67,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
       %{
         rating: 5,
         title: "Absolutely beautiful",
-        body: "The quality exceeded my expectations. The colours are vibrant and the paper feels premium. It's now pride of place in my living room.",
+        body:
+          "The quality exceeded my expectations. The colours are vibrant and the paper feels premium. It's now pride of place in my living room.",
         author: "Sarah M.",
         date: "2 weeks ago",
         verified: true
@@ -75,7 +76,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
       %{
         rating: 4,
         title: "Great gift",
-        body: "Bought this as a gift and it arrived beautifully packaged. Fast shipping too. Would definitely order again.",
+        body:
+          "Bought this as a gift and it arrived beautifully packaged. Fast shipping too. Would definitely order again.",
         author: "James T.",
         date: "1 month ago",
         verified: true
@@ -90,13 +92,33 @@ defmodule SimpleshopTheme.Theme.PreviewData do
   """
   def about_content do
     [
-      %{type: :lead, text: "I'm Emma, a nature photographer based in the UK. What started as weekend walks with my camera has grown into something I never expected – a little shop where I can share my favourite captures with others."},
-      %{type: :paragraph, text: "Every design in this shop comes from my own photography. Whether it's early morning mist over the hills, autumn leaves in the local woods, or the quiet beauty of wildflower meadows, I'm drawn to the peaceful moments that nature offers."},
-      %{type: :paragraph, text: "I work with quality print partners to bring these images to life on products you can actually use and enjoy – from art prints for your walls to mugs for your morning tea."},
+      %{
+        type: :lead,
+        text:
+          "I'm Emma, a nature photographer based in the UK. What started as weekend walks with my camera has grown into something I never expected – a little shop where I can share my favourite captures with others."
+      },
+      %{
+        type: :paragraph,
+        text:
+          "Every design in this shop comes from my own photography. Whether it's early morning mist over the hills, autumn leaves in the local woods, or the quiet beauty of wildflower meadows, I'm drawn to the peaceful moments that nature offers."
+      },
+      %{
+        type: :paragraph,
+        text:
+          "I work with quality print partners to bring these images to life on products you can actually use and enjoy – from art prints for your walls to mugs for your morning tea."
+      },
       %{type: :heading, text: "Quality you can trust"},
-      %{type: :paragraph, text: "I've carefully chosen print partners who share my commitment to quality. Every product is made to order using premium materials and printing techniques that ensure vibrant colours and lasting quality."},
+      %{
+        type: :paragraph,
+        text:
+          "I've carefully chosen print partners who share my commitment to quality. Every product is made to order using premium materials and printing techniques that ensure vibrant colours and lasting quality."
+      },
       %{type: :heading, text: "Printed sustainably"},
-      %{type: :paragraph, text: "Because each item is printed on demand, there's no waste from unsold stock. My print partners use eco-friendly inks where possible, and products are shipped directly to you to minimise unnecessary handling."},
+      %{
+        type: :paragraph,
+        text:
+          "Because each item is printed on demand, there's no waste from unsold stock. My print partners use eco-friendly inks where possible, and products are shipped directly to you to minimise unnecessary handling."
+      },
       %{type: :closing, text: "Thank you for visiting. It means a lot that you're here."}
     ]
   end
@@ -427,42 +449,48 @@ defmodule SimpleshopTheme.Theme.PreviewData do
       %{
         id: "1",
         author: "Sarah M.",
-        content: "The print quality is absolutely stunning - colours are exactly as shown online. My living room looks so much better now!",
+        content:
+          "The print quality is absolutely stunning - colours are exactly as shown online. My living room looks so much better now!",
         rating: 5,
         date: "2025-01-15"
       },
       %{
         id: "2",
         author: "James L.",
-        content: "Bought the forest hoodie as a gift. The packaging was lovely and the quality exceeded expectations. Will order again!",
+        content:
+          "Bought the forest hoodie as a gift. The packaging was lovely and the quality exceeded expectations. Will order again!",
         rating: 5,
         date: "2025-01-10"
       },
       %{
         id: "3",
         author: "Emily R.",
-        content: "My new favourite mug! I love sipping my morning tea while looking at that beautiful fern design.",
+        content:
+          "My new favourite mug! I love sipping my morning tea while looking at that beautiful fern design.",
         rating: 5,
         date: "2025-01-05"
       },
       %{
         id: "4",
         author: "Michael T.",
-        content: "The tote bag is so sturdy - I use it for everything now. Great print quality that hasn't faded at all.",
+        content:
+          "The tote bag is so sturdy - I use it for everything now. Great print quality that hasn't faded at all.",
         rating: 5,
         date: "2024-12-28"
       },
       %{
         id: "5",
         author: "Lisa K.",
-        content: "The night sky blanket is gorgeous and so cosy. Perfect for film nights on the sofa. Highly recommend!",
+        content:
+          "The night sky blanket is gorgeous and so cosy. Perfect for film nights on the sofa. Highly recommend!",
         rating: 5,
         date: "2024-12-20"
       },
       %{
         id: "6",
         author: "David P.",
-        content: "Ordered several prints for my new flat. They arrived well packaged and look amazing on the wall.",
+        content:
+          "Ordered several prints for my new flat. They arrived well packaged and look amazing on the wall.",
         rating: 5,
         date: "2024-12-15"
       }
diff --git a/lib/simpleshop_theme_web.ex b/lib/simpleshop_theme_web.ex
index 79921db..eef6873 100644
--- a/lib/simpleshop_theme_web.ex
+++ b/lib/simpleshop_theme_web.ex
@@ -17,7 +17,8 @@ defmodule SimpleshopThemeWeb do
   those modules here.
   """
 
-  def static_paths, do: ~w(assets css fonts images image_cache mockups favicon.ico robots.txt demo.html)
+  def static_paths,
+    do: ~w(assets css fonts images image_cache mockups favicon.ico robots.txt demo.html)
 
   def router do
     quote do
diff --git a/lib/simpleshop_theme_web/components/layouts/shop.html.heex b/lib/simpleshop_theme_web/components/layouts/shop.html.heex
index 0543398..ccdf89c 100644
--- a/lib/simpleshop_theme_web/components/layouts/shop.html.heex
+++ b/lib/simpleshop_theme_web/components/layouts/shop.html.heex
@@ -1 +1 @@
-<%= @inner_content %>
+{@inner_content}
diff --git a/lib/simpleshop_theme_web/components/layouts/shop_root.html.heex b/lib/simpleshop_theme_web/components/layouts/shop_root.html.heex
index d74eb4e..716a087 100644
--- a/lib/simpleshop_theme_web/components/layouts/shop_root.html.heex
+++ b/lib/simpleshop_theme_web/components/layouts/shop_root.html.heex
@@ -4,8 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <meta name="description" content={assigns[:page_description] || @theme_settings.site_description || "Welcome to #{@theme_settings.site_name}"} />
-    <.live_title><%= assigns[:page_title] || @theme_settings.site_name %></.live_title>
+    <meta
+      name="description"
+      content={
+        assigns[:page_description] || @theme_settings.site_description ||
+          "Welcome to #{@theme_settings.site_name}"
+      }
+    />
+    <.live_title>{assigns[:page_title] || @theme_settings.site_name}</.live_title>
     <!-- Preload critical fonts for the current typography preset -->
     <%= for preload <- SimpleshopTheme.Theme.Fonts.preload_links(
           @theme_settings.typography,
@@ -17,7 +23,9 @@
     <script defer phx-track-static src={~p"/assets/js/app.js"}>
     </script>
     <!-- Generated theme CSS with @font-face declarations -->
-    <style id="theme-css"><%= Phoenix.HTML.raw(@generated_css) %></style>
+    <style id="theme-css">
+      <%= Phoenix.HTML.raw(@generated_css) %>
+    </style>
   </head>
   <body class="h-full">
     <div
diff --git a/lib/simpleshop_theme_web/components/page_templates/about.html.heex b/lib/simpleshop_theme_web/components/page_templates/about.html.heex
index 2abe244..d47cbc8 100644
--- a/lib/simpleshop_theme_web/components/page_templates/about.html.heex
+++ b/lib/simpleshop_theme_web/components/page_templates/about.html.heex
@@ -1,11 +1,21 @@
-<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div
+  class="shop-container min-h-screen pb-20 md:pb-0"
+  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+>
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="about" mode={@mode} cart_count={@cart_count} />
+  <.shop_header
+    theme_settings={@theme_settings}
+    logo_image={@logo_image}
+    header_image={@header_image}
+    active_page="about"
+    mode={@mode}
+    cart_count={@cart_count}
+  />
 
   <main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
     <.hero_section
diff --git a/lib/simpleshop_theme_web/components/page_templates/cart.html.heex b/lib/simpleshop_theme_web/components/page_templates/cart.html.heex
index 308d556..7ffb0b1 100644
--- a/lib/simpleshop_theme_web/components/page_templates/cart.html.heex
+++ b/lib/simpleshop_theme_web/components/page_templates/cart.html.heex
@@ -1,11 +1,21 @@
-<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div
+  class="shop-container min-h-screen pb-20 md:pb-0"
+  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+>
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="cart" mode={@mode} cart_count={@cart_count} />
+  <.shop_header
+    theme_settings={@theme_settings}
+    logo_image={@logo_image}
+    header_image={@header_image}
+    active_page="cart"
+    mode={@mode}
+    cart_count={@cart_count}
+  />
 
   <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <.page_title text="Your basket" />
diff --git a/lib/simpleshop_theme_web/components/page_templates/collection.html.heex b/lib/simpleshop_theme_web/components/page_templates/collection.html.heex
index c3e6619..2e3a3d2 100644
--- a/lib/simpleshop_theme_web/components/page_templates/collection.html.heex
+++ b/lib/simpleshop_theme_web/components/page_templates/collection.html.heex
@@ -1,11 +1,21 @@
-<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div
+  class="shop-container min-h-screen pb-20 md:pb-0"
+  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+>
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="collection" mode={@mode} cart_count={@cart_count} />
+  <.shop_header
+    theme_settings={@theme_settings}
+    logo_image={@logo_image}
+    header_image={@header_image}
+    active_page="collection"
+    mode={@mode}
+    cart_count={@cart_count}
+  />
 
   <main id="main-content">
     <.collection_header title="All Products" product_count={length(@preview_data.products)} />
diff --git a/lib/simpleshop_theme_web/components/page_templates/contact.html.heex b/lib/simpleshop_theme_web/components/page_templates/contact.html.heex
index 019cf50..5bfcb02 100644
--- a/lib/simpleshop_theme_web/components/page_templates/contact.html.heex
+++ b/lib/simpleshop_theme_web/components/page_templates/contact.html.heex
@@ -1,11 +1,21 @@
-<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div
+  class="shop-container min-h-screen pb-20 md:pb-0"
+  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+>
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" mode={@mode} cart_count={@cart_count} />
+  <.shop_header
+    theme_settings={@theme_settings}
+    logo_image={@logo_image}
+    header_image={@header_image}
+    active_page="contact"
+    mode={@mode}
+    cart_count={@cart_count}
+  />
 
   <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <.hero_section
@@ -20,11 +30,14 @@
       <div class="flex flex-col gap-6">
         <.order_tracking_card />
 
-        <.info_card title="Handy to know" items={[
-          %{label: "Printing", value: "2-5 business days"},
-          %{label: "Delivery", value: "3-7 business days after printing"},
-          %{label: "Returns", value: "Happy to help with faulty or damaged items"}
-        ]} />
+        <.info_card
+          title="Handy to know"
+          items={[
+            %{label: "Printing", value: "2-5 business days"},
+            %{label: "Delivery", value: "3-7 business days after printing"},
+            %{label: "Returns", value: "Happy to help with faulty or damaged items"}
+          ]}
+        />
 
         <.newsletter_card />
 
diff --git a/lib/simpleshop_theme_web/components/page_templates/error.html.heex b/lib/simpleshop_theme_web/components/page_templates/error.html.heex
index 0d07e0c..b48d0d4 100644
--- a/lib/simpleshop_theme_web/components/page_templates/error.html.heex
+++ b/lib/simpleshop_theme_web/components/page_templates/error.html.heex
@@ -1,13 +1,27 @@
-<div class="shop-container min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div
+  class="shop-container min-h-screen"
+  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+>
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="error" mode={@mode} cart_count={@cart_count} />
+  <.shop_header
+    theme_settings={@theme_settings}
+    logo_image={@logo_image}
+    header_image={@header_image}
+    active_page="error"
+    mode={@mode}
+    cart_count={@cart_count}
+  />
 
-  <main id="main-content" class="flex items-center justify-center" style="min-height: calc(100vh - 4rem);">
+  <main
+    id="main-content"
+    class="flex items-center justify-center"
+    style="min-height: calc(100vh - 4rem);"
+  >
     <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
       <.hero_section
         variant={:error}
diff --git a/lib/simpleshop_theme_web/components/page_templates/home.html.heex b/lib/simpleshop_theme_web/components/page_templates/home.html.heex
index 8c5ea0a..af96f16 100644
--- a/lib/simpleshop_theme_web/components/page_templates/home.html.heex
+++ b/lib/simpleshop_theme_web/components/page_templates/home.html.heex
@@ -1,11 +1,21 @@
-<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div
+  class="shop-container min-h-screen pb-20 md:pb-0"
+  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+>
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="home" mode={@mode} cart_count={@cart_count} />
+  <.shop_header
+    theme_settings={@theme_settings}
+    logo_image={@logo_image}
+    header_image={@header_image}
+    active_page="home"
+    mode={@mode}
+    cart_count={@cart_count}
+  />
 
   <main id="main-content">
     <.hero_section
diff --git a/lib/simpleshop_theme_web/components/page_templates/pdp.html.heex b/lib/simpleshop_theme_web/components/page_templates/pdp.html.heex
index 6034ed2..24a2916 100644
--- a/lib/simpleshop_theme_web/components/page_templates/pdp.html.heex
+++ b/lib/simpleshop_theme_web/components/page_templates/pdp.html.heex
@@ -1,18 +1,36 @@
-<div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+<div
+  class="shop-container min-h-screen pb-20 md:pb-0"
+  style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+>
   <.skip_link />
 
   <%= if @theme_settings.announcement_bar do %>
     <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
-  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="pdp" mode={@mode} cart_count={@cart_count} />
+  <.shop_header
+    theme_settings={@theme_settings}
+    logo_image={@logo_image}
+    header_image={@header_image}
+    active_page="pdp"
+    mode={@mode}
+    cart_count={@cart_count}
+  />
 
   <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-    <.breadcrumb items={[
-      %{label: "Home", page: "home", href: "/"},
-      %{label: @product.category, page: "collection", href: "/collections/#{@product.category |> String.downcase() |> String.replace(" ", "-")}"},
-      %{label: @product.name, current: true}
-    ]} mode={@mode} />
+    <.breadcrumb
+      items={[
+        %{label: "Home", page: "home", href: "/"},
+        %{
+          label: @product.category,
+          page: "collection",
+          href:
+            "/collections/#{@product.category |> String.downcase() |> String.replace(" ", "-")}"
+        },
+        %{label: @product.name, current: true}
+      ]}
+      mode={@mode}
+    />
 
     <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
       <.product_gallery images={@gallery_images} product_name={@product.name} />
@@ -27,7 +45,12 @@
       </div>
     </div>
 
-    <.reviews_section :if={@theme_settings.pdp_reviews} reviews={SimpleshopTheme.Theme.PreviewData.reviews()} average_rating={5} total_count={24} />
+    <.reviews_section
+      :if={@theme_settings.pdp_reviews}
+      reviews={SimpleshopTheme.Theme.PreviewData.reviews()}
+      average_rating={5}
+      total_count={24}
+    />
 
     <.related_products_section
       :if={@theme_settings.pdp_related_products}
diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex
index 80ad8bd..30dbab8 100644
--- a/lib/simpleshop_theme_web/components/shop_components.ex
+++ b/lib/simpleshop_theme_web/components/shop_components.ex
@@ -228,7 +228,11 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   def shop_link_button(assigns) do
     ~H"""
-    <a href={@href} class={["themed-button", @class]} style="text-decoration: none; display: inline-block;">
+    <a
+      href={@href}
+      class={["themed-button", @class]}
+      style="text-decoration: none; display: inline-block;"
+    >
       {render_slot(@inner_block)}
     </a>
     """
@@ -257,7 +261,11 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   def shop_link_outline(assigns) do
     ~H"""
-    <a href={@href} class={["themed-button-outline", @class]} style="text-decoration: none; display: inline-block;">
+    <a
+      href={@href}
+      class={["themed-button-outline", @class]}
+      style="text-decoration: none; display: inline-block;"
+    >
       {render_slot(@inner_block)}
     </a>
     """
@@ -323,7 +331,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: var(--t-surface-raised); border-top: 1px solid var(--t-border-default); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); padding-bottom: env(safe-area-inset-bottom, 0px);"
       aria-label="Main navigation"
     >
-      <ul class="flex justify-around items-center h-16" style="margin: 0; padding: 0; list-style: none;">
+      <ul
+        class="flex justify-around items-center h-16"
+        style="margin: 0; padding: 0; list-style: none;"
+      >
         <.mobile_nav_item
           icon={:home}
           label="Home"
@@ -408,7 +419,15 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)
 
     ~H"""
-    <svg class={@size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg
+      class={@size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
       <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
       <polyline points="9 22 9 12 15 12 15 22"></polyline>
     </svg>
@@ -419,7 +438,15 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)
 
     ~H"""
-    <svg class={@size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg
+      class={@size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
       <rect x="3" y="3" width="7" height="7"></rect>
       <rect x="14" y="3" width="7" height="7"></rect>
       <rect x="14" y="14" width="7" height="7"></rect>
@@ -432,7 +459,15 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)
 
     ~H"""
-    <svg class={@size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg
+      class={@size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
       <circle cx="12" cy="12" r="10"></circle>
       <line x1="12" y1="16" x2="12" y2="12"></line>
       <line x1="12" y1="8" x2="12.01" y2="8"></line>
@@ -444,7 +479,15 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     assigns = assign_new(assigns, :size, fn -> "w-5 h-5" end)
 
     ~H"""
-    <svg class={@size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <svg
+      class={@size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
       <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
       <polyline points="22,6 12,13 2,6"></polyline>
     </svg>
@@ -486,7 +529,14 @@ defmodule SimpleshopThemeWeb.ShopComponents do
           class="flex items-center gap-3 p-4"
           style="border-bottom: 1px solid var(--t-border-default);"
         >
-          <svg class="w-5 h-5 flex-shrink-0" style="color: var(--t-text-tertiary);" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <svg
+            class="w-5 h-5 flex-shrink-0"
+            style="color: var(--t-text-tertiary);"
+            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>
@@ -505,7 +555,13 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             phx-click={Phoenix.LiveView.JS.hide(to: "#search-modal")}
             aria-label="Close search"
           >
-            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg
+              class="w-5 h-5"
+              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>
@@ -546,46 +602,163 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
           <.newsletter_card variant={:inline} />
-
-          <!-- Links -->
+          
+    <!-- Links -->
           <div class="grid grid-cols-2 gap-8">
             <div>
-              <h4 class="font-semibold mb-4 text-sm" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
+              <h4
+                class="font-semibold mb-4 text-sm"
+                style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
+              >
                 Shop
               </h4>
               <ul class="flex flex-col gap-2 text-sm">
                 <%= if @mode == :preview do %>
-                  <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">All products</a></li>
-                  <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">New arrivals</a></li>
-                  <li><a href="#" phx-click="change_preview_page" phx-value-page="collection" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Best sellers</a></li>
+                  <li>
+                    <a
+                      href="#"
+                      phx-click="change_preview_page"
+                      phx-value-page="collection"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary); cursor: pointer;"
+                    >
+                      All products
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      phx-click="change_preview_page"
+                      phx-value-page="collection"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary); cursor: pointer;"
+                    >
+                      New arrivals
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      phx-click="change_preview_page"
+                      phx-value-page="collection"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary); cursor: pointer;"
+                    >
+                      Best sellers
+                    </a>
+                  </li>
                 <% else %>
-                  <li><a href="/collections/all" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">All products</a></li>
-                  <li><a href="/collections/all" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">New arrivals</a></li>
-                  <li><a href="/collections/all" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Best sellers</a></li>
+                  <li>
+                    <a
+                      href="/collections/all"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary);"
+                    >
+                      All products
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="/collections/all"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary);"
+                    >
+                      New arrivals
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="/collections/all"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary);"
+                    >
+                      Best sellers
+                    </a>
+                  </li>
                 <% end %>
               </ul>
             </div>
             <div>
-              <h4 class="font-semibold mb-4 text-sm" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
+              <h4
+                class="font-semibold mb-4 text-sm"
+                style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
+              >
                 Help
               </h4>
               <ul class="flex flex-col gap-2 text-sm">
                 <%= if @mode == :preview do %>
-                  <li><a href="#" phx-click="change_preview_page" phx-value-page="about" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Delivery</a></li>
-                  <li><a href="#" phx-click="change_preview_page" phx-value-page="about" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Returns</a></li>
-                  <li><a href="#" phx-click="change_preview_page" phx-value-page="contact" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary); cursor: pointer;">Contact</a></li>
+                  <li>
+                    <a
+                      href="#"
+                      phx-click="change_preview_page"
+                      phx-value-page="about"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary); cursor: pointer;"
+                    >
+                      Delivery
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      phx-click="change_preview_page"
+                      phx-value-page="about"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary); cursor: pointer;"
+                    >
+                      Returns
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      phx-click="change_preview_page"
+                      phx-value-page="contact"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary); cursor: pointer;"
+                    >
+                      Contact
+                    </a>
+                  </li>
                 <% else %>
-                  <li><a href="/delivery" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Delivery</a></li>
-                  <li><a href="/returns" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Returns</a></li>
-                  <li><a href="/contact" class="transition-colors hover:opacity-80" style="color: var(--t-text-secondary);">Contact</a></li>
+                  <li>
+                    <a
+                      href="/delivery"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary);"
+                    >
+                      Delivery
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="/returns"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary);"
+                    >
+                      Returns
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="/contact"
+                      class="transition-colors hover:opacity-80"
+                      style="color: var(--t-text-secondary);"
+                    >
+                      Contact
+                    </a>
+                  </li>
                 <% end %>
               </ul>
             </div>
           </div>
         </div>
-
-        <!-- Bottom Bar -->
-        <div class="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4" style="border-top: 1px solid var(--t-border-subtle);">
+        
+    <!-- Bottom Bar -->
+        <div
+          class="mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"
+          style="border-top: 1px solid var(--t-border-subtle);"
+        >
           <p class="text-xs" style="color: var(--t-text-tertiary);">
             © {@current_year} {@theme_settings.site_name}
           </p>
@@ -596,7 +769,13 @@ defmodule SimpleshopThemeWeb.ShopComponents do
               style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
               aria-label="Instagram"
             >
-              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg
+                class="w-5 h-5"
+                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>
@@ -608,7 +787,13 @@ defmodule SimpleshopThemeWeb.ShopComponents do
               style="color: var(--t-text-secondary); border-radius: var(--t-radius-button);"
               aria-label="Pinterest"
             >
-              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <svg
+                class="w-5 h-5"
+                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>
@@ -655,7 +840,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         <div style={header_background_style(@theme_settings, @header_image)} />
       <% end %>
 
-      <div class="shop-logo" style="display: flex; align-items: center; position: relative; z-index: 1;">
+      <div
+        class="shop-logo"
+        style="display: flex; align-items: center; position: relative; z-index: 1;"
+      >
         <.logo_content
           theme_settings={@theme_settings}
           logo_image={@logo_image}
@@ -667,12 +855,24 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <nav class="shop-nav hidden md:flex md:gap-6" style="position: relative; z-index: 1;">
         <%= if @mode == :preview do %>
           <.nav_item label="Home" page="home" active_page={@active_page} mode={:preview} />
-          <.nav_item label="Shop" page="collection" active_page={@active_page} mode={:preview} active_pages={["collection", "pdp"]} />
+          <.nav_item
+            label="Shop"
+            page="collection"
+            active_page={@active_page}
+            mode={:preview}
+            active_pages={["collection", "pdp"]}
+          />
           <.nav_item label="About" page="about" active_page={@active_page} mode={:preview} />
           <.nav_item label="Contact" page="contact" active_page={@active_page} mode={:preview} />
         <% else %>
           <.nav_item label="Home" href="/" active_page={@active_page} page="home" />
-          <.nav_item label="Shop" href="/collections/all" active_page={@active_page} page="collection" active_pages={["collection", "pdp"]} />
+          <.nav_item
+            label="Shop"
+            href="/collections/all"
+            active_page={@active_page}
+            page="collection"
+            active_pages={["collection", "pdp"]}
+          />
           <.nav_item label="About" href="/about" active_page={@active_page} page="about" />
           <.nav_item label="Contact" href="/contact" active_page={@active_page} page="contact" />
         <% end %>
@@ -683,7 +883,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
           type="button"
           class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
           style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
-          phx-click={Phoenix.LiveView.JS.show(to: "#search-modal", display: "flex") |> Phoenix.LiveView.JS.focus(to: "#search-input")}
+          phx-click={
+            Phoenix.LiveView.JS.show(to: "#search-modal", display: "flex")
+            |> Phoenix.LiveView.JS.focus(to: "#search-input")
+          }
           aria-label="Search"
         >
           <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -695,7 +898,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
           type="button"
           class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
           style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
-          phx-click={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
+          phx-click={
+            Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer")
+            |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")
+          }
           aria-label="Cart"
         >
           <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -704,7 +910,12 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             <path d="M16 10a4 4 0 01-8 0"></path>
           </svg>
           <%= if @cart_count > 0 do %>
-            <span class="cart-count" style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;">{@cart_count}</span>
+            <span
+              class="cart-count"
+              style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;"
+            >
+              {@cart_count}
+            </span>
           <% end %>
           <span class="sr-only">Cart ({@cart_count})</span>
         </button>
@@ -760,10 +971,12 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     ~H"""
     <%= case @theme_settings.logo_mode do %>
       <% "text-only" -> %>
-        <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-          <%= @theme_settings.site_name %>
+        <span
+          class="shop-logo-text"
+          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
+        >
+          {@theme_settings.site_name}
         </span>
-
       <% "logo-text" -> %>
         <%= if @logo_image do %>
           <img
@@ -772,10 +985,12 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
           />
         <% end %>
-        <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-          <%= @theme_settings.site_name %>
+        <span
+          class="shop-logo-text"
+          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
+        >
+          {@theme_settings.site_name}
         </span>
-
       <% "logo-only" -> %>
         <%= if @logo_image do %>
           <img
@@ -784,14 +999,19 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             style={"height: #{@theme_settings.logo_size}px; width: auto;"}
           />
         <% else %>
-          <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-            <%= @theme_settings.site_name %>
+          <span
+            class="shop-logo-text"
+            style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
+          >
+            {@theme_settings.site_name}
           </span>
         <% end %>
-
       <% _ -> %>
-        <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-          <%= @theme_settings.site_name %>
+        <span
+          class="shop-logo-text"
+          style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);"
+        >
+          {@theme_settings.site_name}
         </span>
     <% end %>
     """
@@ -868,9 +1088,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   attr :mode, :atom, default: :live
 
   def cart_drawer(assigns) do
-    assigns = assign_new(assigns, :display_subtotal, fn ->
-      assigns.subtotal || "£0.00"
-    end)
+    assigns =
+      assign_new(assigns, :display_subtotal, fn ->
+        assigns.subtotal || "£0.00"
+      end)
 
     ~H"""
     <!-- Cart Drawer -->
@@ -879,13 +1100,21 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       class="cart-drawer"
       style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
     >
-      <div class="cart-drawer-header" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);">
-        <h2 style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;">Your basket</h2>
+      <div
+        class="cart-drawer-header"
+        style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);"
+      >
+        <h2 style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;">
+          Your basket
+        </h2>
         <button
           type="button"
           class="cart-drawer-close"
           style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
-          phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
+          phx-click={
+            Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer")
+            |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")
+          }
           aria-label="Close cart"
         >
           <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -897,20 +1126,33 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
       <div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
         <%= for item <- @cart_items do %>
-          <div class="cart-drawer-item" style="display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--t-border-default);">
-            <div class="cart-drawer-item-image" style={"width: 60px; height: 60px; border-radius: var(--t-radius-card); background-size: cover; background-position: center; background-image: url('#{item.image}'); flex-shrink: 0;"}></div>
+          <div
+            class="cart-drawer-item"
+            style="display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--t-border-default);"
+          >
+            <div
+              class="cart-drawer-item-image"
+              style={"width: 60px; height: 60px; border-radius: var(--t-radius-card); background-size: cover; background-position: center; background-image: url('#{item.image}'); flex-shrink: 0;"}
+            >
+            </div>
             <div class="cart-drawer-item-details" style="flex: 1;">
               <h3 style="font-family: var(--t-font-body); font-size: var(--t-text-small); font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;">
-                <%= item.name %>
+                {item.name}
               </h3>
               <p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
-                <%= item.variant %>
+                {item.variant}
               </p>
               <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
-                <p class="cart-drawer-item-price" style="color: var(--t-text-primary); font-weight: 500; font-size: var(--t-text-small); margin: 0;">
-                  <%= item.price %>
+                <p
+                  class="cart-drawer-item-price"
+                  style="color: var(--t-text-primary); font-weight: 500; font-size: var(--t-text-small); margin: 0;"
+                >
+                  {item.price}
                 </p>
-                <button type="button" style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;">
+                <button
+                  type="button"
+                  style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;"
+                >
                   Remove
                 </button>
               </div>
@@ -919,14 +1161,20 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         <% end %>
       </div>
 
-      <div class="cart-drawer-footer" style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);">
+      <div
+        class="cart-drawer-footer"
+        style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);"
+      >
         <div style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); margin-bottom: 0.5rem;">
           <span>Delivery</span>
           <span>Calculated at checkout</span>
         </div>
-        <div class="cart-drawer-total" style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;">
+        <div
+          class="cart-drawer-total"
+          style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;"
+        >
           <span>Subtotal</span>
-          <span><%= @display_subtotal %></span>
+          <span>{@display_subtotal}</span>
         </div>
         <button
           type="submit"
@@ -938,7 +1186,11 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         <%= if @mode == :preview do %>
           <a
             href="#"
-            phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay") |> Phoenix.LiveView.JS.push("change_preview_page", value: %{page: "cart"})}
+            phx-click={
+              Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer")
+              |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")
+              |> Phoenix.LiveView.JS.push("change_preview_page", value: %{page: "cart"})
+            }
             class="cart-drawer-link"
             style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
           >
@@ -947,7 +1199,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         <% else %>
           <a
             href="/cart"
-            phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
+            phx-click={
+              Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer")
+              |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")
+            }
             class="cart-drawer-link"
             style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
           >
@@ -962,10 +1217,12 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       id="cart-drawer-overlay"
       class="cart-drawer-overlay"
       style="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;"
-      phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
+      phx-click={
+        Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer")
+        |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")
+      }
     >
     </div>
-
     """
   end
 
@@ -1105,11 +1362,11 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     <div class={content_padding_class(@variant)}>
       <%= if @show_category && @product[:category] do %>
         <p class="text-xs mb-1" style="color: var(--t-text-tertiary);">
-          <%= @product.category %>
+          {@product.category}
         </p>
       <% end %>
       <h3 class={title_classes(@variant)} style={title_style(@variant)}>
-        <%= @product.name %>
+        {@product.name}
       </h3>
       <%= if @theme_settings.show_prices do %>
         <.product_price product={@product} variant={@variant} />
@@ -1208,32 +1465,37 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <% :default -> %>
         <div>
           <%= if @product.on_sale do %>
-            <span class="text-lg font-bold" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
-              £<%= @product.price / 100 %>
+            <span
+              class="text-lg font-bold"
+              style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));"
+            >
+              £{@product.price / 100}
             </span>
             <span class="text-sm line-through ml-2" style="color: var(--t-text-tertiary);">
-              £<%= @product.compare_at_price / 100 %>
+              £{@product.compare_at_price / 100}
             </span>
           <% else %>
             <span class="text-lg font-bold" style="color: var(--t-text-primary);">
-              £<%= @product.price / 100 %>
+              £{@product.price / 100}
             </span>
           <% end %>
         </div>
       <% :featured -> %>
         <p class="text-sm" style="color: var(--t-text-secondary);">
           <%= if @product.on_sale do %>
-            <span class="line-through mr-1" style="color: var(--t-text-tertiary);">£<%= @product.compare_at_price / 100 %></span>
+            <span class="line-through mr-1" style="color: var(--t-text-tertiary);">
+              £{@product.compare_at_price / 100}
+            </span>
           <% end %>
-          £<%= @product.price / 100 %>
+          £{@product.price / 100}
         </p>
       <% :compact -> %>
         <p class="font-bold" style="color: var(--t-text-primary);">
-          £<%= @product.price / 100 %>
+          £{@product.price / 100}
         </p>
       <% :minimal -> %>
         <p class="text-xs" style="color: var(--t-text-secondary);">
-          £<%= @product.price / 100 %>
+          £{@product.price / 100}
         </p>
     <% end %>
     """
@@ -1252,21 +1514,28 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     do: %{show_category: false, show_badges: false, show_delivery_text: false, clickable: false}
 
   defp card_classes(:default), do: "product-card group overflow-hidden transition-all"
-  defp card_classes(:featured), do: "product-card group overflow-hidden transition-all hover:-translate-y-1"
+
+  defp card_classes(:featured),
+    do: "product-card group overflow-hidden transition-all hover:-translate-y-1"
+
   defp card_classes(:compact), do: "product-card group overflow-hidden cursor-pointer"
   defp card_classes(:minimal), do: "product-card group overflow-hidden"
 
   defp card_style(:default),
-    do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card); cursor: pointer;"
+    do:
+      "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card); cursor: pointer;"
 
   defp card_style(:featured),
-    do: "background-color: var(--t-surface-raised); border-radius: var(--t-radius-card); cursor: pointer;"
+    do:
+      "background-color: var(--t-surface-raised); border-radius: var(--t-radius-card); cursor: pointer;"
 
   defp card_style(:compact),
-    do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
+    do:
+      "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-card);"
 
   defp card_style(:minimal),
-    do: "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-subtle); border-radius: var(--t-radius-card);"
+    do:
+      "background-color: var(--t-surface-raised); border: 1px solid var(--t-border-subtle); border-radius: var(--t-radius-card);"
 
   defp image_container_classes(:compact),
     do: "product-image-container aspect-square bg-gray-200 overflow-hidden relative"
@@ -1286,9 +1555,14 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp title_classes(:compact), do: "font-semibold text-sm mb-1"
   defp title_classes(:minimal), do: "text-xs font-semibold truncate"
 
-  defp title_style(:default), do: "font-family: var(--t-font-heading); color: var(--t-text-primary);"
+  defp title_style(:default),
+    do: "font-family: var(--t-font-heading); color: var(--t-text-primary);"
+
   defp title_style(:featured), do: "color: var(--t-text-primary);"
-  defp title_style(:compact), do: "font-family: var(--t-font-heading); color: var(--t-text-primary);"
+
+  defp title_style(:compact),
+    do: "font-family: var(--t-font-heading); color: var(--t-text-primary);"
+
   defp title_style(:minimal), do: "color: var(--t-text-primary);"
 
   @doc """
@@ -1331,7 +1605,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   def product_grid(assigns) do
     ~H"""
     <div class={grid_classes(@theme_settings, @columns, @gap, @class)}>
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </div>
     """
   end
@@ -1441,10 +1715,13 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             class="text-3xl md:text-4xl mb-4"
             style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);"
           >
-            <%= @title %>
+            {@title}
           </h1>
-          <p class="text-lg max-w-lg mx-auto mb-8" style="color: var(--t-text-secondary); line-height: 1.6;">
-            <%= @description %>
+          <p
+            class="text-lg max-w-lg mx-auto mb-8"
+            style="color: var(--t-text-secondary); line-height: 1.6;"
+          >
+            {@description}
           </p>
           <.hero_cta
             :if={@cta_text}
@@ -1455,20 +1732,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             variant={:primary}
           />
         </section>
-
       <% :page -> %>
         <div class="text-center">
           <h1
             class="text-4xl md:text-5xl font-bold mb-6"
             style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);"
           >
-            <%= @title %>
+            {@title}
           </h1>
           <p class="text-lg mb-12 max-w-2xl mx-auto" style="color: var(--t-text-secondary);">
-            <%= @description %>
+            {@description}
           </p>
         </div>
-
       <% :error -> %>
         <div class="text-center">
           <%= if @pre_title do %>
@@ -1476,17 +1751,17 @@ defmodule SimpleshopThemeWeb.ShopComponents do
               class="text-8xl md:text-9xl font-bold mb-4"
               style="font-family: var(--t-font-heading); color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); font-weight: var(--t-heading-weight);"
             >
-              <%= @pre_title %>
+              {@pre_title}
             </h1>
           <% end %>
           <h2
             class="text-3xl md:text-4xl font-bold mb-6"
             style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);"
           >
-            <%= @title %>
+            {@title}
           </h2>
           <p class="text-lg mb-8 max-w-md mx-auto" style="color: var(--t-text-secondary);">
-            <%= @description %>
+            {@description}
           </p>
           <%= if @cta_text || @secondary_cta_text do %>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
@@ -1528,7 +1803,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         class={hero_cta_classes(@variant)}
         style={hero_cta_style(@variant)}
       >
-        <%= @text %>
+        {@text}
       </button>
     <% else %>
       <a
@@ -1536,14 +1811,16 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         class={["inline-block", hero_cta_classes(@variant)]}
         style={hero_cta_style(@variant) <> " text-decoration: none;"}
       >
-        <%= @text %>
+        {@text}
       </a>
     <% end %>
     """
   end
 
   defp hero_cta_classes(:primary), do: "themed-button px-8 py-3 font-semibold transition-all"
-  defp hero_cta_classes(:secondary), do: "themed-button-outline px-8 py-3 font-semibold transition-all"
+
+  defp hero_cta_classes(:secondary),
+    do: "themed-button-outline px-8 py-3 font-semibold transition-all"
 
   defp hero_cta_style(:primary), do: ""
   defp hero_cta_style(:secondary), do: ""
@@ -1573,23 +1850,41 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <nav class="grid grid-cols-3 gap-4 max-w-3xl mx-auto" aria-label="Product categories">
         <%= for category <- Enum.take(@categories, @limit) do %>
           <%= if @mode == :preview do %>
-            <a href="#" phx-click="change_preview_page" phx-value-page="collection" class="flex flex-col items-center gap-3 p-4 rounded-lg transition-colors hover:bg-black/5" style="text-decoration: none; cursor: pointer;">
+            <a
+              href="#"
+              phx-click="change_preview_page"
+              phx-value-page="collection"
+              class="flex flex-col items-center gap-3 p-4 rounded-lg transition-colors hover:bg-black/5"
+              style="text-decoration: none; cursor: pointer;"
+            >
               <div
                 class="w-24 h-24 rounded-full bg-gray-200 bg-cover bg-center transition-transform hover:scale-105"
                 style={"background-image: url('#{category.image_url}');"}
-              ></div>
-              <span class="text-sm font-medium" style="font-family: var(--t-font-body); color: var(--t-text-primary);">
-                <%= category.name %>
+              >
+              </div>
+              <span
+                class="text-sm font-medium"
+                style="font-family: var(--t-font-body); color: var(--t-text-primary);"
+              >
+                {category.name}
               </span>
             </a>
           <% else %>
-            <a href={"/collections/#{category.slug}"} class="flex flex-col items-center gap-3 p-4 rounded-lg transition-colors hover:bg-black/5" style="text-decoration: none;">
+            <a
+              href={"/collections/#{category.slug}"}
+              class="flex flex-col items-center gap-3 p-4 rounded-lg transition-colors hover:bg-black/5"
+              style="text-decoration: none;"
+            >
               <div
                 class="w-24 h-24 rounded-full bg-gray-200 bg-cover bg-center transition-transform hover:scale-105"
                 style={"background-image: url('#{category.image_url}');"}
-              ></div>
-              <span class="text-sm font-medium" style="font-family: var(--t-font-body); color: var(--t-text-primary);">
-                <%= category.name %>
+              >
+              </div>
+              <span
+                class="text-sm font-medium"
+                style="font-family: var(--t-font-body); color: var(--t-text-primary);"
+              >
+                {category.name}
               </span>
             </a>
           <% end %>
@@ -1634,8 +1929,11 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   def featured_products_section(assigns) do
     ~H"""
     <section style="padding: var(--space-xl) var(--space-lg); background-color: var(--t-surface-sunken);">
-      <h2 class="text-2xl mb-6" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);">
-        <%= @title %>
+      <h2
+        class="text-2xl mb-6"
+        style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);"
+      >
+        {@title}
       </h2>
 
       <.product_grid theme_settings={@theme_settings}>
@@ -1657,7 +1955,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             class="px-6 py-3 font-medium transition-all"
             style="background-color: transparent; color: var(--t-text-primary); border: 1px solid var(--t-text-primary); border-radius: var(--t-radius-button); cursor: pointer;"
           >
-            <%= @cta_text %>
+            {@cta_text}
           </button>
         <% else %>
           <a
@@ -1665,7 +1963,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             class="inline-block px-6 py-3 font-medium transition-all"
             style="background-color: transparent; color: var(--t-text-primary); border: 1px solid var(--t-text-primary); border-radius: var(--t-radius-button); text-decoration: none;"
           >
-            <%= @cta_text %>
+            {@cta_text}
           </a>
         <% end %>
       </div>
@@ -1709,12 +2007,29 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   def image_text_section(assigns) do
     ~H"""
-    <section class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center" style="padding: var(--space-2xl) var(--space-lg); background-color: var(--t-surface-base);">
+    <section
+      class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
+      style="padding: var(--space-2xl) var(--space-lg); background-color: var(--t-surface-base);"
+    >
       <%= if @image_position == :left do %>
         <.image_text_image image_url={@image_url} />
-        <.image_text_content title={@title} description={@description} link_text={@link_text} link_page={@link_page} link_href={@link_href} mode={@mode} />
+        <.image_text_content
+          title={@title}
+          description={@description}
+          link_text={@link_text}
+          link_page={@link_page}
+          link_href={@link_href}
+          mode={@mode}
+        />
       <% else %>
-        <.image_text_content title={@title} description={@description} link_text={@link_text} link_page={@link_page} link_href={@link_href} mode={@mode} />
+        <.image_text_content
+          title={@title}
+          description={@description}
+          link_text={@link_text}
+          link_page={@link_page}
+          link_href={@link_href}
+          mode={@mode}
+        />
         <.image_text_image image_url={@image_url} />
       <% end %>
     </section>
@@ -1728,7 +2043,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     <div
       class="h-72 rounded-lg bg-cover bg-center"
       style={"background-image: url('#{@image_url}'); border-radius: var(--t-radius-image);"}
-    ></div>
+    >
+    </div>
     """
   end
 
@@ -1742,11 +2058,14 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp image_text_content(assigns) do
     ~H"""
     <div>
-      <h2 class="text-2xl mb-4" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);">
-        <%= @title %>
+      <h2
+        class="text-2xl mb-4"
+        style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);"
+      >
+        {@title}
       </h2>
       <p class="text-base mb-4" style="color: var(--t-text-secondary); line-height: 1.7;">
-        <%= @description %>
+        {@description}
       </p>
       <%= if @link_text do %>
         <%= if @mode == :preview do %>
@@ -1757,7 +2076,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             class="text-sm font-medium transition-colors"
             style="color: var(--t-accent-text, hsl(var(--t-accent-h) var(--t-accent-s) 38%)); text-decoration: none; cursor: pointer;"
           >
-            <%= @link_text %>
+            {@link_text}
           </a>
         <% else %>
           <a
@@ -1765,7 +2084,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             class="text-sm font-medium transition-colors"
             style="color: var(--t-accent-text, hsl(var(--t-accent-h) var(--t-accent-s) 38%)); text-decoration: none;"
           >
-            <%= @link_text %>
+            {@link_text}
           </a>
         <% end %>
       <% end %>
@@ -1792,16 +2111,22 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   def collection_header(assigns) do
     ~H"""
-    <div class="border-b" style="background-color: var(--t-surface-raised); border-color: var(--t-border-default);">
+    <div
+      class="border-b"
+      style="background-color: var(--t-surface-raised); border-color: var(--t-border-default);"
+    >
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <h1 class="text-3xl md:text-4xl font-bold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
-          <%= @title %>
+        <h1
+          class="text-3xl md:text-4xl font-bold mb-2"
+          style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);"
+        >
+          {@title}
         </h1>
         <%= if @subtitle do %>
-          <p style="color: var(--t-text-secondary);"><%= @subtitle %></p>
+          <p style="color: var(--t-text-secondary);">{@subtitle}</p>
         <% end %>
         <%= if @product_count do %>
-          <p style="color: var(--t-text-secondary);"><%= @product_count %> products</p>
+          <p style="color: var(--t-text-secondary);">{@product_count} products</p>
         <% end %>
       </div>
     </div>
@@ -1824,7 +2149,15 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   """
   attr :categories, :list, required: true
   attr :active_category, :string, default: "All"
-  attr :sort_options, :list, default: ["Sort by: Featured", "Price: Low to High", "Price: High to Low", "Newest", "Best Selling"]
+
+  attr :sort_options, :list,
+    default: [
+      "Sort by: Featured",
+      "Price: Low to High",
+      "Price: High to Low",
+      "Newest",
+      "Best Selling"
+    ]
 
   def filter_bar(assigns) do
     ~H"""
@@ -1840,8 +2173,8 @@ defmodule SimpleshopThemeWeb.ShopComponents do
           </button>
         <% end %>
       </div>
-
-      <!-- Sort Dropdown -->
+      
+    <!-- Sort Dropdown -->
       <.shop_select options={@sort_options} class="px-4 py-2" />
     </div>
     """
@@ -1870,16 +2203,20 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   def content_body(assigns) do
     ~H"""
-    <div class="content-body" style="padding: var(--space-xl) var(--space-lg); max-width: 800px; margin: 0 auto;">
+    <div
+      class="content-body"
+      style="padding: var(--space-xl) var(--space-lg); max-width: 800px; margin: 0 auto;"
+    >
       <%= if @image_url do %>
         <div
           class="content-image about-image"
           style={"width: 100%; height: 300px; border-radius: var(--t-radius-image); margin-bottom: var(--space-lg); background-size: cover; background-position: center; background-image: url('#{@image_url}');"}
-        ></div>
+        >
+        </div>
       <% end %>
 
       <div class="content-text" style="line-height: 1.7;">
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </div>
     </div>
     """
@@ -1906,13 +2243,24 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   def contact_form(assigns) do
     ~H"""
     <.shop_card class="p-8">
-      <h2 class="text-xl font-bold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
+      <h2
+        class="text-xl font-bold mb-2"
+        style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
+      >
         {@title}
       </h2>
       <%= if @email || @response_time do %>
         <div class="flex flex-col gap-1 mb-6 text-sm" style="color: var(--t-text-secondary);">
           <%= if @email do %>
-            <p>Email me: <a href={"mailto:#{@email}"} style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">{@email}</a></p>
+            <p>
+              Email me:
+              <a
+                href={"mailto:#{@email}"}
+                style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));"
+              >
+                {@email}
+              </a>
+            </p>
           <% end %>
           <%= if @response_time do %>
             <p>{@response_time}</p>
@@ -2014,7 +2362,9 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         <%= for item <- @items do %>
           <li class="flex items-start gap-2">
             <span style="color: var(--t-text-tertiary);">•</span>
-            <span><strong style="color: var(--t-text-primary);">{item.label}:</strong> {item.value}</span>
+            <span>
+              <strong style="color: var(--t-text-primary);">{item.label}:</strong> {item.value}
+            </span>
           </li>
         <% end %>
       </ul>
@@ -2043,9 +2393,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     ~H"""
     <.shop_card class="p-6">
       <h3 class="font-bold mb-3" style="color: var(--t-text-primary);">{@title}</h3>
-      <a href={"mailto:#{@email}"} class="flex items-center gap-2 mb-2" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); text-decoration: none;">
+      <a
+        href={"mailto:#{@email}"}
+        class="flex items-center gap-2 mb-2"
+        style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); text-decoration: none;"
+      >
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+          />
         </svg>
         {@email}
       </a>
@@ -2073,14 +2432,20 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <.newsletter_card variant={:inline} />
   """
   attr :title, :string, default: "Newsletter"
-  attr :description, :string, default: "Get new designs and updates in your inbox. No spam, I promise."
+
+  attr :description, :string,
+    default: "Get new designs and updates in your inbox. No spam, I promise."
+
   attr :button_text, :string, default: "Subscribe"
   attr :variant, :atom, default: :card
 
   def newsletter_card(%{variant: :inline} = assigns) do
     ~H"""
     <div>
-      <h3 class="text-xl font-bold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
+      <h3
+        class="text-xl font-bold mb-2"
+        style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);"
+      >
         {@title}
       </h3>
       <p class="text-sm mb-4" style="color: var(--t-text-secondary);">
@@ -2138,10 +2503,12 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <.social_links_card title="Elsewhere" links={[%{platform: :instagram, url: "https://instagram.com/example", label: "Instagram"}]} />
   """
   attr :title, :string, default: "Find me on"
-  attr :links, :list, default: [
-    %{platform: :instagram, url: "#", label: "Instagram"},
-    %{platform: :pinterest, url: "#", label: "Pinterest"}
-  ]
+
+  attr :links, :list,
+    default: [
+      %{platform: :instagram, url: "#", label: "Instagram"},
+      %{platform: :pinterest, url: "#", label: "Pinterest"}
+    ]
 
   def social_links_card(assigns) do
     ~H"""
@@ -2178,10 +2545,11 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <.social_links />
       <.social_links links={[%{platform: :instagram, url: "https://instagram.com/example", label: "Instagram"}]} />
   """
-  attr :links, :list, default: [
-    %{platform: :instagram, url: "#", label: "Instagram"},
-    %{platform: :pinterest, url: "#", label: "Pinterest"}
-  ]
+  attr :links, :list,
+    default: [
+      %{platform: :instagram, url: "#", label: "Instagram"},
+      %{platform: :pinterest, url: "#", label: "Pinterest"}
+    ]
 
   def social_links(assigns) do
     ~H"""
@@ -2226,7 +2594,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :instagram} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/>
+      <path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" />
     </svg>
     """
   end
@@ -2234,7 +2602,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :pinterest} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/>
+      <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
     </svg>
     """
   end
@@ -2242,7 +2610,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :tiktok} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
+      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
     </svg>
     """
   end
@@ -2250,7 +2618,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :facebook} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
+      <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
     </svg>
     """
   end
@@ -2258,7 +2626,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :twitter} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
+      <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
     </svg>
     """
   end
@@ -2266,7 +2634,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :youtube} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
     </svg>
     """
   end
@@ -2274,7 +2642,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :patreon} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003"/>
+      <path d="M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.75 3.876 8.613 8.64 8.613 4.75 0 8.614-3.864 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003" />
     </svg>
     """
   end
@@ -2282,7 +2650,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :kofi} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/>
+      <path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z" />
     </svg>
     """
   end
@@ -2290,7 +2658,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :etsy} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M8.559 1.067c0-.263.128-.435.349-.442 1.074-.034 2.15-.066 3.225-.1.058-.002.22-.012.282.099.014.026.026.061.026.12 0 0 .006 2.548.006 3.85 0 .163.147.28.322.28h4.64c.239 0 .505.209.505.447 0 0-.002.818-.005 1.76-.003.88-.064 1.668-.064 1.668-.025.235-.229.418-.462.418h-4.551c-.244 0-.383.155-.383.398v8.34c0 2.1 1.32 2.581 2.429 2.581.867 0 2.028-.323 2.428-.521.112-.056.251-.06.315.053.024.043.05.089.074.144.305.697.628 1.391.929 2.088.073.163.038.335-.143.454-1.008.665-2.691 1.229-4.577 1.229-2.606 0-5.811-1.032-5.811-6.049V9.692c0-.266-.137-.394-.36-.394H5.62c-.227 0-.372-.14-.372-.37V7.321c0-.175.067-.285.23-.391 2.23-1.441 2.992-4.102 3.08-5.6.006-.099.001-.198.001-.263z"/>
+      <path d="M8.559 1.067c0-.263.128-.435.349-.442 1.074-.034 2.15-.066 3.225-.1.058-.002.22-.012.282.099.014.026.026.061.026.12 0 0 .006 2.548.006 3.85 0 .163.147.28.322.28h4.64c.239 0 .505.209.505.447 0 0-.002.818-.005 1.76-.003.88-.064 1.668-.064 1.668-.025.235-.229.418-.462.418h-4.551c-.244 0-.383.155-.383.398v8.34c0 2.1 1.32 2.581 2.429 2.581.867 0 2.028-.323 2.428-.521.112-.056.251-.06.315.053.024.043.05.089.074.144.305.697.628 1.391.929 2.088.073.163.038.335-.143.454-1.008.665-2.691 1.229-4.577 1.229-2.606 0-5.811-1.032-5.811-6.049V9.692c0-.266-.137-.394-.36-.394H5.62c-.227 0-.372-.14-.372-.37V7.321c0-.175.067-.285.23-.391 2.23-1.441 2.992-4.102 3.08-5.6.006-.099.001-.198.001-.263z" />
     </svg>
     """
   end
@@ -2298,7 +2666,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :gumroad} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.152 16.053c-.752.822-1.882 1.37-3.449 1.37-3.071 0-5.3-2.037-5.3-5.442 0-3.238 2.062-5.47 5.135-5.47 1.498 0 2.598.465 3.378 1.198l-.978 1.483c-.588-.466-1.206-.74-2.14-.74-1.935 0-3.058 1.418-3.058 3.475 0 2.119 1.205 3.502 3.14 3.502.85 0 1.578-.3 2.004-.63v-1.507h-2.309v-1.835h4.576v4.596z"/>
+      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.152 16.053c-.752.822-1.882 1.37-3.449 1.37-3.071 0-5.3-2.037-5.3-5.442 0-3.238 2.062-5.47 5.135-5.47 1.498 0 2.598.465 3.378 1.198l-.978 1.483c-.588-.466-1.206-.74-2.14-.74-1.935 0-3.058 1.418-3.058 3.475 0 2.119 1.205 3.502 3.14 3.502.85 0 1.578-.3 2.004-.63v-1.507h-2.309v-1.835h4.576v4.596z" />
     </svg>
     """
   end
@@ -2306,7 +2674,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :bandcamp} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z"/>
+      <path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z" />
     </svg>
     """
   end
@@ -2315,7 +2683,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :mastodon} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+      <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" />
     </svg>
     """
   end
@@ -2323,7 +2691,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :pixelfed} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm5.696 14.943c-.156 1.015-.776 1.885-1.681 2.351-.598.307-1.263.44-1.967.44H8.34c-.63 0-1.235-.123-1.79-.368-.588-.26-1.105-.63-1.536-1.1a4.347 4.347 0 0 1-.953-1.6c-.189-.588-.26-1.207-.199-1.855.093-.996.497-1.855 1.199-2.569.732-.746 1.623-1.19 2.66-1.33.147-.02.298-.033.445-.045h5.682c.88.08 1.651.39 2.312.953.729.62 1.182 1.392 1.354 2.321a4.09 4.09 0 0 1-.018 1.802zM12.186 9.592H9.109c-.517.054-.976.238-1.373.553-.57.452-.907 1.034-.997 1.737-.059.465.003.91.196 1.33.258.564.66.992 1.21 1.275.383.196.795.283 1.235.26h3.108c.518-.054.977-.238 1.374-.553.57-.452.907-1.033.996-1.737.06-.465-.002-.91-.196-1.33a2.345 2.345 0 0 0-1.209-1.274 2.48 2.48 0 0 0-1.267-.261z"/>
+      <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm5.696 14.943c-.156 1.015-.776 1.885-1.681 2.351-.598.307-1.263.44-1.967.44H8.34c-.63 0-1.235-.123-1.79-.368-.588-.26-1.105-.63-1.536-1.1a4.347 4.347 0 0 1-.953-1.6c-.189-.588-.26-1.207-.199-1.855.093-.996.497-1.855 1.199-2.569.732-.746 1.623-1.19 2.66-1.33.147-.02.298-.033.445-.045h5.682c.88.08 1.651.39 2.312.953.729.62 1.182 1.392 1.354 2.321a4.09 4.09 0 0 1-.018 1.802zM12.186 9.592H9.109c-.517.054-.976.238-1.373.553-.57.452-.907 1.034-.997 1.737-.059.465.003.91.196 1.33.258.564.66.992 1.21 1.275.383.196.795.283 1.235.26h3.108c.518-.054.977-.238 1.374-.553.57-.452.907-1.033.996-1.737.06-.465-.002-.91-.196-1.33a2.345 2.345 0 0 0-1.209-1.274 2.48 2.48 0 0 0-1.267-.261z" />
     </svg>
     """
   end
@@ -2331,7 +2699,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :bluesky} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/>
+      <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
     </svg>
     """
   end
@@ -2339,7 +2707,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :peertube} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0 1.608 6v12L12 24l10.392-6V6zm-1.476 2.94 8.64 4.98v2.401L9.6 4.86l.924-1.92zm-1.848 3.839 8.64 4.98v2.4l-8.64-4.98V6.78zm0 4.078 8.64 4.98v2.401l-8.64-4.98v-2.401z"/>
+      <path d="M12 0 1.608 6v12L12 24l10.392-6V6zm-1.476 2.94 8.64 4.98v2.401L9.6 4.86l.924-1.92zm-1.848 3.839 8.64 4.98v2.4l-8.64-4.98V6.78zm0 4.078 8.64 4.98v2.401l-8.64-4.98v-2.401z" />
     </svg>
     """
   end
@@ -2347,7 +2715,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :lemmy} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm-.5 4.5a2.5 2.5 0 0 1 1 4.793V15.5a.5.5 0 0 1-1 0V9.293A2.5 2.5 0 0 1 11.5 4.5zm-5 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm10 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>
+      <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm-.5 4.5a2.5 2.5 0 0 1 1 4.793V15.5a.5.5 0 0 1-1 0V9.293A2.5 2.5 0 0 1 11.5 4.5zm-5 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm10 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4z" />
     </svg>
     """
   end
@@ -2355,7 +2723,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :matrix} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.33-.439.573-.121.245-.18.56-.18.946v5.058H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/>
+      <path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.33-.439.573-.121.245-.18.56-.18.946v5.058H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z" />
     </svg>
     """
   end
@@ -2364,7 +2732,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :github} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
     </svg>
     """
   end
@@ -2372,7 +2740,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :gitlab} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.405.874.874 0 0 0-.994.066.873.873 0 0 0-.29.441L16.47 7.674H7.53L5.32 1.082a.857.857 0 0 0-.29-.441.874.874 0 0 0-.994-.067.852.852 0 0 0-.336.406L.433 9.507.4 9.593a6.062 6.062 0 0 0 2.012 7.01l.01.008.028.02 4.984 3.73 2.466 1.865 1.502 1.135a1.009 1.009 0 0 0 1.22 0l1.502-1.135 2.466-1.866 5.012-3.75.013-.01a6.063 6.063 0 0 0 2.005-7.007z"/>
+      <path d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.405.874.874 0 0 0-.994.066.873.873 0 0 0-.29.441L16.47 7.674H7.53L5.32 1.082a.857.857 0 0 0-.29-.441.874.874 0 0 0-.994-.067.852.852 0 0 0-.336.406L.433 9.507.4 9.593a6.062 6.062 0 0 0 2.012 7.01l.01.008.028.02 4.984 3.73 2.466 1.865 1.502 1.135a1.009 1.009 0 0 0 1.22 0l1.502-1.135 2.466-1.866 5.012-3.75.013-.01a6.063 6.063 0 0 0 2.005-7.007z" />
     </svg>
     """
   end
@@ -2380,7 +2748,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :codeberg} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.187 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"/>
+      <path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.187 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z" />
     </svg>
     """
   end
@@ -2388,7 +2756,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :sourcehut} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 21.677c-5.335 0-9.677-4.342-9.677-9.677S6.665 2.323 12 2.323 21.677 6.665 21.677 12 17.335 21.677 12 21.677z"/>
+      <path d="M12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm0 21.677c-5.335 0-9.677-4.342-9.677-9.677S6.665 2.323 12 2.323 21.677 6.665 21.677 12 17.335 21.677 12 21.677z" />
     </svg>
     """
   end
@@ -2397,7 +2765,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :discord} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
+      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
     </svg>
     """
   end
@@ -2405,7 +2773,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :telegram} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+      <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
     </svg>
     """
   end
@@ -2413,7 +2781,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :signal} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M9.237 1.805a9.72 9.72 0 0 1 5.527 0l.558-1.343A11.14 11.14 0 0 0 8.678.462l.559 1.343Zm-3.91 1.95A9.678 9.678 0 0 0 1.805 9.24l1.448.295a8.261 8.261 0 0 1 3.003-4.672l-.93-1.108Zm13.346 0-.929 1.108a8.261 8.261 0 0 1 3.003 4.672l1.449-.295a9.678 9.678 0 0 0-3.523-5.485ZM1.463 10.723A9.81 9.81 0 0 0 1.5 12c0 .893.12 1.758.344 2.58l1.41-.393A8.315 8.315 0 0 1 3 12c0-.373.024-.742.073-1.104l-1.61-.173Zm20.59 1.104.073 1.104c0 .373-.024.742-.073 1.104l1.61.173a9.81 9.81 0 0 0-.037-2.381h-1.573Zm-19.699 4.43a9.723 9.723 0 0 0 2.973 4.047l.929-1.108a8.222 8.222 0 0 1-2.513-3.42l-1.39.48Zm17.291 0-1.389-.48a8.221 8.221 0 0 1-2.513 3.42l.929 1.108a9.723 9.723 0 0 0 2.973-4.048Zm-13.17 5.052a9.72 9.72 0 0 0 5.526 0l-.559-1.343a8.262 8.262 0 0 1-4.41 0l-.558 1.343ZM12 4.2a7.8 7.8 0 1 0 0 15.6 7.8 7.8 0 0 0 0-15.6ZM2.7 12a9.3 9.3 0 1 1 18.6 0 9.3 9.3 0 0 1-18.6 0Z"/>
+      <path d="M9.237 1.805a9.72 9.72 0 0 1 5.527 0l.558-1.343A11.14 11.14 0 0 0 8.678.462l.559 1.343Zm-3.91 1.95A9.678 9.678 0 0 0 1.805 9.24l1.448.295a8.261 8.261 0 0 1 3.003-4.672l-.93-1.108Zm13.346 0-.929 1.108a8.261 8.261 0 0 1 3.003 4.672l1.449-.295a9.678 9.678 0 0 0-3.523-5.485ZM1.463 10.723A9.81 9.81 0 0 0 1.5 12c0 .893.12 1.758.344 2.58l1.41-.393A8.315 8.315 0 0 1 3 12c0-.373.024-.742.073-1.104l-1.61-.173Zm20.59 1.104.073 1.104c0 .373-.024.742-.073 1.104l1.61.173a9.81 9.81 0 0 0-.037-2.381h-1.573Zm-19.699 4.43a9.723 9.723 0 0 0 2.973 4.047l.929-1.108a8.222 8.222 0 0 1-2.513-3.42l-1.39.48Zm17.291 0-1.389-.48a8.221 8.221 0 0 1-2.513 3.42l.929 1.108a9.723 9.723 0 0 0 2.973-4.048Zm-13.17 5.052a9.72 9.72 0 0 0 5.526 0l-.559-1.343a8.262 8.262 0 0 1-4.41 0l-.558 1.343ZM12 4.2a7.8 7.8 0 1 0 0 15.6 7.8 7.8 0 0 0 0-15.6ZM2.7 12a9.3 9.3 0 1 1 18.6 0 9.3 9.3 0 0 1-18.6 0Z" />
     </svg>
     """
   end
@@ -2422,7 +2790,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :substack} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"/>
+      <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z" />
     </svg>
     """
   end
@@ -2430,7 +2798,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :rss} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 0 1 3.293 3.295A3.303 3.303 0 0 1 3.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
+      <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 0 1 3.293 3.295A3.303 3.303 0 0 1 3.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z" />
     </svg>
     """
   end
@@ -2438,7 +2806,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(%{platform: :website} = assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-.5 2.047A10.003 10.003 0 0 1 21.95 11.5h-4.4a15.93 15.93 0 0 0-1.55-6.33 10.05 10.05 0 0 1 1.45-.93A9.933 9.933 0 0 0 11.5 2.047zm-.5 0v4.4c-1.55-.09-3.03-.4-4.4-.93a15.93 15.93 0 0 1 4.4-3.47zm0 5.4v4.06H6.44c.08-1.47.33-2.87.73-4.17a16.93 16.93 0 0 0 4.33.91v-.8zm1 0v.8c1.5-.08 2.96-.39 4.33-.91.4 1.3.65 2.7.73 4.17H12.5V7.447zM11 12.5H6.44c.08 1.47.33 2.87.73 4.17a16.93 16.93 0 0 0 4.33-.91V12.5h-.5zm1 0v3.26c1.5.08 2.96.39 4.33.91.4-1.3.65-2.7.73-4.17H12.5H12zm-1 4.25c-1.55.09-3.03.4-4.4.93a15.93 15.93 0 0 1 4.4 3.47v-4.4zm1 0v4.4a15.93 15.93 0 0 1 4.4-3.47c-1.37-.53-2.85-.84-4.4-.93z"/>
+      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-.5 2.047A10.003 10.003 0 0 1 21.95 11.5h-4.4a15.93 15.93 0 0 0-1.55-6.33 10.05 10.05 0 0 1 1.45-.93A9.933 9.933 0 0 0 11.5 2.047zm-.5 0v4.4c-1.55-.09-3.03-.4-4.4-.93a15.93 15.93 0 0 1 4.4-3.47zm0 5.4v4.06H6.44c.08-1.47.33-2.87.73-4.17a16.93 16.93 0 0 0 4.33.91v-.8zm1 0v.8c1.5-.08 2.96-.39 4.33-.91.4 1.3.65 2.7.73 4.17H12.5V7.447zM11 12.5H6.44c.08 1.47.33 2.87.73 4.17a16.93 16.93 0 0 0 4.33-.91V12.5h-.5zm1 0v3.26c1.5.08 2.96.39 4.33.91.4-1.3.65-2.7.73-4.17H12.5H12zm-1 4.25c-1.55.09-3.03.4-4.4.93a15.93 15.93 0 0 1 4.4 3.47v-4.4zm1 0v4.4a15.93 15.93 0 0 1 4.4-3.47c-1.37-.53-2.85-.84-4.4-.93z" />
     </svg>
     """
   end
@@ -2447,7 +2815,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp social_icon(assigns) do
     ~H"""
     <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22c-5.523 0-10-4.477-10-10S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
+      <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22c-5.523 0-10-4.477-10-10S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" />
     </svg>
     """
   end
@@ -2470,7 +2838,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   def cart_item(assigns) do
     ~H"""
     <.shop_card class="flex gap-4 p-4">
-      <div class="w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden" style="border-radius: var(--t-radius-image);">
+      <div
+        class="w-24 h-24 flex-shrink-0 bg-gray-200 overflow-hidden"
+        style="border-radius: var(--t-radius-image);"
+      >
         <img
           src={@item.product.image_url}
           alt={@item.product.name}
@@ -2482,18 +2853,27 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       </div>
 
       <div class="flex-1">
-        <h3 class="font-semibold mb-1" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
-          <%= @item.product.name %>
+        <h3
+          class="font-semibold mb-1"
+          style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
+        >
+          {@item.product.name}
         </h3>
         <p class="text-sm mb-2" style="color: var(--t-text-secondary);">
-          <%= @item.variant %>
+          {@item.variant}
         </p>
 
         <div class="flex items-center gap-4">
-          <div class="flex items-center" style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);">
+          <div
+            class="flex items-center"
+            style="border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
+          >
             <button class="px-3 py-1" style="color: var(--t-text-primary);">−</button>
-            <span class="px-3 py-1 border-x" style="border-color: var(--t-border-default); color: var(--t-text-primary);">
-              <%= @item.quantity %>
+            <span
+              class="px-3 py-1 border-x"
+              style="border-color: var(--t-border-default); color: var(--t-text-primary);"
+            >
+              {@item.quantity}
             </span>
             <button class="px-3 py-1" style="color: var(--t-text-primary);">+</button>
           </div>
@@ -2541,7 +2921,10 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
     ~H"""
     <.shop_card class="p-6 sticky top-4">
-      <h2 class="text-xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
+      <h2
+        class="text-xl font-bold mb-6"
+        style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
+      >
         Order Summary
       </h2>
 
@@ -2554,7 +2937,9 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         </div>
         <div class="flex justify-between">
           <span style="color: var(--t-text-secondary);">Delivery</span>
-          <span style="color: var(--t-text-primary);">{@currency}{Float.round(@delivery / 100, 2)}</span>
+          <span style="color: var(--t-text-primary);">
+            {@currency}{Float.round(@delivery / 100, 2)}
+          </span>
         </div>
         <div class="flex justify-between">
           <span style="color: var(--t-text-secondary);">VAT (20%)</span>
@@ -2575,11 +2960,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       </.shop_button>
 
       <%= if @mode == :preview do %>
-        <.shop_button_outline phx-click="change_preview_page" phx-value-page="collection" class="w-full px-6 py-3 font-semibold transition-all">
+        <.shop_button_outline
+          phx-click="change_preview_page"
+          phx-value-page="collection"
+          class="w-full px-6 py-3 font-semibold transition-all"
+        >
           Continue Shopping
         </.shop_button_outline>
       <% else %>
-        <.shop_link_outline href="/collections/all" class="block w-full px-6 py-3 font-semibold transition-all text-center">
+        <.shop_link_outline
+          href="/collections/all"
+          class="block w-full px-6 py-3 font-semibold transition-all text-center"
+        >
           Continue Shopping
         </.shop_link_outline>
       <% end %>
@@ -2618,12 +3010,19 @@ defmodule SimpleshopThemeWeb.ShopComponents do
           <span>/</span>
         <% end %>
         <%= if item[:current] do %>
-          <span style="color: var(--t-text-primary);"><%= item.label %></span>
+          <span style="color: var(--t-text-primary);">{item.label}</span>
         <% else %>
           <%= if @mode == :preview do %>
-            <a href="#" phx-click="change_preview_page" phx-value-page={item.page} class="hover:underline"><%= item.label %></a>
+            <a
+              href="#"
+              phx-click="change_preview_page"
+              phx-value-page={item.page}
+              class="hover:underline"
+            >
+              {item.label}
+            </a>
           <% else %>
-            <a href={item.href || "/"} class="hover:underline"><%= item.label %></a>
+            <a href={item.href || "/"} class="hover:underline">{item.label}</a>
           <% end %>
         <% end %>
       <% end %>
@@ -2659,8 +3058,11 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   def related_products_section(assigns) do
     ~H"""
     <div class="py-12" style="border-top: 1px solid var(--t-border-default);">
-      <h2 class="text-2xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
-        <%= @title %>
+      <h2
+        class="text-2xl font-bold mb-6"
+        style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);"
+      >
+        {@title}
       </h2>
 
       <.product_grid columns={:fixed_4} gap="gap-6">
@@ -2704,8 +3106,15 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     ~H"""
     <div class="flex gap-0.5">
       <%= for i <- 1..@max do %>
-        <svg class={@size_class} viewBox="0 0 20 20" style={"color: #{if i <= @rating, do: @color, else: "var(--t-border-default)"};"}>
-          <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
+          class={@size_class}
+          viewBox="0 0 20 20"
+          style={"color: #{if i <= @rating, do: @color, else: "var(--t-border-default)"};"}
+        >
+          <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>
       <% end %>
     </div>
@@ -2728,20 +3137,24 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       <.trust_badges />
       <.trust_badges items={[%{icon: :check, title: "Custom", description: "Badge text"}]} />
   """
-  attr :items, :list, default: [
-    %{icon: :check, title: "Free Delivery", description: "On orders over £40"},
-    %{icon: :shield, title: "Easy Returns", description: "30-day return policy"}
-  ]
+  attr :items, :list,
+    default: [
+      %{icon: :check, title: "Free Delivery", description: "On orders over £40"},
+      %{icon: :shield, title: "Easy Returns", description: "30-day return policy"}
+    ]
 
   def trust_badges(assigns) do
     ~H"""
-    <div class="flex flex-col gap-3 p-4" style="background-color: var(--t-surface-sunken); border-radius: var(--t-radius-card);">
+    <div
+      class="flex flex-col gap-3 p-4"
+      style="background-color: var(--t-surface-sunken); border-radius: var(--t-radius-card);"
+    >
       <%= for item <- @items do %>
         <div class="flex items-start gap-3">
           <.trust_badge_icon icon={item.icon} />
           <div>
-            <p class="font-semibold" style="color: var(--t-text-primary);"><%= item.title %></p>
-            <p class="text-sm" style="color: var(--t-text-secondary);"><%= item.description %></p>
+            <p class="font-semibold" style="color: var(--t-text-primary);">{item.title}</p>
+            <p class="text-sm" style="color: var(--t-text-secondary);">{item.description}</p>
           </div>
         </div>
       <% end %>
@@ -2753,7 +3166,13 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   defp trust_badge_icon(%{icon: :check} = assigns) do
     ~H"""
-    <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
+    <svg
+      class="w-5 h-5 mt-0.5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));"
+    >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
     </svg>
     """
@@ -2761,15 +3180,32 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   defp trust_badge_icon(%{icon: :shield} = assigns) do
     ~H"""
-    <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    <svg
+      class="w-5 h-5 mt-0.5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
     </svg>
     """
   end
 
   defp trust_badge_icon(assigns) do
     ~H"""
-    <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
+    <svg
+      class="w-5 h-5 mt-0.5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));"
+    >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
     </svg>
     """
@@ -2801,23 +3237,39 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   attr :open, :boolean, default: true
 
   def reviews_section(assigns) do
-    assigns = assign_new(assigns, :display_count, fn ->
-      assigns.total_count || length(assigns.reviews)
-    end)
+    assigns =
+      assign_new(assigns, :display_count, fn ->
+        assigns.total_count || length(assigns.reviews)
+      end)
 
     ~H"""
-    <details open={@open} class="pdp-reviews group" style="border-top: 1px solid var(--t-border-default);">
-      <summary class="flex justify-between items-center py-6 cursor-pointer list-none [&::-webkit-details-marker]:hidden" style="color: var(--t-text-primary);">
+    <details
+      open={@open}
+      class="pdp-reviews group"
+      style="border-top: 1px solid var(--t-border-default);"
+    >
+      <summary
+        class="flex justify-between items-center py-6 cursor-pointer list-none [&::-webkit-details-marker]:hidden"
+        style="color: var(--t-text-primary);"
+      >
         <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-          <h2 class="text-2xl font-bold" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
+          <h2
+            class="text-2xl font-bold"
+            style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);"
+          >
             Customer reviews
           </h2>
           <div class="flex items-center gap-2">
             <.star_rating rating={@average_rating} />
-            <span class="text-sm" style="color: var(--t-text-secondary);">(<%= @display_count %>)</span>
+            <span class="text-sm" style="color: var(--t-text-secondary);">({@display_count})</span>
           </div>
         </div>
-        <svg class="w-5 h-5 transition-transform duration-200 group-open:rotate-180 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg
+          class="w-5 h-5 transition-transform duration-200 group-open:rotate-180 flex-shrink-0"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
         </svg>
       </summary>
@@ -2855,16 +3307,23 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     <article class="pb-6" style="border-bottom: 1px solid var(--t-border-subtle);">
       <div class="flex items-center justify-between mb-2">
         <.star_rating rating={@review.rating} />
-        <span class="text-xs" style="color: var(--t-text-tertiary);"><%= @review.date %></span>
+        <span class="text-xs" style="color: var(--t-text-tertiary);">{@review.date}</span>
       </div>
-      <h3 class="font-semibold mb-1" style="color: var(--t-text-primary);"><%= @review.title %></h3>
+      <h3 class="font-semibold mb-1" style="color: var(--t-text-primary);">{@review.title}</h3>
       <p class="text-sm mb-3" style="color: var(--t-text-secondary); line-height: 1.6;">
-        <%= @review.body %>
+        {@review.body}
       </p>
       <div class="flex items-center gap-2">
-        <span class="text-sm font-medium" style="color: var(--t-text-primary);"><%= @review.author %></span>
+        <span class="text-sm font-medium" style="color: var(--t-text-primary);">
+          {@review.author}
+        </span>
         <%= if @review.verified do %>
-          <span class="text-xs px-2 py-0.5 rounded" style="background-color: var(--t-surface-sunken); color: var(--t-text-tertiary);">Verified purchase</span>
+          <span
+            class="text-xs px-2 py-0.5 rounded"
+            style="background-color: var(--t-surface-sunken); color: var(--t-text-tertiary);"
+          >
+            Verified purchase
+          </span>
         <% end %>
       </div>
     </article>
@@ -2907,7 +3366,12 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-black/10">
           <div class="w-12 h-12 bg-white/90 rounded-full flex items-center justify-center shadow-lg">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
+              />
             </svg>
           </div>
         </div>
@@ -2919,10 +3383,14 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             class={"aspect-square bg-gray-200 cursor-pointer overflow-hidden pdp-thumbnail#{if idx == 0, do: " pdp-thumbnail-active", else: ""}"}
             style="border-radius: var(--t-radius-image);"
             data-index={idx}
-            phx-click={Phoenix.LiveView.JS.set_attribute({"src", img_url}, to: "##{@id_prefix}-main-image")
-              |> Phoenix.LiveView.JS.set_attribute({"data-current-index", to_string(idx)}, to: "##{@id_prefix}-lightbox")
+            phx-click={
+              Phoenix.LiveView.JS.set_attribute({"src", img_url}, to: "##{@id_prefix}-main-image")
+              |> Phoenix.LiveView.JS.set_attribute({"data-current-index", to_string(idx)},
+                to: "##{@id_prefix}-lightbox"
+              )
               |> Phoenix.LiveView.JS.remove_class("pdp-thumbnail-active", to: ".pdp-thumbnail")
-              |> Phoenix.LiveView.JS.add_class("pdp-thumbnail-active")}
+              |> Phoenix.LiveView.JS.add_class("pdp-thumbnail-active")
+            }
           >
             <img
               src={img_url}
@@ -2955,7 +3423,9 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       data-current-index="0"
       data-images={Jason.encode!(@images)}
       data-show={Phoenix.LiveView.JS.exec("phx-show-lightbox", to: "##{@id_prefix}-lightbox")}
-      phx-show-lightbox={Phoenix.LiveView.JS.dispatch("pdp:open-lightbox", to: "##{@id_prefix}-lightbox")}
+      phx-show-lightbox={
+        Phoenix.LiveView.JS.dispatch("pdp:open-lightbox", to: "##{@id_prefix}-lightbox")
+      }
       phx-hook="Lightbox"
     >
       <div class="lightbox-content">
@@ -2963,7 +3433,9 @@ defmodule SimpleshopThemeWeb.ShopComponents do
           type="button"
           class="lightbox-close"
           aria-label="Close gallery"
-          phx-click={Phoenix.LiveView.JS.dispatch("pdp:close-lightbox", to: "##{@id_prefix}-lightbox")}
+          phx-click={
+            Phoenix.LiveView.JS.dispatch("pdp:close-lightbox", to: "##{@id_prefix}-lightbox")
+          }
         >
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="18" y1="6" x2="6" y2="18"></line>
@@ -2991,7 +3463,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
               height="1200"
             />
           </div>
-          <figcaption class="lightbox-caption"><%= @product_name %></figcaption>
+          <figcaption class="lightbox-caption">{@product_name}</figcaption>
         </figure>
         <button
           type="button"
@@ -3003,7 +3475,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             <polyline points="9 18 15 12 9 6"></polyline>
           </svg>
         </button>
-        <div class="lightbox-counter" id="lightbox-counter">1 / <%= length(@images) %></div>
+        <div class="lightbox-counter" id="lightbox-counter">1 / {length(@images)}</div>
       </div>
     </dialog>
     """
@@ -3027,24 +3499,35 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   def product_info(assigns) do
     ~H"""
     <div>
-      <h1 class="text-3xl md:text-4xl font-bold mb-4" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
-        <%= @product.name %>
+      <h1
+        class="text-3xl md:text-4xl font-bold mb-4"
+        style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);"
+      >
+        {@product.name}
       </h1>
 
       <div class="flex items-center gap-4 mb-6">
         <%= if @product.on_sale do %>
-          <span class="text-3xl font-bold" style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));">
-            <%= @currency %><%= @product.price / 100 %>
+          <span
+            class="text-3xl font-bold"
+            style="color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));"
+          >
+            {@currency}{@product.price / 100}
           </span>
           <span class="text-xl line-through" style="color: var(--t-text-tertiary);">
-            <%= @currency %><%= @product.compare_at_price / 100 %>
+            {@currency}{@product.compare_at_price / 100}
           </span>
-          <span class="px-2 py-1 text-sm font-bold text-white rounded" style="background-color: var(--t-sale-color);">
-            SAVE <%= round((@product.compare_at_price - @product.price) / @product.compare_at_price * 100) %>%
+          <span
+            class="px-2 py-1 text-sm font-bold text-white rounded"
+            style="background-color: var(--t-sale-color);"
+          >
+            SAVE {round(
+              (@product.compare_at_price - @product.price) / @product.compare_at_price * 100
+            )}%
           </span>
         <% else %>
           <span class="text-3xl font-bold" style="color: var(--t-text-primary);">
-            <%= @currency %><%= @product.price / 100 %>
+            {@currency}{@product.price / 100}
           </span>
         <% end %>
       </div>
@@ -3071,14 +3554,15 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   attr :selected, :string, default: nil
 
   def variant_selector(assigns) do
-    assigns = assign_new(assigns, :selected_value, fn ->
-      assigns.selected || List.first(assigns.options)
-    end)
+    assigns =
+      assign_new(assigns, :selected_value, fn ->
+        assigns.selected || List.first(assigns.options)
+      end)
 
     ~H"""
     <div class="mb-6">
       <label class="block font-semibold mb-2" style="color: var(--t-text-primary);">
-        <%= @label %>
+        {@label}
       </label>
       <div class="flex flex-wrap gap-2">
         <%= for option <- @options do %>
@@ -3087,7 +3571,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
             class="px-4 py-2 font-medium transition-all"
             style={"border: 2px solid #{if option == @selected_value, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l))", else: "var(--t-border-default)"}; border-radius: var(--t-radius-button); color: var(--t-text-primary); background: #{if option == @selected_value, do: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.1)", else: "transparent"};"}
           >
-            <%= option %>
+            {option}
           </button>
         <% end %>
       </div>
@@ -3122,10 +3606,16 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         Quantity
       </label>
       <div class="flex items-center gap-4">
-        <div class="flex items-center" style="border: 2px solid var(--t-border-default); border-radius: var(--t-radius-input);">
+        <div
+          class="flex items-center"
+          style="border: 2px solid var(--t-border-default); border-radius: var(--t-radius-input);"
+        >
           <button type="button" class="px-4 py-2" style="color: var(--t-text-primary);">−</button>
-          <span class="px-4 py-2 border-x-2" style="border-color: var(--t-border-default); color: var(--t-text-primary);">
-            <%= @quantity %>
+          <span
+            class="px-4 py-2 border-x-2"
+            style="border-color: var(--t-border-default); color: var(--t-text-primary);"
+          >
+            {@quantity}
           </span>
           <button type="button" class="px-4 py-2" style="color: var(--t-text-primary);">+</button>
         </div>
@@ -3159,15 +3649,25 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   def add_to_cart_button(assigns) do
     ~H"""
-    <div class={["mb-4", @sticky && "sticky bottom-0 z-10 py-3 md:relative md:py-0 -mx-4 px-4 md:mx-0 md:px-0 border-t md:border-0"]} style="background-color: var(--t-surface-base); border-color: var(--t-border-subtle);">
+    <div
+      class={[
+        "mb-4",
+        @sticky &&
+          "sticky bottom-0 z-10 py-3 md:relative md:py-0 -mx-4 px-4 md:mx-0 md:px-0 border-t md:border-0"
+      ]}
+      style="background-color: var(--t-surface-base); border-color: var(--t-border-subtle);"
+    >
       <button
         type="button"
-        phx-click={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
+        phx-click={
+          Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer")
+          |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")
+        }
         disabled={@disabled}
         class="w-full px-6 py-4 text-lg font-semibold transition-all"
         style={"background-color: #{if @disabled, do: "var(--t-border-default)", else: "hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l))"}; color: var(--t-text-inverse); border-radius: var(--t-radius-button); cursor: #{if @disabled, do: "not-allowed", else: "pointer"}; border: none;"}
       >
-        <%= @text %>
+        {@text}
       </button>
     </div>
     """
@@ -3199,14 +3699,22 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   def accordion_item(assigns) do
     ~H"""
     <details open={@open} class="group">
-      <summary class="flex justify-between items-center py-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden" style="color: var(--t-text-primary);">
-        <span class="font-semibold"><%= @title %></span>
-        <svg class="w-5 h-5 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <summary
+        class="flex justify-between items-center py-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden"
+        style="color: var(--t-text-primary);"
+      >
+        <span class="font-semibold">{@title}</span>
+        <svg
+          class="w-5 h-5 transition-transform duration-200 group-open:rotate-180"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
         </svg>
       </summary>
       <div class="pb-4" style="color: var(--t-text-secondary);">
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </div>
     </details>
     """
@@ -3231,19 +3739,26 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   attr :size_guide, :list, default: nil
 
   def product_details(assigns) do
-    assigns = assign_new(assigns, :sizes, fn ->
-      assigns.size_guide || [
-        %{size: "S", chest: "86-91", length: "71"},
-        %{size: "M", chest: "91-96", length: "73"},
-        %{size: "L", chest: "96-101", length: "75"},
-        %{size: "XL", chest: "101-106", length: "77"}
-      ]
-    end)
+    assigns =
+      assign_new(assigns, :sizes, fn ->
+        assigns.size_guide ||
+          [
+            %{size: "S", chest: "86-91", length: "71"},
+            %{size: "M", chest: "91-96", length: "73"},
+            %{size: "L", chest: "96-101", length: "75"},
+            %{size: "XL", chest: "101-106", length: "77"}
+          ]
+      end)
 
     ~H"""
-    <div class="mt-8 divide-y" style="border-top: 1px solid var(--t-border-subtle); border-bottom: 1px solid var(--t-border-subtle); border-color: var(--t-border-subtle);">
+    <div
+      class="mt-8 divide-y"
+      style="border-top: 1px solid var(--t-border-subtle); border-bottom: 1px solid var(--t-border-subtle); border-color: var(--t-border-subtle);"
+    >
       <.accordion_item title="Description" open={true}>
-        <p class="leading-relaxed"><%= @product.description %>. Crafted with attention to detail and quality materials, this product is designed to last. Perfect for everyday use or special occasions.</p>
+        <p class="leading-relaxed">
+          {@product.description}. Crafted with attention to detail and quality materials, this product is designed to last. Perfect for everyday use or special occasions.
+        </p>
       </.accordion_item>
 
       <%= if @show_size_guide do %>
@@ -3251,17 +3766,27 @@ defmodule SimpleshopThemeWeb.ShopComponents do
           <table class="w-full text-sm">
             <thead>
               <tr style="border-bottom: 1px solid var(--t-border-subtle);">
-                <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">Size</th>
-                <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">Chest (cm)</th>
-                <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">Length (cm)</th>
+                <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">
+                  Size
+                </th>
+                <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">
+                  Chest (cm)
+                </th>
+                <th class="text-left py-2 font-semibold" style="color: var(--t-text-primary);">
+                  Length (cm)
+                </th>
               </tr>
             </thead>
             <tbody>
               <%= for {size_row, idx} <- Enum.with_index(@sizes) do %>
-                <tr style={if idx < length(@sizes) - 1, do: "border-bottom: 1px solid var(--t-border-subtle);", else: ""}>
-                  <td class="py-2"><%= size_row.size %></td>
-                  <td class="py-2"><%= size_row.chest %></td>
-                  <td class="py-2"><%= size_row.length %></td>
+                <tr style={
+                  if idx < length(@sizes) - 1,
+                    do: "border-bottom: 1px solid var(--t-border-subtle);",
+                    else: ""
+                }>
+                  <td class="py-2">{size_row.size}</td>
+                  <td class="py-2">{size_row.chest}</td>
+                  <td class="py-2">{size_row.length}</td>
                 </tr>
               <% end %>
             </tbody>
@@ -3273,11 +3798,15 @@ defmodule SimpleshopThemeWeb.ShopComponents do
         <div class="flex flex-col gap-3">
           <div>
             <p class="font-semibold mb-1" style="color: var(--t-text-primary);">Delivery</p>
-            <p class="text-sm">Free UK delivery on orders over £40. Standard delivery 3-5 working days. Express delivery available at checkout.</p>
+            <p class="text-sm">
+              Free UK delivery on orders over £40. Standard delivery 3-5 working days. Express delivery available at checkout.
+            </p>
           </div>
           <div>
             <p class="font-semibold mb-1" style="color: var(--t-text-primary);">Returns</p>
-            <p class="text-sm">We offer a 30-day return policy. Items must be unused and in original packaging. Please contact us to arrange a return.</p>
+            <p class="text-sm">
+              We offer a 30-day return policy. Items must be unused and in original packaging. Please contact us to arrange a return.
+            </p>
           </div>
         </div>
       </.accordion_item>
@@ -3303,8 +3832,11 @@ defmodule SimpleshopThemeWeb.ShopComponents do
 
   def page_title(assigns) do
     ~H"""
-    <h1 class={"text-3xl md:text-4xl font-bold #{@class}"} style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
-      <%= @text %>
+    <h1
+      class={"text-3xl md:text-4xl font-bold #{@class}"}
+      style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);"
+    >
+      {@text}
     </h1>
     """
   end
@@ -3385,7 +3917,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp rich_text_block(%{block: %{type: :lead}} = assigns) do
     ~H"""
     <p class="lead-text text-lg mb-4" style="color: var(--t-text-primary);">
-      <%= @block.text %>
+      {@block.text}
     </p>
     """
   end
@@ -3393,15 +3925,18 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp rich_text_block(%{block: %{type: :paragraph}} = assigns) do
     ~H"""
     <p class="mb-4" style="color: var(--t-text-secondary);">
-      <%= @block.text %>
+      {@block.text}
     </p>
     """
   end
 
   defp rich_text_block(%{block: %{type: :heading}} = assigns) do
     ~H"""
-    <h2 class="mt-8 mb-3" style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-xl); color: var(--t-text-primary);">
-      <%= @block.text %>
+    <h2
+      class="mt-8 mb-3"
+      style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-xl); color: var(--t-text-primary);"
+    >
+      {@block.text}
     </h2>
     """
   end
@@ -3409,7 +3944,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp rich_text_block(%{block: %{type: :closing}} = assigns) do
     ~H"""
     <p class="mt-8" style="color: var(--t-text-secondary);">
-      <%= @block.text %>
+      {@block.text}
     </p>
     """
   end
@@ -3417,7 +3952,7 @@ defmodule SimpleshopThemeWeb.ShopComponents do
   defp rich_text_block(assigns) do
     ~H"""
     <p class="mb-4" style="color: var(--t-text-secondary);">
-      <%= @block.text %>
+      {@block.text}
     </p>
     """
   end
diff --git a/lib/simpleshop_theme_web/controllers/error_html.ex b/lib/simpleshop_theme_web/controllers/error_html.ex
index ec00e84..6e185e9 100644
--- a/lib/simpleshop_theme_web/controllers/error_html.ex
+++ b/lib/simpleshop_theme_web/controllers/error_html.ex
@@ -12,13 +12,21 @@ defmodule SimpleshopThemeWeb.ErrorHTML do
   alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
 
   def render("404.html", assigns) do
-    render_error_page(assigns, "404", "Page Not Found",
-      "Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved.")
+    render_error_page(
+      assigns,
+      "404",
+      "Page Not Found",
+      "Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved."
+    )
   end
 
   def render("500.html", assigns) do
-    render_error_page(assigns, "500", "Server Error",
-      "Something went wrong on our end. Please try again later or contact support if the problem persists.")
+    render_error_page(
+      assigns,
+      "500",
+      "Server Error",
+      "Something went wrong on our end. Please try again later or contact support if the problem persists."
+    )
   end
 
   def render(template, _assigns) do
@@ -57,23 +65,25 @@ defmodule SimpleshopThemeWeb.ErrorHTML do
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title><%= @error_code %> - <%= @error_title %></title>
+        <title>{@error_code} - {@error_title}</title>
         <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
         <style id="theme-css">
           <%= Phoenix.HTML.raw(@generated_css) %>
         </style>
       </head>
       <body class="h-full">
-        <div class="shop-root themed h-full"
-             data-mood={@theme_settings.mood}
-             data-typography={@theme_settings.typography}
-             data-shape={@theme_settings.shape}
-             data-density={@theme_settings.density}
-             data-grid={@theme_settings.grid_columns}
-             data-header={@theme_settings.header_layout}
-             data-sticky={to_string(@theme_settings.sticky_header)}
-             data-layout={@theme_settings.layout_width}
-             data-shadow={@theme_settings.card_shadow}>
+        <div
+          class="shop-root themed h-full"
+          data-mood={@theme_settings.mood}
+          data-typography={@theme_settings.typography}
+          data-shape={@theme_settings.shape}
+          data-density={@theme_settings.density}
+          data-grid={@theme_settings.grid_columns}
+          data-header={@theme_settings.header_layout}
+          data-sticky={to_string(@theme_settings.sticky_header)}
+          data-layout={@theme_settings.layout_width}
+          data-shadow={@theme_settings.card_shadow}
+        >
           <SimpleshopThemeWeb.PageTemplates.error
             theme_settings={@theme_settings}
             logo_image={@logo_image}
@@ -96,14 +106,18 @@ defmodule SimpleshopThemeWeb.ErrorHTML do
   defp load_theme_data do
     try do
       theme_settings = Settings.get_theme_settings()
+
       generated_css =
         case CSSCache.get() do
-          {:ok, css} -> css
+          {:ok, css} ->
+            css
+
           :miss ->
             css = CSSGenerator.generate(theme_settings)
             CSSCache.put(css)
             css
         end
+
       {theme_settings, generated_css}
     rescue
       _ -> {%ThemeSettings{}, ""}
diff --git a/lib/simpleshop_theme_web/live/shop_live/about.ex b/lib/simpleshop_theme_web/live/shop_live/about.ex
index 66678ce..4a42300 100644
--- a/lib/simpleshop_theme_web/live/shop_live/about.ex
+++ b/lib/simpleshop_theme_web/live/shop_live/about.ex
@@ -11,7 +11,9 @@ defmodule SimpleshopThemeWeb.ShopLive.About do
 
     generated_css =
       case CSSCache.get() do
-        {:ok, css} -> css
+        {:ok, css} ->
+          css
+
         :miss ->
           css = CSSGenerator.generate(theme_settings)
           CSSCache.put(css)
diff --git a/lib/simpleshop_theme_web/live/shop_live/cart.ex b/lib/simpleshop_theme_web/live/shop_live/cart.ex
index d3874c1..37fbee3 100644
--- a/lib/simpleshop_theme_web/live/shop_live/cart.ex
+++ b/lib/simpleshop_theme_web/live/shop_live/cart.ex
@@ -11,7 +11,9 @@ defmodule SimpleshopThemeWeb.ShopLive.Cart do
 
     generated_css =
       case CSSCache.get() do
-        {:ok, css} -> css
+        {:ok, css} ->
+          css
+
         :miss ->
           css = CSSGenerator.generate(theme_settings)
           CSSCache.put(css)
@@ -24,9 +26,11 @@ defmodule SimpleshopThemeWeb.ShopLive.Cart do
     # For now, use preview data for cart items
     # In a real implementation, this would come from session/database
     cart_page_items = PreviewData.cart_items()
-    cart_page_subtotal = Enum.reduce(cart_page_items, 0, fn item, acc ->
-      acc + item.product.price * item.quantity
-    end)
+
+    cart_page_subtotal =
+      Enum.reduce(cart_page_items, 0, fn item, acc ->
+        acc + item.product.price * item.quantity
+      end)
 
     socket =
       socket
diff --git a/lib/simpleshop_theme_web/live/shop_live/collection.ex b/lib/simpleshop_theme_web/live/shop_live/collection.ex
index b91766b..8d0cf37 100644
--- a/lib/simpleshop_theme_web/live/shop_live/collection.ex
+++ b/lib/simpleshop_theme_web/live/shop_live/collection.ex
@@ -20,7 +20,9 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
 
     generated_css =
       case CSSCache.get() do
-        {:ok, css} -> css
+        {:ok, css} ->
+          css
+
         :miss ->
           css = CSSGenerator.generate(theme_settings)
           CSSCache.put(css)
@@ -82,7 +84,9 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
 
   @impl true
   def handle_event("sort_changed", %{"sort" => sort}, socket) do
-    slug = if socket.assigns.current_category, do: socket.assigns.current_category.slug, else: "all"
+    slug =
+      if socket.assigns.current_category, do: socket.assigns.current_category.slug, else: "all"
+
     {:noreply, push_patch(socket, to: ~p"/collections/#{slug}?sort=#{sort}")}
   end
 
@@ -100,7 +104,10 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="shop-container min-h-screen pb-20 md:pb-0" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+    <div
+      class="shop-container min-h-screen pb-20 md:pb-0"
+      style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);"
+    >
       <SimpleshopThemeWeb.ShopComponents.skip_link />
 
       <%= if @theme_settings.announcement_bar do %>
@@ -145,7 +152,11 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
           <%= if @products == [] do %>
             <div class="text-center py-16" style="color: var(--t-text-secondary);">
               <p class="text-lg">No products found in this collection.</p>
-              <.link navigate={~p"/collections/all"} class="mt-4 inline-block underline" style="color: var(--t-text-accent);">
+              <.link
+                navigate={~p"/collections/all"}
+                class="mt-4 inline-block underline"
+                style="color: var(--t-text-accent);"
+              >
                 View all products
               </.link>
             </div>
@@ -155,9 +166,15 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
 
       <SimpleshopThemeWeb.ShopComponents.shop_footer theme_settings={@theme_settings} mode={@mode} />
 
-      <SimpleshopThemeWeb.ShopComponents.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} mode={@mode} />
+      <SimpleshopThemeWeb.ShopComponents.cart_drawer
+        cart_items={@cart_items}
+        subtotal={@cart_subtotal}
+        mode={@mode}
+      />
 
-      <SimpleshopThemeWeb.ShopComponents.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
+      <SimpleshopThemeWeb.ShopComponents.search_modal hint_text={
+        ~s(Try searching for "mountain", "forest", or "ocean")
+      } />
 
       <SimpleshopThemeWeb.ShopComponents.mobile_bottom_nav active_page="collection" mode={@mode} />
     </div>
@@ -176,10 +193,12 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
                 "px-4 py-2 rounded-full text-sm transition-colors",
                 if(@current_slug == nil, do: "font-medium", else: "hover:opacity-80")
               ]}
-              style={if(@current_slug == nil,
-                do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
-                else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
-              )}
+              style={
+                if(@current_slug == nil,
+                  do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
+                  else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
+                )
+              }
             >
               All
             </.link>
@@ -192,10 +211,12 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
                   "px-4 py-2 rounded-full text-sm transition-colors",
                   if(@current_slug == category.slug, do: "font-medium", else: "hover:opacity-80")
                 ]}
-                style={if(@current_slug == category.slug,
-                  do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
-                  else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
-                )}
+                style={
+                  if(@current_slug == category.slug,
+                    do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
+                    else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
+                  )
+                }
               >
                 {category.name}
               </.link>
diff --git a/lib/simpleshop_theme_web/live/shop_live/contact.ex b/lib/simpleshop_theme_web/live/shop_live/contact.ex
index af37f1e..607abe8 100644
--- a/lib/simpleshop_theme_web/live/shop_live/contact.ex
+++ b/lib/simpleshop_theme_web/live/shop_live/contact.ex
@@ -11,7 +11,9 @@ defmodule SimpleshopThemeWeb.ShopLive.Contact do
 
     generated_css =
       case CSSCache.get() do
-        {:ok, css} -> css
+        {:ok, css} ->
+          css
+
         :miss ->
           css = CSSGenerator.generate(theme_settings)
           CSSCache.put(css)
diff --git a/lib/simpleshop_theme_web/live/shop_live/home.ex b/lib/simpleshop_theme_web/live/shop_live/home.ex
index 948d4f1..70af4d9 100644
--- a/lib/simpleshop_theme_web/live/shop_live/home.ex
+++ b/lib/simpleshop_theme_web/live/shop_live/home.ex
@@ -11,7 +11,9 @@ defmodule SimpleshopThemeWeb.ShopLive.Home do
 
     generated_css =
       case CSSCache.get() do
-        {:ok, css} -> css
+        {:ok, css} ->
+          css
+
         :miss ->
           css = CSSGenerator.generate(theme_settings)
           CSSCache.put(css)
diff --git a/lib/simpleshop_theme_web/live/shop_live/product_show.ex b/lib/simpleshop_theme_web/live/shop_live/product_show.ex
index f90b9cd..b42a623 100644
--- a/lib/simpleshop_theme_web/live/shop_live/product_show.ex
+++ b/lib/simpleshop_theme_web/live/shop_live/product_show.ex
@@ -11,7 +11,9 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
 
     generated_css =
       case CSSCache.get() do
-        {:ok, css} -> css
+        {:ok, css} ->
+          css
+
         :miss ->
           css = CSSGenerator.generate(theme_settings)
           CSSCache.put(css)
diff --git a/lib/simpleshop_theme_web/live/theme_live/index.ex b/lib/simpleshop_theme_web/live/theme_live/index.ex
index 8fd3126..6f25b5b 100644
--- a/lib/simpleshop_theme_web/live/theme_live/index.ex
+++ b/lib/simpleshop_theme_web/live/theme_live/index.ex
@@ -10,6 +10,7 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
     theme_settings = Settings.get_theme_settings()
     generated_css = CSSGenerator.generate(theme_settings)
     active_preset = Presets.detect_preset(theme_settings)
+
     preview_data = %{
       products: PreviewData.products(),
       cart_items: PreviewData.cart_items(),
@@ -361,7 +362,9 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
 
   defp preview_page(%{page: :cart} = assigns) do
     cart_items = assigns.preview_data.cart_items
-    subtotal = Enum.reduce(cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end)
+
+    subtotal =
+      Enum.reduce(cart_items, 0, fn item, acc -> acc + item.product.price * item.quantity end)
 
     assigns =
       assigns
diff --git a/lib/simpleshop_theme_web/live/theme_live/index.html.heex b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
index dcf6083..b4abf8f 100644
--- a/lib/simpleshop_theme_web/live/theme_live/index.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
@@ -5,7 +5,10 @@
       id="theme-sidebar"
       class={[
         "bg-base-100 border-r border-base-300 lg:h-screen flex-shrink-0 transition-all duration-300",
-        if(@sidebar_collapsed, do: "w-12 overflow-hidden", else: "w-full lg:w-[380px] overflow-y-auto p-6")
+        if(@sidebar_collapsed,
+          do: "w-12 overflow-hidden",
+          else: "w-full lg:w-[380px] overflow-y-auto p-6"
+        )
       ]}
     >
       <!-- Collapsed state: just show expand button -->
@@ -19,866 +22,1065 @@
             aria-expanded="false"
             aria-controls="theme-sidebar"
           >
-            <svg class="w-5 h-5 text-base-content/70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+            <svg
+              class="w-5 h-5 text-base-content/70"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              aria-hidden="true"
+            >
               <polyline points="9 18 15 12 9 6"></polyline>
             </svg>
           </button>
         </div>
       <% else %>
-      <!-- Header -->
-      <div class="mb-6 flex items-start justify-between gap-3">
-        <div class="flex-1">
-          <h1 class="text-xl font-semibold tracking-tight mb-2 text-base-content">Theme Studio</h1>
-          <p class="text-sm text-base-content/60 leading-relaxed">One theme, infinite possibilities. Every combination is designed to work beautifully.</p>
+        <!-- Header -->
+        <div class="mb-6 flex items-start justify-between gap-3">
+          <div class="flex-1">
+            <h1 class="text-xl font-semibold tracking-tight mb-2 text-base-content">
+              Theme Studio
+            </h1>
+            <p class="text-sm text-base-content/60 leading-relaxed">
+              One theme, infinite possibilities. Every combination is designed to work beautifully.
+            </p>
+          </div>
+          <button
+            type="button"
+            phx-click="toggle_sidebar"
+            class="p-2 rounded-lg hover:bg-base-200 transition-colors flex-shrink-0 -mr-2 -mt-1"
+            aria-label="Collapse sidebar"
+            aria-expanded="true"
+            aria-controls="theme-sidebar"
+          >
+            <svg
+              class="w-5 h-5 text-base-content/70"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              aria-hidden="true"
+            >
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+          </button>
         </div>
-        <button
-          type="button"
-          phx-click="toggle_sidebar"
-          class="p-2 rounded-lg hover:bg-base-200 transition-colors flex-shrink-0 -mr-2 -mt-1"
-          aria-label="Collapse sidebar"
-          aria-expanded="true"
-          aria-controls="theme-sidebar"
-        >
-          <svg class="w-5 h-5 text-base-content/70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-            <polyline points="15 18 9 12 15 6"></polyline>
-          </svg>
-        </button>
-      </div>
-
-      <!-- Site Name -->
-      <div class="mb-6">
-        <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Shop name</label>
-        <form phx-change="update_setting" phx-value-field="site_name">
-          <input
-            type="text"
-            name="site_name"
-            value={@theme_settings.site_name}
-            placeholder="Your shop name"
-            class="w-full px-4 py-3 border border-base-300 rounded-lg text-base bg-base-100 text-base-content focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all"
-          />
-        </form>
-      </div>
-
-      <!-- Branding Section (styled background box) -->
-      <div class="bg-base-200 rounded-xl p-4 mb-6">
-        <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-4">Logo & header</label>
-
-        <!-- Logo Mode Radio Cards -->
-        <div class="flex flex-col gap-2 mb-4">
-          <%= for {value, title, desc} <- [
+        
+<!-- Site Name -->
+        <div class="mb-6">
+          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+            Shop name
+          </label>
+          <form phx-change="update_setting" phx-value-field="site_name">
+            <input
+              type="text"
+              name="site_name"
+              value={@theme_settings.site_name}
+              placeholder="Your shop name"
+              class="w-full px-4 py-3 border border-base-300 rounded-lg text-base bg-base-100 text-base-content focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all"
+            />
+          </form>
+        </div>
+        
+<!-- Branding Section (styled background box) -->
+        <div class="bg-base-200 rounded-xl p-4 mb-6">
+          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-4">
+            Logo & header
+          </label>
+          
+<!-- Logo Mode Radio Cards -->
+          <div class="flex flex-col gap-2 mb-4">
+            <%= for {value, title, desc} <- [
             {"text-only", "Shop name only", "Your name in the heading font"},
             {"logo-text", "Logo + shop name", "Your logo image with name beside it"},
             {"logo-only", "Logo only", "Just your logo (with text built in)"}
           ] do %>
-            <label
-              class={[
+              <label class={[
                 "flex items-center gap-3 p-3 bg-base-100 border-2 rounded-lg cursor-pointer transition-all",
                 if(@theme_settings.logo_mode == value,
                   do: "border-base-content",
                   else: "border-transparent hover:border-base-300"
                 )
-              ]}
-            >
-              <input
-                type="radio"
-                name="logo_mode"
-                value={value}
-                checked={@theme_settings.logo_mode == value}
-                phx-click="update_setting"
-                phx-value-field="logo_mode"
-                phx-value-setting_value={value}
-                class="hidden"
-              />
-              <span class={[
-                "w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all",
-                if(@theme_settings.logo_mode == value,
-                  do: "border-base-content",
-                  else: "border-base-300"
-                )
               ]}>
+                <input
+                  type="radio"
+                  name="logo_mode"
+                  value={value}
+                  checked={@theme_settings.logo_mode == value}
+                  phx-click="update_setting"
+                  phx-value-field="logo_mode"
+                  phx-value-setting_value={value}
+                  class="hidden"
+                />
                 <span class={[
-                  "w-2 h-2 rounded-full bg-base-content transition-all",
-                  if(@theme_settings.logo_mode == value, do: "scale-100 opacity-100", else: "scale-0 opacity-0")
-                ]}></span>
+                  "w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all",
+                  if(@theme_settings.logo_mode == value,
+                    do: "border-base-content",
+                    else: "border-base-300"
+                  )
+                ]}>
+                  <span class={[
+                    "w-2 h-2 rounded-full bg-base-content transition-all",
+                    if(@theme_settings.logo_mode == value,
+                      do: "scale-100 opacity-100",
+                      else: "scale-0 opacity-0"
+                    )
+                  ]}>
+                  </span>
+                </span>
+                <div class="flex-1">
+                  <div class="text-sm font-medium text-base-content">{title}</div>
+                  <div class="text-xs text-base-content/60">{desc}</div>
+                </div>
+              </label>
+            <% end %>
+          </div>
+          
+<!-- Logo Upload (for logo-text and logo-only modes) -->
+          <%= if @theme_settings.logo_mode in ["logo-text", "logo-only"] do %>
+            <div class="mt-4 pt-4 border-t border-base-300">
+              <span class="block text-xs font-medium text-base-content/70 mb-2">
+                Upload logo (SVG or PNG)
               </span>
-              <div class="flex-1">
-                <div class="text-sm font-medium text-base-content"><%= title %></div>
-                <div class="text-xs text-base-content/60"><%= desc %></div>
+              <div class="flex items-center gap-3">
+                <form phx-change="noop" phx-submit="noop" class="flex-1">
+                  <label class="flex-1 bg-base-100 border border-dashed border-base-300 rounded-lg p-3 text-sm text-base-content/60 text-center cursor-pointer hover:border-base-content/40 hover:text-base-content/80 transition-all">
+                    <span>Choose file...</span>
+                    <.live_file_input upload={@uploads.logo_upload} class="hidden" />
+                  </label>
+                </form>
+                <%= if @logo_image do %>
+                  <div class="relative w-16 h-10 bg-base-100 border border-base-300 rounded-lg flex items-center justify-center overflow-hidden">
+                    <img
+                      src={"/images/#{@logo_image.id}"}
+                      alt="Current logo"
+                      class="max-w-full max-h-full object-contain"
+                    />
+                    <button
+                      type="button"
+                      phx-click="remove_logo"
+                      class="absolute -top-1.5 -right-1.5 w-[18px] h-[18px] bg-base-content text-base-100 rounded-full text-xs flex items-center justify-center leading-none"
+                      title="Remove logo"
+                    >
+                      ×
+                    </button>
+                  </div>
+                <% end %>
               </div>
-            </label>
-          <% end %>
-        </div>
 
-        <!-- Logo Upload (for logo-text and logo-only modes) -->
-        <%= if @theme_settings.logo_mode in ["logo-text", "logo-only"] do %>
-          <div class="mt-4 pt-4 border-t border-base-300">
-            <span class="block text-xs font-medium text-base-content/70 mb-2">Upload logo (SVG or PNG)</span>
-            <div class="flex items-center gap-3">
-              <form phx-change="noop" phx-submit="noop" class="flex-1">
-                <label class="flex-1 bg-base-100 border border-dashed border-base-300 rounded-lg p-3 text-sm text-base-content/60 text-center cursor-pointer hover:border-base-content/40 hover:text-base-content/80 transition-all">
-                  <span>Choose file...</span>
-                  <.live_file_input upload={@uploads.logo_upload} class="hidden" />
-                </label>
-              </form>
-              <%= if @logo_image do %>
-                <div class="relative w-16 h-10 bg-base-100 border border-base-300 rounded-lg flex items-center justify-center overflow-hidden">
-                  <img
-                    src={"/images/#{@logo_image.id}"}
-                    alt="Current logo"
-                    class="max-w-full max-h-full object-contain"
-                  />
+              <%= for entry <- @uploads.logo_upload.entries do %>
+                <div class="flex items-center gap-2 mt-2">
+                  <div class="flex-1 h-1.5 bg-base-300 rounded-full overflow-hidden">
+                    <div
+                      class="h-full bg-primary transition-all"
+                      style={"width: #{entry.progress}%"}
+                    >
+                    </div>
+                  </div>
+                  <span class="text-xs text-base-content/60">{entry.progress}%</span>
                   <button
                     type="button"
-                    phx-click="remove_logo"
-                    class="absolute -top-1.5 -right-1.5 w-[18px] h-[18px] bg-base-content text-base-100 rounded-full text-xs flex items-center justify-center leading-none"
-                    title="Remove logo"
-                  >×</button>
+                    phx-click="cancel_upload"
+                    phx-value-ref={entry.ref}
+                    phx-value-upload="logo_upload"
+                    class="text-base-content/40 hover:text-base-content/70"
+                  >
+                    ×
+                  </button>
                 </div>
+                <%= for err <- upload_errors(@uploads.logo_upload, entry) do %>
+                  <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
+                <% end %>
+              <% end %>
+
+              <%= for err <- upload_errors(@uploads.logo_upload) do %>
+                <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
+              <% end %>
+              
+<!-- Logo Size Slider -->
+              <%= if @logo_image do %>
+                <form phx-change="update_setting" phx-value-field="logo_size" class="mt-3">
+                  <div class="flex justify-between items-center mb-2">
+                    <span class="text-xs font-medium text-base-content/70">Logo size</span>
+                    <span class="text-xs font-mono text-base-content/60">
+                      {@theme_settings.logo_size}px
+                    </span>
+                  </div>
+                  <input
+                    type="range"
+                    min="24"
+                    max="120"
+                    value={@theme_settings.logo_size}
+                    name="logo_size"
+                    class="range range-xs range-primary w-full"
+                  />
+                </form>
+                
+<!-- SVG Recolor Toggle (only for SVG logos) -->
+                <%= if @logo_image.is_svg do %>
+                  <div class="mt-3">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={@theme_settings.logo_recolor}
+                        phx-click="update_setting"
+                        phx-value-field="logo_recolor"
+                        phx-value-setting_value={
+                          if @theme_settings.logo_recolor, do: "false", else: "true"
+                        }
+                        class="toggle toggle-sm toggle-primary"
+                      />
+                      <span class="text-sm text-base-content/70">Recolour logo</span>
+                    </label>
+
+                    <%= if @theme_settings.logo_recolor do %>
+                      <form
+                        id="logo-color-form"
+                        phx-change="update_color"
+                        phx-value-field="logo_color"
+                        phx-hook="ColorSync"
+                        class="flex items-center gap-3 mt-2"
+                      >
+                        <input
+                          type="color"
+                          name="value"
+                          value={@theme_settings.logo_color}
+                          class="w-9 h-9 rounded-lg cursor-pointer border-0 p-0"
+                        />
+                        <span class="font-mono text-sm text-base-content/70">
+                          {@theme_settings.logo_color}
+                        </span>
+                      </form>
+                    <% end %>
+                  </div>
+                <% end %>
               <% end %>
             </div>
+          <% end %>
+        </div>
+        
+<!-- Header Background Toggle -->
+        <div class="mb-6">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={@theme_settings.header_background_enabled}
+              phx-click="update_setting"
+              phx-value-field="header_background_enabled"
+              phx-value-setting_value={
+                if @theme_settings.header_background_enabled, do: "false", else: "true"
+              }
+              class="toggle toggle-sm toggle-primary"
+            />
+            <span class="text-sm text-base-content/80">Header background image</span>
+          </label>
+        </div>
+        
+<!-- Header Image Upload (only when enabled) -->
+        <%= if @theme_settings.header_background_enabled do %>
+          <div class="bg-base-200 rounded-xl p-4 mb-6">
+            <span class="block text-xs font-medium text-base-content/70 mb-2">
+              Upload header image
+            </span>
+            <form phx-change="noop" phx-submit="noop">
+              <label class="block bg-base-100 border border-dashed border-base-300 rounded-lg p-3 text-sm text-base-content/60 text-center cursor-pointer hover:border-base-content/40 hover:text-base-content/80 transition-all">
+                <span>Choose file...</span>
+                <.live_file_input upload={@uploads.header_upload} class="hidden" />
+              </label>
+            </form>
 
-            <%= for entry <- @uploads.logo_upload.entries do %>
+            <%= if @header_image do %>
+              <div class="relative w-full h-[60px] bg-base-100 border border-base-300 rounded-lg mt-2 overflow-hidden">
+                <img
+                  src={"/images/#{@header_image.id}"}
+                  alt="Current header background"
+                  class="w-full h-full object-cover"
+                />
+                <button
+                  type="button"
+                  phx-click="remove_header"
+                  class="absolute -top-1.5 -right-1.5 w-[18px] h-[18px] bg-base-content text-base-100 rounded-full text-xs flex items-center justify-center leading-none"
+                  title="Remove header background"
+                >
+                  ×
+                </button>
+              </div>
+              
+<!-- Header Image Controls -->
+              <div class="mt-3 flex flex-col gap-3">
+                <form phx-change="update_setting" phx-value-field="header_zoom">
+                  <div class="flex justify-between items-center mb-2">
+                    <span class="text-xs font-medium text-base-content/70">Zoom</span>
+                    <span class="text-xs font-mono text-base-content/60">
+                      {@theme_settings.header_zoom}%
+                    </span>
+                  </div>
+                  <input
+                    type="range"
+                    min="100"
+                    max="200"
+                    value={@theme_settings.header_zoom}
+                    name="header_zoom"
+                    class="range range-xs range-primary w-full"
+                  />
+                </form>
+                <form phx-change="update_setting" phx-value-field="header_position_x">
+                  <div class="flex justify-between items-center mb-2">
+                    <span class="text-xs font-medium text-base-content/70">
+                      Horizontal position
+                    </span>
+                    <span class="text-xs font-mono text-base-content/60">
+                      {@theme_settings.header_position_x}%
+                    </span>
+                  </div>
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={@theme_settings.header_position_x}
+                    name="header_position_x"
+                    class="range range-xs range-primary w-full"
+                  />
+                </form>
+                <form phx-change="update_setting" phx-value-field="header_position_y">
+                  <div class="flex justify-between items-center mb-2">
+                    <span class="text-xs font-medium text-base-content/70">
+                      Vertical position
+                    </span>
+                    <span class="text-xs font-mono text-base-content/60">
+                      {@theme_settings.header_position_y}%
+                    </span>
+                  </div>
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={@theme_settings.header_position_y}
+                    name="header_position_y"
+                    class="range range-xs range-primary w-full"
+                  />
+                </form>
+              </div>
+            <% end %>
+
+            <%= for entry <- @uploads.header_upload.entries do %>
               <div class="flex items-center gap-2 mt-2">
                 <div class="flex-1 h-1.5 bg-base-300 rounded-full overflow-hidden">
-                  <div class="h-full bg-primary transition-all" style={"width: #{entry.progress}%"}></div>
+                  <div
+                    class="h-full bg-primary transition-all"
+                    style={"width: #{entry.progress}%"}
+                  >
+                  </div>
                 </div>
-                <span class="text-xs text-base-content/60"><%= entry.progress %>%</span>
+                <span class="text-xs text-base-content/60">{entry.progress}%</span>
                 <button
                   type="button"
                   phx-click="cancel_upload"
                   phx-value-ref={entry.ref}
-                  phx-value-upload="logo_upload"
+                  phx-value-upload="header_upload"
                   class="text-base-content/40 hover:text-base-content/70"
-                >×</button>
+                >
+                  ×
+                </button>
               </div>
-              <%= for err <- upload_errors(@uploads.logo_upload, entry) do %>
-                <p class="text-error text-xs mt-1"><%= error_to_string(err) %></p>
+              <%= for err <- upload_errors(@uploads.header_upload, entry) do %>
+                <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
               <% end %>
             <% end %>
 
-            <%= for err <- upload_errors(@uploads.logo_upload) do %>
-              <p class="text-error text-xs mt-1"><%= error_to_string(err) %></p>
-            <% end %>
-
-            <!-- Logo Size Slider -->
-            <%= if @logo_image do %>
-              <form phx-change="update_setting" phx-value-field="logo_size" class="mt-3">
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-xs font-medium text-base-content/70">Logo size</span>
-                  <span class="text-xs font-mono text-base-content/60"><%= @theme_settings.logo_size %>px</span>
-                </div>
-                <input
-                  type="range"
-                  min="24"
-                  max="120"
-                  value={@theme_settings.logo_size}
-                  name="logo_size"
-                  class="range range-xs range-primary w-full"
-                />
-              </form>
-
-              <!-- SVG Recolor Toggle (only for SVG logos) -->
-              <%= if @logo_image.is_svg do %>
-                <div class="mt-3">
-                  <label class="flex items-center gap-2 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={@theme_settings.logo_recolor}
-                      phx-click="update_setting"
-                      phx-value-field="logo_recolor"
-                      phx-value-setting_value={if @theme_settings.logo_recolor, do: "false", else: "true"}
-                      class="toggle toggle-sm toggle-primary"
-                    />
-                    <span class="text-sm text-base-content/70">Recolour logo</span>
-                  </label>
-
-                  <%= if @theme_settings.logo_recolor do %>
-                    <form id="logo-color-form" phx-change="update_color" phx-value-field="logo_color" phx-hook="ColorSync" class="flex items-center gap-3 mt-2">
-                      <input
-                        type="color"
-                        name="value"
-                        value={@theme_settings.logo_color}
-                        class="w-9 h-9 rounded-lg cursor-pointer border-0 p-0"
-                      />
-                      <span class="font-mono text-sm text-base-content/70"><%= @theme_settings.logo_color %></span>
-                    </form>
-                  <% end %>
-                </div>
-              <% end %>
+            <%= for err <- upload_errors(@uploads.header_upload) do %>
+              <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
             <% end %>
           </div>
         <% end %>
-      </div>
-
-      <!-- Header Background Toggle -->
-      <div class="mb-6">
-        <label class="flex items-center gap-2 cursor-pointer">
-          <input
-            type="checkbox"
-            checked={@theme_settings.header_background_enabled}
-            phx-click="update_setting"
-            phx-value-field="header_background_enabled"
-            phx-value-setting_value={if @theme_settings.header_background_enabled, do: "false", else: "true"}
-            class="toggle toggle-sm toggle-primary"
-          />
-          <span class="text-sm text-base-content/80">Header background image</span>
-        </label>
-      </div>
-
-      <!-- Header Image Upload (only when enabled) -->
-      <%= if @theme_settings.header_background_enabled do %>
-        <div class="bg-base-200 rounded-xl p-4 mb-6">
-          <span class="block text-xs font-medium text-base-content/70 mb-2">Upload header image</span>
-          <form phx-change="noop" phx-submit="noop">
-            <label class="block bg-base-100 border border-dashed border-base-300 rounded-lg p-3 text-sm text-base-content/60 text-center cursor-pointer hover:border-base-content/40 hover:text-base-content/80 transition-all">
-              <span>Choose file...</span>
-              <.live_file_input upload={@uploads.header_upload} class="hidden" />
-            </label>
-          </form>
-
-          <%= if @header_image do %>
-            <div class="relative w-full h-[60px] bg-base-100 border border-base-300 rounded-lg mt-2 overflow-hidden">
-              <img
-                src={"/images/#{@header_image.id}"}
-                alt="Current header background"
-                class="w-full h-full object-cover"
-              />
+        
+<!-- Presets Section -->
+        <div class="mb-6">
+          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+            Start with a preset
+          </label>
+          <div class="grid grid-cols-2 gap-2">
+            <%= for {preset_name, description} <- @presets_with_descriptions do %>
               <button
                 type="button"
-                phx-click="remove_header"
-                class="absolute -top-1.5 -right-1.5 w-[18px] h-[18px] bg-base-content text-base-100 rounded-full text-xs flex items-center justify-center leading-none"
-                title="Remove header background"
-              >×</button>
-            </div>
-
-            <!-- Header Image Controls -->
-            <div class="mt-3 flex flex-col gap-3">
-              <form phx-change="update_setting" phx-value-field="header_zoom">
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-xs font-medium text-base-content/70">Zoom</span>
-                  <span class="text-xs font-mono text-base-content/60"><%= @theme_settings.header_zoom %>%</span>
+                phx-click="apply_preset"
+                phx-value-preset={preset_name}
+                class={[
+                  "p-3 rounded-lg text-left transition-all border-2",
+                  if(@active_preset == preset_name,
+                    do: "border-base-content bg-base-100",
+                    else: "border-transparent bg-base-200 hover:bg-base-300"
+                  )
+                ]}
+              >
+                <div class="font-semibold text-sm capitalize text-base-content">
+                  {preset_name}
                 </div>
-                <input
-                  type="range"
-                  min="100"
-                  max="200"
-                  value={@theme_settings.header_zoom}
-                  name="header_zoom"
-                  class="range range-xs range-primary w-full"
-                />
-              </form>
-              <form phx-change="update_setting" phx-value-field="header_position_x">
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-xs font-medium text-base-content/70">Horizontal position</span>
-                  <span class="text-xs font-mono text-base-content/60"><%= @theme_settings.header_position_x %>%</span>
-                </div>
-                <input
-                  type="range"
-                  min="0"
-                  max="100"
-                  value={@theme_settings.header_position_x}
-                  name="header_position_x"
-                  class="range range-xs range-primary w-full"
-                />
-              </form>
-              <form phx-change="update_setting" phx-value-field="header_position_y">
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-xs font-medium text-base-content/70">Vertical position</span>
-                  <span class="text-xs font-mono text-base-content/60"><%= @theme_settings.header_position_y %>%</span>
-                </div>
-                <input
-                  type="range"
-                  min="0"
-                  max="100"
-                  value={@theme_settings.header_position_y}
-                  name="header_position_y"
-                  class="range range-xs range-primary w-full"
-                />
-              </form>
-            </div>
-          <% end %>
-
-          <%= for entry <- @uploads.header_upload.entries do %>
-            <div class="flex items-center gap-2 mt-2">
-              <div class="flex-1 h-1.5 bg-base-300 rounded-full overflow-hidden">
-                <div class="h-full bg-primary transition-all" style={"width: #{entry.progress}%"}></div>
-              </div>
-              <span class="text-xs text-base-content/60"><%= entry.progress %>%</span>
-              <button
-                type="button"
-                phx-click="cancel_upload"
-                phx-value-ref={entry.ref}
-                phx-value-upload="header_upload"
-                class="text-base-content/40 hover:text-base-content/70"
-              >×</button>
-            </div>
-            <%= for err <- upload_errors(@uploads.header_upload, entry) do %>
-              <p class="text-error text-xs mt-1"><%= error_to_string(err) %></p>
+                <div class="text-xs text-base-content/60">{description}</div>
+              </button>
             <% end %>
-          <% end %>
-
-          <%= for err <- upload_errors(@uploads.header_upload) do %>
-            <p class="text-error text-xs mt-1"><%= error_to_string(err) %></p>
-          <% end %>
+          </div>
+        </div>
+        
+<!-- Accent Colors (stays in essentials) -->
+        <div class="mb-6">
+          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+            Accent colour
+          </label>
+          <form
+            id="accent-color-form"
+            phx-change="update_color"
+            phx-value-field="accent_color"
+            phx-hook="ColorSync"
+          >
+            <div class="flex items-center gap-3">
+              <input
+                type="color"
+                id="accent-color-picker"
+                name="value"
+                value={@theme_settings.accent_color}
+                class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
+              />
+              <span class="font-mono text-sm text-base-content/70">
+                {@theme_settings.accent_color}
+              </span>
+            </div>
+          </form>
         </div>
-      <% end %>
 
-      <!-- Presets Section -->
-      <div class="mb-6">
-        <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Start with a preset</label>
-        <div class="grid grid-cols-2 gap-2">
-          <%= for {preset_name, description} <- @presets_with_descriptions do %>
-            <button
-              type="button"
-              phx-click="apply_preset"
-              phx-value-preset={preset_name}
-              class={[
-                "p-3 rounded-lg text-left transition-all border-2",
-                if(@active_preset == preset_name,
-                  do: "border-base-content bg-base-100",
-                  else: "border-transparent bg-base-200 hover:bg-base-300"
-                )
-              ]}
+        <div class="mb-6">
+          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+            Hover colour
+          </label>
+          <form
+            id="secondary-accent-color-form"
+            phx-change="update_color"
+            phx-value-field="secondary_accent_color"
+            phx-hook="ColorSync"
+          >
+            <div class="flex items-center gap-3">
+              <input
+                type="color"
+                id="secondary-accent-color-picker"
+                name="value"
+                value={@theme_settings.secondary_accent_color}
+                class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
+              />
+              <span class="font-mono text-sm text-base-content/70">
+                {@theme_settings.secondary_accent_color}
+              </span>
+            </div>
+          </form>
+        </div>
+
+        <div class="mb-6">
+          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+            Sale colour
+          </label>
+          <form
+            id="sale-color-form"
+            phx-change="update_color"
+            phx-value-field="sale_color"
+            phx-hook="ColorSync"
+          >
+            <div class="flex items-center gap-3">
+              <input
+                type="color"
+                id="sale-color-picker"
+                name="value"
+                value={@theme_settings.sale_color}
+                class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
+              />
+              <span class="font-mono text-sm text-base-content/70">
+                {@theme_settings.sale_color}
+              </span>
+            </div>
+          </form>
+        </div>
+        
+<!-- Customise Section (collapsible accordion using native details/summary) -->
+        <details
+          class="border-t border-base-300 mt-6 pt-4 group"
+          id="customise-section"
+          open={@customise_open}
+        >
+          <summary
+            class="flex items-center justify-between w-full py-3 cursor-pointer list-none [&::-webkit-details-marker]:hidden"
+            phx-click="toggle_customise"
+          >
+            <span class="text-sm font-semibold text-base-content/70 group-hover:text-base-content transition-colors">
+              Customise
+            </span>
+            <svg
+              class="w-5 h-5 text-base-content/50 transition-transform group-open:rotate-180"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
             >
-              <div class="font-semibold text-sm capitalize text-base-content"><%= preset_name %></div>
-              <div class="text-xs text-base-content/60"><%= description %></div>
-            </button>
-          <% end %>
-        </div>
-      </div>
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </summary>
 
-      <!-- Accent Colors (stays in essentials) -->
-      <div class="mb-6">
-        <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Accent colour</label>
-        <form id="accent-color-form" phx-change="update_color" phx-value-field="accent_color" phx-hook="ColorSync">
-          <div class="flex items-center gap-3">
-            <input
-              type="color"
-              id="accent-color-picker"
-              name="value"
-              value={@theme_settings.accent_color}
-              class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
-            />
-            <span class="font-mono text-sm text-base-content/70"><%= @theme_settings.accent_color %></span>
-          </div>
-        </form>
-      </div>
+          <div class="pt-4">
+            <!-- Typography Group -->
+            <div class="mb-6 pb-6 border-b border-base-200">
+              <div class="flex items-center gap-2 mb-4">
+                <svg
+                  class="w-4 h-4 text-base-content/50"
+                  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="text-sm font-semibold text-base-content">Typography</span>
+              </div>
 
-      <div class="mb-6">
-        <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Hover colour</label>
-        <form id="secondary-accent-color-form" phx-change="update_color" phx-value-field="secondary_accent_color" phx-hook="ColorSync">
-          <div class="flex items-center gap-3">
-            <input
-              type="color"
-              id="secondary-accent-color-picker"
-              name="value"
-              value={@theme_settings.secondary_accent_color}
-              class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
-            />
-            <span class="font-mono text-sm text-base-content/70"><%= @theme_settings.secondary_accent_color %></span>
-          </div>
-        </form>
-      </div>
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Font style
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for typo <- ["clean", "editorial", "modern", "classic", "friendly", "minimal"] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="typography"
+                      phx-value-setting_value={typo}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
+                        if(@theme_settings.typography == typo,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {typo}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
 
-      <div class="mb-6">
-        <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Sale colour</label>
-        <form id="sale-color-form" phx-change="update_color" phx-value-field="sale_color" phx-hook="ColorSync">
-          <div class="flex items-center gap-3">
-            <input
-              type="color"
-              id="sale-color-picker"
-              name="value"
-              value={@theme_settings.sale_color}
-              class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
-            />
-            <span class="font-mono text-sm text-base-content/70"><%= @theme_settings.sale_color %></span>
-          </div>
-        </form>
-      </div>
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Font size
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for {value, label} <- [{"small", "Small"}, {"medium", "Medium"}, {"large", "Large"}] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="font_size"
+                      phx-value-setting_value={value}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
+                        if(@theme_settings.font_size == value,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {label}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
 
-      <!-- Customise Section (collapsible accordion using native details/summary) -->
-      <details class="border-t border-base-300 mt-6 pt-4 group" id="customise-section" open={@customise_open}>
-        <summary class="flex items-center justify-between w-full py-3 cursor-pointer list-none [&::-webkit-details-marker]:hidden" phx-click="toggle_customise">
-          <span class="text-sm font-semibold text-base-content/70 group-hover:text-base-content transition-colors">Customise</span>
-          <svg class="w-5 h-5 text-base-content/50 transition-transform group-open:rotate-180" 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="pt-4">
-          <!-- Typography Group -->
-          <div class="mb-6 pb-6 border-b border-base-200">
-            <div class="flex items-center gap-2 mb-4">
-              <svg class="w-4 h-4 text-base-content/50" 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="text-sm font-semibold text-base-content">Typography</span>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Font style</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for typo <- ["clean", "editorial", "modern", "classic", "friendly", "minimal"] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="typography"
-                    phx-value-setting_value={typo}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                      if(@theme_settings.typography == typo,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= typo %>
-                  </button>
-                <% end %>
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Heading weight
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for {value, label} <- [{"regular", "Regular"}, {"medium", "Medium"}, {"bold", "Bold"}] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="heading_weight"
+                      phx-value-setting_value={value}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
+                        if(@theme_settings.heading_weight == value,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {label}
+                    </button>
+                  <% end %>
+                </div>
               </div>
             </div>
+            
+<!-- Colours Group -->
+            <div class="mb-6 pb-6 border-b border-base-200">
+              <div class="flex items-center gap-2 mb-4">
+                <svg
+                  class="w-4 h-4 text-base-content/50"
+                  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="text-sm font-semibold text-base-content">Colours</span>
+              </div>
 
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Font size</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for {value, label} <- [{"small", "Small"}, {"medium", "Medium"}, {"large", "Large"}] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="font_size"
-                    phx-value-setting_value={value}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                      if(@theme_settings.font_size == value,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= label %>
-                  </button>
-                <% end %>
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Colour mood
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for mood <- ["warm", "neutral", "cool", "dark"] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="mood"
+                      phx-value-setting_value={mood}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
+                        if(@theme_settings.mood == mood,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {mood}
+                    </button>
+                  <% end %>
+                </div>
               </div>
             </div>
+            
+<!-- Layout Group -->
+            <div class="mb-6 pb-6 border-b border-base-200">
+              <div class="flex items-center gap-2 mb-4">
+                <svg
+                  class="w-4 h-4 text-base-content/50"
+                  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="text-sm font-semibold text-base-content">Layout</span>
+              </div>
 
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Product grid
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for cols <- ["2", "3", "4"] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="grid_columns"
+                      phx-value-setting_value={cols}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
+                        if(@theme_settings.grid_columns == cols,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {cols} columns
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Density
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for density <- ["spacious", "balanced", "compact"] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="density"
+                      phx-value-setting_value={density}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
+                        if(@theme_settings.density == density,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {density}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Header layout
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for layout <- ["standard", "centered", "left"] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="header_layout"
+                      phx-value-setting_value={layout}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
+                        if(@theme_settings.header_layout == layout,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {layout}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={@theme_settings.announcement_bar}
+                    phx-click="toggle_setting"
+                    phx-value-field="announcement_bar"
+                    class="checkbox checkbox-sm"
+                  />
+                  <span class="text-sm text-base-content">Announcement bar</span>
+                </label>
+              </div>
+
+              <div class="mb-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={@theme_settings.sticky_header}
+                    phx-click="toggle_setting"
+                    phx-value-field="sticky_header"
+                    class="checkbox checkbox-sm"
+                  />
+                  <span class="text-sm text-base-content">Sticky header</span>
+                </label>
+              </div>
+            </div>
+            
+<!-- Shape Group -->
             <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Heading weight</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for {value, label} <- [{"regular", "Regular"}, {"medium", "Medium"}, {"bold", "Bold"}] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="heading_weight"
-                    phx-value-setting_value={value}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                      if(@theme_settings.heading_weight == value,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= label %>
-                  </button>
-                <% end %>
+              <div class="flex items-center gap-2 mb-4">
+                <svg
+                  class="w-4 h-4 text-base-content/50"
+                  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>
+                </svg>
+                <span class="text-sm font-semibold text-base-content">Shape</span>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Corner style
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for shape <- ["sharp", "soft", "round", "pill"] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="shape"
+                      phx-value-setting_value={shape}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
+                        if(@theme_settings.shape == shape,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {shape}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Card shadow
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for {value, label} <- [{"none", "None"}, {"sm", "Subtle"}, {"md", "Medium"}, {"lg", "Strong"}] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="card_shadow"
+                      phx-value-setting_value={value}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
+                        if(@theme_settings.card_shadow == value,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {label}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Button style
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for {value, label} <- [{"filled", "Filled"}, {"outline", "Outline"}, {"soft", "Soft"}] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="button_style"
+                      phx-value-setting_value={value}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
+                        if(@theme_settings.button_style == value,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {label}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+            </div>
+            
+<!-- Products Group -->
+            <div class="mb-6 pb-6 border-b border-base-200">
+              <div class="flex items-center gap-2 mb-4">
+                <svg
+                  class="w-4 h-4 text-base-content/50"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <rect x="3" y="3" width="7" height="7"></rect>
+                  <rect x="14" y="3" width="7" height="7"></rect>
+                  <rect x="14" y="14" width="7" height="7"></rect>
+                  <rect x="3" y="14" width="7" height="7"></rect>
+                </svg>
+                <span class="text-sm font-semibold text-base-content">Products</span>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Content width
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for width <- ["contained", "wide", "full"] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="layout_width"
+                      phx-value-setting_value={width}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
+                        if(@theme_settings.layout_width == width,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {width}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Image aspect ratio
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for {value, label} <- [{"square", "Square"}, {"portrait", "Portrait"}, {"landscape", "Landscape"}] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="image_aspect_ratio"
+                      phx-value-setting_value={value}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
+                        if(@theme_settings.image_aspect_ratio == value,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {label}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
+                  Product text alignment
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <%= for {value, label} <- [{"left", "Left"}, {"center", "Centre"}] do %>
+                    <button
+                      type="button"
+                      phx-click="update_setting"
+                      phx-value-field="product_text_align"
+                      phx-value-setting_value={value}
+                      class={[
+                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
+                        if(@theme_settings.product_text_align == value,
+                          do: "border-base-content bg-base-100 text-base-content",
+                          else:
+                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
+                        )
+                      ]}
+                    >
+                      {label}
+                    </button>
+                  <% end %>
+                </div>
+              </div>
+
+              <div class="mb-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={@theme_settings.hover_image}
+                    phx-click="toggle_setting"
+                    phx-value-field="hover_image"
+                    class="checkbox checkbox-sm"
+                  />
+                  <span class="text-sm text-base-content">Second image on hover</span>
+                </label>
+              </div>
+
+              <div class="mb-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={@theme_settings.show_prices}
+                    phx-click="toggle_setting"
+                    phx-value-field="show_prices"
+                    class="checkbox checkbox-sm"
+                  />
+                  <span class="text-sm text-base-content">Show prices</span>
+                </label>
+              </div>
+            </div>
+            
+<!-- Product Page Group -->
+            <div class="mb-4">
+              <div class="flex items-center gap-2 mb-4">
+                <svg
+                  class="w-4 h-4 text-base-content/50"
+                  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="text-sm font-semibold text-base-content">Product page</span>
+              </div>
+
+              <div class="mb-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={@theme_settings.pdp_trust_badges}
+                    phx-click="toggle_setting"
+                    phx-value-field="pdp_trust_badges"
+                    class="checkbox checkbox-sm"
+                  />
+                  <span class="text-sm text-base-content">Trust badges</span>
+                </label>
+              </div>
+
+              <div class="mb-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={@theme_settings.pdp_reviews}
+                    phx-click="toggle_setting"
+                    phx-value-field="pdp_reviews"
+                    class="checkbox checkbox-sm"
+                  />
+                  <span class="text-sm text-base-content">Reviews section</span>
+                </label>
+              </div>
+
+              <div class="mb-4">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={@theme_settings.pdp_related_products}
+                    phx-click="toggle_setting"
+                    phx-value-field="pdp_related_products"
+                    class="checkbox checkbox-sm"
+                  />
+                  <span class="text-sm text-base-content">Related products</span>
+                </label>
               </div>
             </div>
           </div>
-
-          <!-- Colours Group -->
-          <div class="mb-6 pb-6 border-b border-base-200">
-            <div class="flex items-center gap-2 mb-4">
-              <svg class="w-4 h-4 text-base-content/50" 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="text-sm font-semibold text-base-content">Colours</span>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Colour mood</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for mood <- ["warm", "neutral", "cool", "dark"] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="mood"
-                    phx-value-setting_value={mood}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                      if(@theme_settings.mood == mood,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= mood %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
+        </details>
+        
+<!-- Current Combination Display -->
+        <div class="bg-base-200 rounded-xl p-4 mt-6">
+          <div class="text-xs font-semibold uppercase tracking-wider text-base-content/50 mb-2">
+            Current combination
           </div>
-
-          <!-- Layout Group -->
-          <div class="mb-6 pb-6 border-b border-base-200">
-            <div class="flex items-center gap-2 mb-4">
-              <svg class="w-4 h-4 text-base-content/50" 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="text-sm font-semibold text-base-content">Layout</span>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Product grid</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for cols <- ["2", "3", "4"] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="grid_columns"
-                    phx-value-setting_value={cols}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                      if(@theme_settings.grid_columns == cols,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= cols %> columns
-                  </button>
-                <% end %>
-              </div>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Density</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for density <- ["spacious", "balanced", "compact"] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="density"
-                    phx-value-setting_value={density}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                      if(@theme_settings.density == density,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= density %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Header layout</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for layout <- ["standard", "centered", "left"] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="header_layout"
-                    phx-value-setting_value={layout}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                      if(@theme_settings.header_layout == layout,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= layout %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
-
-            <div class="mb-4">
-              <label class="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={@theme_settings.announcement_bar}
-                  phx-click="toggle_setting"
-                  phx-value-field="announcement_bar"
-                  class="checkbox checkbox-sm"
-                />
-                <span class="text-sm text-base-content">Announcement bar</span>
-              </label>
-            </div>
-
-            <div class="mb-4">
-              <label class="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={@theme_settings.sticky_header}
-                  phx-click="toggle_setting"
-                  phx-value-field="sticky_header"
-                  class="checkbox checkbox-sm"
-                />
-                <span class="text-sm text-base-content">Sticky header</span>
-              </label>
-            </div>
+          <div class="text-sm text-base-content leading-relaxed">
+            {String.capitalize(@theme_settings.mood)} · {String.capitalize(
+              @theme_settings.typography
+            )} · {String.capitalize(@theme_settings.shape)} · {String.capitalize(
+              @theme_settings.density
+            )} · {@theme_settings.grid_columns}-up · {String.capitalize(
+              @theme_settings.header_layout
+            )}
           </div>
-
-          <!-- Shape Group -->
-          <div class="mb-4">
-            <div class="flex items-center gap-2 mb-4">
-              <svg class="w-4 h-4 text-base-content/50" 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>
-              </svg>
-              <span class="text-sm font-semibold text-base-content">Shape</span>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Corner style</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for shape <- ["sharp", "soft", "round", "pill"] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="shape"
-                    phx-value-setting_value={shape}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                      if(@theme_settings.shape == shape,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= shape %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Card shadow</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for {value, label} <- [{"none", "None"}, {"sm", "Subtle"}, {"md", "Medium"}, {"lg", "Strong"}] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="card_shadow"
-                    phx-value-setting_value={value}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                      if(@theme_settings.card_shadow == value,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= label %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Button style</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for {value, label} <- [{"filled", "Filled"}, {"outline", "Outline"}, {"soft", "Soft"}] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="button_style"
-                    phx-value-setting_value={value}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                      if(@theme_settings.button_style == value,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= label %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
-          </div>
-
-          <!-- Products Group -->
-          <div class="mb-6 pb-6 border-b border-base-200">
-            <div class="flex items-center gap-2 mb-4">
-              <svg class="w-4 h-4 text-base-content/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="3" width="7" height="7"></rect>
-                <rect x="14" y="3" width="7" height="7"></rect>
-                <rect x="14" y="14" width="7" height="7"></rect>
-                <rect x="3" y="14" width="7" height="7"></rect>
-              </svg>
-              <span class="text-sm font-semibold text-base-content">Products</span>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Content width</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for width <- ["contained", "wide", "full"] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="layout_width"
-                    phx-value-setting_value={width}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                      if(@theme_settings.layout_width == width,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= width %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Image aspect ratio</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for {value, label} <- [{"square", "Square"}, {"portrait", "Portrait"}, {"landscape", "Landscape"}] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="image_aspect_ratio"
-                    phx-value-setting_value={value}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                      if(@theme_settings.image_aspect_ratio == value,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= label %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
-
-            <div class="mb-4">
-              <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">Product text alignment</label>
-              <div class="flex flex-wrap gap-2">
-                <%= for {value, label} <- [{"left", "Left"}, {"center", "Centre"}] do %>
-                  <button
-                    type="button"
-                    phx-click="update_setting"
-                    phx-value-field="product_text_align"
-                    phx-value-setting_value={value}
-                    class={[
-                      "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                      if(@theme_settings.product_text_align == value,
-                        do: "border-base-content bg-base-100 text-base-content",
-                        else: "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                      )
-                    ]}
-                  >
-                    <%= label %>
-                  </button>
-                <% end %>
-              </div>
-            </div>
-
-            <div class="mb-4">
-              <label class="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={@theme_settings.hover_image}
-                  phx-click="toggle_setting"
-                  phx-value-field="hover_image"
-                  class="checkbox checkbox-sm"
-                />
-                <span class="text-sm text-base-content">Second image on hover</span>
-              </label>
-            </div>
-
-            <div class="mb-4">
-              <label class="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={@theme_settings.show_prices}
-                  phx-click="toggle_setting"
-                  phx-value-field="show_prices"
-                  class="checkbox checkbox-sm"
-                />
-                <span class="text-sm text-base-content">Show prices</span>
-              </label>
-            </div>
-          </div>
-
-          <!-- Product Page Group -->
-          <div class="mb-4">
-            <div class="flex items-center gap-2 mb-4">
-              <svg class="w-4 h-4 text-base-content/50" 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="text-sm font-semibold text-base-content">Product page</span>
-            </div>
-
-            <div class="mb-4">
-              <label class="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={@theme_settings.pdp_trust_badges}
-                  phx-click="toggle_setting"
-                  phx-value-field="pdp_trust_badges"
-                  class="checkbox checkbox-sm"
-                />
-                <span class="text-sm text-base-content">Trust badges</span>
-              </label>
-            </div>
-
-            <div class="mb-4">
-              <label class="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={@theme_settings.pdp_reviews}
-                  phx-click="toggle_setting"
-                  phx-value-field="pdp_reviews"
-                  class="checkbox checkbox-sm"
-                />
-                <span class="text-sm text-base-content">Reviews section</span>
-              </label>
-            </div>
-
-            <div class="mb-4">
-              <label class="flex items-center gap-3 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={@theme_settings.pdp_related_products}
-                  phx-click="toggle_setting"
-                  phx-value-field="pdp_related_products"
-                  class="checkbox checkbox-sm"
-                />
-                <span class="text-sm text-base-content">Related products</span>
-              </label>
-            </div>
+          <div class="text-xs text-base-content/40 mt-2">
+            One of 100,000+ possible combinations
           </div>
         </div>
-      </details>
-
-      <!-- Current Combination Display -->
-      <div class="bg-base-200 rounded-xl p-4 mt-6">
-        <div class="text-xs font-semibold uppercase tracking-wider text-base-content/50 mb-2">Current combination</div>
-        <div class="text-sm text-base-content leading-relaxed">
-          <%= String.capitalize(@theme_settings.mood) %> · <%= String.capitalize(@theme_settings.typography) %> · <%= String.capitalize(@theme_settings.shape) %> · <%= String.capitalize(@theme_settings.density) %> · <%= @theme_settings.grid_columns %>-up · <%= String.capitalize(@theme_settings.header_layout) %>
-        </div>
-        <div class="text-xs text-base-content/40 mt-2">One of 100,000+ possible combinations</div>
-      </div>
       <% end %>
     </div>
-
-    <!-- Preview Area -->
+    
+<!-- Preview Area -->
     <div class="flex-1 p-6 flex flex-col overflow-hidden bg-base-200">
       <div class="max-w-[1200px] mx-auto w-full flex flex-col flex-1 min-h-0 overflow-hidden">
         <!-- Preview Page Switcher -->
@@ -904,12 +1106,12 @@
                 )
               ]}
             >
-              <%= label %>
+              {label}
             </button>
           <% end %>
         </div>
-
-        <!-- Browser Chrome -->
+        
+<!-- Browser Chrome -->
         <div class="flex items-center bg-gradient-to-b from-base-300 to-base-300/80 border border-base-content/20 border-b-base-content/30 rounded-t-[10px] px-[14px] py-[10px] gap-[14px] flex-shrink-0">
           <div class="flex gap-2">
             <div class="w-3 h-3 rounded-full bg-[#ff5f57] border border-[#e14640]"></div>
@@ -917,26 +1119,36 @@
             <div class="w-3 h-3 rounded-full bg-[#28c940] border border-[#1aab29]"></div>
           </div>
           <div class="flex-1 flex items-center gap-2 bg-base-100 border border-base-content/20 rounded-md px-3 py-[5px]">
-            <svg class="w-[14px] h-[14px] text-base-content/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <svg
+              class="w-[14px] h-[14px] text-base-content/50"
+              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>
-            <span class="text-sm text-base-content/60 truncate"><%= @theme_settings.site_name |> String.downcase() |> String.replace(" ", "") %>.myshopify.com</span>
+            <span class="text-sm text-base-content/60 truncate">
+              {@theme_settings.site_name |> String.downcase() |> String.replace(" ", "")}.myshopify.com
+            </span>
           </div>
         </div>
-
-        <!-- Preview Frame -->
-        <div class="themed preview-frame bg-white overflow-auto flex-1 rounded-b-lg border border-t-0 border-base-content/20"
-             data-mood={@theme_settings.mood}
-             data-typography={@theme_settings.typography}
-             data-shape={@theme_settings.shape}
-             data-density={@theme_settings.density}
-             data-grid={@theme_settings.grid_columns}
-             data-header={@theme_settings.header_layout}
-             data-sticky={to_string(@theme_settings.sticky_header)}
-             data-layout={@theme_settings.layout_width}
-             data-shadow={@theme_settings.card_shadow}
-             data-button-style={@theme_settings.button_style}>
+        
+<!-- Preview Frame -->
+        <div
+          class="themed preview-frame bg-white overflow-auto flex-1 rounded-b-lg border border-t-0 border-base-content/20"
+          data-mood={@theme_settings.mood}
+          data-typography={@theme_settings.typography}
+          data-shape={@theme_settings.shape}
+          data-density={@theme_settings.density}
+          data-grid={@theme_settings.grid_columns}
+          data-header={@theme_settings.header_layout}
+          data-sticky={to_string(@theme_settings.sticky_header)}
+          data-layout={@theme_settings.layout_width}
+          data-shadow={@theme_settings.card_shadow}
+          data-button-style={@theme_settings.button_style}
+        >
           <style>
             /* All font faces for theme switching */
             <%= Phoenix.HTML.raw(SimpleshopTheme.Theme.Fonts.generate_all_font_faces(
diff --git a/lib/simpleshop_theme_web/live/user_live/login.ex b/lib/simpleshop_theme_web/live/user_live/login.ex
index 3288c70..0126c3c 100644
--- a/lib/simpleshop_theme_web/live/user_live/login.ex
+++ b/lib/simpleshop_theme_web/live/user_live/login.ex
@@ -126,6 +126,7 @@ defmodule SimpleshopThemeWeb.UserLive.Login do
   end
 
   defp local_mail_adapter? do
-    Application.get_env(:simpleshop_theme, SimpleshopTheme.Mailer)[:adapter] == Swoosh.Adapters.Local
+    Application.get_env(:simpleshop_theme, SimpleshopTheme.Mailer)[:adapter] ==
+      Swoosh.Adapters.Local
   end
 end
diff --git a/priv/repo/migrations/20260128235846_create_products.exs b/priv/repo/migrations/20260128235846_create_products.exs
index e945427..274b918 100644
--- a/priv/repo/migrations/20260128235846_create_products.exs
+++ b/priv/repo/migrations/20260128235846_create_products.exs
@@ -4,7 +4,10 @@ defmodule SimpleshopTheme.Repo.Migrations.CreateProducts do
   def change do
     create table(:products, primary_key: false) do
       add :id, :binary_id, primary_key: true
-      add :provider_connection_id, references(:provider_connections, type: :binary_id, on_delete: :delete_all), null: false
+
+      add :provider_connection_id,
+          references(:provider_connections, type: :binary_id, on_delete: :delete_all), null: false
+
       add :provider_product_id, :string, null: false
       add :title, :string, null: false
       add :description, :text
diff --git a/priv/repo/migrations/20260128235847_create_product_images.exs b/priv/repo/migrations/20260128235847_create_product_images.exs
index f5b3031..31f54d5 100644
--- a/priv/repo/migrations/20260128235847_create_product_images.exs
+++ b/priv/repo/migrations/20260128235847_create_product_images.exs
@@ -4,7 +4,10 @@ defmodule SimpleshopTheme.Repo.Migrations.CreateProductImages do
   def change do
     create table(:product_images, primary_key: false) do
       add :id, :binary_id, primary_key: true
-      add :product_id, references(:products, type: :binary_id, on_delete: :delete_all), null: false
+
+      add :product_id, references(:products, type: :binary_id, on_delete: :delete_all),
+        null: false
+
       add :src, :string, null: false
       add :position, :integer, default: 0, null: false
       add :alt, :string
diff --git a/priv/repo/migrations/20260128235848_create_product_variants.exs b/priv/repo/migrations/20260128235848_create_product_variants.exs
index 2a55974..2f335d4 100644
--- a/priv/repo/migrations/20260128235848_create_product_variants.exs
+++ b/priv/repo/migrations/20260128235848_create_product_variants.exs
@@ -4,7 +4,10 @@ defmodule SimpleshopTheme.Repo.Migrations.CreateProductVariants do
   def change do
     create table(:product_variants, primary_key: false) do
       add :id, :binary_id, primary_key: true
-      add :product_id, references(:products, type: :binary_id, on_delete: :delete_all), null: false
+
+      add :product_id, references(:products, type: :binary_id, on_delete: :delete_all),
+        null: false
+
       add :provider_variant_id, :string, null: false
       add :title, :string, null: false
       add :sku, :string
diff --git a/test/simpleshop_theme/media/svg_recolorer_test.exs b/test/simpleshop_theme/media/svg_recolorer_test.exs
index 26a334b..876beb8 100644
--- a/test/simpleshop_theme/media/svg_recolorer_test.exs
+++ b/test/simpleshop_theme/media/svg_recolorer_test.exs
@@ -70,6 +70,7 @@ defmodule SimpleshopTheme.Media.SVGRecolorerTest do
       svg = """
       <svg><style>.st0{fill:#FFFFFF;}.st1{fill:#EF1D1D;stroke:#000000;}</style><path class="st0"/></svg>
       """
+
       result = SVGRecolorer.recolor(svg, "#ff6600")
       assert result =~ "fill:#ff6600"
       refute result =~ "#FFFFFF"
@@ -80,6 +81,7 @@ defmodule SimpleshopTheme.Media.SVGRecolorerTest do
       svg = """
       <svg><style>.st1{stroke:#000000;stroke-miterlimit:10;}</style><path class="st1"/></svg>
       """
+
       result = SVGRecolorer.recolor(svg, "#ff6600")
       assert result =~ "stroke:#ff6600"
       refute result =~ "#000000"
@@ -89,6 +91,7 @@ defmodule SimpleshopTheme.Media.SVGRecolorerTest do
       svg = """
       <svg><style>.st0{fill:none;stroke:#000;}</style><path class="st0"/></svg>
       """
+
       result = SVGRecolorer.recolor(svg, "#ff6600")
       assert result =~ "fill:none"
       assert result =~ "stroke:#ff6600"
@@ -98,6 +101,7 @@ defmodule SimpleshopTheme.Media.SVGRecolorerTest do
       svg = """
       <svg><style>.icon{fill:black;stroke:white;}</style><path class="icon"/></svg>
       """
+
       result = SVGRecolorer.recolor(svg, "#ff6600")
       assert result =~ "fill:#ff6600"
       assert result =~ "stroke:#ff6600"
diff --git a/test/simpleshop_theme/products/product_test.exs b/test/simpleshop_theme/products/product_test.exs
index e09f646..41d6fdf 100644
--- a/test/simpleshop_theme/products/product_test.exs
+++ b/test/simpleshop_theme/products/product_test.exs
@@ -96,7 +96,10 @@ defmodule SimpleshopTheme.Products.ProductTest do
 
     test "stores provider_data as map", %{conn: conn} do
       provider_data = %{"blueprint_id" => 145, "print_provider_id" => 29, "extra" => "value"}
-      attrs = valid_product_attrs(%{provider_connection_id: conn.id, provider_data: provider_data})
+
+      attrs =
+        valid_product_attrs(%{provider_connection_id: conn.id, provider_data: provider_data})
+
       changeset = Product.changeset(%Product{}, attrs)
 
       assert changeset.valid?
diff --git a/test/simpleshop_theme/products_test.exs b/test/simpleshop_theme/products_test.exs
index 9f73bed..5ffacb9 100644
--- a/test/simpleshop_theme/products_test.exs
+++ b/test/simpleshop_theme/products_test.exs
@@ -437,7 +437,9 @@ defmodule SimpleshopTheme.ProductsTest do
 
     test "updates existing variants" do
       product = product_fixture()
-      existing = product_variant_fixture(%{product: product, provider_variant_id: "v1", price: 2000})
+
+      existing =
+        product_variant_fixture(%{product: product, provider_variant_id: "v1", price: 2000})
 
       variants = [
         %{provider_variant_id: "v1", title: "Small Updated", price: 2200}
diff --git a/test/simpleshop_theme/settings_test.exs b/test/simpleshop_theme/settings_test.exs
index 9dc562c..35e9fe1 100644
--- a/test/simpleshop_theme/settings_test.exs
+++ b/test/simpleshop_theme/settings_test.exs
@@ -76,13 +76,15 @@ defmodule SimpleshopTheme.SettingsTest do
       # Cache should now contain new CSS with the red accent color
       {:ok, updated_css} = CSSCache.get()
       assert updated_css =~ ".themed {"
-      assert updated_css =~ "--t-accent-h: 0"  # Red = hue 0
+      # Red = hue 0
+      assert updated_css =~ "--t-accent-h: 0"
 
       # Change to blue
       {:ok, _settings} = Settings.update_theme_settings(%{accent_color: "#0000ff"})
 
       {:ok, blue_css} = CSSCache.get()
-      assert blue_css =~ "--t-accent-h: 240"  # Blue = hue 240
+      # Blue = hue 240
+      assert blue_css =~ "--t-accent-h: 240"
 
       # Restore default
       CSSCache.warm()
diff --git a/test/simpleshop_theme/sync/product_sync_worker_test.exs b/test/simpleshop_theme/sync/product_sync_worker_test.exs
index f86019a..a52d2b5 100644
--- a/test/simpleshop_theme/sync/product_sync_worker_test.exs
+++ b/test/simpleshop_theme/sync/product_sync_worker_test.exs
@@ -61,7 +61,9 @@ defmodule SimpleshopTheme.Sync.ProductSyncWorkerTest do
 
     test "new/2 with scheduled_at creates scheduled job" do
       future = DateTime.add(DateTime.utc_now(), 60, :second)
-      changeset = ProductSyncWorker.new(%{provider_connection_id: "test-id"}, scheduled_at: future)
+
+      changeset =
+        ProductSyncWorker.new(%{provider_connection_id: "test-id"}, scheduled_at: future)
 
       assert changeset.changes.scheduled_at == future
     end
diff --git a/test/simpleshop_theme/theme/preview_data_test.exs b/test/simpleshop_theme/theme/preview_data_test.exs
index 7efc144..95982af 100644
--- a/test/simpleshop_theme/theme/preview_data_test.exs
+++ b/test/simpleshop_theme/theme/preview_data_test.exs
@@ -51,6 +51,7 @@ defmodule SimpleshopTheme.Theme.PreviewDataTest do
 
         if product.hover_image_url do
           assert is_binary(product.hover_image_url)
+
           assert String.starts_with?(product.hover_image_url, "/") or
                    String.starts_with?(product.hover_image_url, "http")
         end
diff --git a/test/simpleshop_theme_web/controllers/error_json_test.exs b/test/simpleshop_theme_web/controllers/error_json_test.exs
index 863cf03..3532c10 100644
--- a/test/simpleshop_theme_web/controllers/error_json_test.exs
+++ b/test/simpleshop_theme_web/controllers/error_json_test.exs
@@ -2,7 +2,9 @@ defmodule SimpleshopThemeWeb.ErrorJSONTest do
   use SimpleshopThemeWeb.ConnCase, async: true
 
   test "renders 404" do
-    assert SimpleshopThemeWeb.ErrorJSON.render("404.json", %{}) == %{errors: %{detail: "Not Found"}}
+    assert SimpleshopThemeWeb.ErrorJSON.render("404.json", %{}) == %{
+             errors: %{detail: "Not Found"}
+           }
   end
 
   test "renders 500" do