fix CSS nesting warnings and test type warnings

Replace BEM-style &--modifier nesting (unsupported in native CSS) with
&.class-modifier in shop/components.css and page_renderer.ex. Fix
Elixir 1.19 type warnings comparing lists with != [].

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

PROGRESS.md

@@ -26,16 +26,16 @@ Tier 1 MVP complete. Tier 2 production readiness complete (except Litestream and
 - Complete SEO (OG/Twitter cards, JSON-LD, sitemap, canonical URLs, meta descriptions)
 - Email settings admin with 10 adapter options and test email
 - No-JS support across all key flows
-- Fully Tailwind-free CSS (9.8 KB gzipped shop, 17.8 KB gzipped admin)
+- Fully Tailwind-free CSS (12 KB gzipped shop+theme, 95 KB gzipped admin total)
 - CI pipeline (compile warnings, format, credo, dialyzer, tests)
 - Deployed on Fly.io with observability (LiveDashboard, ErrorTracker, structured logging)
 - 1679+ tests passing, 99-100 PageSpeed mobile
 
 ## Next up
 
-### Admin CSS refactor ([plan](docs/plans/css-migration.md))
+### Admin CSS refactor ([plan](docs/plans/css-migration.md)) — Complete
 
-Phase 2 in progress — replacing Tailwind utility clones with semantic CSS classes. Layout shell, core components, and 6 page templates refactored (newsletter, settings, providers, theme, order_show). 11 templates still use utility classes; `utilities.css` stays until they're done. Visual regression fixes applied (5 missing line-height/padding corrections). Phases 1 (layer cascade) and 4 (delete utilities.css) blocked until all templates are migrated.
+All 4 phases done. Tailwind utility clone deleted, all templates migrated to semantic classes, layout primitives added, `@layer` cascade in place. Post-refactor cleanup: dead CSS removal (9 classes), color-mix token extraction (5 `--admin-text-*` tokens replacing 80 inline calls), and theme CSS extracted into standalone `theme.css` bundle shared across all page types (eliminates 28 KB duplication). Image optimizer hardened against tiny placeholder stubs. Theme editor mobile overlay bug fixed.
 
 ### Profit-aware pricing & sales ([plan](docs/plans/profit-aware-pricing.md))
 

assets/css/shop/components.css

@@ -2947,19 +2947,19 @@
     background-color: var(--t-surface-sunken);
     color: var(--t-text-secondary);
 
-    &--lg {
+    &.order-status-badge-lg {
       font-size: var(--t-text-small, 0.875rem);
       padding: 0.375rem 0.875rem;
       margin-top: 0.75rem;
     }
 
-    &--shipped,
+    &.order-status-badge-shipped,
-    &--delivered {
+    &.order-status-badge-delivered {
       background-color: color-mix(in srgb, var(--t-accent) 15%, transparent);
       color: var(--t-accent);
     }
 
-    &--failed {
+    &.order-status-badge-failed {
       background-color: color-mix(in srgb, #ef4444 12%, transparent);
       color: #b91c1c;
     }

docs/plans/css-migration.md

@@ -1,6 +1,6 @@
 # Plan: CSS migration — Tailwind + DaisyUI to modern hand-written CSS
 
-Status: Complete (all phases 0-8). Admin CSS semantic refactor in progress — see PROGRESS.md.
+Status: Complete. All phases done including admin semantic refactor, dead CSS cleanup, color-mix token extraction, and theme CSS bundle extraction.
 
 ## Overview
 

lib/berrypod_web/page_renderer.ex

@@ -819,7 +819,7 @@ defmodule BerrypodWeb.PageRenderer do
                     {Calendar.strftime(order.inserted_at, "%-d %B %Y")}
                   </p>
                 </div>
-                <span class={"order-status-badge order-status-badge--#{order.fulfilment_status}"}>
+                <span class={"order-status-badge order-status-badge-#{order.fulfilment_status}"}>
                   {format_order_status(order.fulfilment_status)}
                 </span>
               </div>
@@ -856,7 +856,7 @@ defmodule BerrypodWeb.PageRenderer do
         <.link navigate="/orders" class="order-detail-back">&larr; Back to orders</.link>
         <h1 class="checkout-heading" style="margin-top: 1.5rem;">{assigns[:order].order_number}</h1>
         <p class="checkout-meta">{Calendar.strftime(assigns[:order].inserted_at, "%-d %B %Y")}</p>
-        <span class={"order-status-badge order-status-badge--#{assigns[:order].fulfilment_status} order-status-badge--lg"}>
+        <span class={"order-status-badge order-status-badge-#{assigns[:order].fulfilment_status} order-status-badge-lg"}>
           {format_order_status(assigns[:order].fulfilment_status)}
         </span>
       </div>

test/berrypod/theme/preview_data_test.exs

@@ -76,7 +76,7 @@ defmodule Berrypod.Theme.PreviewDataTest do
       cart_items = PreviewData.cart_items()
 
       assert is_list(cart_items)
-      assert cart_items != []
+      assert length(cart_items) > 0
     end
 
     test "each cart item has required fields" do
@@ -116,7 +116,7 @@ defmodule Berrypod.Theme.PreviewDataTest do
       testimonials = PreviewData.testimonials()
 
       assert is_list(testimonials)
-      assert testimonials != []
+      assert length(testimonials) > 0
     end
 
     test "each testimonial has required fields" do