feat: enhance theme customization with layout controls and real product images

Add comprehensive layout and styling controls including header layout options (standard, centered, left), content width settings (contained, wide, full), and card shadow levels. Update all theme presets with these new settings. Replace placeholder images with real Unsplash product and category images for more realistic previews. Add announcement bar and sticky header toggle options for enhanced header customization.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

assets/css/theme-layer2-attributes.css

@@ -63,7 +63,7 @@
 .preview-frame[data-typography="editorial"] {
   --t-font-heading: var(--p-font-fraunces);
   --t-font-body: var(--p-font-source);
-  --t-heading-weight: 600;
+  --t-heading-weight: 700;
   --t-heading-tracking: -0.02em;
 }
 
@@ -171,9 +171,23 @@
   display: flex;
 }
 
+/* Standard header - logo left, nav center, cart right */
+.preview-frame[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 {
-  flex-direction: column;
-  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem 1.5rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.preview-frame[data-header="centered"] .shop-logo {
+  width: 100%;
+  justify-content: center;
   text-align: center;
 }
 
@@ -181,6 +195,126 @@
   justify-content: center;
 }
 
-.preview-frame[data-header="minimal"] .shop-nav {
-  display: none !important;
+.preview-frame[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 {
+  justify-content: flex-start;
+  gap: 2rem;
+}
+
+.preview-frame[data-header="left"] .shop-cart {
+  margin-left: auto;
+}
+
+/* Sticky header */
+.preview-frame[data-sticky="true"] .shop-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+/* Layout Width */
+.preview-frame[data-layout="contained"] .max-w-7xl {
+  max-width: 1024px;
+}
+
+.preview-frame[data-layout="wide"] .max-w-7xl {
+  max-width: 1280px;
+}
+
+.preview-frame[data-layout="full"] .max-w-7xl {
+  max-width: 100%;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+/* Card Shadow */
+.preview-frame[data-shadow="none"] .product-card,
+.preview-frame[data-shadow="none"] .category-card {
+  box-shadow: none;
+}
+
+.preview-frame[data-shadow="sm"] .product-card,
+.preview-frame[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 {
+  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 {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+/* Product Badges */
+.product-badge {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  border-radius: var(--t-radius-sm, 4px);
+  z-index: 10;
+}
+
+.badge-sale {
+  background-color: var(--t-sale-color, #dc2626);
+  color: #ffffff;
+}
+
+.badge-new {
+  background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
+  color: var(--t-text-inverse);
+}
+
+/* Product Hover Image */
+.product-image-container {
+  position: relative;
+}
+
+.product-image-hover {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.product-card:hover .product-image-hover {
+  opacity: 1;
+}
+
+.product-card:hover .product-image-primary {
+  opacity: 0;
+}
+
+/* Social Links */
+.social-link:hover {
+  background-color: var(--t-surface-sunken);
+  color: var(--t-text-primary);
+}
+
+/* Header Icon Buttons */
+.header-icon-btn:hover {
+  background-color: var(--t-surface-sunken);
+  color: var(--t-text-primary);
+}
+
+/* Search Modal Animation */
+.search-modal {
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+.search-modal-content {
+  transform: translateY(0);
+  transition: transform 0.2s ease;
 }

assets/css/theme-semantic.css

@@ -3,9 +3,12 @@
    Semantic aliases for easy usage
    ======================================== */
 
-:root {
+.preview-frame, .shop-root {
   /* Accent color - HSL components set dynamically by CSS generator */
-  /* Derived accent colors use the dynamic HSL values */
+  --t-accent-h: 24;
+  --t-accent-s: 95%;
+  --t-accent-l: 53%;
+
   --t-accent: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
   --t-accent-hover: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 8%));
   --t-accent-subtle: hsl(var(--t-accent-h) 40% 95%);
@@ -15,8 +18,9 @@
   --t-secondary-accent: #ea580c;
   --t-sale-color: #dc2626;
 
-  /* Density multiplier */
-  --t-density: 1;
+  /* Font size scale */
+  --t-font-size-scale: 1;
+  --t-heading-weight: 600;
 
   /* Layout */
   --t-layout-max-width: 1400px;
@@ -48,6 +52,14 @@
   --weight-heading: var(--t-heading-weight);
   --tracking-heading: var(--t-heading-tracking);
 
+  /* Density-aware spacing */
+  --space-xs: calc(var(--p-space-2) * var(--t-density));
+  --space-sm: calc(var(--p-space-3) * var(--t-density));
+  --space-md: calc(var(--p-space-4) * var(--t-density));
+  --space-lg: calc(var(--p-space-6) * var(--t-density));
+  --space-xl: calc(var(--p-space-8) * var(--t-density));
+  --space-2xl: calc(var(--p-space-12) * var(--t-density));
+
   /* Border radius */
   --radius-button: var(--t-radius-button);
   --radius-card: var(--t-radius-card);
@@ -59,7 +71,7 @@
     0 1px 2px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5)),
     0 1px 3px hsl(var(--p-shadow-color) / var(--p-shadow-strength));
   --shadow-md:
-    0 2px 4px hsl(var(--p-shadow-color) / calc(--p-shadow-strength) * 0.5)),
+    0 2px 4px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5)),
     0 4px 8px hsl(var(--p-shadow-color) / var(--p-shadow-strength)),
     0 8px 16px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5));
 
@@ -68,3 +80,8 @@
   --transition-normal: var(--p-duration-normal) var(--p-ease-out);
   --transition-bounce: var(--p-duration-normal) var(--p-ease-out-back);
 }
+
+/* Dark mode accent-subtle override */
+.preview-frame[data-mood="dark"], .shop-root[data-mood="dark"] {
+  --t-accent-subtle: hsl(var(--t-accent-h) 30% 15%);
+}