fix: update shop layout and CSS selectors for shop-root

- Fix asset paths in shop layout (css/app.css, js/app.js)
- Add Google Fonts preconnect and stylesheet link
- Update theme-layer2-attributes.css to target both .preview-frame
  and .shop-root so theme styles apply to real shop pages
- Properly duplicate attribute selectors (e.g., [data-mood="warm"])
  for both .preview-frame and .shop-root

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

assets/css/theme-layer2-attributes.css

@@ -3,7 +3,8 @@
    ======================================== */
 
 /* Mood - Default (Neutral) */
-.preview-frame {
+.preview-frame,
+.shop-root {
   --t-surface-base: #ffffff;
   --t-surface-raised: #ffffff;
   --t-surface-sunken: #f5f5f5;
@@ -16,7 +17,8 @@
   --t-border-subtle: #f0f0f0;
 }
 
-.preview-frame[data-mood="warm"] {
+.preview-frame[data-mood="warm"],
+.shop-root[data-mood="warm"] {
   --t-surface-base: #fdf8f3;
   --t-surface-raised: #fffcf8;
   --t-surface-sunken: #f5ebe0;
@@ -27,7 +29,8 @@
   --t-border-subtle: #f0ebe4;
 }
 
-.preview-frame[data-mood="cool"] {
+.preview-frame[data-mood="cool"],
+.shop-root[data-mood="cool"] {
   --t-surface-base: #f4f7fb;
   --t-surface-raised: #f8fafc;
   --t-surface-sunken: #e8eff7;
@@ -38,7 +41,8 @@
   --t-border-subtle: #e8eff5;
 }
 
-.preview-frame[data-mood="dark"] {
+.preview-frame[data-mood="dark"],
+.shop-root[data-mood="dark"] {
   --t-surface-base: #0a0a0a;
   --t-surface-raised: #171717;
   --t-surface-sunken: #000000;
@@ -55,7 +59,8 @@
 /* Typography Presets - Curated font pairings based on e-commerce research */
 
 /* Default (Clean) - Minimal & Modern: Manrope + Inter */
-.preview-frame {
+.preview-frame,
+.shop-root {
   --t-font-heading: var(--p-font-manrope);
   --t-font-body: var(--p-font-inter);
   --t-heading-weight: 600;
@@ -64,7 +69,8 @@
 
 /* Editorial - Bold & Editorial: Playfair Display + Raleway */
 /* Best for: fashion, lifestyle brands */
-.preview-frame[data-typography="editorial"] {
+.preview-frame[data-typography="editorial"],
+.shop-root[data-typography="editorial"] {
   --t-font-heading: var(--p-font-playfair);
   --t-font-body: var(--p-font-raleway);
   --t-heading-weight: 500;
@@ -73,7 +79,8 @@
 
 /* Modern - Tech & Futuristic: Space Grotesk + Inter */
 /* Best for: tech products, gadget accessories */
-.preview-frame[data-typography="modern"] {
+.preview-frame[data-typography="modern"],
+.shop-root[data-typography="modern"] {
   --t-font-heading: var(--p-font-space);
   --t-font-body: var(--p-font-inter);
   --t-heading-weight: 500;
@@ -82,7 +89,8 @@
 
 /* Classic - Luxury & Elegant: Cormorant Garamond + Source Serif 4 */
 /* Best for: high-end goods, premium products */
-.preview-frame[data-typography="classic"] {
+.preview-frame[data-typography="classic"],
+.shop-root[data-typography="classic"] {
   --t-font-heading: var(--p-font-cormorant);
   --t-font-body: var(--p-font-source-serif);
   --t-heading-weight: 500;
@@ -91,7 +99,8 @@
 
 /* Friendly - Playful & Quirky: Fraunces + Work Sans */
 /* Best for: creative products, novelty gifts */
-.preview-frame[data-typography="friendly"] {
+.preview-frame[data-typography="friendly"],
+.shop-root[data-typography="friendly"] {
   --t-font-heading: var(--p-font-fraunces);
   --t-font-body: var(--p-font-work-sans);
   --t-heading-weight: 600;
@@ -100,7 +109,8 @@
 
 /* Minimal - Modern Sans-Serif: DM Sans + Source Serif 4 */
 /* Best for: design-forward, contemporary homeware */
-.preview-frame[data-typography="minimal"] {
+.preview-frame[data-typography="minimal"],
+.shop-root[data-typography="minimal"] {
   --t-font-heading: var(--p-font-dm-sans);
   --t-font-body: var(--p-font-source-serif);
   --t-heading-weight: 500;
@@ -109,7 +119,8 @@
 
 /* Impulse - Light & Airy: Raleway + Inter */
 /* Best for: wellness, beauty, sustainable goods */
-.preview-frame[data-typography="impulse"] {
+.preview-frame[data-typography="impulse"],
+.shop-root[data-typography="impulse"] {
   --t-font-heading: var(--p-font-raleway);
   --t-font-body: var(--p-font-inter);
   --t-heading-weight: 300;
@@ -117,7 +128,8 @@
 }
 
 /* Shape - Default (Soft) */
-.preview-frame {
+.preview-frame,
+.shop-root {
   --t-radius-sm: var(--p-radius-sm);
   --t-radius-md: var(--p-radius-md);
   --t-radius-lg: var(--p-radius-lg);
@@ -127,7 +139,8 @@
   --t-radius-image: var(--p-radius-md);
 }
 
-.preview-frame[data-shape="sharp"] {
+.preview-frame[data-shape="sharp"],
+.shop-root[data-shape="sharp"] {
   --t-radius-sm: 0;
   --t-radius-md: 0;
   --t-radius-lg: 0;
@@ -137,7 +150,8 @@
   --t-radius-image: 0;
 }
 
-.preview-frame[data-shape="round"] {
+.preview-frame[data-shape="round"],
+.shop-root[data-shape="round"] {
   --t-radius-sm: var(--p-radius-md);
   --t-radius-md: var(--p-radius-lg);
   --t-radius-lg: var(--p-radius-xl);
@@ -147,7 +161,8 @@
   --t-radius-image: var(--p-radius-lg);
 }
 
-.preview-frame[data-shape="pill"] {
+.preview-frame[data-shape="pill"],
+.shop-root[data-shape="pill"] {
   --t-radius-sm: var(--p-radius-full);
   --t-radius-md: var(--p-radius-full);
   --t-radius-lg: var(--p-radius-xl);
@@ -158,20 +173,24 @@
 }
 
 /* Density - Default (Balanced) */
-.preview-frame {
+.preview-frame,
+.shop-root {
   --t-density: 1;
 }
 
-.preview-frame[data-density="spacious"] {
+.preview-frame[data-density="spacious"],
+.shop-root[data-density="spacious"] {
   --t-density: 1.25;
 }
 
-.preview-frame[data-density="compact"] {
+.preview-frame[data-density="compact"],
+.shop-root[data-density="compact"] {
   --t-density: 0.85;
 }
 
 /* Density-aware spacing variables */
-.preview-frame {
+.preview-frame,
+.shop-root {
   --space-xs: calc(var(--p-space-2) * var(--t-density));
   --space-sm: calc(var(--p-space-3) * var(--t-density));
   --space-md: calc(var(--p-space-4) * var(--t-density));
@@ -186,12 +205,14 @@
 }
 
 /* Standard header - logo left, nav center, cart right */
-.preview-frame[data-header="standard"] .shop-header {
+.preview-frame[data-header="standard"] .shop-header,
+.shop-root[data-header="standard"] .shop-header {
   justify-content: space-between;
 }
 
 /* Centered header - logo on top, nav and cart on same row below */
-.preview-frame[data-header="centered"] .shop-header {
+.preview-frame[data-header="centered"] .shop-header,
+.shop-root[data-header="centered"] .shop-header {
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem 1.5rem;
@@ -199,47 +220,56 @@
   padding-bottom: 1.5rem;
 }
 
-.preview-frame[data-header="centered"] .shop-logo {
+.preview-frame[data-header="centered"] .shop-logo,
+.shop-root[data-header="centered"] .shop-logo {
   width: 100%;
   justify-content: center;
   text-align: center;
 }
 
-.preview-frame[data-header="centered"] .shop-nav {
+.preview-frame[data-header="centered"] .shop-nav,
+.shop-root[data-header="centered"] .shop-nav {
   justify-content: center;
 }
 
-.preview-frame[data-header="centered"] .shop-cart {
+.preview-frame[data-header="centered"] .shop-cart,
+.shop-root[data-header="centered"] .shop-cart {
   /* Cart flows inline with nav, no absolute positioning */
 }
 
 /* Left header - logo and nav grouped left, cart right */
-.preview-frame[data-header="left"] .shop-header {
+.preview-frame[data-header="left"] .shop-header,
+.shop-root[data-header="left"] .shop-header {
   justify-content: flex-start;
   gap: 2rem;
 }
 
-.preview-frame[data-header="left"] .shop-cart {
+.preview-frame[data-header="left"] .shop-cart,
+.shop-root[data-header="left"] .shop-cart {
   margin-left: auto;
 }
 
 /* Sticky header */
-.preview-frame[data-sticky="true"] .shop-header {
+.preview-frame[data-sticky="true"] .shop-header,
+.shop-root[data-sticky="true"] .shop-header {
   position: sticky;
   top: 0;
   z-index: 50;
 }
 
 /* Layout Width */
-.preview-frame[data-layout="contained"] .max-w-7xl {
+.preview-frame[data-layout="contained"] .max-w-7xl,
+.shop-root[data-layout="contained"] .max-w-7xl {
   max-width: 1024px;
 }
 
-.preview-frame[data-layout="wide"] .max-w-7xl {
+.preview-frame[data-layout="wide"] .max-w-7xl,
+.shop-root[data-layout="wide"] .max-w-7xl {
   max-width: 1280px;
 }
 
-.preview-frame[data-layout="full"] .max-w-7xl {
+.preview-frame[data-layout="full"] .max-w-7xl,
+.shop-root[data-layout="full"] .max-w-7xl {
   max-width: 100%;
   padding-left: 2rem;
   padding-right: 2rem;
@@ -247,22 +277,30 @@
 
 /* Card Shadow */
 .preview-frame[data-shadow="none"] .product-card,
-.preview-frame[data-shadow="none"] .category-card {
+.shop-root[data-shadow="none"] .product-card,
+.preview-frame[data-shadow="none"] .category-card,
+.shop-root[data-shadow="none"] .category-card {
   box-shadow: none;
 }
 
 .preview-frame[data-shadow="sm"] .product-card,
-.preview-frame[data-shadow="sm"] .category-card {
+.shop-root[data-shadow="sm"] .product-card,
+.preview-frame[data-shadow="sm"] .category-card,
+.shop-root[data-shadow="sm"] .category-card {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
 .preview-frame[data-shadow="md"] .product-card,
-.preview-frame[data-shadow="md"] .category-card {
+.shop-root[data-shadow="md"] .product-card,
+.preview-frame[data-shadow="md"] .category-card,
+.shop-root[data-shadow="md"] .category-card {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
 
 .preview-frame[data-shadow="lg"] .product-card,
-.preview-frame[data-shadow="lg"] .category-card {
+.shop-root[data-shadow="lg"] .product-card,
+.preview-frame[data-shadow="lg"] .category-card,
+.shop-root[data-shadow="lg"] .category-card {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
 }
 
@@ -271,79 +309,99 @@
    ============================================= */
 
 /* Density - apply to product grids */
-.preview-frame .product-grid {
+.preview-frame .product-grid,
+.shop-root .product-grid {
   gap: var(--space-lg, 1.5rem);
 }
 
-.preview-frame[data-density="spacious"] .product-grid {
+.preview-frame[data-density="spacious"] .product-grid,
+.shop-root[data-density="spacious"] .product-grid {
   gap: calc(var(--space-lg, 1.5rem) * 1.25);
 }
 
-.preview-frame[data-density="compact"] .product-grid {
+.preview-frame[data-density="compact"] .product-grid,
+.shop-root[data-density="compact"] .product-grid {
   gap: calc(var(--space-lg, 1.5rem) * 0.75);
 }
 
 /* Density also affects card padding */
-.preview-frame .product-card > div:last-child {
+.preview-frame .product-card > div:last-child,
+.shop-root .product-card > div:last-child {
   padding: var(--space-md, 1rem);
 }
 
-.preview-frame[data-density="spacious"] .product-card > div:last-child {
+.preview-frame[data-density="spacious"] .product-card > div:last-child,
+.shop-root[data-density="spacious"] .product-card > div:last-child {
   padding: calc(var(--space-md, 1rem) * 1.25);
 }
 
-.preview-frame[data-density="compact"] .product-card > div:last-child {
+.preview-frame[data-density="compact"] .product-card > div:last-child,
+.shop-root[data-density="compact"] .product-card > div:last-child {
   padding: calc(var(--space-md, 1rem) * 0.75);
 }
 
 /* Product Text Alignment - targets the product info area inside cards */
-.preview-frame .product-card > div:last-child {
+.preview-frame .product-card > div:last-child,
+.shop-root .product-card > div:last-child {
   text-align: var(--t-product-text-align, left);
 }
 
 /* Image Aspect Ratio - targets the image container inside product cards */
-.preview-frame .product-card .product-image-container {
+.preview-frame .product-card .product-image-container,
+.shop-root .product-card .product-image-container {
   aspect-ratio: var(--t-image-aspect-ratio, 1 / 1);
 }
 
 /* Font Size Scale - applied to base font (16px is accessible minimum) */
-.preview-frame {
+.preview-frame,
+.shop-root {
   font-size: calc(16px * var(--t-font-size-scale, 1));
 }
 
 /* Heading Weight Override - takes precedence over typography preset */
 .preview-frame h1,
+.shop-root h1,
 .preview-frame h2,
+.shop-root h2,
 .preview-frame h3,
+.shop-root h3,
 .preview-frame h4,
+.shop-root h4,
 .preview-frame h5,
-.preview-frame h6 {
+.shop-root h5,
+.preview-frame h6,
+.shop-root h6 {
   font-weight: var(--t-heading-weight-override, var(--t-heading-weight, 600)) !important;
 }
 
 /* Layout Max Width - applied via data attribute for better specificity */
-.preview-frame[data-layout="contained"] .max-w-7xl {
+.preview-frame[data-layout="contained"] .max-w-7xl,
+.shop-root[data-layout="contained"] .max-w-7xl {
   max-width: var(--t-layout-max-width, 1100px);
 }
 
-.preview-frame[data-layout="wide"] .max-w-7xl {
+.preview-frame[data-layout="wide"] .max-w-7xl,
+.shop-root[data-layout="wide"] .max-w-7xl {
   max-width: var(--t-layout-max-width, 1400px);
 }
 
-.preview-frame[data-layout="full"] .max-w-7xl {
+.preview-frame[data-layout="full"] .max-w-7xl,
+.shop-root[data-layout="full"] .max-w-7xl {
   max-width: var(--t-layout-max-width, 100%);
 }
 
 /* Button Style - using data attribute approach */
 /* Outline button style */
-.preview-frame[data-button-style="outline"] button[style*="background-color: hsl(var(--t-accent"] {
+.preview-frame[data-button-style="outline"] button[style*="background-color: hsl(var(--t-accent"],
+.shop-root[data-button-style="outline"] button[style*="background-color: hsl(var(--t-accent"] {
   background-color: transparent !important;
   color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)) !important;
   border: 2px solid hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)) !important;
 }
 
 /* Soft button style */
-.preview-frame[data-button-style="soft"] button[style*="background-color: hsl(var(--t-accent"] {
+.preview-frame[data-button-style="soft"] button[style*="background-color: hsl(var(--t-accent"],
+.shop-root[data-button-style="soft"] button[style*="background-color: hsl(var(--t-accent"] {
   background-color: hsl(var(--t-accent-h) var(--t-accent-s) 90%) !important;
   color: hsl(var(--t-accent-h) var(--t-accent-s) 30%) !important;
   border: 2px solid transparent !important;
@@ -403,24 +461,30 @@
 /* Applied to interactive elements on hover for visual feedback */
 
 /* Links in body text */
-.preview-frame a:not([class*="btn"]):not([class*="button"]):not(.product-card):not(.nav-link):hover {
+.preview-frame a:not([class*="btn"]):not([class*="button"]):not(.product-card):not(.nav-link):hover,
+.shop-root a:not([class*="btn"]):not([class*="button"]):not(.product-card):not(.nav-link):hover {
   color: var(--t-secondary-accent, var(--t-text-primary));
 }
 
 /* Product card hover effect - subtle accent border */
-.preview-frame .product-card:hover {
+.preview-frame .product-card:hover,
+.shop-root .product-card:hover {
   border-color: var(--t-secondary-accent, var(--t-border-default)) !important;
 }
 
 /* Button hover states - darken or use secondary accent */
 .preview-frame button:hover,
-.preview-frame [role="button"]:hover {
+.shop-root button:hover,
+.preview-frame [role="button"]:hover,
+.shop-root [role="button"]:hover {
   filter: brightness(0.95);
 }
 
 /* Nav links hover */
 .preview-frame .nav-link:hover,
-.preview-frame nav a:hover {
+.shop-root .nav-link:hover,
+.preview-frame nav a:hover,
+.shop-root nav a:hover {
   color: var(--t-secondary-accent, var(--t-text-primary));
 }
 
@@ -621,25 +685,32 @@
 .preview-frame .text-3xl { font-size: var(--t-heading-lg) !important; }
 .preview-frame .text-4xl { font-size: var(--t-heading-xl) !important; }
 .preview-frame .text-5xl,
+.shop-root .text-5xl,
 .preview-frame .text-6xl,
+.shop-root .text-6xl,
 .preview-frame .text-7xl,
+.shop-root .text-7xl,
 .preview-frame .text-8xl,
+.shop-root .text-8xl,
 .preview-frame .text-9xl { font-size: var(--t-heading-display) !important; }
 
 /* =============================================
    Filter Pills (Collection Page)
    ============================================= */
 
-.preview-frame .filter-pills-container {
+.preview-frame .filter-pills-container,
+.shop-root .filter-pills-container {
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
 }
 
-.preview-frame .filter-pills-container::-webkit-scrollbar {
+.preview-frame .filter-pills-container::-webkit-scrollbar,
+.shop-root .filter-pills-container::-webkit-scrollbar {
   display: none;
 }
 
-.preview-frame .filter-pill {
+.preview-frame .filter-pill,
+.shop-root .filter-pill {
   flex-shrink: 0;
   padding: 0.5rem 1rem;
   font-size: var(--t-text-small);
@@ -653,18 +724,21 @@
   white-space: nowrap;
 }
 
-.preview-frame .filter-pill:hover {
+.preview-frame .filter-pill:hover,
+.shop-root .filter-pill:hover {
   background-color: var(--t-surface-sunken);
   color: var(--t-text-primary);
 }
 
-.preview-frame .filter-pill-active {
+.preview-frame .filter-pill-active,
+.shop-root .filter-pill-active {
   background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
   color: var(--t-text-inverse);
   border-color: transparent;
 }
 
-.preview-frame .filter-pill-active:hover {
+.preview-frame .filter-pill-active:hover,
+.shop-root .filter-pill-active:hover {
   background-color: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 5%));
   color: var(--t-text-inverse);
 }

lib/simpleshop_theme_web/components/layouts/shop.html.heex

@@ -5,8 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
     <.live_title><%= assigns[:page_title] || @theme_settings.site_name %></.live_title>
-    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
-    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:opsz,wght@9..40,400..700&family=Fraunces:opsz,wght@9..144,400..700&family=Inter:wght@300..700&family=Manrope:wght@400..700&family=Outfit:wght@300..600&family=Playfair+Display:wght@400;500;700&family=Raleway:wght@300;400;500&family=Source+Serif+4:wght@400;600&family=Space+Grotesk:wght@400..600&family=Work+Sans:wght@300..600&display=swap"
+      rel="stylesheet"
+    />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
     </script>
     <!-- Generated theme CSS (only active values, not all variants) -->
     <style id="theme-css"><%= Phoenix.HTML.raw(@generated_css) %></style>