update product details

Bump version 0.0.19
Log PUBLISH payload and post full route object
2026-06-03 13:41:04 -04:00 · 2026-05-11 23:42:58 -04:00 · 2026-05-11 23:32:54 -04:00 · 2026-05-11 23:31:23 -04:00 · 2026-05-11 23:13:02 -04:00 · 2026-05-11 21:46:30 -04:00
77 changed files with 5135 additions and 2150 deletions
--- a/app.schema.json
+++ b/app.schema.json
@@ -2,20 +2,20 @@
  "/": {
    "root": {
      "props": {
-        "title": "Maison — Considered essentials",
-        "headerFont": "Playfair Display",
+        "title": "Pulse — Made to Move",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
        "bodyFont": "Inter",
-        "primaryColor": "#0a0a0a",
-        "secondaryColor": "#64748B",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
        "accentColor": "#f5f5f5",
        "bgColor": "#ffffff",
-        "fgColor": "#0a0a0a",
+        "fgColor": "#111111",
        "mutedColor": "#f5f5f5",
-        "roundedness": "md",
-        "radius": "md",
-        "shadowLevel": "sm",
-        "shadow": "sm",
-        "maxWidth": "xl"
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
      }
    },
    "content": [
@@ -23,11 +23,12 @@
        "type": "navigation",
        "props": {
          "id": "nav-home",
-          "brand": "Maison",
+          "brand": "PULSE",
          "links": [
-            { "label": "Shop", "href": "/collections" },
-            { "label": "Lookbook", "href": "/lookbook" },
-            { "label": "Journal", "href": "/journal" },
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
            { "label": "About", "href": "/about" }
          ],
          "showSearch": "yes",
@@ -42,23 +43,25 @@
        "props": {
          "id": "hero-home",
          "tagline": "Spring 2026",
-          "heading": "Made for the way you move",
-          "subheading": "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
-          "primaryCta": { "label": "Shop the collection", "href": "/collections" },
-          "secondaryCta": { "label": "Our story", "href": "/about" },
-          "imageUrl": "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
+          "heading": "Made to move.",
+          "subheading": "Performance gear engineered for athletes who train like they mean it. Built light. Built honest. Built for the next mile.",
+          "buttons": [
+            { "label": "Shop the kit", "href": "/search", "variant": "primary" },
+            { "label": "Our story", "href": "/about", "variant": "secondary" }
+          ],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/athletic-assortment.jpeg",
          "align": "left",
          "height": "lg",
-          "tone": "dark"
+          "tone": "light"
        }
      },
      {
        "type": "products-carousel",
        "props": {
          "id": "carousel-home",
-          "tagline": "New",
-          "heading": "Just dropped",
-          "subheading": "Fresh additions to the lineup.",
+          "tagline": "Just dropped",
+          "heading": "New arrivals",
+          "subheading": "Fresh kit for the season ahead.",
          "limit": 12,
          "slidesPerView": "4",
          "ctaLabel": "Shop new",
@@ -66,60 +69,92 @@
        }
      },
      {
-        "type": "featured-product",
+        "type": "hero",
        "props": {
-          "id": "featured-home",
-          "product": null,
-          "tagline": "Featured",
-          "ctaLabel": "Add to bag",
+          "id": "cover-home-performance",
+          "tagline": "Performance Series",
+          "heading": "Engineered to outlast you.",
+          "subheading": "Tested on track, trail, and treadmill. Every piece earns its place.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-performance.jpeg",
          "align": "left",
-          "tone": "muted"
-        }
-      },
-      {
-        "type": "collection-grid",
-        "props": {
-          "id": "collections-home",
-          "tagline": "Shop by collection",
-          "heading": "Curated edits",
-          "subheading": "Bundles built around the way you actually live.",
-          "layout": "tiles",
-          "limit": 6
+          "height": "lg",
+          "tone": "light"
        }
      },
      {
        "type": "features",
        "props": {
          "id": "features-home",
-          "tagline": "Why us",
-          "heading": "Built with intention",
-          "subheading": "A small set of values that shape every piece we make.",
+          "tagline": "Why Pulse",
+          "heading": "Three rules. No exceptions.",
+          "subheading": "",
          "columns": "3",
          "items": [
-            { "title": "Natural fibers", "body": "Linen, organic cotton, and merino — sourced from mills with traceable supply chains." },
-            { "title": "Small batches", "body": "Made in considered quantities so nothing goes to waste." },
-            { "title": "Built to last", "body": "Reinforced seams and finishes that age into something better." }
+            {
+              "title": "Engineered",
+              "body": "Every fabric, every seam, every fit decision starts with athletes on a track. Lab work comes after."
+            },
+            {
+              "title": "Field tested",
+              "body": "Twelve weeks. Two race blocks. One full season. Nothing ships without that on the record."
+            },
+            {
+              "title": "Guaranteed",
+              "body": "If it fails before its time, we replace it. If it fails on race day, we apologize and replace it."
+            }
          ]
        }
      },
+      {
+        "type": "hero",
+        "props": {
+          "id": "cover-home-discipline",
+          "tagline": "Discipline",
+          "heading": "The work happens before sunrise.",
+          "subheading": "We make the kit. You do the work. Five-thirty isn't early — it's the only honest hour.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-discipline.jpeg",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "collection-grid",
+        "props": {
+          "id": "collections-home",
+          "tagline": "Shop by sport",
+          "heading": "Built for what you actually do.",
+          "subheading": "",
+          "layout": "tiles",
+          "limit": 6
+        }
+      },
      {
        "type": "testimonials",
        "props": {
          "id": "testimonials-home",
-          "tagline": "Reviews",
-          "heading": "What our customers say",
+          "tagline": "From the field",
+          "heading": "Athletes on Pulse",
          "items": [
            {
-              "quote": "I've been wearing the same linen shirt for two summers now and it's somehow gotten better with every wash.",
-              "author": "Mara K.",
-              "role": "Berlin",
-              "avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80"
+              "quote": "Took the shell to Chamonix and back. Still smells, still works, still cheaper than therapy.",
+              "author": "Mateo S.",
+              "role": "Sub-3 marathoner / Boulder",
+              "avatar": ""
            },
            {
-              "quote": "Considered cuts, neutral palette, real fabric. Exactly what I want when I'm getting dressed in the dark.",
-              "author": "Theo R.",
-              "role": "Brooklyn",
-              "avatar": "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=200&q=80"
+              "quote": "I have one drawer of running gear. The Pulse half is the half I actually wear.",
+              "author": "Priya N.",
+              "role": "Ultra runner / Portland",
+              "avatar": ""
+            },
+            {
+              "quote": "Wore the shorts for an entire 16-week block. They held. That's the whole review.",
+              "author": "Jonas R.",
+              "role": "Track coach / Berlin",
+              "avatar": ""
            }
          ]
        }
@@ -128,12 +163,12 @@
        "type": "newsletter-cta",
        "props": {
          "id": "newsletter-home",
-          "tagline": "Stay in the loop",
-          "heading": "Letters from the studio",
-          "subheading": "New collections, mill stories, and the occasional invitation. Twice a month.",
+          "tagline": "Field notes",
+          "heading": "Weekly notes from the lab.",
+          "subheading": "Test results, training blocks, gear we cut and gear we kept. Every Monday at 5:30am.",
          "buttonLabel": "Subscribe",
          "endpoint": "",
-          "imageUrl": "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1800&q=80",
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/newsletter.png",
          "layout": "split"
        }
      },
@@ -141,23 +176,25 @@
        "type": "footer",
        "props": {
          "id": "footer-home",
-          "brand": "Maison",
-          "tagline": "Considered essentials, made in small batches and built to last beyond the season.",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
          "columns": [
            {
              "title": "Shop",
              "links": [
-                { "label": "All", "href": "/collections" },
+                { "label": "All gear", "href": "/search" },
                { "label": "New", "href": "/collections/new" },
-                { "label": "Best sellers", "href": "/collections/best" }
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" },
+                { "label": "Sale", "href": "/collections/sale" }
              ]
            },
            {
              "title": "About",
              "links": [
                { "label": "Our story", "href": "/about" },
-                { "label": "Materials", "href": "/materials" },
-                { "label": "Journal", "href": "/journal" }
+                { "label": "The lab", "href": "/lab" },
+                { "label": "Athletes", "href": "/athletes" }
              ]
            },
            {
@@ -165,6 +202,7 @@
              "links": [
                { "label": "Shipping", "href": "/help/shipping" },
                { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" },
                { "label": "Contact", "href": "/contact" }
              ]
            },
@@ -178,34 +216,34 @@
          ],
          "social": [
            { "label": "Instagram", "href": "#" },
-            { "label": "Pinterest", "href": "#" },
-            { "label": "TikTok", "href": "#" }
+            { "label": "Strava", "href": "#" },
+            { "label": "YouTube", "href": "#" }
          ],
          "showNewsletter": "no",
-          "newsletterHeading": "Stay in touch",
+          "newsletterHeading": "",
          "newsletterEndpoint": "",
-          "copyright": "© 2026 Maison. All rights reserved."
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
        }
      }
    ]
  },
-    "/products/:handle": {
+  "/products/:handle": {
    "root": {
      "props": {
-        "title": "Default product",
-        "headerFont": "Playfair Display",
+        "title": "Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
        "bodyFont": "Inter",
-        "primaryColor": "#0a0a0a",
-        "secondaryColor": "#64748B",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
        "accentColor": "#f5f5f5",
        "bgColor": "#ffffff",
-        "fgColor": "#0a0a0a",
+        "fgColor": "#111111",
        "mutedColor": "#f5f5f5",
-        "roundedness": "md",
-        "radius": "md",
-        "shadowLevel": "sm",
-        "shadow": "sm",
-        "maxWidth": "xl"
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
      }
    },
    "content": [
@@ -213,11 +251,12 @@
        "type": "navigation",
        "props": {
          "id": "nav-product",
-          "brand": "Maison",
+          "brand": "PULSE",
          "links": [
-            { "label": "Shop", "href": "/collections" },
-            { "label": "Lookbook", "href": "/lookbook" },
-            { "label": "Journal", "href": "/journal" },
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
            { "label": "About", "href": "/about" }
          ],
          "showSearch": "yes",
@@ -238,8 +277,8 @@
        "type": "products-carousel",
        "props": {
          "id": "carousel-related",
-          "tagline": "You might also like",
-          "heading": "Related pieces",
+          "tagline": "Pairs well with",
+          "heading": "Complete the kit",
          "limit": 8,
          "slidesPerView": "4",
          "ctaLabel": "Shop all",
@@ -250,13 +289,137 @@
        "type": "footer",
        "props": {
          "id": "footer-product",
-          "brand": "Maison",
-          "tagline": "Considered essentials, made in small batches.",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
          "columns": [
            {
              "title": "Shop",
              "links": [
-                { "label": "All", "href": "/collections" },
+                { "label": "All gear", "href": "/search" },
+                { "label": "New", "href": "/collections/new" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/collections/:handle": {
+    "root": {
+      "props": {
+        "title": "Collection — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-collection",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "collection",
+        "props": {
+          "id": "collection-detail",
+          "collection": null,
+          "showDescription": "yes",
+          "showCoverImage": "yes",
+          "customCoverImage": "",
+          "columns": "4",
+          "limit": 24,
+          "defaultSort": "BEST_SELLING",
+          "showAvailability": "yes",
+          "showPriceRange": "yes",
+          "showProductType": "yes",
+          "productTypeOptions": [
+            { "label": "Tops" },
+            { "label": "Shorts" },
+            { "label": "Tights" },
+            { "label": "Outerwear" },
+            { "label": "Shoes" },
+            { "label": "Accessories" }
+          ],
+          "showVendor": "no",
+          "vendorOptions": [],
+          "showTags": "no",
+          "tagOptions": [],
+          "showColor": "yes",
+          "colorOptions": [
+            { "label": "Black", "color": "#111111" },
+            { "label": "White", "color": "#ffffff" },
+            { "label": "Grey", "color": "#707072" },
+            { "label": "Volt", "color": "#d6ff3f" },
+            { "label": "Sodium", "color": "#fa5400" }
+          ],
+          "showStyle": "no",
+          "styleOptions": [],
+          "showSize": "yes",
+          "sizeOptions": [
+            { "label": "XS" },
+            { "label": "S" },
+            { "label": "M" },
+            { "label": "L" },
+            { "label": "XL" },
+            { "label": "XXL" }
+          ],
+          "showMaterial": "no",
+          "materialOptions": [],
+          "metafieldFilters": []
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-collection",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
                { "label": "New", "href": "/collections/new" }
              ]
            },
@@ -270,12 +433,271 @@
          ],
          "social": [
            { "label": "Instagram", "href": "#" },
-            { "label": "Pinterest", "href": "#" }
+            { "label": "Strava", "href": "#" }
          ],
          "showNewsletter": "no",
-          "newsletterHeading": "Stay in touch",
+          "newsletterHeading": "",
          "newsletterEndpoint": "",
-          "copyright": "© 2026 Maison. All rights reserved."
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/search": {
+    "root": {
+      "props": {
+        "title": "Shop — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-search",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "search-products",
+        "props": {
+          "id": "search-products",
+          "heading": "All gear.",
+          "subheading": "Filter by sport, fabric, fit, color. Or sort by what's been beaten the hardest.",
+          "columns": "4",
+          "limit": 24,
+          "showAvailability": "yes",
+          "showPriceRange": "yes",
+          "showProductType": "yes",
+          "showVendor": "no",
+          "showTags": "yes",
+          "metafieldFilters": [],
+          "defaultSort": "BEST_SELLING",
+          "productTypeOptions": [
+            { "label": "Tops" },
+            { "label": "Shorts" },
+            { "label": "Tights" },
+            { "label": "Outerwear" },
+            { "label": "Shoes" },
+            { "label": "Accessories" }
+          ],
+          "vendorOptions": [],
+          "tagOptions": [
+            { "label": "New" },
+            { "label": "Race day" },
+            { "label": "Field tested" },
+            { "label": "Sale" }
+          ]
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-search",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/about": {
+    "root": {
+      "props": {
+        "title": "About — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-about",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "hero",
+        "props": {
+          "id": "hero-about",
+          "tagline": "The lab",
+          "heading": "We don't make activewear. We make tools.",
+          "subheading": "Pulse started in a converted warehouse with three coaches, two athletes, and a whiteboard full of things they wished worked better. Eight years later, the whiteboard is still there. So is the standard.",
+          "buttons": [
+            { "label": "Shop the kit", "href": "/search", "variant": "primary" }
+          ],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/hero-about.png",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "features",
+        "props": {
+          "id": "features-about",
+          "tagline": "What we believe",
+          "heading": "Three rules. No exceptions.",
+          "subheading": "",
+          "columns": "3",
+          "items": [
+            {
+              "title": "Engineered",
+              "body": "Every fabric, every seam, every fit decision starts with athletes on a track. Lab work comes after, if at all."
+            },
+            {
+              "title": "Field tested",
+              "body": "Twelve weeks of training. Two race blocks. One full season. Nothing leaves the lab without that on the record."
+            },
+            {
+              "title": "Guaranteed",
+              "body": "If it fails before its time, we replace it. If it fails on race day, we apologize and replace it. That's the deal."
+            }
+          ]
+        }
+      },
+      {
+        "type": "hero",
+        "props": {
+          "id": "cover-about-performance",
+          "tagline": "Used up is the goal",
+          "heading": "Designed to be worn out, not preserved.",
+          "subheading": "If you're babying your kit, we did something wrong. Bring it back when it's done — we'll send the next one.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-performance.jpeg",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "newsletter-cta",
+        "props": {
+          "id": "newsletter-about",
+          "tagline": "Field notes",
+          "heading": "Weekly notes from the lab.",
+          "subheading": "Test results, training blocks, gear we cut and gear we kept. Every Monday at 5:30am.",
+          "buttonLabel": "Subscribe",
+          "endpoint": "",
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/newsletter.png",
+          "layout": "split"
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-about",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
+                { "label": "New", "href": "/collections/new" },
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" }
+              ]
+            },
+            {
+              "title": "About",
+              "links": [
+                { "label": "Our story", "href": "/about" },
+                { "label": "The lab", "href": "/lab" },
+                { "label": "Athletes", "href": "/athletes" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" },
+                { "label": "Contact", "href": "/contact" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" },
+            { "label": "YouTube", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
        }
      }
    ]
--- a/app/_components/editor-shell.tsx
+++ b/app/_components/editor-shell.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useMemo } from "react";
+import { Editor } from "@reacteditor/core";
+import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
+import type { UserConfig } from "@/config/types";
+
+export type EditorShellProps = {
+  config: UserConfig;
+  data: any;
+  routeKey?: string;
+};
+
+export function EditorShell({ config, data, routeKey }: EditorShellProps) {
+  const plugins = useMemo(() => [createTailwindCdnPlugin()], []);
+
+  const handlePublish = async (nextData: any, route?: any) => {
+    const resolved = route ?? (routeKey ? { key: routeKey } : undefined);
+    console.log({
+      type: "PUBLISH",
+      data: { data: nextData, route: JSON.stringify(resolved) },
+    });
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage(
+        { type: "PUBLISH", data: { data: nextData, route: resolved } },
+        "*",
+      );
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  };
+
+  return (
+    <div className="h-screen w-screen">
+      <Editor
+        config={config as any}
+        data={data}
+        plugins={plugins}
+        iframe={{ enabled: true }}
+        ui={{ leftSideBarVisible: false }}
+        onPublish={handlePublish}
+      />
+    </div>
+  );
+}
--- a/app/collections/[handle]/page.tsx
+++ b/app/collections/[handle]/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { collectionsConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function CollectionPage() {
+  const data = (schema as any)["/collections/:handle"];
+  return <Render config={collectionsConfig as any} data={data} />;
+}
--- a/app/editor/collections/[handle]/page.tsx
+++ b/app/editor/collections/[handle]/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { collectionsConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function CollectionEditorPage() {
+  const data = (schema as any)["/collections/:handle"];
+  return (
+    <EditorShell
+      config={collectionsConfig}
+      data={data}
+      routeKey="/collections/:handle"
+    />
+  );
+}
--- a/app/editor/page.tsx
+++ b/app/editor/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { homeConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function HomeEditorPage() {
+  const data = (schema as any)["/"];
+  return <EditorShell config={homeConfig} data={data} routeKey="/" />;
+}
--- a/app/editor/products/[handle]/page.tsx
+++ b/app/editor/products/[handle]/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { productConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function ProductEditorPage() {
+  const data = (schema as any)["/products/:handle"];
+  return (
+    <EditorShell
+      config={productConfig}
+      data={data}
+      routeKey="/products/:handle"
+    />
+  );
+}
--- a/app/editor/search/page.tsx
+++ b/app/editor/search/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { searchConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function SearchEditorPage() {
+  const data = (schema as any)["/search"];
+  return <EditorShell config={searchConfig} data={data} routeKey="/search" />;
+}
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,5 @@
@import "tailwindcss";
@import "tw-animate-css";
-@import "@fontsource-variable/geist";

@custom-variant dark (&:is(.dark *));

@@ -29,10 +28,10 @@
  --color-input: var(--input);
  --color-ring: var(--ring);

-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) * 0.5);
+  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) * 1.5);

  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
@@ -60,9 +59,9 @@
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6)
+  --radius-2xl: calc(var(--radius) * 2);
+  --radius-3xl: calc(var(--radius) * 3);
+  --radius-4xl: calc(var(--radius) * 4)
 }

 :root {
@@ -103,9 +102,16 @@
  --sidebar-ring: oklch(0.708 0 0);
 }

+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: var(--border);
+}
+
@layer base {
-  * { border-color: var(--border);
-    @apply border-border outline-ring/50; }
+  * { @apply outline-ring/50; }
  html, body { background-color: var(--background); color: var(--foreground); }
  body {
    font-family: var(--font-body), "Apple Color Emoji", "Segoe UI Emoji";
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import "@reacteditor/core/react-editor.css";
+import "@reacteditor/plugin-media/styles.css";
+import "@reacteditor/plugin-ai/styles.css";
+import "./globals.css";
+import { Providers } from "./providers";
+
+export const metadata = {
+  title: "Shopify Storefront",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { homeConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function HomePage() {
+  const data = (schema as any)["/"];
+  return <Render config={homeConfig as any} data={data} />;
+}
--- a/app/products/[handle]/page.tsx
+++ b/app/products/[handle]/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { productConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function ProductPage() {
+  const data = (schema as any)["/products/:handle"];
+  return <Render config={productConfig as any} data={data} />;
+}
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+import { ShopifyProvider } from "@/contexts/shopify-context";
+
+const SHOPIFY_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
+const STOREFRONT_TOKEN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+
+  return (
+    <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
+      {children}
+    </ShopifyProvider>
+  );
+}
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { searchConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function SearchPage() {
+  const data = (schema as any)["/search"];
+  return <Render config={searchConfig as any} data={data} />;
+}
--- a/components.json
+++ b/components.json
@@ -1,11 +1,11 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
-  "rsc": false,
+  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
-    "css": "src/globals.css",
+    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
--- a/components/Heading.tsx
+++ b/components/Heading.tsx
@@ -0,0 +1,117 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Typography, type TypographyVariant } from "@/components/Typography";
+
+export type HeadingSize = "sm" | "md" | "lg" | "xl";
+export type HeadingAlign = "left" | "center";
+export type HeadingTone = "default" | "light";
+
+type SizeMap = {
+  title: TypographyVariant;
+  subtitle: TypographyVariant;
+  taglineGap: string;
+  subtitleGap: string;
+};
+
+const sizeMap: Record<HeadingSize, SizeMap> = {
+  sm: {
+    title: "h4",
+    subtitle: "subtitle2",
+    taglineGap: "mb-2",
+    subtitleGap: "mt-2",
+  },
+  md: {
+    title: "h3",
+    subtitle: "subtitle1",
+    taglineGap: "mb-3",
+    subtitleGap: "mt-3",
+  },
+  lg: {
+    title: "h2",
+    subtitle: "subtitle1",
+    taglineGap: "mb-3",
+    subtitleGap: "mt-3",
+  },
+  xl: {
+    title: "h1",
+    subtitle: "subtitle1",
+    taglineGap: "mb-4",
+    subtitleGap: "mt-4",
+  },
+};
+
+const alignClasses: Record<HeadingAlign, string> = {
+  left: "items-start text-left",
+  center: "items-center text-center",
+};
+
+export type HeadingProps = {
+  tagline?: React.ReactNode;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  size?: HeadingSize;
+  align?: HeadingAlign;
+  tone?: HeadingTone;
+  className?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
+  taglineClassName?: string;
+  maxWidth?: string;
+};
+
+export function Heading({
+  tagline,
+  title,
+  subtitle,
+  size = "lg",
+  align = "left",
+  tone = "default",
+  className,
+  titleClassName,
+  subtitleClassName,
+  taglineClassName,
+  maxWidth,
+}: HeadingProps) {
+  if (!tagline && !title && !subtitle) return null;
+  const map = sizeMap[size];
+  const isLight = tone === "light";
+
+  return (
+    <div className={cn("flex flex-col", alignClasses[align], maxWidth, className)}>
+      {tagline ? (
+        <Typography
+          variant="caption"
+          className={cn(
+            map.taglineGap,
+            isLight && "text-background/70",
+            taglineClassName,
+          )}
+        >
+          {tagline}
+        </Typography>
+      ) : null}
+      {title ? (
+        <Typography
+          variant={map.title}
+          className={cn(isLight && "text-background", titleClassName)}
+        >
+          {title}
+        </Typography>
+      ) : null}
+      {subtitle ? (
+        <Typography
+          variant={map.subtitle}
+          className={cn(
+            map.subtitleGap,
+            isLight && "text-background/70",
+            subtitleClassName,
+          )}
+        >
+          {subtitle}
+        </Typography>
+      ) : null}
+    </div>
+  );
+}
+
+export default Heading;
--- a/components/ThemeProvider.tsx
+++ b/components/ThemeProvider.tsx
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef } from "react";

 export type ThemeProps = {
  headerFont?: string;
+  headerFontWeight?: string;
  bodyFont?: string;
  primaryColor?: string;
  primaryForegroundColor?: string;
@@ -13,31 +14,28 @@ export type ThemeProps = {
  mutedColor?: string;
  mutedForegroundColor?: string;
  borderColor?: string;
-  roundedness?: "none" | "sm" | "md" | "lg" | "xl" | "full";
-  radius?: "none" | "xs" | "sm" | "md" | "lg";
-  shadowLevel?: "none" | "sm" | "md" | "lg" | "xl";
-  shadow?: "none" | "sm" | "md" | "lg";
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  radius?: "none" | "sm" | "md" | "lg" | "xl";
+  shadow?: "none" | "sm" | "md" | "lg" | "xl";
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full";
 };

-const radiusMap: Record<NonNullable<ThemeProps["roundedness"]>, string> = {
+const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
  none: "0px",
  sm: "0.25rem",
  md: "0.5rem",
  lg: "0.75rem",
  xl: "1rem",
-  full: "9999px",
 };

-const radiusEnumMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
-  none: "0px",
-  xs: "0.125rem",
-  sm: "0.25rem",
-  md: "0.5rem",
-  lg: "0.75rem",
+const maxWidthMap: Record<NonNullable<ThemeProps["maxWidth"]>, string> = {
+  sm: "64rem",
+  md: "72rem",
+  lg: "80rem",
+  xl: "96rem",
+  full: "100%",
 };

-const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
+const shadowMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
  none: "0 0 #0000",
  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
  md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
@@ -45,26 +43,40 @@ const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
  xl: "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)",
 };

-const shadowEnumMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
-  none: "0 0 #0000",
-  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-  md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
-  lg: "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)",
-};
+function googleFontsHref(
+  headerFont?: string,
+  bodyFont?: string,
+  headerFontWeight?: string,
+): string | null {
+  const valid = (f?: string): f is string => !!f && f !== "system-ui";
+  const families: string[] = [];
+  const seen = new Set<string>();

-function googleFontsHref(headerFont?: string, bodyFont?: string): string | null {
-  const fonts = [headerFont, bodyFont].filter(
-    (f): f is string => !!f && f !== "system-ui"
-  );
-  if (fonts.length === 0) return null;
-  const families = Array.from(new Set(fonts))
-    .map((f) => `family=${encodeURIComponent(f)}:wght@400;500;600;700`)
-    .join("&");
-  return `https://fonts.googleapis.com/css2?${families}&display=swap`;
+  const headerWeight = headerFontWeight || "400";
+  const bodyWeights = "400;500;600;700";
+
+  if (valid(headerFont)) {
+    seen.add(headerFont);
+    // Header font uses the configured weight only — avoids HTTP 400 from
+    // Google Fonts when a single-weight family (e.g. Archivo Black) is paired
+    // with a multi-weight default request.
+    families.push(
+      `family=${encodeURIComponent(headerFont)}:wght@${headerWeight}`,
+    );
+  }
+  if (valid(bodyFont) && !seen.has(bodyFont)) {
+    seen.add(bodyFont);
+    families.push(
+      `family=${encodeURIComponent(bodyFont)}:wght@${bodyWeights}`,
+    );
+  }
+  if (families.length === 0) return null;
+  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=swap`;
 }

 export function ThemeProvider({
  headerFont,
+  headerFontWeight,
  bodyFont,
  primaryColor,
  primaryForegroundColor,
@@ -75,10 +87,9 @@ export function ThemeProvider({
  mutedColor,
  mutedForegroundColor,
  borderColor,
-  roundedness,
  radius,
-  shadowLevel,
  shadow,
+  maxWidth,
  children,
 }: ThemeProps & { children?: React.ReactNode }) {
  // Recompute CSS-variable map only when a relevant prop changes.
@@ -93,15 +104,16 @@ export function ThemeProvider({
    if (mutedColor) vars["--muted"] = mutedColor;
    if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
    if (borderColor) vars["--border"] = borderColor;
-    if (radius) vars["--radius"] = radiusEnumMap[radius];
-    else if (roundedness) vars["--radius"] = radiusMap[roundedness];
-    if (shadow) vars["--shadow"] = shadowEnumMap[shadow];
-    else if (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
+    if (radius) vars["--radius"] = radiusMap[radius];
+    if (shadow) vars["--shadow"] = shadowMap[shadow];
+    if (maxWidth) vars["--container-max-width"] = maxWidthMap[maxWidth];
    if (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
    if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
+    if (headerFontWeight) vars["--font-weight-header"] = headerFontWeight;
    return vars;
  }, [
    headerFont,
+    headerFontWeight,
    bodyFont,
    primaryColor,
    primaryForegroundColor,
@@ -112,10 +124,9 @@ export function ThemeProvider({
    mutedColor,
    mutedForegroundColor,
    borderColor,
-    roundedness,
    radius,
-    shadowLevel,
    shadow,
+    maxWidth,
  ]);

  // Imperatively push every CSS var onto :root inside the host document
@@ -145,20 +156,28 @@ export function ThemeProvider({
  }, [cssVars]);

  const fontsHref = useMemo(
-    () => googleFontsHref(headerFont, bodyFont),
-    [headerFont, bodyFont],
+    () => googleFontsHref(headerFont, bodyFont, headerFontWeight),
+    [headerFont, bodyFont, headerFontWeight],
  );

  // Plain CSS rules — applied directly, no Tailwind CDN runtime needed.
-  // Tailwind preflight resets h1..h6 to font-family: inherit, which would
-  // make headings pick up the body font. We override that here using the
-  // `--font-header` CSS var ThemeProvider sets per-page.
+  // Body font is set on `body` once and inherited by descendants (span, a,
+  // p, li, etc. don't need explicit rules — applying one to `span/a` would
+  // break heading children, anchors inside headings, and any element using
+  // `as="span"` to render a heading variant).
+  // Form controls have user-agent defaults, so they need an explicit override.
+  // Tailwind preflight resets h1..h6 to font-family: inherit, so we restore
+  // the heading font + weight here using the per-page CSS vars.
  const css = `
-    body, p, span, a, li, button, input, textarea, select {
+    body {
      font-family: var(--font-body), system-ui, -apple-system, sans-serif;
    }
+    button, input, textarea, select {
+      font-family: inherit;
+    }
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-header), system-ui, -apple-system, sans-serif;
+      font-weight: var(--font-weight-header, 600);
    }
  `;

@@ -169,6 +188,12 @@ export function ThemeProvider({
    @theme {
      --font-family-heading: var(--font-header), system-ui, -apple-system, sans-serif;
      --font-family-body: var(--font-body), system-ui, -apple-system, sans-serif;
+      --radius-sm: calc(var(--radius) * 0.5);
+      --radius-md: calc(var(--radius) * 0.75);
+      --radius-lg: var(--radius);
+      --radius-xl: calc(var(--radius) * 1.5);
+      --radius-2xl: calc(var(--radius) * 2);
+      --radius-3xl: calc(var(--radius) * 3);
    }
  `;

--- a/components/Typography.tsx
+++ b/components/Typography.tsx
@@ -15,17 +15,17 @@ export type TypographyVariant =
  | "caption";

 const sizeClasses: Record<TypographyVariant, string> = {
-  h1: "text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tight leading-[1.05]",
-  h2: "text-4xl md:text-5xl font-semibold tracking-tight leading-[1.1]",
-  h3: "text-3xl md:text-4xl font-semibold tracking-tight leading-tight",
-  h4: "text-2xl md:text-3xl font-semibold tracking-tight leading-snug",
-  h5: "text-xl md:text-2xl font-semibold leading-snug",
-  h6: "text-lg md:text-xl font-semibold leading-snug",
+  h1: "text-5xl md:text-6xl lg:text-7xl tracking-tight leading-[1.05]",
+  h2: "text-4xl md:text-5xl tracking-tight leading-[1.1]",
+  h3: "text-3xl md:text-4xl tracking-tight leading-tight",
+  h4: "text-2xl md:text-3xl tracking-tight leading-snug",
+  h5: "text-xl md:text-2xl leading-snug",
+  h6: "text-lg md:text-xl leading-snug",
  subtitle1: "text-lg md:text-xl leading-relaxed text-muted-foreground",
  subtitle2: "text-base md:text-lg leading-relaxed text-muted-foreground",
  body1: "text-lg leading-relaxed",
  body2: "text-base leading-relaxed",
-  caption: "text-sm leading-relaxed text-muted-foreground",
+  caption: "text-xs font-bold uppercase tracking-[0.2em] text-muted-foreground",
 };

 // Inline-style fallbacks so headings size correctly even when Tailwind
@@ -33,17 +33,17 @@ const sizeClasses: Record<TypographyVariant, string> = {
 // hasn't compiled utility classes yet. The Tailwind classes above still
 // apply on top once available (responsive breakpoints, leading, etc.).
 const sizeStyles: Record<TypographyVariant, React.CSSProperties> = {
-  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, fontWeight: 600, letterSpacing: "-0.02em" },
-  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  fontWeight: 600, letterSpacing: "-0.02em" },
-  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, fontWeight: 600, letterSpacing: "-0.015em" },
-  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  fontWeight: 600, letterSpacing: "-0.01em" },
-  h5: { fontSize: "1.5rem",   lineHeight: 1.25, fontWeight: 600 },
-  h6: { fontSize: "1.25rem",  lineHeight: 1.3,  fontWeight: 600 },
+  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, letterSpacing: "-0.02em" },
+  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  letterSpacing: "-0.02em" },
+  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, letterSpacing: "-0.015em" },
+  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  letterSpacing: "-0.01em" },
+  h5: { fontSize: "1.5rem",   lineHeight: 1.25 },
+  h6: { fontSize: "1.25rem",  lineHeight: 1.3 },
  subtitle1: { fontSize: "1.125rem", lineHeight: 1.6 },
  subtitle2: { fontSize: "1rem",     lineHeight: 1.6 },
  body1: { fontSize: "1.125rem", lineHeight: 1.6 },
  body2: { fontSize: "1rem",     lineHeight: 1.6 },
-  caption: { fontSize: "0.875rem", lineHeight: 1.5 },
+  caption: { fontSize: "0.75rem", lineHeight: 1.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase" },
 };

 const defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {
@@ -80,11 +80,22 @@ export function Typography<C extends keyof JSX.IntrinsicElements = "p">({
  const isHeading = variant.startsWith("h");
  const fontClass = isHeading ? "font-heading" : "font-body";

+  // Apply the heading font + weight inline so the styling holds even when
+  // the rendered element isn't h1–h6 (e.g. <span> via the `as` prop). The
+  // ThemeProvider's element-scoped CSS rule only matches real h-tags, and
+  // the `font-heading` Tailwind utility can't be relied on in CDN mode.
+  const fontStyles: React.CSSProperties = isHeading
+    ? {
+        fontFamily: "var(--font-header), system-ui, sans-serif",
+        fontWeight: "var(--font-weight-header, 600)",
+      }
+    : {};
+
  return React.createElement(
    Tag,
    {
      className: cn(fontClass, sizeClasses[variant], className),
-      style: { ...sizeStyles[variant], ...style },
+      style: { ...fontStyles, ...sizeStyles[variant], ...style },
      ...rest,
    },
    children,
--- a/components/commerce/cart-drawer.tsx
+++ b/components/commerce/cart-drawer.tsx
@@ -4,17 +4,34 @@ import React from 'react';
 import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
+import { Loader } from '@/components/ui/loader';
+import { X, ImageIcon, Minus, Plus } from 'lucide-react';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from '@/components/ui/empty';
 import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
-  SheetBody,
-  SheetFooter,
 } from '@/components/ui/sheet';

 const CartDrawer: React.FC = () => {
-  const { isOpen, closeCart, items, itemCount, totalAmount, checkoutUrl, loading, removeItem, updateItemQuantity } = useShopifyCart();
+  const {
+    isOpen,
+    closeCart,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    loading,
+    removeItem,
+    updateItemQuantity,
+  } = useShopifyCart();

  const handleCheckout = () => {
    if (checkoutUrl) {
@@ -22,42 +39,56 @@ const CartDrawer: React.FC = () => {
    }
  };

-  const getItemImage = (item: typeof items[0]) => {
+  const getItemImage = (item: (typeof items)[0]) => {
    return item.merchandise.image?.url;
  };

-  const getSelectedOptions = (item: typeof items[0]) => {
+  const getSelectedOptions = (item: (typeof items)[0]) => {
    return item.merchandise.selectedOptions ?? [];
  };

  return (
-    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()} side="right">
-      <SheetContent className="w-full sm:max-w-md">
+    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
+      <SheetContent
+        side="right"
+        className="w-full max-w-md"
+        showCloseButton={false}
+      >
        {/* Header */}
-        <SheetHeader>
-          <SheetTitle className="text-base">
-            Shopping Cart ({itemCount})
-          </SheetTitle>
+        <SheetHeader className="h-14 min-h-0 px-4 py-3 flex items-center border-b border-border">
+          <div className="flex items-center justify-between w-full">
+            <SheetTitle className="text-base">
+              Shopping Cart ({itemCount})
+            </SheetTitle>
+            <Button onClick={closeCart} variant="ghost" size="icon-sm">
+              <X size={20} />
+            </Button>
+          </div>
        </SheetHeader>

        {/* Cart Items */}
-        <SheetBody>
+        <div className="flex-1 overflow-y-auto px-6 py-4">
          {loading && items.length === 0 ? (
            <div className="flex items-center justify-center py-12">
              <Spinner size="lg" />
            </div>
          ) : items.length === 0 ? (
-            <div className="text-center py-12">
-              <i className="ri-shopping-cart-line text-6xl text-gray-300 mb-4 block"></i>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">Your cart is empty</h3>
-              <p className="text-gray-500 mb-6">Add some products to get started!</p>
-              <Button
-                onClick={closeCart}
-                className="font-heading"
-              >
-                Continue Shopping
-              </Button>
-            </div>
+            <Empty className="border-0">
+              <EmptyContent>
+                <EmptyHeader>
+                  <EmptyTitle>Your cart is empty</EmptyTitle>
+                  <EmptyDescription>
+                    Add some products to get started!
+                  </EmptyDescription>
+                </EmptyHeader>
+                <Button
+                  onClick={closeCart}
+                  variant="outline"
+                >
+                  Continue Shopping
+                </Button>
+              </EmptyContent>
+            </Empty>
          ) : (
            <div className="space-y-6">
              {items.map((item) => {
@@ -65,9 +96,12 @@ const CartDrawer: React.FC = () => {
                const selectedOptions = getSelectedOptions(item);

                return (
-                  <div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
+                  <div
+                    key={item.id}
+                    className="flex items-start space-x-4 pb-6 border-b border-border last:border-b-0"
+                  >
                    {/* Product Image */}
-                    <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
+                    <div className="w-20 h-20 bg-muted rounded-lg overflow-hidden flex-shrink-0">
                      {image ? (
                        <img
                          src={image}
@@ -75,25 +109,27 @@ const CartDrawer: React.FC = () => {
                          className="w-full h-full object-cover"
                        />
                      ) : (
-                        <div className="w-full h-full flex items-center justify-center text-gray-400">
-                          <i className="ri-image-line text-2xl"></i>
+                        <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+                          <ImageIcon size={24} />
                        </div>
                      )}
                    </div>

                    {/* Product Details */}
                    <div className="flex-1 min-w-0">
-                      <h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                      <h4 className="font-semibold text-foreground mb-1 line-clamp-2">
                        {item.merchandise.product.title}
                      </h4>

                      {/* Variant Info */}
                      {selectedOptions.length > 0 && (
-                        <div className="text-sm text-gray-500 mb-2">
+                        <div className="text-sm text-muted-foreground mb-2">
                          {selectedOptions.map((option, index) => (
                            <span key={option.name}>
                              {option.value}
-                              {index < selectedOptions.length - 1 ? ' / ' : ''}
+                              {index < selectedOptions.length - 1
+                                ? ' / '
+                                : ''}
                            </span>
                          ))}
                        </div>
@@ -101,27 +137,31 @@ const CartDrawer: React.FC = () => {

                      {/* Quantity Controls */}
                      <div className="flex items-center mt-3">
-                        <div className="flex items-center border border-gray-300 rounded-lg">
+                        <div className="flex items-center border border-border rounded-lg">
                          <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity - 1)
+                            }
                            variant="ghost"
                            size="icon-sm"
                            disabled={item.quantity <= 1 || loading}
                            className="h-7 w-7"
                          >
-                            <i className="ri-subtract-line text-sm"></i>
+                            <Minus size={14} />
                          </Button>
                          <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
                            {item.quantity}
                          </span>
                          <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity + 1)
+                            }
                            variant="ghost"
                            size="icon-sm"
                            disabled={loading}
                            className="h-7 w-7"
                          >
-                            <i className="ri-add-line text-sm"></i>
+                            <Plus size={14} />
                          </Button>
                        </div>
                      </div>
@@ -129,7 +169,7 @@ const CartDrawer: React.FC = () => {

                    {/* Price */}
                    <div className="flex-shrink-0">
-                      <span className="text-sm font-semibold text-gray-900">
+                      <span className="text-sm font-semibold text-foreground">
                        ${parseFloat(item.merchandise.price.amount).toFixed(2)}
                      </span>
                    </div>
@@ -141,9 +181,9 @@ const CartDrawer: React.FC = () => {
                        variant="ghost"
                        size="icon-sm"
                        disabled={loading}
-                        className="text-gray-400 hover:text-red-500"
+                        className="text-muted-foreground hover:text-foreground"
                      >
-                        <i className="ri-delete-bin-line text-lg"></i>
+                        <X size={18} />
                      </Button>
                    </div>
                  </div>
@@ -151,11 +191,11 @@ const CartDrawer: React.FC = () => {
              })}
            </div>
          )}
-        </SheetBody>
+        </div>

        {/* Footer - Checkout Section */}
        {items.length > 0 && (
-          <SheetFooter className="flex-col sm:flex-col sm:justify-start gap-0">
+          <div className="border-t border-border p-6">
            {/* Subtotal */}
            <div className="flex items-center justify-between mb-4">
              <span className="text-base font-semibold">Subtotal</span>
@@ -164,7 +204,7 @@ const CartDrawer: React.FC = () => {
              </span>
            </div>

-            <div className="text-sm text-gray-500 mb-4">
+            <div className="text-sm text-muted-foreground mb-4">
              Shipping and taxes calculated at checkout
            </div>

@@ -178,7 +218,7 @@ const CartDrawer: React.FC = () => {
              >
                {loading ? (
                  <span className="flex items-center justify-center space-x-2">
-                    <Spinner size="sm" />
+                    <Loader size={16} />
                    <span>Processing...</span>
                  </span>
                ) : (
@@ -186,15 +226,11 @@ const CartDrawer: React.FC = () => {
                )}
              </Button>

-              <Button
-                onClick={closeCart}
-                variant="link"
-                className="w-full"
-              >
+              <Button onClick={closeCart} variant="link" className="w-full">
                Continue Shopping
              </Button>
            </div>
-          </SheetFooter>
+          </div>
        )}
      </SheetContent>
    </Sheet>
--- a/components/commerce/collection-card.tsx
+++ b/components/commerce/collection-card.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router';
+import Link from 'next/link';
 import { Card, CardContent } from '@/components/ui/card';
+import { Typography } from '@/components/Typography';

 interface CollectionImage {
  url: string;
@@ -21,10 +22,10 @@ interface CollectionCardProps {

 const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
  return (
-    <Link to={`/collections/${collection.handle}`} className="block group">
+    <Link href={`/collections/${collection.handle}`} className="block group">
      <Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0">
        {/* Collection Image */}
-        <div className="aspect-video overflow-hidden bg-gray-100">
+        <div className="aspect-video overflow-hidden bg-muted">
          {collection.image ? (
            <img
              src={collection.image.url}
@@ -32,7 +33,7 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
            />
          ) : (
-            <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <div className="w-full h-full flex items-center justify-center text-muted-foreground">
              <i className="ri-folder-line text-6xl"></i>
            </div>
          )}
@@ -40,18 +41,21 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {

        {/* Collection Info */}
        <CardContent className="p-6">
-          <h3 className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-gray-600 transition-colors font-heading">
+          <Typography
+            variant="subtitle1"
+            className="mb-3 font-semibold tracking-tight text-foreground transition-colors group-hover:text-muted-foreground"
+          >
            {collection.title}
-          </h3>
+          </Typography>

          {collection.description && (
-            <p className="text-gray-600">
+            <p className="text-muted-foreground">
              {collection.description.substring(0, 100)}
              {collection.description.length > 100 ? '...' : ''}
            </p>
          )}

-          <div className="mt-4 text-black font-semibold group-hover:text-gray-600 transition-colors flex items-center">
+          <div className="mt-4 text-foreground font-semibold group-hover:text-muted-foreground transition-colors flex items-center">
            <span>View Collection</span>
            <i className="ri-arrow-right-s-line ml-2"></i>
          </div>
--- a/components/commerce/collection-detail.tsx
+++ b/components/commerce/collection-detail.tsx
@@ -64,18 +64,18 @@ const CollectionDetail: React.FC<{ handle?: string }> = ({ handle: handleProp })
  return (
    <div className="pt-4 pb-16">
      <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
          {title}
        </h2>

        {products.length === 0 ? (
          <div className="text-center py-12">
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
-              <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">
+            <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
+              <i className="ri-shopping-bag-line text-4xl text-muted-foreground mb-4"></i>
+              <h3 className="text-lg font-semibold text-foreground mb-2">
                No Products in Collection
              </h3>
-              <p className="text-gray-500">
+              <p className="text-muted-foreground">
                This collection doesn&apos;t have any products yet.
              </p>
            </div>
--- a/components/commerce/collection-grid.tsx
+++ b/components/commerce/collection-grid.tsx
@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import { shopifyFetch } from "@/services/shopify/client";
 import { GET_COLLECTIONS_QUERY } from "@/graphql/collections";
+import { Container } from "@/components/layout/Container";
 import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";

 export type CollectionGridProps = {
  tagline: string;
@@ -45,20 +47,16 @@ export function CollectionGrid({

  return (
    <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
-        <div className="mx-auto mb-12 max-w-2xl text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-12"
+          maxWidth="max-w-2xl"
+        />

        <div
          className={
@@ -73,7 +71,7 @@ export function CollectionGrid({
          ).map((c: CollectionRow) => (
            <Link
              key={c.id}
-              to={c.handle ? `/collections/${c.handle}` : "#"}
+              href={c.handle ? `/collections/${c.handle}` : "#"}
              className="group block"
            >
              <div
@@ -89,28 +87,33 @@ export function CollectionGrid({
                {isEditorial ? (
                  <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-8">
                    <div>
-                      <Typography variant="h4" className="text-white">
+                      <Typography
+                        variant="subtitle1"
+                        className="font-semibold tracking-tight text-white"
+                      >
                        {c.title}
                      </Typography>
                      <span className="mt-2 inline-flex text-xs uppercase tracking-[0.2em] text-white/80">
-                        Shop now →
+                        Shop now
                      </span>
                    </div>
                  </div>
                ) : null}
              </div>
              {!isEditorial ? (
-                <div className="mt-4 flex items-center justify-between">
-                  <h3 className="text-sm font-medium tracking-tight">{c.title}</h3>
-                  <span className="text-xs text-muted-foreground transition-opacity group-hover:opacity-100">
-                    →
-                  </span>
+                <div className="mt-4">
+                  <Typography
+                    variant="subtitle2"
+                    className="font-medium tracking-tight text-foreground"
+                  >
+                    {c.title}
+                  </Typography>
                </div>
              ) : null}
            </Link>
          ))}
        </div>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/commerce/collection.editor.tsx
+++ b/components/commerce/collection.editor.tsx
@@ -1,5 +1,7 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { FolderOpen } from "lucide-react";
+import { imageField } from "@reacteditor/plugin-media/field";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 import { CollectionView, type CollectionProps } from "@/components/commerce/collection";

 export function createCollectionEditor(opts: {
@@ -9,17 +11,240 @@ export function createCollectionEditor(opts: {
    label: "Collection page",
    icon: <FolderOpen size={16} />,
    category: "commerce",
-    defaultProps: { collection: null, showDescription: "no" },
+    defaultProps: {
+      collection: null,
+      showDescription: "yes",
+      showCoverImage: "yes",
+      customCoverImage: "",
+      columns: "4",
+      limit: 24,
+      defaultSort: "BEST_SELLING",
+      showAvailability: "yes",
+      showPriceRange: "yes",
+      showProductType: "no",
+      productTypeOptions: [],
+      showVendor: "no",
+      vendorOptions: [],
+      showTags: "no",
+      tagOptions: [],
+      showColor: "yes",
+      colorOptions: [
+        { label: "Black", color: "#000000" },
+        { label: "White", color: "#FFFFFF" },
+        { label: "Navy", color: "#1e3a5f" },
+      ],
+      showStyle: "no",
+      styleOptions: [],
+      showSize: "yes",
+      sizeOptions: [
+        { label: "XS" },
+        { label: "S" },
+        { label: "M" },
+        { label: "L" },
+        { label: "XL" },
+      ],
+      showMaterial: "no",
+      materialOptions: [],
+      metafieldFilters: [],
+    },
    fields: {
      collection: { label: "Collection", ...opts.collectionField },
      showDescription: {
        label: "Description",
        type: "radio",
        options: [
-          { label: "Hide description", value: "no" },
-          { label: "Show description", value: "yes" },
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
        ],
      },
+      showCoverImage: {
+        label: "Cover image",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      customCoverImage: {
+        label: "Custom cover image",
+        ...imageField({ adapter: frontendAiMediaAdapter }),
+      },
+      columns: {
+        label: "Columns",
+        type: "radio",
+        options: [
+          { label: "2", value: "2" },
+          { label: "3", value: "3" },
+          { label: "4", value: "4" },
+        ],
+      },
+      limit: { label: "Products per page", type: "number", min: 4, max: 48 },
+      defaultSort: {
+        label: "Default sort",
+        type: "select",
+        options: [
+          { label: "Best Selling", value: "BEST_SELLING" },
+          { label: "Newest", value: "CREATED" },
+          { label: "Price: Low to High", value: "PRICE" },
+          { label: "Alphabetical", value: "TITLE" },
+        ],
+      },
+      showAvailability: {
+        label: "Availability filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      showPriceRange: {
+        label: "Price range filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      showColor: {
+        label: "Color filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      colorOptions: {
+        label: "Colors",
+        type: "array",
+        defaultItemProps: { label: "", color: "#000000" },
+        getItemSummary: (it: any) => it?.label || "Color",
+        arrayFields: {
+          label: { label: "Color name", type: "text" },
+          color: { label: "Color", type: "color" },
+        },
+      },
+      showStyle: {
+        label: "Style filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      styleOptions: {
+        label: "Styles",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Style",
+        arrayFields: {
+          label: { label: "Style name", type: "text" },
+        },
+      },
+      showSize: {
+        label: "Size filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      sizeOptions: {
+        label: "Sizes",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Size",
+        arrayFields: {
+          label: { label: "Size name", type: "text" },
+        },
+      },
+      showMaterial: {
+        label: "Material filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      materialOptions: {
+        label: "Materials",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Material",
+        arrayFields: {
+          label: { label: "Material name", type: "text" },
+        },
+      },
+      showVendor: {
+        label: "Brand / vendor filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      vendorOptions: {
+        label: "Brands",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Brand",
+        arrayFields: {
+          label: { label: "Brand name", type: "text" },
+        },
+      },
+      showProductType: {
+        label: "Product type filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      productTypeOptions: {
+        label: "Product types",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Type",
+        arrayFields: {
+          label: { label: "Type name", type: "text" },
+        },
+      },
+      showTags: {
+        label: "Tags filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      tagOptions: {
+        label: "Tags",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Tag",
+        arrayFields: {
+          label: { label: "Tag name", type: "text" },
+        },
+      },
+      metafieldFilters: {
+        label: "Metafield filters",
+        type: "array",
+        defaultItemProps: { namespace: "", key: "", label: "", values: [{ label: "" }] },
+        getItemSummary: (it: any) => it?.label || it?.key || "Metafield",
+        arrayFields: {
+          namespace: { label: "Namespace", type: "text" },
+          key: { label: "Key", type: "text" },
+          label: { label: "Label", type: "text" },
+          values: {
+            label: "Values",
+            type: "array",
+            defaultItemProps: { label: "" },
+            getItemSummary: (v: any) => v?.label || "Value",
+            arrayFields: {
+              label: { label: "Value", type: "text" },
+            },
+          },
+        },
+      },
    },
    render: (props) => <CollectionView {...props} />,
  };
--- a/components/commerce/collection.tsx
+++ b/components/commerce/collection.tsx
@@ -1,76 +1,554 @@
-import type { ShopifyCollection } from "@reacteditor/field-shopify";
-import { useCollectionProducts } from "@/hooks/use-shopify-collections";
-import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
-import { Skeleton } from "@/components/ui/skeleton";
+import { useState, useCallback } from 'react';
+import { useParams } from 'next/navigation';
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
+import type { ShopifyCollection } from '@reacteditor/field-shopify';
+import {
+  useCollectionProducts,
+  type CollectionSortKey,
+  type ProductFilter,
+} from '@/hooks/use-shopify-collections';
+import { ProductCard } from './product-card';
+import { Typography } from '@/components/Typography';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Container } from '@/components/layout/Container';
+import { cn } from '@/lib/utils';
+
+type FilterOption = { label: string };
+type ColorOption = { label: string; color: string };

 export type CollectionProps = {
  collection: ShopifyCollection | null;
-  showDescription: "yes" | "no";
+  showDescription: 'yes' | 'no';
+  showCoverImage: 'yes' | 'no';
+  customCoverImage: string;
+  columns: '2' | '3' | '4';
+  limit: number;
+  defaultSort: CollectionSortKey;
+  showAvailability: 'yes' | 'no';
+  showPriceRange: 'yes' | 'no';
+  showProductType: 'yes' | 'no';
+  productTypeOptions: FilterOption[];
+  showVendor: 'yes' | 'no';
+  vendorOptions: FilterOption[];
+  showTags: 'yes' | 'no';
+  tagOptions: FilterOption[];
+  showColor: 'yes' | 'no';
+  colorOptions: ColorOption[];
+  showStyle: 'yes' | 'no';
+  styleOptions: FilterOption[];
+  showSize: 'yes' | 'no';
+  sizeOptions: FilterOption[];
+  showMaterial: 'yes' | 'no';
+  materialOptions: FilterOption[];
+  metafieldFilters: { namespace: string; key: string; label: string; values: { label: string }[] }[];
 };

-export function CollectionView({
-  collection: selected,
-  showDescription,
-}: CollectionProps) {
-  const handle = selected?.handle ?? "";
-  const { collection, loading } = useCollectionProducts(handle, { first: 24 });
+const SORT_OPTIONS: { label: string; value: CollectionSortKey }[] = [
+  { label: 'Best Selling', value: 'BEST_SELLING' },
+  { label: 'Newest',       value: 'CREATED'      },
+  { label: 'Price: Low to High', value: 'PRICE'  },
+  { label: 'Alphabetical', value: 'TITLE'        },
+];

-  if (!selected) {
+const colClass: Record<CollectionProps['columns'], string> = {
+  '2': 'grid-cols-2',
+  '3': 'grid-cols-2 md:grid-cols-3',
+  '4': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+};
+
+// ─── Filter group (collapsible) ────────────────────────────────────────────────
+
+function FilterGroup({ label, children, defaultOpen = true }: {
+  label: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="border-b border-border py-4">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between text-xs font-semibold uppercase tracking-[0.15em] text-foreground"
+      >
+        {label}
+        <ChevronDown
+          size={14}
+          className={cn('transition-transform', open ? 'rotate-180' : '')}
+        />
+      </button>
+      {open && <div className="mt-3 space-y-2">{children}</div>}
+    </div>
+  );
+}
+
+function Checkbox({ checked, onChange, label }: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+}) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="sr-only"
+      />
+      <span
+        className={cn(
+          'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
+          checked ? 'border-foreground bg-foreground' : 'border-border',
+        )}
+      >
+        {checked && (
+          <svg viewBox="0 0 10 8" className="h-2.5 w-2.5 fill-background" aria-hidden>
+            <path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </span>
+      {label}
+    </label>
+  );
+}
+
+// ─── Sidebar ────────────────────────────────────────────────────────────────────
+
+type ActiveFilters = {
+  availability: boolean;
+  productTypes: string[];
+  vendors: string[];
+  tags: string[];
+  colors: string[];
+  styles: string[];
+  sizes: string[];
+  materials: string[];
+  minPrice: string;
+  maxPrice: string;
+  metafieldValues: Record<string, string[]>;
+};
+
+function Sidebar({
+  props,
+  active,
+  onChange,
+}: {
+  props: CollectionProps;
+  active: ActiveFilters;
+  onChange: (patch: Partial<ActiveFilters>) => void;
+}) {
+  const productTypes = (props.productTypeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const vendors = (props.vendorOptions ?? []).map((o) => o.label).filter(Boolean);
+  const tags = (props.tagOptions ?? []).map((o) => o.label).filter(Boolean);
+  const colors = (props.colorOptions ?? []) as ColorOption[];
+  const styles = (props.styleOptions ?? []).map((o) => o.label).filter(Boolean);
+  const sizes = (props.sizeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const materials = (props.materialOptions ?? []).map((o) => o.label).filter(Boolean);
+  const metafieldFilters = (props.metafieldFilters ?? []).filter((mf) => mf.namespace && mf.key);
+
+  function toggle(key: 'productTypes' | 'vendors' | 'tags' | 'colors' | 'styles' | 'sizes' | 'materials', value: string) {
+    const arr = active[key];
+    onChange({ [key]: arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value] });
+  }
+
+  return (
+    <div className="w-full">
+      {props.showAvailability === 'yes' && (
+        <FilterGroup label="Availability">
+          <Checkbox
+            checked={active.availability}
+            onChange={(v) => onChange({ availability: v })}
+            label="In stock"
+          />
+        </FilterGroup>
+      )}
+
+      {props.showPriceRange === 'yes' && (
+        <FilterGroup label="Price">
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              min={0}
+              placeholder="Min"
+              value={active.minPrice}
+              onChange={(e) => onChange({ minPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+            <span className="text-muted-foreground">–</span>
+            <input
+              type="number"
+              min={0}
+              placeholder="Max"
+              value={active.maxPrice}
+              onChange={(e) => onChange({ maxPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+          </div>
+        </FilterGroup>
+      )}
+
+      {props.showVendor === 'yes' && vendors.length > 0 && (
+        <FilterGroup label="Brand">
+          {vendors.map((v) => (
+            <Checkbox
+              key={v}
+              checked={active.vendors.includes(v)}
+              onChange={() => toggle('vendors', v)}
+              label={v}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showColor === 'yes' && colors.length > 0 && (
+        <FilterGroup label="Color">
+          {colors.filter((c) => c.label).map((c) => (
+            <label
+              key={c.label}
+              className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground"
+            >
+              <input
+                type="checkbox"
+                checked={active.colors.includes(c.label)}
+                onChange={() => toggle('colors', c.label)}
+                className="sr-only"
+              />
+              <span
+                className={cn(
+                  'flex h-5 w-5 shrink-0 rounded-full border-2',
+                  active.colors.includes(c.label) ? 'border-foreground' : 'border-transparent',
+                )}
+                style={{ backgroundColor: c.color || undefined }}
+              />
+              {c.label}
+            </label>
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showStyle === 'yes' && styles.length > 0 && (
+        <FilterGroup label="Style">
+          {styles.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.styles.includes(s)}
+              onChange={() => toggle('styles', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showSize === 'yes' && sizes.length > 0 && (
+        <FilterGroup label="Size">
+          {sizes.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.sizes.includes(s)}
+              onChange={() => toggle('sizes', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showMaterial === 'yes' && materials.length > 0 && (
+        <FilterGroup label="Material">
+          {materials.map((m) => (
+            <Checkbox
+              key={m}
+              checked={active.materials.includes(m)}
+              onChange={() => toggle('materials', m)}
+              label={m}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showProductType === 'yes' && productTypes.length > 0 && (
+        <FilterGroup label="Product type">
+          {productTypes.map((pt) => (
+            <Checkbox
+              key={pt}
+              checked={active.productTypes.includes(pt)}
+              onChange={() => toggle('productTypes', pt)}
+              label={pt}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showTags === 'yes' && tags.length > 0 && (
+        <FilterGroup label="Tags">
+          {tags.map((t) => (
+            <Checkbox
+              key={t}
+              checked={active.tags.includes(t)}
+              onChange={() => toggle('tags', t)}
+              label={t}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {metafieldFilters.map((mf, i) => {
+        const mfKey = `${mf.namespace}.${mf.key}`;
+        const selected = active.metafieldValues[mfKey] ?? [];
+        return (
+          <FilterGroup key={mfKey + i} label={mf.label || mfKey}>
+            {mf.values.map((v) => v.label).filter(Boolean).map((val) => (
+              <Checkbox
+                key={val}
+                checked={selected.includes(val)}
+                onChange={(checked) => {
+                  const next = checked
+                    ? [...selected, val]
+                    : selected.filter((v) => v !== val);
+                  onChange({ metafieldValues: { ...active.metafieldValues, [mfKey]: next } });
+                }}
+                label={val}
+              />
+            ))}
+          </FilterGroup>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Build Shopify ProductFilter array ──────────────────────────────────────────
+
+function buildProductFilters(active: ActiveFilters): ProductFilter[] {
+  const filters: ProductFilter[] = [];
+
+  if (active.availability) filters.push({ available: true });
+
+  if (active.minPrice !== '' || active.maxPrice !== '') {
+    filters.push({
+      price: {
+        min: active.minPrice !== '' ? parseFloat(active.minPrice) : undefined,
+        max: active.maxPrice !== '' ? parseFloat(active.maxPrice) : undefined,
+      },
+    });
+  }
+
+  for (const pt of active.productTypes) filters.push({ productType: pt });
+  for (const v of active.vendors) filters.push({ productVendor: v });
+  for (const t of active.tags) filters.push({ tag: t });
+
+  for (const c of active.colors) filters.push({ variantOption: { name: 'Color', value: c } });
+  for (const s of active.styles) filters.push({ variantOption: { name: 'Style', value: s } });
+  for (const s of active.sizes) filters.push({ variantOption: { name: 'Size', value: s } });
+  for (const m of active.materials) filters.push({ variantOption: { name: 'Material', value: m } });
+
+  for (const [mfKey, vals] of Object.entries(active.metafieldValues)) {
+    const [namespace, key] = mfKey.split('.');
+    for (const value of vals) {
+      filters.push({ productMetafield: { namespace, key, value } });
+    }
+  }
+
+  return filters;
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+
+export function CollectionView(props: CollectionProps) {
+  const { collection: selected, showDescription, showCoverImage, customCoverImage, columns, limit, defaultSort } = props;
+  const params = useParams();
+  const paramHandle =
+    typeof params?.handle === 'string' ? params.handle : undefined;
+  const handle = selected?.handle ?? paramHandle ?? '';
+
+  const [sort, setSort] = useState<CollectionSortKey>(defaultSort);
+  const [reverse, setReverse] = useState(false);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [active, setActive] = useState<ActiveFilters>({
+    availability: false,
+    productTypes: [],
+    vendors: [],
+    tags: [],
+    colors: [],
+    styles: [],
+    sizes: [],
+    materials: [],
+    minPrice: '',
+    maxPrice: '',
+    metafieldValues: {},
+  });
+
+  const patchActive = useCallback((patch: Partial<ActiveFilters>) => {
+    setActive((prev) => ({ ...prev, ...patch }));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setActive({
+      availability: false,
+      productTypes: [],
+      vendors: [],
+      tags: [],
+      colors: [],
+      styles: [],
+      sizes: [],
+      materials: [],
+      minPrice: '',
+      maxPrice: '',
+      metafieldValues: {},
+    });
+  }, []);
+
+  const productFilters = buildProductFilters(active);
+
+  const handleSortChange = (value: string) => {
+    if (value === 'PRICE_DESC') {
+      setSort('PRICE');
+      setReverse(true);
+    } else {
+      setSort(value as CollectionSortKey);
+      setReverse(false);
+    }
+  };
+
+  const sortValue = sort === 'PRICE' && reverse ? 'PRICE_DESC' : sort;
+
+  const { collection, loading, hasNextPage, fetchMore } = useCollectionProducts(handle, {
+    first: limit,
+    sortKey: sort,
+    reverse,
+    filters: productFilters.length ? productFilters : undefined,
+  });
+
+  const products = collection?.products ?? [];
+  const description = collection?.description ?? (selected as any)?.description;
+  const collectionImage = customCoverImage || collection?.image?.url;
+
+  if (!selected && !paramHandle) {
    return (
      <section className="bg-background pb-24 pt-12 md:pt-20">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
          <header className="mx-auto mb-14 flex max-w-2xl flex-col items-center gap-3 text-center">
            <Skeleton className="h-3 w-24" />
            <Skeleton className="h-10 w-3/4" />
-            {showDescription === "yes" ? (
-              <Skeleton className="mt-1 h-5 w-2/3" />
-            ) : null}
          </header>
          <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <Skeleton key={i} className="aspect-[4/5] w-full" />
            ))}
          </div>
-        </div>
+        </Container>
      </section>
    );
  }

-  const products = (collection?.products as any[] | undefined) ?? [];
-  const description = collection?.description ?? selected.description;
-
  return (
    <section className="bg-background pb-24 pt-12 md:pt-20">
-      <div className="container mx-auto max-w-7xl px-6">
-        <header className="mx-auto mb-14 max-w-2xl text-center">
+      <Container>
+        {/* Cover image */}
+        {showCoverImage === 'yes' && collectionImage && (
+          <div className="mb-10 overflow-hidden rounded-lg">
+            <img
+              src={collectionImage}
+              alt={collection?.title ?? ''}
+              className="h-48 w-full object-cover md:h-72 lg:h-80"
+            />
+          </div>
+        )}
+
+        {/* Header */}
+        <header className="mb-10">
          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
            Collection
          </p>
          <Typography variant="h1">
-            {collection?.title ?? selected.title}
+            {collection?.title ?? (selected as any)?.title ?? paramHandle}
          </Typography>
-          {showDescription === "yes" && description ? (
-            <Typography variant="subtitle1" className="mt-4">
+          {showDescription === 'yes' && description ? (
+            <Typography variant="subtitle1" className="mt-4 max-w-2xl">
              {description}
            </Typography>
          ) : null}
        </header>

-        <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
+        {/* Filter + sort bar */}
+        <div className="mb-6 flex items-center justify-between">
+          <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+            <SheetTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
+              >
+                <SlidersHorizontal size={14} />
+                Filters
+              </button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-full sm:max-w-md">
+              <SheetHeader>
+                <SheetTitle>Filters</SheetTitle>
+              </SheetHeader>
+              <div className="flex-1 overflow-y-auto px-4">
+                <Sidebar props={props} active={active} onChange={patchActive} />
+              </div>
+              <SheetFooter className="flex-row gap-2 border-t border-border">
+                <Button variant="outline" className="flex-1" onClick={clearAll}>
+                  Clear
+                </Button>
+                <Button className="flex-1" onClick={() => setFiltersOpen(false)}>
+                  Search
+                </Button>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+
+          <div className="flex items-center gap-4">
+            <p className="hidden text-sm text-muted-foreground sm:block">
+              {loading ? 'Loading…' : `${products.length} product${products.length === 1 ? '' : 's'}`}
+            </p>
+            <Select value={sortValue} onValueChange={handleSortChange}>
+              <SelectTrigger className="h-auto px-3 py-2 text-sm">
+                <SelectValue>
+                  {[...SORT_OPTIONS, { label: 'Price: High to Low', value: 'PRICE_DESC' }].find((o) => o.value === sortValue)?.label}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+                <SelectItem value="PRICE_DESC">Price: High to Low</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Grid */}
+        <div className={cn('grid gap-x-6 gap-y-10', colClass[columns])}>
          {loading
-            ? Array.from({ length: 8 }).map((_, i) => (
+            ? Array.from({ length: limit }).map((_, i) => (
                <Skeleton key={i} className="aspect-[4/5] w-full" />
              ))
            : products.map((p: any) => <ProductCard key={p.id} product={p} />)}
        </div>

-        {!loading && products.length === 0 ? (
-          <div className="mx-auto mt-12 max-w-md text-center text-sm text-muted-foreground">
-            This collection has no products yet.
+        {!loading && products.length === 0 && (
+          <div className="mt-16 text-center text-sm text-muted-foreground">
+            No products found in this collection.
          </div>
-        ) : null}
-      </div>
+        )}
+
+        {hasNextPage && !loading && (
+          <div className="mt-12 flex justify-center">
+            <button
+              type="button"
+              onClick={fetchMore}
+              className="rounded-md border border-border px-8 py-3 text-sm font-medium hover:bg-muted"
+            >
+              Load more
+            </button>
+          </div>
+        )}
+      </Container>
    </section>
  );
 }
--- a/components/commerce/collections.tsx
+++ b/components/commerce/collections.tsx
@@ -11,19 +11,19 @@ const Collections: React.FC = () => {
    return (
      <div className="py-16">
        <div className="container mx-auto px-4">
-          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+          <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
            Our Collections
          </h2>

          {/* Loading Skeleton */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {Array.from({ length: 6 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-video bg-gray-200"></div>
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-video bg-muted"></div>
                <div className="p-6">
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
+                  <div className="h-4 bg-muted rounded mb-2"></div>
+                  <div className="h-4 bg-muted rounded w-3/4"></div>
                </div>
              </div>
            ))}
@@ -62,12 +62,12 @@ const Collections: React.FC = () => {
            Our Collections
          </h2>

-          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
-            <i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+          <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-folder-line text-4xl text-muted-foreground mb-4"></i>
+            <h3 className="text-lg font-semibold text-foreground mb-2">
              No Collections Found
            </h3>
-            <p className="text-gray-500">
+            <p className="text-muted-foreground">
              Check back later or configure your Shopify store connection.
            </p>
          </div>
@@ -79,7 +79,7 @@ const Collections: React.FC = () => {
  return (
    <div className="py-16">
      <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
          Our Collections
        </h2>

--- a/components/commerce/featured-product.tsx
+++ b/components/commerce/featured-product.tsx
@@ -1,9 +1,10 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
 import { useProduct } from "@/hooks/use-shopify-products";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
 import { cn } from "@/lib/utils";

 export type FeaturedProductProps = {
@@ -33,7 +34,7 @@ export function FeaturedProductView({
          tone === "muted" ? "bg-muted/40" : "bg-background",
        )}
      >
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
          <div className={cn(align === "right" && "md:order-2")}>
            <Skeleton className="aspect-[4/5] w-full" />
          </div>
@@ -47,11 +48,11 @@ export function FeaturedProductView({
              <Skeleton className="h-4 w-4/6" />
            </div>
            <div className="mt-2 flex flex-wrap gap-3">
-              <Skeleton className="h-11 w-32 rounded-full" />
-              <Skeleton className="h-11 w-32 rounded-full" />
+              <Skeleton className="h-11 w-32 rounded-md" />
+              <Skeleton className="h-11 w-32 rounded-md" />
            </div>
          </div>
-        </div>
+        </Container>
      </section>
    );
  }
@@ -75,7 +76,7 @@ export function FeaturedProductView({
          : "bg-background py-20 md:py-28"
      }
    >
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
        <div className={align === "right" ? "md:order-2" : ""}>
          {image ? (
            <img
@@ -89,9 +90,7 @@ export function FeaturedProductView({
        </div>
        <div className="flex flex-col items-start gap-5">
          {tagline ? (
-            <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
+            <Typography variant="caption">{tagline}</Typography>
          ) : null}
          <Typography variant="h2">{product.title}</Typography>
          {formatted ? (
@@ -111,19 +110,19 @@ export function FeaturedProductView({
                await cart.addItem(variant.id, 1);
                cart.openCart();
              }}
-              className="inline-flex items-center justify-center rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background hover:opacity-90"
+              className="inline-flex items-center justify-center rounded-md bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background hover:opacity-90"
            >
              {ctaLabel}
            </button>
            <Link
-              to={`/products/${product.handle}`}
-              className="inline-flex items-center justify-center rounded-full border border-foreground px-6 py-3 text-sm font-medium tracking-wide hover:opacity-80"
+              href={`/products/${product.handle}`}
+              className="inline-flex items-center justify-center rounded-md border border-foreground px-6 py-3 text-sm font-medium tracking-wide hover:opacity-80"
            >
              View details
            </Link>
          </div>
        </div>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/commerce/product-card.tsx
+++ b/components/commerce/product-card.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import { Link } from "react-router";
+import Link from "next/link";
+import { Typography } from "@/components/Typography";

 type ProductImage = { url: string; altText?: string };
 type ProductPrice = { amount: string; currencyCode: string };
@@ -40,7 +41,7 @@ export function ProductCard({
  };

  return (
-    <Link to={`/products/${product.handle}`} className="group block">
+    <Link href={`/products/${product.handle}`} className="group block">
      <div
        className={`relative w-full overflow-hidden rounded-md bg-muted ${aspectClass[aspect]}`}
      >
@@ -53,7 +54,12 @@ export function ProductCard({
        ) : null}
      </div>
      <div className="mt-4 flex items-start justify-between gap-3">
-        <h3 className="text-sm font-medium tracking-tight">{product.title}</h3>
+        <Typography
+          variant="subtitle2"
+          className="font-medium tracking-tight text-foreground"
+        >
+          {product.title}
+        </Typography>
        {price ? (
          <div className="flex flex-col items-end text-sm">
            {onSale && compare ? (
--- a/components/commerce/product-detail/index.tsx
+++ b/components/commerce/product-detail/index.tsx
@@ -1,7 +1,7 @@
 'use client';

 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router';
+import Link from 'next/link';
 import { useProduct, type Product } from '@/hooks/use-shopify-products';
 import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
@@ -158,19 +158,19 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
  }

  return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8">
        <Breadcrumb className="mb-6">
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
-                <Link to="/">Home</Link>
+                <Link href="/">Home</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
-                <Link to="/shop">Shop</Link>
+                <Link href="/shop">Shop</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
--- a/components/commerce/product-detail/product-detail-gallery.tsx
+++ b/components/commerce/product-detail/product-detail-gallery.tsx
@@ -23,7 +23,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
  return (
    <div>
      {/* Main Image */}
-      <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
+      <div className="aspect-square bg-muted rounded-lg overflow-hidden mb-4">
        {images.length > 0 ? (
          <img
            src={images[selectedImage].url}
@@ -31,7 +31,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
            className="w-full h-full object-cover"
          />
        ) : (
-          <div className="w-full h-full flex items-center justify-center text-gray-400">
+          <div className="w-full h-full flex items-center justify-center text-muted-foreground">
            <i className="ri-image-line text-6xl"></i>
          </div>
        )}
@@ -46,8 +46,8 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
              onClick={() => setSelectedImage(index)}
              className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
                selectedImage === index 
-                  ? 'border-black' 
-                  : 'border-gray-200 hover:border-gray-300'
+                  ? 'border-foreground'
+                  : 'border-border hover:border-muted-foreground'
              }`}
            >
              <img
--- a/components/commerce/product-detail/product-detail-info.tsx
+++ b/components/commerce/product-detail/product-detail-info.tsx
@@ -38,18 +38,18 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({

  return (
    <div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4 font-heading">
+      <h1 className="text-4xl font-bold text-foreground mb-4 font-heading">
        {product.title}
      </h1>

      {/* Price */}
      <div className="flex items-center space-x-4 mb-6">
-        <span className="text-2xl font-bold text-gray-900">
+        <span className="text-2xl font-bold text-foreground">
          {formatPrice(price)}
        </span>
        {hasDiscount && compareAtPrice && (
          <>
-            <span className="text-xl text-gray-500 line-through">
+            <span className="text-xl text-muted-foreground line-through">
              {formatPrice(compareAtPrice)}
            </span>
            <Badge variant="destructive">
@@ -61,7 +61,7 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({

      {/* Description */}
      {product.description && (
-        <div className="text-gray-600 mb-8 text-lg leading-relaxed">
+        <div className="text-muted-foreground mb-8 text-lg leading-relaxed">
          {product.descriptionHtml ? (
            <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
          ) : (
@@ -73,7 +73,7 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
      {/* Product Options */}
      {product.options.map(option => (
        <div key={option.id} className="mb-6">
-          <label className="block text-sm font-semibold text-gray-700 mb-2">
+          <label className="block text-sm font-semibold text-foreground mb-2">
            {option.name}
          </label>
          <div className="flex flex-wrap gap-2">
@@ -92,10 +92,10 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({

      {/* Quantity Selector */}
      <div className="mb-8">
-        <label className="block text-sm font-semibold text-gray-700 mb-2">
+        <label className="block text-sm font-semibold text-foreground mb-2">
          Quantity
        </label>
-        <div className="flex items-center border border-gray-300 rounded-lg w-fit">
+        <div className="flex items-center border border-border rounded-lg w-fit">
          <Button
            onClick={() => setQuantity(Math.max(1, quantity - 1))}
            variant="ghost"
@@ -135,8 +135,8 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
      </Button>

      {/* Additional Info */}
-      <div className="mt-8 pt-8 border-t border-gray-200">
-        <div className="space-y-3 text-sm text-gray-600">
+      <div className="mt-8 pt-8 border-t border-border">
+        <div className="space-y-3 text-sm text-muted-foreground">
          <div className="flex items-center space-x-2">
            <i className="ri-truck-line"></i>
            <span>Free shipping on orders over $100</span>
--- a/components/commerce/product-detail/product-recommendations.tsx
+++ b/components/commerce/product-detail/product-recommendations.tsx
@@ -17,29 +17,29 @@ const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ product
  }

  return (
-    <div className="bg-gray-50 py-16">
+    <div className="bg-muted py-16">
      <div className="container mx-auto px-4">
-        <h2 className="text-4xl font-bold text-center mb-12 text-gray-900 font-heading">
+        <h2 className="text-4xl font-bold text-center mb-12 text-foreground font-heading">
          You Might Also Like
        </h2>

        {loading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            {Array.from({ length: 4 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-square bg-gray-200"></div>
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-square bg-muted"></div>
                <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
+                  <div className="h-6 bg-muted rounded mb-2"></div>
+                  <div className="h-4 bg-muted rounded mb-4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
+                  <div className="h-12 bg-muted rounded"></div>
                </div>
              </div>
            ))}
          </div>
        ) : error ? (
          <div className="text-center py-8">
-            <p className="text-gray-500">Recommendations could not be loaded</p>
+            <p className="text-muted-foreground">Recommendations could not be loaded</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
--- a/components/commerce/product-details.tsx
+++ b/components/commerce/product-details.tsx
@@ -1,18 +1,22 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router";
+import { useParams } from "next/navigation";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
 import { useProduct } from "@/hooks/use-shopify-products";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Loader } from "@/components/ui/loader";
+import { Container } from "@/components/layout/Container";

 export type ProductDetailsProps = {
  product: ShopifyProduct | null;
 };

 export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
-  const { handle: paramHandle } = useParams<{ handle?: string }>();
+  const params = useParams();
+  const paramHandle =
+    typeof params?.handle === "string" ? params.handle : undefined;
  const handle = selected?.handle ?? paramHandle ?? null;
  const { product, loading } = useProduct(handle);
  const cart = useShopifyCart();
@@ -30,7 +34,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
  if (!handle || loading || !product) {
    return (
      <section className="bg-background py-12 md:py-20">
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
          <div className="flex flex-col gap-4">
            <Skeleton className="aspect-[4/5] w-full" />
            <div className="flex gap-3">
@@ -45,14 +49,14 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
            <div className="flex flex-col gap-3">
              <Skeleton className="h-3 w-16" />
              <div className="flex gap-2">
-                <Skeleton className="h-10 w-16 rounded-full" />
-                <Skeleton className="h-10 w-16 rounded-full" />
-                <Skeleton className="h-10 w-16 rounded-full" />
+                <Skeleton className="h-10 w-16 rounded-md" />
+                <Skeleton className="h-10 w-16 rounded-md" />
+                <Skeleton className="h-10 w-16 rounded-md" />
              </div>
            </div>
            <div className="flex items-center gap-4 pt-2">
-              <Skeleton className="h-11 w-32 rounded-full" />
-              <Skeleton className="h-11 flex-1 rounded-full" />
+              <Skeleton className="h-11 w-32 rounded-md" />
+              <Skeleton className="h-11 flex-1 rounded-md" />
            </div>
            <div className="space-y-2 border-t border-border pt-6">
              <Skeleton className="h-3 w-20" />
@@ -61,7 +65,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
              <Skeleton className="h-4 w-4/6" />
            </div>
          </div>
-        </div>
+        </Container>
      </section>
    );
  }
@@ -89,7 +93,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {

  return (
    <section className="bg-background py-12 md:py-20">
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
        <div className="flex flex-col gap-4">
          <div className="aspect-[4/5] w-full overflow-hidden rounded-md bg-muted">
            {main ? (
@@ -156,7 +160,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
                      key={val}
                      onClick={() => matching && setVariant(matching.node)}
                      className={cn(
-                        "min-w-12 rounded-full border px-4 py-2 text-sm transition-colors",
+                        "min-w-12 rounded-md border px-4 py-2 text-sm transition-colors",
                        selected
                          ? "border-foreground bg-foreground text-background"
                          : "border-border hover:border-foreground",
@@ -171,7 +175,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
          ))}

          <div className="flex items-center gap-4 pt-2">
-            <div className="flex items-center gap-3 rounded-full border border-border px-4 py-2">
+            <div className="flex items-center gap-3 rounded-md border border-border px-4 py-2">
              <button
                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                className="text-base hover:opacity-60"
@@ -189,9 +193,16 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
            <button
              onClick={onAdd}
              disabled={!variant || adding}
-              className="flex-1 rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
+              className="flex-1 rounded-md bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
            >
-              {adding ? "Adding…" : "Add to bag"}
+              {adding ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader size={16} />
+                  Adding…
+                </span>
+              ) : (
+                "Add to bag"
+              )}
            </button>
          </div>

@@ -206,7 +217,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
            </div>
          ) : null}
        </div>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/commerce/products-carousel.tsx
+++ b/components/commerce/products-carousel.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
 import { getProducts } from "@/hooks/use-shopify-products";
 import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 import {
  Carousel,
  CarouselContent,
@@ -12,6 +12,7 @@ import {
  CarouselNext,
  CarouselPrevious,
 } from "@/components/ui/carousel";
+import { Container } from "@/components/layout/Container";

 export type ProductsCarouselProps = {
  collection: ShopifyCollection | null;
@@ -50,7 +51,7 @@ export function ProductsCarousel({
          const data = await getCollectionProducts(collection.handle, {
            first: limit,
          });
-          if (!cancelled) setProducts(data?.products ?? []);
+          if (!cancelled) setProducts(data?.collection?.products ?? []);
        } else {
          const data = await getProducts({
            first: limit,
@@ -71,24 +72,19 @@ export function ProductsCarousel({

  return (
    <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
        <div className="mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
-          <div className="max-w-xl">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            <Typography variant="h2">{heading}</Typography>
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
+          <Heading
+            tagline={tagline}
+            title={heading}
+            subtitle={subheading}
+            align="left"
+            size="lg"
+            maxWidth="max-w-xl"
+          />
          {ctaLabel ? (
            <Link
-              to={
+              href={
                ctaHref ||
                (collection?.handle ? `/collections/${collection.handle}` : "/collections")
              }
@@ -120,7 +116,7 @@ export function ProductsCarousel({
          <CarouselPrevious className="hidden md:inline-flex" />
          <CarouselNext className="hidden md:inline-flex" />
        </Carousel>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/commerce/products-grid.tsx
+++ b/components/commerce/products-grid.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
 import { getProducts } from "@/hooks/use-shopify-products";
 import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";

 export type ProductsGridProps = {
  collection: ShopifyCollection | null;
@@ -42,7 +43,7 @@ export function ProductsGrid({
          const data = await getCollectionProducts(collection.handle, {
            first: limit,
          });
-          if (!cancelled) setProducts(data?.products ?? []);
+          if (!cancelled) setProducts(data?.collection?.products ?? []);
        } else {
          const data = await getProducts({ first: limit, sortKey: "BEST_SELLING" });
          if (!cancelled) setProducts(data ?? []);
@@ -59,24 +60,19 @@ export function ProductsGrid({

  return (
    <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
        <div className="mb-12 flex flex-col items-end justify-between gap-6 md:flex-row md:items-end">
-          <div className="max-w-xl">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            <Typography variant="h2">{heading}</Typography>
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
+          <Heading
+            tagline={tagline}
+            title={heading}
+            subtitle={subheading}
+            align="left"
+            size="lg"
+            maxWidth="max-w-xl"
+          />
          {ctaLabel ? (
            <Link
-              to={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}
+              href={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}
              className="text-sm font-medium tracking-wide hover:opacity-70"
            >
              {ctaLabel} →
@@ -94,7 +90,7 @@ export function ProductsGrid({
              ))
            : products.map((p) => <ProductCard key={p.id} product={p} />)}
        </div>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/commerce/products.tsx
+++ b/components/commerce/products.tsx
@@ -127,13 +127,13 @@ const Products: React.FC<ProductsProps> = ({
          {/* Loading Skeleton */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            {Array.from({ length: 8 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-square bg-gray-200"></div>
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-square bg-muted"></div>
                <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
+                  <div className="h-6 bg-muted rounded mb-2"></div>
+                  <div className="h-4 bg-muted rounded mb-4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
+                  <div className="h-12 bg-muted rounded"></div>
                </div>
              </div>
            ))}
@@ -173,12 +173,12 @@ const Products: React.FC<ProductsProps> = ({
            {title}
          </h2>
          
-          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
-            <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+          <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-shopping-bag-line text-4xl text-muted-foreground mb-4"></i>
+            <h3 className="text-lg font-semibold text-foreground mb-2">
              No Products Found
            </h3>
-            <p className="text-gray-500">
+            <p className="text-muted-foreground">
              Check back later or configure your Shopify store connection.
            </p>
          </div>
@@ -190,7 +190,7 @@ const Products: React.FC<ProductsProps> = ({
  return (
    <div className="py-16">
      <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
          {title}
        </h2>

--- a/components/commerce/recommended-products.tsx
+++ b/components/commerce/recommended-products.tsx
@@ -4,8 +4,9 @@ import {
  useProductRecommendations,
 } from "@/hooks/use-shopify-products";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";

 export type RecommendedProductsProps = {
  product: ShopifyProduct | null;
@@ -27,7 +28,7 @@ export function RecommendedProductsView({
  if (!selected) {
    return (
      <section className="bg-background py-20 md:py-28">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
          <div className="mb-12 flex max-w-xl flex-col gap-3">
            {tagline ? <Skeleton className="h-3 w-24" /> : null}
            <Skeleton className="h-8 w-2/3" />
@@ -37,22 +38,22 @@ export function RecommendedProductsView({
              <Skeleton key={i} className="aspect-[4/5] w-full" />
            ))}
          </div>
-        </div>
+        </Container>
      </section>
    );
  }

  return (
    <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
-        <div className="mb-12 max-w-xl">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h3">{heading}</Typography>
-        </div>
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          align="left"
+          size="md"
+          className="mb-12"
+          maxWidth="max-w-xl"
+        />

        <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-4">
          {items.length === 0
@@ -61,7 +62,7 @@ export function RecommendedProductsView({
              ))
            : items.map((p: any) => <ProductCard key={p.id} product={p} />)}
        </div>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/commerce/search-products.editor.tsx
+++ b/components/commerce/search-products.editor.tsx
@@ -0,0 +1,242 @@
+import { ComponentConfig } from '@reacteditor/core';
+import { Search } from 'lucide-react';
+import { SearchProductsView, type SearchProductsProps } from '@/components/commerce/search-products';
+
+export const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
+  label: 'Search & filter',
+  icon: <Search size={16} />,
+  category: 'commerce',
+  defaultProps: {
+    heading: 'Shop',
+    subheading: 'Browse our full collection.',
+    columns: '4',
+    limit: 24,
+    showAvailability: 'yes',
+    showPriceRange: 'yes',
+    showProductType: 'yes',
+    productTypeOptions: [
+      { label: 'T-Shirts' },
+      { label: 'Pants' },
+      { label: 'Outerwear' },
+      { label: 'Accessories' },
+      { label: 'Shoes' },
+    ],
+    showVendor: 'yes',
+    vendorOptions: [
+      { label: 'Maison' },
+      { label: 'Atelier' },
+      { label: 'Studio' },
+    ],
+    showTags: 'yes',
+    tagOptions: [
+      { label: 'New' },
+      { label: 'Sale' },
+      { label: 'Bestseller' },
+      { label: 'Limited Edition' },
+    ],
+    showColor: 'yes',
+    colorOptions: [
+      { label: 'Black', color: '#000000' },
+      { label: 'White', color: '#FFFFFF' },
+      { label: 'Navy', color: '#1e3a5f' },
+      { label: 'Red', color: '#c0392b' },
+    ],
+    showStyle: 'no',
+    styleOptions: [],
+    showSize: 'yes',
+    sizeOptions: [
+      { label: 'XS' },
+      { label: 'S' },
+      { label: 'M' },
+      { label: 'L' },
+      { label: 'XL' },
+    ],
+    showMaterial: 'no',
+    materialOptions: [],
+    metafieldFilters: [],
+    defaultSort: 'BEST_SELLING',
+  },
+  fields: {
+    heading: { label: 'Heading', type: 'text', contentEditable: true },
+    subheading: { label: 'Subheading', type: 'textarea', contentEditable: true },
+    columns: {
+      label: 'Columns',
+      type: 'radio',
+      options: [
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+      ],
+    },
+    limit: { label: 'Products per page', type: 'number', min: 4, max: 48 },
+    defaultSort: {
+      label: 'Default sort',
+      type: 'select',
+      options: [
+        { label: 'Best Selling',       value: 'BEST_SELLING' },
+        { label: 'Relevance',          value: 'RELEVANCE'    },
+        { label: 'Newest',             value: 'NEWEST'       },
+        { label: 'Price: Low to High', value: 'PRICE_ASC'    },
+        { label: 'Price: High to Low', value: 'PRICE_DESC'   },
+        { label: 'Alphabetical',       value: 'TITLE_ASC'    },
+      ],
+    },
+    showAvailability: {
+      label: 'Availability filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    showPriceRange: {
+      label: 'Price range filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    showProductType: {
+      label: 'Product type filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    productTypeOptions: {
+      label: 'Product types',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Type',
+      arrayFields: {
+        label: { label: 'Type name', type: 'text' },
+      },
+    },
+    showVendor: {
+      label: 'Brand / vendor filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    vendorOptions: {
+      label: 'Brands',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Brand',
+      arrayFields: {
+        label: { label: 'Brand name', type: 'text' },
+      },
+    },
+    showTags: {
+      label: 'Tags filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    tagOptions: {
+      label: 'Tags',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Tag',
+      arrayFields: {
+        label: { label: 'Tag name', type: 'text' },
+      },
+    },
+    showColor: {
+      label: 'Color filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    colorOptions: {
+      label: 'Colors',
+      type: 'array',
+      defaultItemProps: { label: '', color: '#000000' },
+      getItemSummary: (it: any) => it?.label || 'Color',
+      arrayFields: {
+        label: { label: 'Color name', type: 'text' },
+        color: { label: 'Color', type: 'color' },
+      },
+    },
+    showStyle: {
+      label: 'Style filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    styleOptions: {
+      label: 'Styles',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Style',
+      arrayFields: {
+        label: { label: 'Style name', type: 'text' },
+      },
+    },
+    showSize: {
+      label: 'Size filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    sizeOptions: {
+      label: 'Sizes',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Size',
+      arrayFields: {
+        label: { label: 'Size name', type: 'text' },
+      },
+    },
+    showMaterial: {
+      label: 'Material filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    materialOptions: {
+      label: 'Materials',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Material',
+      arrayFields: {
+        label: { label: 'Material name', type: 'text' },
+      },
+    },
+    metafieldFilters: {
+      label: 'Metafield filters',
+      type: 'array',
+      defaultItemProps: { namespace: '', key: '', label: '', values: [{ label: '' }] },
+      getItemSummary: (it: any) => it?.label || it?.key || 'Metafield',
+      arrayFields: {
+        namespace: { label: 'Namespace', type: 'text' },
+        key: { label: 'Key', type: 'text' },
+        label: { label: 'Label', type: 'text' },
+        values: {
+          label: 'Values',
+          type: 'array',
+          defaultItemProps: { label: '' },
+          getItemSummary: (v: any) => v?.label || 'Value',
+          arrayFields: {
+            label: { label: 'Value', type: 'text' },
+          },
+        },
+      },
+    },
+  },
+  render: (props) => <SearchProductsView {...props} />,
+};
--- a/components/commerce/search-products.tsx
+++ b/components/commerce/search-products.tsx
@@ -0,0 +1,533 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
+import { useShopifySearch, type SearchFilters, type SortOption } from '@/hooks/use-shopify-search';
+
+import { ProductCard } from './product-card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
+import { Container } from '@/components/layout/Container';
+import { cn } from '@/lib/utils';
+
+type FilterOption = { label: string };
+type ColorOption = { label: string; color: string };
+
+export type SearchProductsProps = {
+  heading: string;
+  subheading: string;
+  columns: '2' | '3' | '4';
+  limit: number;
+  showAvailability: 'yes' | 'no';
+  showPriceRange: 'yes' | 'no';
+  showProductType: 'yes' | 'no';
+  productTypeOptions: FilterOption[];
+  showVendor: 'yes' | 'no';
+  vendorOptions: FilterOption[];
+  showTags: 'yes' | 'no';
+  tagOptions: FilterOption[];
+  showColor: 'yes' | 'no';
+  colorOptions: ColorOption[];
+  showStyle: 'yes' | 'no';
+  styleOptions: FilterOption[];
+  showSize: 'yes' | 'no';
+  sizeOptions: FilterOption[];
+  showMaterial: 'yes' | 'no';
+  materialOptions: FilterOption[];
+  metafieldFilters: { namespace: string; key: string; label: string; values: { label: string }[] }[];
+  defaultSort: SortOption;
+};
+
+const SORT_OPTIONS: { label: string; value: SortOption }[] = [
+  { label: 'Relevance',          value: 'RELEVANCE'    },
+  { label: 'Best Selling',       value: 'BEST_SELLING' },
+  { label: 'Newest',             value: 'NEWEST'       },
+  { label: 'Price: Low to High', value: 'PRICE_ASC'    },
+  { label: 'Price: High to Low', value: 'PRICE_DESC'   },
+  { label: 'Alphabetical',       value: 'TITLE_ASC'    },
+];
+
+const colClass: Record<SearchProductsProps['columns'], string> = {
+  '2': 'grid-cols-2',
+  '3': 'grid-cols-2 md:grid-cols-3',
+  '4': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+};
+
+// ─── Filter group (collapsible) ────────────────────────────────────────────────
+
+function FilterGroup({ label, children, defaultOpen = true }: {
+  label: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="border-b border-border py-4">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between text-xs font-semibold uppercase tracking-[0.15em] text-foreground"
+      >
+        {label}
+        <ChevronDown
+          size={14}
+          className={cn('transition-transform', open ? 'rotate-180' : '')}
+        />
+      </button>
+      {open && <div className="mt-3 space-y-2">{children}</div>}
+    </div>
+  );
+}
+
+function Checkbox({ checked, onChange, label }: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+}) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="sr-only"
+      />
+      <span
+        className={cn(
+          'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
+          checked ? 'border-foreground bg-foreground' : 'border-border',
+        )}
+      >
+        {checked && (
+          <svg viewBox="0 0 10 8" className="h-2.5 w-2.5 fill-background" aria-hidden>
+            <path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </span>
+      {label}
+    </label>
+  );
+}
+
+// ─── Sidebar ────────────────────────────────────────────────────────────────────
+
+type ActiveFilters = {
+  availability: boolean;
+  productTypes: string[];
+  vendors: string[];
+  tags: string[];
+  colors: string[];
+  styles: string[];
+  sizes: string[];
+  materials: string[];
+  minPrice: string;
+  maxPrice: string;
+  metafieldValues: Record<string, string[]>;
+};
+
+function Sidebar({
+  props,
+  active,
+  onChange,
+}: {
+  props: SearchProductsProps;
+  active: ActiveFilters;
+  onChange: (patch: Partial<ActiveFilters>) => void;
+}) {
+  const productTypes = (props.productTypeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const vendors = (props.vendorOptions ?? []).map((o) => o.label).filter(Boolean);
+  const tags = (props.tagOptions ?? []).map((o) => o.label).filter(Boolean);
+  const colors = (props.colorOptions ?? []) as ColorOption[];
+  const styles = (props.styleOptions ?? []).map((o) => o.label).filter(Boolean);
+  const sizes = (props.sizeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const materials = (props.materialOptions ?? []).map((o) => o.label).filter(Boolean);
+  const metafieldFilters = (props.metafieldFilters ?? []).filter((mf) => mf.namespace && mf.key);
+
+  function toggle(key: 'productTypes' | 'vendors' | 'tags' | 'colors' | 'styles' | 'sizes' | 'materials', value: string) {
+    const arr = active[key];
+    onChange({ [key]: arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value] });
+  }
+
+  return (
+    <div className="w-full">
+      {props.showAvailability === 'yes' && (
+        <FilterGroup label="Availability">
+          <Checkbox
+            checked={active.availability}
+            onChange={(v) => onChange({ availability: v })}
+            label="In stock"
+          />
+        </FilterGroup>
+      )}
+
+      {props.showPriceRange === 'yes' && (
+        <FilterGroup label="Price">
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              min={0}
+              placeholder="Min"
+              value={active.minPrice}
+              onChange={(e) => onChange({ minPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+            <span className="text-muted-foreground">–</span>
+            <input
+              type="number"
+              min={0}
+              placeholder="Max"
+              value={active.maxPrice}
+              onChange={(e) => onChange({ maxPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+          </div>
+        </FilterGroup>
+      )}
+
+      {props.showVendor === 'yes' && vendors.length > 0 && (
+        <FilterGroup label="Brand">
+          {vendors.map((v) => (
+            <Checkbox
+              key={v}
+              checked={active.vendors.includes(v)}
+              onChange={() => toggle('vendors', v)}
+              label={v}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showColor === 'yes' && colors.length > 0 && (
+        <FilterGroup label="Color">
+          {colors.filter((c) => c.label).map((c) => (
+            <label
+              key={c.label}
+              className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground"
+            >
+              <input
+                type="checkbox"
+                checked={active.colors.includes(c.label)}
+                onChange={() => toggle('colors', c.label)}
+                className="sr-only"
+              />
+              <span
+                className={cn(
+                  'flex h-5 w-5 shrink-0 rounded-full border-2',
+                  active.colors.includes(c.label) ? 'border-foreground' : 'border-transparent',
+                )}
+                style={{ backgroundColor: c.color || undefined }}
+              />
+              {c.label}
+            </label>
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showStyle === 'yes' && styles.length > 0 && (
+        <FilterGroup label="Style">
+          {styles.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.styles.includes(s)}
+              onChange={() => toggle('styles', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showSize === 'yes' && sizes.length > 0 && (
+        <FilterGroup label="Size">
+          {sizes.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.sizes.includes(s)}
+              onChange={() => toggle('sizes', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showMaterial === 'yes' && materials.length > 0 && (
+        <FilterGroup label="Material">
+          {materials.map((m) => (
+            <Checkbox
+              key={m}
+              checked={active.materials.includes(m)}
+              onChange={() => toggle('materials', m)}
+              label={m}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showProductType === 'yes' && productTypes.length > 0 && (
+        <FilterGroup label="Product type">
+          {productTypes.map((pt) => (
+            <Checkbox
+              key={pt}
+              checked={active.productTypes.includes(pt)}
+              onChange={() => toggle('productTypes', pt)}
+              label={pt}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showTags === 'yes' && tags.length > 0 && (
+        <FilterGroup label="Tags">
+          {tags.map((t) => (
+            <Checkbox
+              key={t}
+              checked={active.tags.includes(t)}
+              onChange={() => toggle('tags', t)}
+              label={t}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {metafieldFilters.map((mf, i) => {
+        const mfKey = `${mf.namespace}.${mf.key}`;
+        const selected = active.metafieldValues[mfKey] ?? [];
+        return (
+          <FilterGroup key={mfKey + i} label={mf.label || mfKey}>
+            {mf.values.map((v) => v.label).filter(Boolean).map((val) => (
+              <Checkbox
+                key={val}
+                checked={selected.includes(val)}
+                onChange={(checked) => {
+                  const next = checked
+                    ? [...selected, val]
+                    : selected.filter((v) => v !== val);
+                  onChange({ metafieldValues: { ...active.metafieldValues, [mfKey]: next } });
+                }}
+                label={val}
+              />
+            ))}
+          </FilterGroup>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+
+export function SearchProductsView(props: SearchProductsProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const initialQ = searchParams.get('q') ?? '';
+
+  const [query, setQuery] = useState(initialQ);
+  const [inputValue, setInputValue] = useState(initialQ);
+  const [sort, setSort] = useState<SortOption>(props.defaultSort);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [active, setActive] = useState<ActiveFilters>({
+    availability: false,
+    productTypes: [],
+    vendors: [],
+    tags: [],
+    colors: [],
+    styles: [],
+    sizes: [],
+    materials: [],
+    minPrice: '',
+    maxPrice: '',
+    metafieldValues: {},
+  });
+
+  const patchActive = useCallback((patch: Partial<ActiveFilters>) => {
+    setActive((prev) => ({ ...prev, ...patch }));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setActive({
+      availability: false,
+      productTypes: [],
+      vendors: [],
+      tags: [],
+      colors: [],
+      styles: [],
+      sizes: [],
+      materials: [],
+      minPrice: '',
+      maxPrice: '',
+      metafieldValues: {},
+    });
+  }, []);
+
+  const filters: SearchFilters = {
+    q: query,
+    sort,
+    availability: active.availability || undefined,
+    productTypes: active.productTypes.length ? active.productTypes : undefined,
+    vendors: active.vendors.length ? active.vendors : undefined,
+    tags: active.tags.length ? active.tags : undefined,
+    colors: active.colors.length ? active.colors : undefined,
+    styles: active.styles.length ? active.styles : undefined,
+    sizes: active.sizes.length ? active.sizes : undefined,
+    materials: active.materials.length ? active.materials : undefined,
+    minPrice: active.minPrice !== '' ? parseFloat(active.minPrice) : undefined,
+    maxPrice: active.maxPrice !== '' ? parseFloat(active.maxPrice) : undefined,
+    metafields: (() => {
+      const mfs = Object.entries(active.metafieldValues).flatMap(([mfKey, vals]) => {
+        const [namespace, key] = mfKey.split('.');
+        return vals.map((value) => ({ namespace, key, value }));
+      });
+      return mfs.length ? mfs : undefined;
+    })(),
+  };
+
+  const { products, loading, error, hasNextPage, fetchMore } = useShopifySearch(filters, {
+    first: props.limit,
+  });
+
+  // Sync ?q= param when query changes
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (query) params.set('q', query); else params.delete('q');
+    const qs = params.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }, [query]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setQuery(inputValue.trim());
+  };
+
+  return (
+    <section className="bg-background py-12 md:py-16">
+      <Container>
+
+        {/* Page header */}
+        <div className="mb-10">
+          {props.heading && (
+            <h1 className="mb-2 font-heading text-4xl font-bold tracking-tight text-foreground md:text-5xl">
+              {props.heading}
+            </h1>
+          )}
+          {props.subheading && (
+            <p className="text-muted-foreground">{props.subheading}</p>
+          )}
+          {/* Search bar (mobile only – desktop version lives in the product area) */}
+          <form onSubmit={handleSearch} className="mt-6 flex gap-2 md:hidden">
+            <input
+              type="search"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Search products…"
+              className="flex-1 rounded-md border border-border bg-background px-4 py-2.5 text-sm outline-none focus:border-foreground"
+            />
+            <button
+              type="submit"
+              className="rounded-md bg-foreground px-5 py-2.5 text-sm font-medium text-background hover:opacity-90"
+            >
+              Search
+            </button>
+          </form>
+        </div>
+
+        {/* Search bar (desktop only — mobile lives in header above) */}
+        <form onSubmit={handleSearch} className="mb-4 hidden gap-2 md:flex">
+          <input
+            type="search"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder="Search products…"
+            className="flex-1 rounded-md border border-border bg-background px-4 py-2.5 text-sm outline-none focus:border-foreground"
+          />
+          <button
+            type="submit"
+            className="rounded-md bg-foreground px-5 py-2.5 text-sm font-medium text-background hover:opacity-90"
+          >
+            Search
+          </button>
+        </form>
+
+        {/* Filter + sort bar */}
+        <div className="mb-6 flex items-center justify-between">
+          <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+            <SheetTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
+              >
+                <SlidersHorizontal size={14} />
+                Filters
+              </button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-full sm:max-w-md">
+              <SheetHeader>
+                <SheetTitle>Filters</SheetTitle>
+              </SheetHeader>
+              <div className="flex-1 overflow-y-auto px-4">
+                <Sidebar props={props} active={active} onChange={patchActive} />
+              </div>
+              <SheetFooter className="flex-row gap-2 border-t border-border">
+                <Button variant="outline" className="flex-1" onClick={clearAll}>
+                  Clear
+                </Button>
+                <Button className="flex-1" onClick={() => setFiltersOpen(false)}>
+                  Search
+                </Button>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+
+          <div className="flex items-center gap-4">
+            <p className="hidden text-sm text-muted-foreground sm:block">
+              {loading ? 'Loading…' : `${products.length} product${products.length === 1 ? '' : 's'}`}
+            </p>
+            <Select value={sort} onValueChange={(v) => setSort(v as SortOption)}>
+              <SelectTrigger className="h-auto px-3 py-2 text-sm">
+                <SelectValue>{SORT_OPTIONS.find((o) => o.value === sort)?.label}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {error && (
+          <p className="rounded-md border border-border p-4 text-sm text-muted-foreground">
+            {error}
+          </p>
+        )}
+
+        {/* Grid */}
+        <div className={cn('grid gap-x-6 gap-y-10', colClass[props.columns])}>
+          {loading
+            ? Array.from({ length: props.limit }).map((_, i) => (
+                <Skeleton key={i} className="aspect-[4/5] w-full" />
+              ))
+            : products.map((p) => <ProductCard key={p.id} product={p} />)}
+        </div>
+
+        {!loading && products.length === 0 && !error && (
+          <div className="mt-16 text-center text-sm text-muted-foreground">
+            No products found.{query ? ` Try a different search term.` : ''}
+          </div>
+        )}
+
+        {hasNextPage && !loading && (
+          <div className="mt-12 flex justify-center">
+            <button
+              type="button"
+              onClick={fetchMore}
+              className="rounded-md border border-border px-8 py-3 text-sm font-medium hover:bg-muted"
+            >
+              Load more
+            </button>
+          </div>
+        )}
+      </Container>
+    </section>
+  );
+}
--- a/components/commerce/shop-footer.tsx
+++ b/components/commerce/shop-footer.tsx
@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Footer: React.FC = () => {
-  return (
-    <footer className="bg-black text-white py-12">
-      <div className="container mx-auto px-4 text-center">
-        <h3
-          className="text-2xl font-bold mb-4"
-          style={{fontFamily: 'Space Grotesk, sans-serif'}}
-        >
-          Store
-        </h3>
-        <p className="text-gray-400 mb-6">
-          Your premium shopping destination
-        </p>
-        <div className="mt-8 pt-8 border-t border-gray-800 text-gray-400">
-          <p>&copy; 2025 Store. All rights reserved.</p>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;
--- a/components/commerce/shop-header.tsx
+++ b/components/commerce/shop-header.tsx
@@ -1,68 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Link } from 'react-router';
-import { useShopifyCart } from '@/hooks/use-shopify-cart';
-import config from '@/lib/config.json';
-
-const CartIcon: React.FC = () => {
-  const { toggleCart, itemCount } = useShopifyCart();
-
-  return (
-    <button
-      onClick={toggleCart}
-      className="relative p-1 text-black hover:text-gray-600 transition-colors"
-    >
-      <i className="ri-shopping-cart-line text-xl"></i>
-      {itemCount > 0 && (
-        <span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-semibold">
-          {itemCount > 99 ? '99+' : itemCount}
-        </span>
-      )}
-    </button>
-  );
-};
-
-const Header: React.FC = () => {
-  return (
-    <nav className="bg-white shadow-sm sticky top-0 z-30 h-14">
-      <div className="container mx-auto px-4 h-full">
-        <div className="flex justify-between items-center h-full">
-          {/* Logo */}
-          <Link to="/" className="text-lg font-bold text-black font-heading">
-            {config.brand.logo.url ? (
-              <img
-                src={config.brand.logo.url}
-                alt={config.brand.logo.alt || 'Store'}
-                className="h-8"
-              />
-            ) : (
-              'Store'
-            )}
-          </Link>
-
-          {/* Navigation Links */}
-          <div className="flex items-center space-x-6">
-            <Link
-              to="/"
-              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
-            >
-              Products
-            </Link>
-            <Link
-              to="/collections"
-              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
-            >
-              Collections
-            </Link>
-
-            {/* Cart Icon */}
-            <CartIcon />
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-export default Header;
--- a/components/cta/cta.tsx
+++ b/components/cta/cta.tsx
@@ -1,6 +1,6 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";

 export type CTAProps = {
  tagline: string;
@@ -43,17 +43,15 @@ export function CTA({
          align === "center" ? "items-center text-center" : "items-start",
        )}
      >
-        {tagline ? (
-          <p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
-            {tagline}
-          </p>
-        ) : null}
-        <Typography variant="h2">{heading}</Typography>
-        {subheading ? (
-          <Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
-            {subheading}
-          </Typography>
-        ) : null}
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align={align === "center" ? "center" : "left"}
+          size="lg"
+          tone="light"
+          subtitleClassName="max-w-xl"
+        />
        <div
          className={cn(
            "mt-10 flex flex-wrap gap-3",
@@ -62,16 +60,16 @@ export function CTA({
        >
          {primaryCta?.label ? (
            <Link
-              to={primaryCta.href || "#"}
-              className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
+              href={primaryCta.href || "#"}
+              className="inline-flex items-center justify-center rounded-md bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
            >
              {primaryCta.label}
            </Link>
          ) : null}
          {secondaryCta?.label ? (
            <Link
-              to={secondaryCta.href || "#"}
-              className="inline-flex items-center justify-center rounded-full border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
+              href={secondaryCta.href || "#"}
+              className="inline-flex items-center justify-center rounded-md border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
            >
              {secondaryCta.label}
            </Link>
--- a/components/faq/faq.tsx
+++ b/components/faq/faq.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Plus, Minus } from "lucide-react";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";

 export type FAQProps = {
  tagline: string;
@@ -14,19 +14,14 @@ export function FAQ({ tagline, heading, subheading, items }: FAQProps) {
  return (
    <section className="bg-background py-20 md:py-28">
      <div className="container mx-auto max-w-3xl px-6">
-        <div className="mb-12 text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mb-12"
+        />

        <div className="divide-y divide-border border-y border-border">
          {items.map((item, i) => {
--- a/components/features/features.tsx
+++ b/components/features/features.tsx
@@ -1,4 +1,6 @@
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";

 export type FeaturesProps = {
  tagline: string;
@@ -17,35 +19,31 @@ const colClass: Record<FeaturesProps["columns"], string> = {
 export function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
  return (
    <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
-        <div className="mx-auto mb-16 max-w-2xl text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-16"
+          maxWidth="max-w-2xl"
+        />

        <div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
          {items.map((item, i) => (
-            <div key={i} className="border-t border-border pt-6">
-              <p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
+            <div key={i} className="flex flex-col gap-3">
+              <Typography variant="caption">
                {String(i + 1).padStart(2, "0")}
-              </p>
+              </Typography>
              <Typography variant="h5">{item.title}</Typography>
-              <Typography variant="body2" className="mt-3 text-muted-foreground">
+              <Typography variant="body2" className="text-muted-foreground">
                {item.body}
              </Typography>
            </div>
          ))}
        </div>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/footer/footer.tsx
+++ b/components/footer/footer.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";

 export type FooterProps = {
  brand: string;
@@ -45,7 +46,7 @@ export function Footer({

  return (
    <footer className="border-t border-border bg-background">
-      <div className="container mx-auto max-w-7xl px-6 py-20 md:py-24">
+      <Container className="py-20 md:py-24">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-12">
          <div className="md:col-span-4">
            <Typography variant="h5" as="p">
@@ -96,7 +97,7 @@ export function Footer({
                  {col.links.map((l, j) => (
                    <li key={j}>
                      <Link
-                        to={l.href}
+                        href={l.href}
                        className="text-sm text-foreground/80 hover:text-foreground"
                      >
                        {l.label}
@@ -123,7 +124,7 @@ export function Footer({
            ))}
          </div>
        </div>
-      </div>
+      </Container>
    </footer>
  );
 }
--- a/components/hero/hero.editor.tsx
+++ b/components/hero/hero.editor.tsx
@@ -13,8 +13,10 @@ export const heroEditor: ComponentConfig<HeroProps> = {
    heading: "Made for the way you move",
    subheading:
      "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
-    primaryCta: { label: "Shop the collection", href: "/collections" },
-    secondaryCta: { label: "Our story", href: "/about" },
+    buttons: [
+      { label: "Shop the collection", href: "/collections", variant: "primary" },
+      { label: "Our story", href: "/about", variant: "secondary" },
+    ],
    imageUrl:
      "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
    align: "left",
@@ -25,21 +27,29 @@ export const heroEditor: ComponentConfig<HeroProps> = {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    heading: { label: "Heading", type: "textarea", contentEditable: true },
    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
-    primaryCta: {
-      label: "Primary CTA",
-      type: "object",
-      objectFields: {
+    buttons: {
+      label: "Buttons",
+      type: "array",
+      arrayFields: {
        label: { label: "Label", type: "text", contentEditable: true },
        href: { label: "Link", type: "text" },
+        variant: {
+          label: "Variant",
+          type: "select",
+          options: [
+            { label: "Primary (filled)", value: "primary" },
+            { label: "Secondary (outline)", value: "secondary" },
+            { label: "Outline", value: "outline" },
+            { label: "Ghost", value: "ghost" },
+          ],
+        },
      },
-    },
-    secondaryCta: {
-      label: "Secondary CTA",
-      type: "object",
-      objectFields: {
-        label: { label: "Label", type: "text", contentEditable: true },
-        href: { label: "Link", type: "text" },
+      defaultItemProps: {
+        label: "Button",
+        href: "/",
+        variant: "primary",
      },
+      getItemSummary: (item) => item?.label || "Button",
    },
    imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
    align: {
--- a/components/hero/hero.tsx
+++ b/components/hero/hero.tsx
@@ -1,13 +1,20 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { Typography } from "@/components/Typography";

+export type HeroButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+
+export type HeroButton = {
+  label: string;
+  href: string;
+  variant: HeroButtonVariant;
+};
+
 export type HeroProps = {
  tagline: string;
  heading: string;
  subheading: string;
-  primaryCta: { label: string; href: string };
-  secondaryCta: { label: string; href: string };
+  buttons: HeroButton[];
  imageUrl: string;
  align: "left" | "center";
  height: "md" | "lg" | "full";
@@ -20,18 +27,40 @@ const heightClass: Record<HeroProps["height"], string> = {
  full: "min-h-screen",
 };

+function buttonClass(variant: HeroButtonVariant, isDark: boolean): string {
+  switch (variant) {
+    case "primary":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
+        isDark ? "bg-white text-black" : "bg-foreground text-background",
+      );
+    case "secondary":
+    case "outline":
+      return cn(
+        "inline-flex items-center justify-center rounded-md border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+        isDark ? "border-white text-white" : "border-foreground text-foreground",
+      );
+    case "ghost":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+        isDark ? "text-white" : "text-foreground",
+      );
+  }
+}
+
 export function Hero({
  tagline,
  heading,
  subheading,
-  primaryCta,
-  secondaryCta,
+  buttons,
  imageUrl,
  align,
  height,
  tone,
 }: HeroProps) {
  const isDark = tone === "dark";
+  const visibleButtons = (buttons ?? []).filter((b) => b?.label);
+
  return (
    <section
      className={cn(
@@ -63,14 +92,15 @@ export function Hero({
        )}
      >
        {tagline ? (
-          <p
+          <Typography
+            variant="caption"
            className={cn(
-              "mb-5 text-xs uppercase tracking-[0.2em]",
+              "mb-5",
              isDark ? "text-white/80" : "text-foreground/70",
            )}
          >
            {tagline}
-          </p>
+          </Typography>
        ) : null}
        <Typography variant="h1" className="max-w-3xl">
          {heading}
@@ -87,35 +117,24 @@ export function Hero({
          </Typography>
        ) : null}

-        <div
-          className={cn(
-            "mt-10 flex flex-wrap gap-3",
-            align === "center" && "justify-center",
-          )}
-        >
-          {primaryCta?.label ? (
-            <Link
-              to={primaryCta.href || "#"}
-              className={cn(
-                "inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
-                isDark ? "bg-white text-black" : "bg-foreground text-background",
-              )}
-            >
-              {primaryCta.label}
-            </Link>
-          ) : null}
-          {secondaryCta?.label ? (
-            <Link
-              to={secondaryCta.href || "#"}
-              className={cn(
-                "inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
-                isDark ? "border-white text-white" : "border-foreground text-foreground",
-              )}
-            >
-              {secondaryCta.label}
-            </Link>
-          ) : null}
-        </div>
+        {visibleButtons.length > 0 ? (
+          <div
+            className={cn(
+              "mt-10 flex flex-wrap gap-3",
+              align === "center" && "justify-center",
+            )}
+          >
+            {visibleButtons.map((b, i) => (
+              <Link
+                key={`${b.href}-${b.label}-${i}`}
+                href={b.href || "#"}
+                className={buttonClass(b.variant, isDark)}
+              >
+                {b.label}
+              </Link>
+            ))}
+          </div>
+        ) : null}
      </div>
    </section>
  );
--- a/components/landing/banner.tsx
+++ b/components/landing/banner.tsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import { cn } from "@/lib/utils";

 export type BannerProps = {
@@ -20,7 +20,7 @@ export function Banner({ text, ctaLabel, ctaHref, tone }: BannerProps) {
        <span>{text}</span>
        {ctaLabel ? (
          <Link
-            to={ctaHref || "#"}
+            href={ctaHref || "#"}
            className="underline-offset-4 hover:underline"
          >
            {ctaLabel} →
--- a/components/landing/image-gallery.tsx
+++ b/components/landing/image-gallery.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";

 export type ImageGalleryProps = {
  tagline: string;
@@ -12,22 +13,16 @@ export type ImageGalleryProps = {
 export function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
  return (
    <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
-        {(tagline || heading || subheading) && (
-          <div className="mx-auto mb-12 max-w-2xl text-center">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            {heading ? <Typography variant="h2">{heading}</Typography> : null}
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
-        )}
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-12"
+          maxWidth="max-w-2xl"
+        />

        {layout === "masonry" ? (
          <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
@@ -86,7 +81,7 @@ export function ImageGallery({ tagline, heading, subheading, layout, items }: Im
            ))}
          </div>
        )}
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/landing/newsletter-cta.tsx
+++ b/components/landing/newsletter-cta.tsx
@@ -1,6 +1,9 @@
 import { useState } from "react";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Heading } from "@/components/Heading";

 export type EmailProvider = "none" | "mailchimp" | "klaviyo";

@@ -108,92 +111,80 @@ export function NewsletterCta({
  const Form = (
    <form
      onSubmit={submit}
-      className="flex w-full max-w-md items-center border-b border-foreground/30 focus-within:border-foreground"
+      className="flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-center"
    >
-      <input
+      <Input
        type="email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
-        placeholder="you@example.com"
-        className="flex-1 bg-transparent py-3 text-sm placeholder:text-muted-foreground focus:outline-none"
+        placeholder="Enter your email"
+        className="h-11 flex-1"
      />
-      <button
-        type="submit"
-        disabled={submitting}
-        className="ml-3 text-sm font-medium tracking-wide hover:opacity-70 disabled:opacity-40"
-      >
-        {submitting ? "…" : buttonLabel} →
-      </button>
+      <Button type="submit" size="lg" disabled={submitting} className="h-11">
+        {submitting ? "Joining…" : buttonLabel}
+      </Button>
    </form>
  );

-  if (layout === "split") {
-    return (
-      <section className="bg-background">
-        <div className="container mx-auto max-w-7xl px-6 py-16 md:py-24">
-          <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
-            <div>
-              {imageUrl ? (
+  const isStacked = layout === "stacked";
+
+  return (
+    <section className="bg-background">
+      <Container className="py-20 md:py-28">
+        <div
+          className={cn(
+            "grid grid-cols-1 gap-10",
+            isStacked
+              ? "mx-auto max-w-3xl items-center text-center"
+              : "items-center md:grid-cols-12 md:gap-16",
+          )}
+        >
+          {imageUrl ? (
+            <div className={cn(!isStacked && "md:col-span-7")}>
+              <div className="relative overflow-hidden rounded-xl bg-muted">
                <img
                  src={imageUrl}
                  alt=""
-                  className="aspect-[5/4] w-full rounded-md object-cover"
+                  className={cn(
+                    "w-full object-cover transition-transform duration-700 hover:scale-105",
+                    isStacked ? "aspect-[16/9]" : "aspect-[4/3]",
+                  )}
                />
-              ) : null}
-            </div>
-            <div className="flex flex-col items-start">
-              {tagline ? (
-                <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                  {tagline}
-                </p>
-              ) : null}
-              <Typography variant="h2">{heading}</Typography>
-              {subheading ? (
-                <Typography variant="subtitle1" className="mt-3 max-w-md">
-                  {subheading}
-                </Typography>
-              ) : null}
-              <div className="mt-8 w-full">
-                {submitted ? (
-                  <p className="text-sm text-muted-foreground">
-                    Thanks — we'll be in touch.
-                  </p>
-                ) : (
-                  Form
-                )}
              </div>
            </div>
+          ) : null}
+          <div
+            className={cn(
+              "flex w-full flex-col",
+              isStacked ? "items-center" : "items-start md:col-span-5",
+            )}
+          >
+            <Heading
+              tagline={tagline}
+              title={heading}
+              subtitle={subheading}
+              align={isStacked ? "center" : "left"}
+              size="lg"
+              subtitleClassName={isStacked ? "mx-auto max-w-xl" : "max-w-md"}
+            />
+            <div
+              className={cn(
+                "mt-8 w-full",
+                isStacked && "flex justify-center",
+              )}
+            >
+              {submitted ? (
+                <p className="text-sm font-medium uppercase tracking-wide">
+                  You're in. See you Monday at 5:30am.
+                </p>
+              ) : (
+                Form
+              )}
+            </div>
          </div>
        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="bg-muted/40 py-20 md:py-28">
-      <div className="container mx-auto max-w-2xl px-6 text-center">
-        {tagline ? (
-          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {tagline}
-          </p>
-        ) : null}
-        <Typography variant="h2">{heading}</Typography>
-        {subheading ? (
-          <Typography variant="subtitle1" className="mt-3">
-            {subheading}
-          </Typography>
-        ) : null}
-        <div className={cn("mx-auto mt-10 flex w-full max-w-md justify-center")}>
-          {submitted ? (
-            <p className="text-sm text-muted-foreground">
-              Thanks — we'll be in touch.
-            </p>
-          ) : (
-            Form
-          )}
-        </div>
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/layout/Container.tsx
+++ b/components/layout/Container.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type ContainerProps = React.HTMLAttributes<HTMLElement> & {
+  as?: React.ElementType;
+};
+
+export function Container({
+  as: Comp = "div",
+  className,
+  style,
+  ...props
+}: ContainerProps) {
+  return (
+    <Comp
+      className={cn("mx-auto w-full px-6", className)}
+      style={{ maxWidth: "var(--container-max-width, 80rem)", ...style }}
+      {...props}
+    />
+  );
+}
--- a/components/logos/logos.tsx
+++ b/components/logos/logos.tsx
@@ -1,3 +1,6 @@
+import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
+
 export type LogosProps = {
  tagline: string;
  items: Array<{ src: string; alt: string }>;
@@ -7,11 +10,11 @@ export type LogosProps = {
 export function Logos({ tagline, items, layout }: LogosProps) {
  return (
    <section className="border-y border-border bg-muted/40 py-12">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
        {tagline ? (
-          <p className="mb-8 text-center text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          <Typography variant="caption" className="mb-8 text-center">
            {tagline}
-          </p>
+          </Typography>
        ) : null}
        {layout === "marquee" ? (
          <div className="overflow-hidden">
@@ -38,7 +41,7 @@ export function Logos({ tagline, items, layout }: LogosProps) {
            ))}
          </div>
        )}
-      </div>
+      </Container>
    </section>
  );
 }
--- a/components/navigation/navigation.editor.tsx
+++ b/components/navigation/navigation.editor.tsx
@@ -13,21 +13,19 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
    brand: "Maison",
    logo: "",
    links: [
-      { label: "Shop", href: "/collections" },
-      { label: "Lookbook", href: "/lookbook" },
-      { label: "Journal", href: "/journal" },
+      { label: "Mens", href: "/collections/mens" },
+      { label: "Womens", href: "/collections/womens" },
+      { label: "Shop", href: "/search" },
      { label: "About", href: "/about" },
    ],
    showSearch: "yes",
    showCart: "yes",
    sticky: "yes",
    tone: "default",
-    bannerText: "",
-    bannerTone: "accent",
  },
  fields: {
-    brand: { label: "Brand", type: "text", contentEditable: true },
    logo: { label: "Logo", ...imageField({ adapter: frontendAiMediaAdapter }) },
+    brand: { label: "Logo Alt", type: "text", contentEditable: true },
    links: {
      label: "Links",
      type: "array",
@@ -38,20 +36,6 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
        href: { label: "Link", type: "text" },
      },
    },
-    bannerText: {
-      label: "Banner text",
-      type: "text",
-      contentEditable: true,
-    },
-    bannerTone: {
-      label: "Banner tone",
-      type: "select",
-      options: [
-        { label: "Default", value: "default" },
-        { label: "Accent", value: "accent" },
-        { label: "Inverse (dark)", value: "inverse" },
-      ],
-    },
    showSearch: {
      label: "Search icon",
      type: "radio",
--- a/components/navigation/navigation.tsx
+++ b/components/navigation/navigation.tsx
@@ -1,8 +1,10 @@
 import { Menu as MenuIcon, ShoppingBag, Search } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";

 export type NavigationProps = {
@@ -13,8 +15,6 @@ export type NavigationProps = {
  showCart: "yes" | "no";
  sticky: "yes" | "no";
  tone: "default" | "muted" | "inverse";
-  bannerText: string;
-  bannerTone: "default" | "accent" | "inverse";
 };

 export function Navigation({
@@ -25,11 +25,8 @@ export function Navigation({
  showCart,
  sticky,
  tone,
-  bannerText,
-  bannerTone,
 }: NavigationProps) {
  const [mobileOpen, setMobileOpen] = useState(false);
-  const [cartOpen, setCartOpen] = useState(false);
  const cart = useShopifyCart();
  const itemCount = cart?.itemCount ?? 0;

@@ -39,14 +36,6 @@ export function Navigation({
    inverse: "bg-foreground text-background",
  };

-  const bannerToneClass: Record<NavigationProps["bannerTone"], string> = {
-    default: "bg-muted text-foreground",
-    accent: "bg-primary text-primary-foreground",
-    inverse: "bg-foreground text-background",
-  };
-
-  const hasBanner = typeof bannerText === "string" && bannerText.trim().length > 0;
-
  return (
    <>
      <div
@@ -55,13 +44,6 @@ export function Navigation({
          sticky === "yes" && "sticky top-0 z-40",
        )}
      >
-        {hasBanner && (
-          <div className={cn("w-full", bannerToneClass[bannerTone])}>
-            <div className="container mx-auto max-w-7xl px-6 py-2 text-center text-xs tracking-wide md:text-sm">
-              {bannerText}
-            </div>
-          </div>
-        )}
      <header
        className={cn(
          "w-full",
@@ -69,12 +51,8 @@ export function Navigation({
          toneClass[tone],
        )}
      >
-        <div className="container mx-auto flex h-16 max-w-7xl items-center justify-between px-6 md:h-20">
-          <Link
-            to="/"
-            className="inline-flex items-center font-semibold tracking-tight"
-            style={{ fontSize: "1.125rem", letterSpacing: "0.02em" }}
-          >
+        <Container className="flex h-16 items-center justify-between md:h-20">
+          <Link href="/" className="inline-flex items-center">
            {logo ? (
              <img
                src={logo}
@@ -82,7 +60,9 @@ export function Navigation({
                className="h-8 w-auto object-contain"
              />
            ) : (
-              brand || "Brand Logo"
+              <Typography variant="h3" as="span">
+                {brand || "Brand Logo"}
+              </Typography>
            )}
          </Link>

@@ -90,7 +70,7 @@ export function Navigation({
            {links.map((l) => (
              <Link
                key={l.href + l.label}
-                to={l.href}
+                href={l.href}
                className="text-sm tracking-wide opacity-80 transition-opacity hover:opacity-100"
              >
                {l.label}
@@ -100,16 +80,17 @@ export function Navigation({

          <div className="flex items-center gap-1">
            {showSearch === "yes" && (
-              <button
+              <Link
+                href="/search"
                aria-label="Search"
                className="hidden h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:inline-flex"
              >
                <Search size={18} strokeWidth={1.5} />
-              </button>
+              </Link>
            )}
            {showCart === "yes" && (
              <button
-                onClick={() => setCartOpen(true)}
+                onClick={() => cart.openCart()}
                aria-label="Cart"
                className="relative inline-flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5"
              >
@@ -129,7 +110,7 @@ export function Navigation({
              <MenuIcon size={20} strokeWidth={1.5} />
            </button>
          </div>
-        </div>
+        </Container>
      </header>
      </div>

@@ -139,11 +120,11 @@ export function Navigation({
          <SheetHeader>
            <SheetTitle className="text-left">{brand}</SheetTitle>
          </SheetHeader>
-          <nav className="mt-6 flex flex-col gap-1">
+          <nav className="mt-2 flex flex-col gap-1 px-4">
            {links.map((l) => (
              <Link
                key={l.href + l.label}
-                to={l.href}
+                href={l.href}
                className="rounded-md px-3 py-3 text-base hover:bg-muted"
              >
                {l.label}
@@ -153,90 +134,6 @@ export function Navigation({
        </SheetContent>
      </Sheet>

-      {/* Cart drawer */}
-      <Sheet open={cartOpen} onOpenChange={setCartOpen}>
-        <SheetContent side="right" className="flex w-[92vw] max-w-md flex-col">
-          <SheetHeader>
-            <SheetTitle className="text-left">Cart</SheetTitle>
-          </SheetHeader>
-
-          <div className="-mx-6 mt-4 flex-1 overflow-y-auto px-6">
-            {cart?.items?.length ? (
-              <ul className="divide-y divide-border">
-                {cart.items.map((line: any) => (
-                  <li key={line.id} className="flex gap-4 py-4">
-                    <div className="aspect-square h-20 flex-shrink-0 overflow-hidden rounded-md bg-muted">
-                      {line.merchandise?.product?.images?.edges?.[0]?.node?.url ? (
-                        <img
-                          src={line.merchandise.product.images.edges[0].node.url}
-                          alt={line.merchandise.product.title}
-                          className="h-full w-full object-cover"
-                        />
-                      ) : null}
-                    </div>
-                    <div className="flex flex-1 flex-col">
-                      <p className="text-sm font-medium">{line.merchandise?.product?.title}</p>
-                      {line.merchandise?.title && line.merchandise.title !== "Default Title" ? (
-                        <p className="text-xs text-muted-foreground">{line.merchandise.title}</p>
-                      ) : null}
-                      <div className="mt-auto flex items-center justify-between">
-                        <div className="flex items-center gap-2 text-xs">
-                          <button
-                            onClick={() => cart.updateItemQuantity(line.id, line.quantity - 1)}
-                            className="h-6 w-6 rounded-full border border-border hover:bg-muted"
-                          >
-                            −
-                          </button>
-                          <span>{line.quantity}</span>
-                          <button
-                            onClick={() => cart.updateItemQuantity(line.id, line.quantity + 1)}
-                            className="h-6 w-6 rounded-full border border-border hover:bg-muted"
-                          >
-                            +
-                          </button>
-                        </div>
-                        <span className="text-sm">
-                          {line.merchandise?.price
-                            ? new Intl.NumberFormat("en-US", {
-                                style: "currency",
-                                currency: line.merchandise.price.currencyCode,
-                              }).format(parseFloat(line.merchandise.price.amount) * line.quantity)
-                            : null}
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <div className="flex h-full flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground">
-                <ShoppingBag size={28} strokeWidth={1.25} />
-                <p>Your cart is empty.</p>
-              </div>
-            )}
-          </div>
-
-          {cart?.items?.length ? (
-            <div className="border-t border-border pt-4">
-              <div className="mb-4 flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">Subtotal</span>
-                <span className="font-medium">
-                  {new Intl.NumberFormat("en-US", {
-                    style: "currency",
-                    currency: cart.cart?.cost?.totalAmount?.currencyCode ?? "USD",
-                  }).format(cart.totalAmount)}
-                </span>
-              </div>
-              <a
-                href={cart.checkoutUrl ?? "#"}
-                className="inline-flex w-full items-center justify-center rounded-full bg-foreground px-4 py-3 text-sm font-medium text-background transition-opacity hover:opacity-90"
-              >
-                Checkout
-              </a>
-            </div>
-          ) : null}
-        </SheetContent>
-      </Sheet>
    </>
  );
 }
--- a/components/testimonials/testimonials.tsx
+++ b/components/testimonials/testimonials.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";

 export type TestimonialsProps = {
  tagline: string;
@@ -21,58 +21,77 @@ export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
  return (
    <section className="bg-muted/40 py-20 md:py-28">
      <div className="container mx-auto max-w-4xl px-6 text-center">
-        {tagline ? (
-          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {tagline}
-          </p>
-        ) : null}
-        {heading ? <Typography variant="h2">{heading}</Typography> : null}
+        <Heading
+          tagline={tagline}
+          title={heading}
+          align="center"
+          size="lg"
+        />

        {item ? (
-          <figure className="mx-auto mt-12 flex max-w-2xl flex-col items-center">
-            <blockquote
-              className="text-balance text-foreground"
-              style={{ fontSize: "clamp(1.25rem, 2.4vw, 1.75rem)", lineHeight: 1.4 }}
-            >
-              {item.quote}
-            </blockquote>
-            <figcaption className="mt-8 flex items-center gap-3">
-              {item.avatar ? (
-                <img
-                  src={item.avatar}
-                  alt={item.author}
-                  className="h-10 w-10 rounded-full object-cover"
-                />
-              ) : null}
-              <div className="text-left">
-                <p className="text-sm font-medium">{item.author}</p>
-                {item.role ? (
-                  <p className="text-xs text-muted-foreground">{item.role}</p>
-                ) : null}
-              </div>
-            </figcaption>
-          </figure>
-        ) : null}
+          <div className="relative mt-12">
+            {total > 1 ? (
+              <button
+                onClick={() => setI((p) => (p - 1 + total) % total)}
+                className="absolute left-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
+                aria-label="Previous"
+              >
+                <ArrowLeft size={16} />
+              </button>
+            ) : null}

-        {total > 1 ? (
-          <div className="mt-10 flex items-center justify-center gap-3">
-            <button
-              onClick={() => setI((p) => (p - 1 + total) % total)}
-              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
-              aria-label="Previous"
-            >
-              <ArrowLeft size={16} />
-            </button>
-            <span className="text-xs tabular-nums text-muted-foreground">
-              {i + 1} / {total}
-            </span>
-            <button
-              onClick={() => setI((p) => (p + 1) % total)}
-              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
-              aria-label="Next"
-            >
-              <ArrowRight size={16} />
-            </button>
+            <figure className="mx-auto flex max-w-2xl flex-col items-center px-12 md:px-16">
+              <blockquote
+                className="text-balance text-foreground"
+                style={{ fontSize: "clamp(1.25rem, 2.4vw, 1.75rem)", lineHeight: 1.4 }}
+              >
+                {item.quote}
+              </blockquote>
+              <figcaption className="mt-8 flex items-center gap-3">
+                {item.avatar ? (
+                  <img
+                    src={item.avatar}
+                    alt={item.author}
+                    className="h-10 w-10 rounded-full object-cover"
+                  />
+                ) : null}
+                <div className="text-left">
+                  <p className="text-sm font-medium">{item.author}</p>
+                  {item.role ? (
+                    <p className="text-xs text-muted-foreground">{item.role}</p>
+                  ) : null}
+                </div>
+              </figcaption>
+            </figure>
+
+            {total > 1 ? (
+              <button
+                onClick={() => setI((p) => (p + 1) % total)}
+                className="absolute right-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
+                aria-label="Next"
+              >
+                <ArrowRight size={16} />
+              </button>
+            ) : null}
+
+            {total > 1 ? (
+              <div className="mt-8 flex items-center justify-center gap-3 md:hidden">
+                <button
+                  onClick={() => setI((p) => (p - 1 + total) % total)}
+                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
+                  aria-label="Previous"
+                >
+                  <ArrowLeft size={16} />
+                </button>
+                <button
+                  onClick={() => setI((p) => (p + 1) % total)}
+                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
+                  aria-label="Next"
+                >
+                  <ArrowRight size={16} />
+                </button>
+              </div>
+            ) : null}
          </div>
        ) : null}
      </div>
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -22,8 +22,8 @@ const buttonVariants = cva(
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        sm: "h-8 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-6 has-[>svg]:px-4",
        icon: "size-9",
      },
    },
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -104,7 +104,7 @@ function SelectTrigger({
      data-slot="select-trigger"
      onClick={() => setOpen(!open)}
      className={cn(
-        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*="text-"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
+        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*="text-"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full min-w-[10rem] items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
        className
      )}
      {...props}
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,303 +1,134 @@
-"use client";
+"use client"

-import React, { useState, useCallback, useContext, createContext } from 'react';
-import { createPortal } from 'react-dom';
-import { motion, AnimatePresence } from 'framer-motion';
-import { cn } from '@/lib/utils';
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"

-interface SheetContextType {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  side: 'top' | 'right' | 'bottom' | 'left';
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }

-const SheetContext = createContext<SheetContextType | undefined>(undefined);
-
-function useSheet() {
-  const context = useContext(SheetContext);
-  if (!context) {
-    throw new Error('Sheet components must be used within a Sheet');
-  }
-  return context;
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }

-interface SheetProps {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  children: React.ReactNode;
-  side?: 'top' | 'right' | 'bottom' | 'left';
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }

-function Sheet({
-  open: controlledOpen,
-  onOpenChange,
-  children,
-  side = 'right',
-}: SheetProps) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? controlledOpen : internalOpen;
-
-  const setOpen = useCallback(
-    (newOpen: boolean) => {
-      if (!isControlled) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    },
-    [isControlled, onOpenChange]
-  );
-
-  return (
-    <SheetContext.Provider value={{ open, setOpen, side }}>
-      {children}
-    </SheetContext.Provider>
-  );
-}
-
-function SheetTrigger(
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
-) {
-  const { setOpen } = useSheet();
-  const { children, asChild, ...rest } = props;
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement, {
-      ...rest,
-      onClick: (e: React.MouseEvent) => {
-        setOpen(true);
-        children.props.onClick?.(e);
-      },
-    });
-  }
-
-  return (
-    <button
-      data-slot="sheet-trigger"
-      {...rest}
-      onClick={(e) => {
-        setOpen(true);
-        props.onClick?.(e);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SheetPortal({ children }: { children: React.ReactNode }) {
-  if (typeof document === 'undefined') return null;
-  return createPortal(children, document.body);
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }

 function SheetOverlay({
  className,
-  onClick,
  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  const { setOpen } = useSheet();
-
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
-    <motion.div
+    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
-      className={cn('fixed inset-0 z-50 bg-black/50', className)}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      transition={{ duration: 0.3 }}
-      onClick={(e) => {
-        setOpen(false);
-        onClick?.(e);
-      }}
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
      {...props}
    />
-  );
-}
-
-interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  showCloseButton?: boolean;
+  )
 }

 function SheetContent({
  className,
  children,
+  side = "right",
  showCloseButton = true,
  ...props
-}: SheetContentProps) {
-  const { open, setOpen, side } = useSheet();
-
-  const sideClasses = {
-    right: 'inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-l',
-    left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-r',
-    top: 'inset-x-0 top-0 h-auto border-b',
-    bottom: 'inset-x-0 bottom-0 h-auto border-t',
-  };
-
-  const slideVariants = {
-    right: {
-      initial: { x: 400, opacity: 0 },
-      animate: { x: 0, opacity: 1 },
-      exit: { x: 400, opacity: 0 },
-    },
-    left: {
-      initial: { x: -400, opacity: 0 },
-      animate: { x: 0, opacity: 1 },
-      exit: { x: -400, opacity: 0 },
-    },
-    top: {
-      initial: { y: -400, opacity: 0 },
-      animate: { y: 0, opacity: 1 },
-      exit: { y: -400, opacity: 0 },
-    },
-    bottom: {
-      initial: { y: 400, opacity: 0 },
-      animate: { y: 0, opacity: 1 },
-      exit: { y: 400, opacity: 0 },
-    },
-  };
-
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
  return (
    <SheetPortal>
-      <AnimatePresence>
-        {open ? (
-          <>
-            <SheetOverlay />
-            <motion.div
-              data-slot="sheet-content"
-              className={cn(
-                'bg-background fixed z-50 flex flex-col gap-0 shadow-lg',
-                sideClasses[side],
-                className,
-              )}
-              variants={slideVariants[side]}
-              initial="initial"
-              animate="animate"
-              exit="exit"
-              transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-              {...props}
-            >
-              {children}
-              {showCloseButton && (
-                <button
-                  data-slot="sheet-close"
-                  onClick={() => setOpen(false)}
-                  className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-                  aria-label="Close"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="size-4"
-                  >
-                    <path d="M18 6l-12 12M6 6l12 12" />
-                  </svg>
-                </button>
-              )}
-            </motion.div>
-          </>
-        ) : null}
-      </AnimatePresence>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
    </SheetPortal>
-  );
+  )
 }

-function SheetClose(
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
-) {
-  const { setOpen } = useSheet();
-  const { children, asChild, ...rest } = props;
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement, {
-      ...rest,
-      onClick: (e: React.MouseEvent) => {
-        setOpen(false);
-        children.props.onClick?.(e);
-      },
-    });
-  }
-
-  return (
-    <button
-      data-slot="sheet-close"
-      {...rest}
-      onClick={(e) => {
-        setOpen(false);
-        props.onClick?.(e);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-header"
-      className={cn(
-        'flex flex-col gap-1.5 p-6 border-b border-border',
-        className
-      )}
+      className={cn("flex flex-col gap-1.5 p-4", className)}
      {...props}
    />
-  );
+  )
 }

-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-footer"
-      className={cn(
-        'flex flex-col-reverse gap-2 p-6 border-t border-border sm:flex-row sm:justify-end',
-        className
-      )}
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
-  );
+  )
 }

-function SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
-    <h2
+    <SheetPrimitive.Title
      data-slot="sheet-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn("text-foreground font-semibold", className)}
      {...props}
    />
-  );
+  )
 }

-function SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
-    <p
+    <SheetPrimitive.Description
      data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
-  );
-}
-
-interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-function SheetBody({ className, children, ...props }: SheetBodyProps) {
-  return (
-    <div
-      data-slot="sheet-body"
-      className={cn('flex-1 overflow-y-auto px-6 py-4', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
+  )
 }

 export {
@@ -309,8 +140,4 @@ export {
  SheetFooter,
  SheetTitle,
  SheetDescription,
-  SheetBody,
-  SheetPortal,
-  SheetOverlay,
-  AnimatePresence,
-};
+}
--- a/config/configs.ts
+++ b/config/configs.ts
@@ -0,0 +1,108 @@
+import {
+  createFieldShopifyProduct,
+  createFieldShopifyCollection,
+} from "@reacteditor/field-shopify";
+
+import { navigationEditor } from "@/components/navigation/navigation.editor";
+import { footerEditor } from "@/components/footer/footer.editor";
+
+import { heroEditor } from "@/components/hero/hero.editor";
+import { bannerEditor } from "@/components/landing/banner.editor";
+
+import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
+import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
+import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
+import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
+import { createCollectionEditor } from "@/components/commerce/collection.editor";
+import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
+import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
+import { searchProductsEditor } from "@/components/commerce/search-products.editor";
+
+import { featuresEditor } from "@/components/features/features.editor";
+import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
+import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
+import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
+import { logosEditor } from "@/components/logos/logos.editor";
+import { ctaEditor } from "@/components/cta/cta.editor";
+import { faqEditor } from "@/components/faq/faq.editor";
+
+import Root from "@/config/root";
+import type { UserConfig } from "@/config/types";
+
+const SHOPIFY_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
+const STOREFRONT_TOKEN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
+
+const productField = createFieldShopifyProduct({
+  storeDomain: SHOPIFY_DOMAIN,
+  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
+}) as any;
+
+const collectionField = createFieldShopifyCollection({
+  storeDomain: SHOPIFY_DOMAIN,
+  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
+}) as any;
+
+const categories = {
+  navigation: { title: "Navigation" },
+  hero: { title: "Hero & Banners" },
+  commerce: { title: "Commerce" },
+  content: { title: "Content" },
+  footer: { title: "Footer" },
+};
+
+const sharedComponents = {
+  navigation: navigationEditor,
+  footer: footerEditor,
+};
+
+export const homeConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    hero: heroEditor,
+    banner: bannerEditor,
+    "featured-product": createFeaturedProductEditor({ productField }),
+    "products-grid": createProductsGridEditor({ collectionField }),
+    "products-carousel": createProductsCarouselEditor({ collectionField }),
+    "collection-grid": collectionGridEditor,
+    features: featuresEditor,
+    testimonials: testimonialsEditor,
+    "image-gallery": imageGalleryEditor,
+    "newsletter-cta": newsletterCtaEditor,
+    logos: logosEditor,
+    cta: ctaEditor,
+    faq: faqEditor,
+  } as any,
+};
+
+export const productConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    "product-details": createProductDetailsEditor({ productField }),
+    "recommended-products": createRecommendedProductsEditor({ productField }),
+    "products-carousel": createProductsCarouselEditor({ collectionField }),
+  } as any,
+};
+
+export const collectionsConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    collection: createCollectionEditor({ collectionField }),
+  } as any,
+};
+
+export const searchConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    "search-products": searchProductsEditor,
+  } as any,
+};
--- a/config/root.tsx
+++ b/config/root.tsx
@@ -22,6 +22,7 @@ export const Root: RootConfig<{
  defaultProps: {
    title: "Untitled",
    headerFont: "Inter",
+    headerFontWeight: "600",
    bodyFont: "Inter",
    // Hex defaults so the color picker reads them and any non-picker
    // input (typed hex, AI-set value, etc.) is round-trip compatible.
@@ -31,17 +32,28 @@ export const Root: RootConfig<{
    bgColor: "#ffffff",
    fgColor: "#0a0a0a",
    mutedColor: "#f5f5f5",
-    roundedness: "md",
    radius: "md",
-    shadowLevel: "sm",
    shadow: "sm",
-    maxWidth: "xl",
+    maxWidth: "lg",
  },
  fields: {
    title: { label: "Page title", type: "text" },
    description: { label: "Description", type: "textarea" },
    ogImage: { label: "OG image", ...imageField({ adapter: frontendAiMediaAdapter }) },
    headerFont: { label: "Header font", ...headerFontField },
+    headerFontWeight: {
+      label: "Header font weight",
+      type: "select",
+      options: [
+        { label: "300 — Light", value: "300" },
+        { label: "400 — Regular", value: "400" },
+        { label: "500 — Medium", value: "500" },
+        { label: "600 — Semibold", value: "600" },
+        { label: "700 — Bold", value: "700" },
+        { label: "800 — Extrabold", value: "800" },
+        { label: "900 — Black", value: "900" },
+      ],
+    },
    bodyFont: { label: "Body font", ...bodyFontField },
    primaryColor: { label: "Primary color", type: "color", placeholder: "#0a0a0a" },
    secondaryColor: { label: "Secondary color", type: "color", placeholder: "#64748B" },
@@ -49,34 +61,11 @@ export const Root: RootConfig<{
    bgColor: { label: "Background color", type: "color", placeholder: "#ffffff" },
    fgColor: { label: "Foreground color", type: "color", placeholder: "#0a0a0a" },
    mutedColor: { label: "Muted color", type: "color", placeholder: "#f5f5f5" },
-    roundedness: {
-      label: "Roundedness",
-      type: "select",
-      options: [
-        { label: "None", value: "none" },
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" },
-        { label: "Extra large", value: "xl" },
-        { label: "Full (pill)", value: "full" },
-      ],
-    },
    radius: {
      label: "Radius",
      type: "select",
      options: [
-        { label: "None", value: "none" },
-        { label: "Extra small", value: "xs" },
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" },
-      ],
-    },
-    shadowLevel: {
-      label: "Shadow level",
-      type: "select",
-      options: [
-        { label: "None", value: "none" },
+        { label: "None (square)", value: "none" },
        { label: "Small", value: "sm" },
        { label: "Medium", value: "md" },
        { label: "Large", value: "lg" },
@@ -91,6 +80,7 @@ export const Root: RootConfig<{
        { label: "Small", value: "sm" },
        { label: "Medium", value: "md" },
        { label: "Large", value: "lg" },
+        { label: "Extra large", value: "xl" },
      ],
    },
    maxWidth: {
@@ -101,7 +91,6 @@ export const Root: RootConfig<{
        { label: "Medium", value: "md" },
        { label: "Large", value: "lg" },
        { label: "Extra large", value: "xl" },
-        { label: "2X large", value: "2xl" },
        { label: "Full bleed", value: "full" },
      ],
    },
@@ -109,6 +98,7 @@ export const Root: RootConfig<{
  render: ({
    children,
    headerFont,
+    headerFontWeight,
    bodyFont,
    primaryColor,
    secondaryColor,
@@ -116,14 +106,14 @@ export const Root: RootConfig<{
    bgColor,
    fgColor,
    mutedColor,
-    roundedness,
    radius,
-    shadowLevel,
    shadow,
+    maxWidth,
  }) => {
    return (
      <ThemeProvider
        headerFont={headerFont}
+        headerFontWeight={headerFontWeight}
        bodyFont={bodyFont}
        primaryColor={primaryColor}
        secondaryColor={secondaryColor}
@@ -131,10 +121,9 @@ export const Root: RootConfig<{
        bgColor={bgColor}
        fgColor={fgColor}
        mutedColor={mutedColor}
-        roundedness={roundedness}
        radius={radius}
-        shadowLevel={shadowLevel}
        shadow={shadow}
+        maxWidth={maxWidth}
      >
        {children}
      </ThemeProvider>
--- a/contexts/shopify-context.tsx
+++ b/contexts/shopify-context.tsx
@@ -1,6 +1,7 @@
 'use client';

 import React, { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { ShoppingBag } from 'lucide-react';
 import {
  createCart,
  getCart,
@@ -9,6 +10,8 @@ import {
  updateCartLines,
 } from '@/hooks/use-shopify-cart';
 import { setShopifyCredentials } from '@/services/shopify/client';
+import CartDrawer from '@/components/commerce/cart-drawer';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';

 const CART_ID_KEY = 'cartId';

@@ -200,6 +203,7 @@ export const ShopifyProvider: React.FC<{
      ]);

      setCart(updatedCart);
+      setIsOpen(true);
      return updatedCart;
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Failed to add item to cart';
@@ -284,6 +288,7 @@ export const ShopifyProvider: React.FC<{
        refreshCart,
      }}>
        {children}
+        <CartDrawer />
      </CartContext.Provider>
    </ShopifyConfigContext.Provider>
  );
--- a/graphql/collections.js
+++ b/graphql/collections.js
@@ -31,7 +31,7 @@ export const GET_COLLECTIONS_QUERY = `
 // Get products in a collection
 export const GET_COLLECTION_PRODUCTS_QUERY = `
  ${ProductFragment}
-  query GetCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys, $reverse: Boolean) {
+  query GetCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys, $reverse: Boolean, $filters: [ProductFilter!], $after: String) {
    collection(handle: $handle) {
      id
      title
@@ -45,7 +45,7 @@ export const GET_COLLECTION_PRODUCTS_QUERY = `
        width
        height
      }
-      products(first: $first, sortKey: $sortKey, reverse: $reverse) {
+      products(first: $first, sortKey: $sortKey, reverse: $reverse, filters: $filters, after: $after) {
        edges {
          node {
            ...ProductFragment
--- a/graphql/products.js
+++ b/graphql/products.js
@@ -105,6 +105,30 @@ export const GET_PRODUCT_QUERY = `
  }
 `;

+// Search products with cursor-based pagination and full filter support
+export const GET_SEARCH_QUERY = `
+  ${ProductFragment}
+  query SearchProducts(
+    $first: Int!
+    $query: String
+    $sortKey: ProductSortKeys
+    $reverse: Boolean
+    $after: String
+  ) {
+    products(first: $first, query: $query, sortKey: $sortKey, reverse: $reverse, after: $after) {
+      edges {
+        node {
+          ...ProductFragment
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+`;
+
 // Get product recommendations
 export const QUERY_PRODUCT_RECOMMENDATIONS = `
  ${ProductFragment}
--- a/hooks/use-shopify-collections.ts
+++ b/hooks/use-shopify-collections.ts
@@ -26,10 +26,23 @@ export interface CollectionWithProducts extends Collection {
  products: Product[];
 }

+export type CollectionSortKey = 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+
+export interface ProductFilter {
+  available?: boolean;
+  price?: { min?: number; max?: number };
+  productType?: string;
+  productVendor?: string;
+  tag?: string;
+  variantOption?: { name: string; value: string };
+  productMetafield?: { namespace: string; key: string; value: string };
+}
+
 interface UseCollectionProductsOptions {
  first?: number;
-  sortKey?: 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+  sortKey?: CollectionSortKey;
  reverse?: boolean;
+  filters?: ProductFilter[];
 }

 // Fetch all collections
@@ -45,19 +58,24 @@ export async function getCollections(first = 50): Promise<Collection[]> {
 // Fetch products in a collection by handle
 export async function getCollectionProducts(
  handle: string,
-  { first = 50, sortKey = 'BEST_SELLING', reverse = false }: UseCollectionProductsOptions = {}
-): Promise<CollectionWithProducts | null> {
+  { first = 50, sortKey = 'BEST_SELLING', reverse = false, filters }: UseCollectionProductsOptions = {},
+  after?: string | null,
+): Promise<{ collection: CollectionWithProducts; hasNextPage: boolean; endCursor: string | null } | null> {
  const response = await shopifyFetch({
    query: GET_COLLECTION_PRODUCTS_QUERY,
-    variables: { handle, first, sortKey, reverse },
+    variables: { handle, first, sortKey, reverse, filters: filters?.length ? filters : undefined, after: after ?? null },
  });

  const collection = response.data.collection;
  if (!collection) return null;

  return {
-    ...collection,
-    products: collection.products.edges.map((edge: { node: Product }) => edge.node),
+    collection: {
+      ...collection,
+      products: collection.products.edges.map((edge: { node: Product }) => edge.node),
+    },
+    hasNextPage: collection.products.pageInfo.hasNextPage,
+    endCursor: collection.products.pageInfo.endCursor,
  };
 }

@@ -96,6 +114,10 @@ export function useCollectionProducts(
  const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [cursor, setCursor] = useState<string | null>(null);
+
+  const filtersKey = JSON.stringify(options.filters ?? []);

  const fetchCollection = useCallback(async () => {
    if (!handle) {
@@ -106,10 +128,14 @@ export function useCollectionProducts(
    try {
      setLoading(true);
      setError(null);
-      const data = await getCollectionProducts(handle, options);
-      setCollection(data);
-      if (!data) {
+      const result = await getCollectionProducts(handle, options);
+      if (!result) {
+        setCollection(null);
        setError('Collection not found');
+      } else {
+        setCollection(result.collection);
+        setHasNextPage(result.hasNextPage);
+        setCursor(result.endCursor);
      }
    } catch (err) {
      console.error('Error fetching collection products:', err);
@@ -117,11 +143,32 @@ export function useCollectionProducts(
    } finally {
      setLoading(false);
    }
-  }, [handle, options.first, options.sortKey, options.reverse]);
+  }, [handle, options.first, options.sortKey, options.reverse, filtersKey]);

  useEffect(() => {
    fetchCollection();
  }, [fetchCollection]);

-  return { collection, loading, error, refetch: fetchCollection };
+  const fetchMore = useCallback(async () => {
+    if (!handle || !cursor || !hasNextPage || loading) return;
+    setLoading(true);
+    try {
+      const result = await getCollectionProducts(handle, options, cursor);
+      if (result) {
+        setCollection((prev) =>
+          prev
+            ? { ...prev, products: [...prev.products, ...result.collection.products] }
+            : result.collection
+        );
+        setHasNextPage(result.hasNextPage);
+        setCursor(result.endCursor);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Load more failed');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle, cursor, hasNextPage, loading, options.first, options.sortKey, options.reverse, filtersKey]);
+
+  return { collection, loading, error, hasNextPage, fetchMore, refetch: fetchCollection };
 }
--- a/hooks/use-shopify-products.ts
+++ b/hooks/use-shopify-products.ts
@@ -42,6 +42,10 @@ export interface Product {
  description?: string;
  descriptionHtml?: string;
  handle: string;
+  vendor?: string;
+  productType?: string;
+  tags?: string[];
+  availableForSale?: boolean;
  images: {
    edges: Array<{
      node: ProductImage;
--- a/hooks/use-shopify-search.ts
+++ b/hooks/use-shopify-search.ts
@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { shopifyFetch } from '@/services/shopify/client';
+import { GET_SEARCH_QUERY } from '@/graphql/products';
+import type { Product } from '@/hooks/use-shopify-products';
+
+export type SortOption =
+  | 'RELEVANCE'
+  | 'BEST_SELLING'
+  | 'NEWEST'
+  | 'PRICE_ASC'
+  | 'PRICE_DESC'
+  | 'TITLE_ASC';
+
+export interface SearchFilters {
+  q?: string;
+  availability?: boolean;
+  productTypes?: string[];
+  vendors?: string[];
+  tags?: string[];
+  colors?: string[];
+  styles?: string[];
+  sizes?: string[];
+  materials?: string[];
+  minPrice?: number | null;
+  maxPrice?: number | null;
+  metafields?: { namespace: string; key: string; value: string }[];
+  sort?: SortOption;
+}
+
+export interface SearchFacets {
+  productTypes: string[];
+  vendors: string[];
+  tags: string[];
+}
+
+function resolveSortKey(sort: SortOption): { sortKey: string; reverse: boolean } {
+  switch (sort) {
+    case 'BEST_SELLING': return { sortKey: 'BEST_SELLING', reverse: false };
+    case 'NEWEST':       return { sortKey: 'CREATED_AT',   reverse: true  };
+    case 'PRICE_ASC':    return { sortKey: 'PRICE',        reverse: false };
+    case 'PRICE_DESC':   return { sortKey: 'PRICE',        reverse: true  };
+    case 'TITLE_ASC':    return { sortKey: 'TITLE',        reverse: false };
+    default:             return { sortKey: 'RELEVANCE',    reverse: false };
+  }
+}
+
+export function buildShopifyQuery(filters: SearchFilters): string {
+  const parts: string[] = [];
+
+  if (filters.q?.trim()) parts.push(filters.q.trim());
+
+  if (filters.availability === true) parts.push('available_for_sale:true');
+
+  if (filters.productTypes?.length) {
+    const clause = filters.productTypes.map((t) => `product_type:"${t}"`).join(' OR ');
+    parts.push(filters.productTypes.length > 1 ? `(${clause})` : clause);
+  }
+
+  if (filters.vendors?.length) {
+    const clause = filters.vendors.map((v) => `vendor:"${v}"`).join(' OR ');
+    parts.push(filters.vendors.length > 1 ? `(${clause})` : clause);
+  }
+
+  if (filters.tags?.length) {
+    const clause = filters.tags.map((t) => `tag:"${t}"`).join(' OR ');
+    parts.push(filters.tags.length > 1 ? `(${clause})` : clause);
+  }
+
+  for (const [option, values] of [
+    ['color', filters.colors],
+    ['style', filters.styles],
+    ['size', filters.sizes],
+    ['material', filters.materials],
+  ] as const) {
+    if (values?.length) {
+      const clause = values.map((v) => `variant.option.${option}:"${v}"`).join(' OR ');
+      parts.push(values.length > 1 ? `(${clause})` : clause);
+    }
+  }
+
+  if (filters.minPrice != null) parts.push(`variants.price:>=${filters.minPrice}`);
+  if (filters.maxPrice != null) parts.push(`variants.price:<=${filters.maxPrice}`);
+
+  if (filters.metafields?.length) {
+    for (const mf of filters.metafields) {
+      parts.push(`metafield.${mf.namespace}.${mf.key}:"${mf.value}"`);
+    }
+  }
+
+  return parts.join(' ');
+}
+
+async function fetchProducts(vars: {
+  first: number;
+  query: string;
+  sortKey: string;
+  reverse: boolean;
+  after?: string | null;
+}) {
+  const res = await shopifyFetch({
+    query: GET_SEARCH_QUERY,
+    variables: { first: vars.first, query: vars.query, sortKey: vars.sortKey, reverse: vars.reverse, after: vars.after ?? null },
+  });
+  return {
+    products: res.data.products.edges.map((e: { node: Product }) => e.node) as Product[],
+    hasNextPage: res.data.products.pageInfo.hasNextPage as boolean,
+    endCursor: res.data.products.pageInfo.endCursor as string | null,
+  };
+}
+
+export function useShopifySearch(filters: SearchFilters, { first = 24 }: { first?: number } = {}) {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [facets, setFacets] = useState<SearchFacets>({ productTypes: [], vendors: [], tags: [] });
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const textQuery = filters.q?.trim() ?? '';
+  const productQuery = buildShopifyQuery(filters);
+  const { sortKey, reverse } = resolveSortKey(filters.sort ?? 'RELEVANCE');
+
+  // Fetch facets from unfiltered (text-only) result so sidebar options don't narrow
+  useEffect(() => {
+    let cancelled = false;
+    fetchProducts({ first: 100, query: textQuery, sortKey: 'RELEVANCE', reverse: false })
+      .then(({ products: p }) => {
+        if (cancelled) return;
+        setFacets({
+          productTypes: [...new Set(p.map((x) => x.productType).filter(Boolean))].sort() as string[],
+          vendors:      [...new Set(p.map((x) => x.vendor).filter(Boolean))].sort() as string[],
+          tags:         [...new Set(p.flatMap((x) => x.tags ?? []))].sort() as string[],
+        });
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [textQuery]);
+
+  // Fetch products with all active filters
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchProducts({ first, query: productQuery, sortKey, reverse })
+      .then(({ products: p, hasNextPage: hnp, endCursor: ec }) => {
+        if (cancelled) return;
+        setProducts(p);
+        setHasNextPage(hnp);
+        setCursor(ec);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Search failed');
+      })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [productQuery, sortKey, reverse, first]);
+
+  const fetchMore = async () => {
+    if (!cursor || !hasNextPage || loading) return;
+    setLoading(true);
+    try {
+      const { products: more, hasNextPage: hnp, endCursor: ec } = await fetchProducts({
+        first, query: productQuery, sortKey, reverse, after: cursor,
+      });
+      setProducts((prev) => [...prev, ...more]);
+      setHasNextPage(hnp);
+      setCursor(ec);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Load more failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { products, facets, loading, error, hasNextPage, fetchMore };
+}
--- a/index.html
+++ b/index.html
@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Editor — Shopify Demo</title>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <link
-      rel="stylesheet"
-      href="https://esm.sh/@reacteditor/core@0.0.10/dist/index.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://esm.sh/@reacteditor/plugin-ai@0.0.3/styles.css"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
+
+export default nextConfig;
--- a/package.json
+++ b/package.json
@@ -2,16 +2,13 @@
  "name": "react-editor-demo",
  "version": "1.0.0",
  "private": true,
-  "type": "module",
  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "start": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
  },
  "dependencies": {
-    "@ai-sdk/anthropic": "^3.0.74",
-    "@ai-sdk/react": "^3.0.177",
    "@base-ui/react": "^1.4.1",
    "@fontsource-variable/geist": "^5.2.8",
    "@radix-ui/react-accordion": "^1.2.11",
@@ -28,23 +25,23 @@
    "@radix-ui/react-switch": "^1.2.5",
    "@radix-ui/react-tabs": "^1.1.12",
    "@radix-ui/react-tooltip": "^1.2.7",
-    "@reacteditor/core": "0.0.12",
-    "@reacteditor/field-google-fonts": "^0.0.1",
-    "@reacteditor/field-shopify": "^0.0.1",
-    "@reacteditor/plugin-ai": "^0.0.4",
-    "@reacteditor/plugin-media": "^0.0.1",
-    "@reacteditor/plugin-tailwind-cdn": "^0.0.2",
+    "@reacteditor/core": "0.0.30",
+    "@reacteditor/field-google-fonts": "^0.0.3",
+    "@reacteditor/field-shopify": "^0.0.2",
+    "@reacteditor/plugin-ai": "^0.0.7",
+    "@reacteditor/plugin-media": "^0.0.4",
+    "@reacteditor/plugin-tailwind-cdn": "^0.0.3",
    "@shopify/storefront-api-client": "^1.0.0",
    "@tailwindcss/postcss": "^4.1.11",
-    "ai": "^6.0.175",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "embla-carousel-react": "^8.6.0",
    "framer-motion": "^12.16.0",
    "lucide-react": "^1.14.0",
+    "next": "16.2.6",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
-    "react-router": "^7.0.0",
+    "react-router": "^7",
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.1.11",
    "tw-animate-css": "^1.4.0",
@@ -55,8 +52,6 @@
    "@types/node": "^22.0.0",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "^5.5.4",
-    "vite": "^6.0.0"
+    "typescript": "^5.5.4"
  }
 }
--- a/react-editor.config.tsx
+++ b/react-editor.config.tsx
@@ -1,88 +0,0 @@
-import {
-  createFieldShopifyProduct,
-  createFieldShopifyCollection,
-} from "@reacteditor/field-shopify";
-
-import { navigationEditor } from "@/components/navigation/navigation.editor";
-import { footerEditor } from "@/components/footer/footer.editor";
-
-import { heroEditor } from "@/components/hero/hero.editor";
-import { bannerEditor } from "@/components/landing/banner.editor";
-
-import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
-import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
-import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
-import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
-import { createCollectionEditor } from "@/components/commerce/collection.editor";
-import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
-import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
-
-import { featuresEditor } from "@/components/features/features.editor";
-import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
-import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
-import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
-import { logosEditor } from "@/components/logos/logos.editor";
-import { ctaEditor } from "@/components/cta/cta.editor";
-import { faqEditor } from "@/components/faq/faq.editor";
-
-import Root from "@/config/root";
-import type { UserConfig } from "@/config/types";
-import { initialData } from "@/config/initial-data";
-
-export type CreateConfigOptions = {
-  domain: string;
-  token?: string | null;
-};
-
-export function createConfig({ domain, token }: CreateConfigOptions): UserConfig {
-  const productField = createFieldShopifyProduct({
-    storeDomain: domain,
-    storefrontAccessToken: token ?? undefined,
-  }) as any;
-  const collectionField = createFieldShopifyCollection({
-    storeDomain: domain,
-    storefrontAccessToken: token ?? undefined,
-  }) as any;
-
-  return {
-    root: Root,
-    categories: {
-      navigation: { title: "Navigation" },
-      hero: { title: "Hero & Banners" },
-      commerce: { title: "Commerce" },
-      content: { title: "Content" },
-      footer: { title: "Footer" },
-    },
-    components: {
-      navigation: navigationEditor,
-      hero: heroEditor,
-      banner: bannerEditor,
-      "featured-product": createFeaturedProductEditor({ productField }),
-      "products-grid": createProductsGridEditor({ collectionField }),
-      "products-carousel": createProductsCarouselEditor({ collectionField }),
-      "collection-grid": collectionGridEditor,
-      collection: createCollectionEditor({ collectionField }),
-      "product-details": createProductDetailsEditor({ productField }),
-      "recommended-products": createRecommendedProductsEditor({ productField }),
-      features: featuresEditor,
-      testimonials: testimonialsEditor,
-      "image-gallery": imageGalleryEditor,
-      "newsletter-cta": newsletterCtaEditor,
-      logos: logosEditor,
-      cta: ctaEditor,
-      faq: faqEditor,
-      footer: footerEditor,
-    } as any,
-  };
-}
-
-function toBase64(s: string): string {
-  if (typeof btoa === "function") return btoa(unescape(encodeURIComponent(s)));
-  return Buffer.from(s, "utf8").toString("base64");
-}
-
-export const componentKey = toBase64(
-  `commerce-redesign-${JSON.stringify({ initialData })}`,
-);
-
-export default createConfig;
--- a/services/media-adapter.ts
+++ b/services/media-adapter.ts
@@ -5,7 +5,7 @@ import type {
 } from "@reacteditor/plugin-media";

 const MEDIA_BASE = "https://www.frontend-ai.com";
-const MEDIA_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
+const MEDIA_API_KEY = process.env.NEXT_PUBLIC_API_KEY ?? "";

 export const frontendAiMediaAdapter: MediaAdapter = {
  fetchList: async ({ query, cursor, signal }) => {
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,109 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { App as ReactEditorApp, createUseEditor } from "@reacteditor/core";
-import "@reacteditor/core/react-editor.css";
-import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
-import { mediaPlugin } from "@reacteditor/plugin-media";
-import "@reacteditor/plugin-media/styles.css";
-import { aiPlugin } from "@reacteditor/plugin-ai";
-import "@reacteditor/plugin-ai/styles.css";
-import { createConfig } from "@/react-editor.config";
-import { ShopifyProvider } from "@/contexts/shopify-context";
-import { frontendAiMediaAdapter } from "@/services/media-adapter";
-import { Loader } from "@/components/ui/loader";
-import schemaJson from "../app.schema.json";
-
-const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
-
-type Pages = Record<string, { root: any; content: any[] }>;
-
-const useEditor = createUseEditor();
-
-const SHOPIFY_DOMAIN =
-  (import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
-const STOREFRONT_TOKEN =
-  (import.meta.env.VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN as
-    | string
-    | undefined) ?? "";
-
-function readPathname() {
-  if (typeof window === "undefined") return "/";
-  const p = window.location.pathname;
-  return p === "" ? "/" : p;
-}
-
-export default function App() {
-  const pages = schemaJson as Pages;
-  const [currentPath, setCurrentPath] = useState<string>(readPathname);
-  const [isPublishing, setIsPublishing] = useState(false);
-  const latestDataRef = useRef<any>(null);
-
-  const handleChange = useCallback((data: any) => {
-    latestDataRef.current = data;
-  }, []);
-
-  const config = useMemo(
-    () =>
-      createConfig({
-        domain: SHOPIFY_DOMAIN,
-        token: STOREFRONT_TOKEN || null,
-      }),
-    [],
-  );
-
-  const handlePublish = useCallback((data: any, route?: string) => {
-    console.log(data);
-    setIsPublishing(true);
-    if (typeof window !== "undefined" && window.parent !== window) {
-      window.parent.postMessage(
-        { type: "PUBLISH", data: { data, route } },
-        "*",
-      );
-    }
-    setTimeout(() => setIsPublishing(false), 1000);
-  }, []);
-
-  const plugins = useMemo(
-    () => [createTailwindCdnPlugin()],
-    [pages, currentPath, handlePublish],
-  );
-
-  return (
-    <div className="h-screen w-screen">
-      <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
-        <ReactEditorApp
-          config={config as any}
-          pages={pages as any}
-          currentPath={currentPath}
-          plugins={plugins}
-          iframe={{ enabled: true }}
-          ui={{ navBarVisible: false, leftSideBarVisible: false }}
-          onPublish={handlePublish}
-          onChange={handleChange}
-          overrides={{
-            headerActions: () => {
-              const appState = useEditor((s: any) => s.appState);
-              return (
-                <button
-                  type="button"
-                  disabled={isPublishing}
-                  onClick={() => {
-                    handlePublish(appState.data, currentPath);
-                  }}
-                  className="inline-flex items-center justify-center gap-2 rounded-md bg-black px-4 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
-                >
-                  {isPublishing && <Loader size={14} />}
-                  {isPublishing ? "Saving..." : "Save"}
-                </button>
-              );
-            },
-          }}
-        />
-      </ShopifyProvider>
-      {isPublishing && (
-        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30">
-          <Loader size={32} />
-        </div>
-      )}
-    </div>
-  );
-}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import "./globals.css";
-
-createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,10 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_SHOPIFY_DOMAIN?: string;
-  readonly VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN?: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,29 +1,46 @@
 {
  "compilerOptions": {
    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
    "module": "ESNext",
    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
+    "incremental": true,
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowJs": true,
-    "types": ["node", "vite/client"],
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "node"
+    ],
    "baseUrl": ".",
    "paths": {
-      "@/*": ["./*"],
-      "~/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ],
+      "~/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
  },
  "include": [
-    "src",
+    "next-env.d.ts",
+    "app",
    "api",
    "components",
    "config",
@@ -33,8 +50,15 @@
    "lib",
    "services",
    "vendor",
-    "react-editor.config.tsx",
-    "vite.config.ts"
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
  ],
-  "exclude": ["node_modules", "dist"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".next"
+  ]
 }
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,23 +0,0 @@
-import { defineConfig, loadEnv } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "node:path";
-
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), "");
-  for (const k of Object.keys(env)) {
-    if (process.env[k] === undefined) process.env[k] = env[k];
-  }
-
-  return {
-    plugins: [react()],
-    resolve: {
-      alias: {
-        "@": path.resolve(__dirname, "."),
-        "~": path.resolve(__dirname, "."),
-      },
-    },
-    server: {
-      port: 3001,
-    },
-  };
-});
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rami Bitar	3cc7ec376c	update product details	2026-06-03 13:41:04 -04:00
Rami Bitar	4aa55c2b89	Bump version 0.0.19	2026-05-11 23:42:58 -04:00
Rami Bitar	661eb99e94	Log PUBLISH payload and post full route object Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-11 23:32:54 -04:00
Rami Bitar	6b6be4f50c	Log PUBLISH payload in handlePublish Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-11 23:31:23 -04:00
Rami Bitar	0b135b8a32	Post publish message before delay in handlePublish Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-11 23:13:02 -04:00
Rami Bitar	60e262465e	update package json	2026-05-11 21:46:30 -04:00
Rami Bitar	18d03f0a7a	Fix font cascade for wrapped/nested heading elements The body-font rule explicitly targeted span/a/p/li, which broke any heading rendered as <span> (e.g. Typography variant="h3" as="span") or any heading containing inline span/anchor children — those elements matched the rule and reset their font to the body font, overriding inheritance from the parent heading. Set the body font once on `body` and let descendants inherit. Form controls (button/input/textarea/select) get `font-family: inherit` so they pick up the surrounding context instead of the UA default. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-10 17:10:12 -04:00
Rami Bitar	3636724450	Remove Tailwind CDN script from index.html Vite already compiles Tailwind via globals.css, so the runtime CDN script duplicated styles and slowed first paint. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-10 17:04:51 -04:00
Rami Bitar	1c034400ca	Rebrand store as Pulse with athletic theme and shared typography - Pulse theme tokens in app.schema.json: Archivo Black headings (weight 400) + Inter body, white bg / black pill buttons, xl radius, AI-generated athletic imagery - Add headerFontWeight theme prop so single-weight fonts (Archivo Black) load and render correctly; ThemeProvider applies font-family + weight inline so Typography works regardless of `as` element - New shared Heading component (tagline / title / subtitle with size + align + tone variants) and Typography caption variant for taglines; refactor features, faq, cta, testimonials, products-carousel, products-grid, collection-grid, recommended-products, image-gallery, newsletter-cta to use them - Hero accepts a `buttons` array (label / href / variant) replacing primaryCta/secondaryCta; cover-image component removed and existing cover blocks migrated to Hero blocks with `buttons: []` - Newsletter CTA uses shadcn Button + Input so it inherits theme radius; stacked layout fixed to keep the image - Product/collection card titles use Typography subtitle variants (font-body), heading font weight is theme-controlled - Remove orphan commerce/shop-header.tsx and commerce/shop-footer.tsx; the editor-driven navigation/footer are the live chrome Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-10 16:47:07 -04:00
Rami Bitar	0a1fbd62bb	Update default styles and components	2026-05-10 15:49:28 -04:00
Rami Bitar	383a593c42	Add Container component and fix radius/maxWidth theming - Drop buttonRadius prop; button now uses --radius via rounded-md - Inject @theme radius mappings into ThemeProvider so rounded-* utilities pick up --radius inside the Tailwind CDN iframe - Add shared Container that consumes --container-max-width set from the global maxWidth prop, replacing ad-hoc "container mx-auto max-w-7xl px-6" wrappers across commerce, landing, footer, navigation, and others - Simplify maxWidth options to Small/Medium/Large/X-Large/Full bleed and shift the scale up so Large (1280px) matches the previous default Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-10 12:25:13 -04:00
Rami Bitar	3a3d0a6ac8	update options	2026-05-09 15:36:10 -04:00
Rami Bitar	572de32e1a	Merge staging: filter sheet drawers	2026-05-09 15:23:12 -04:00
Rami Bitar	906f2934fb	Move collection and search filters into a Sheet drawer Replace the always-visible sidebar and inline mobile filter panel with a single Filters button that opens a left-side Sheet, with Clear (outline) and Search (default) actions in the footer for consistency across pages. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-09 15:20:50 -04:00
Rami Bitar	4f95e56513	update	2026-05-08 15:06:54 -04:00
Rami Bitar	6706a11f7b	update css vars	2026-05-08 14:55:17 -04:00
Rami Bitar	564c98c805	Consolidate theme radius/shadow props and make rounded utilities responsive - Remove duplicate roundedness/shadowLevel props (keep radius/shadow) - Switch globals.css radius scale to proportional (square→pill works) - Replace rounded-full with rounded-md on theme-driven elements - Remove banner props from Navigation, drop publishing overlay Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-08 10:01:55 -04:00
Rami Bitar	f0323c2c57	Fix shopify cart	2026-05-08 09:25:35 -04:00
Rami Bitar	ef941245d1	Update shopify cart	2026-05-08 09:21:49 -04:00
Rami Bitar	4845e48e17	update	2026-05-08 00:33:15 -04:00
Rami Bitar	b92d35a148	remove animate presence	2026-05-08 00:29:11 -04:00
Rami Bitar	884538488f	bump reacteditor to 0.0.17	2026-05-06 22:14:54 -04:00
Rami Bitar	328b8e3500	update reacteditor core	2026-05-06 16:01:09 -04:00
Rami Bitar	a957612e70	update reacteditor/core to 0.0.16	2026-05-06 15:52:26 -04:00
Rami Bitar	9d6e3bf815	bump version of reacteditor	2026-05-06 13:53:24 -04:00