@fayz-ai/storefront 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,13 +1,13 @@
 import { setShopProvider, getShopProvider } from '@fayz-ai/shop/runtime';
 import { createMockShopProvider } from '@fayz-ai/shop/mock';
-import { createMockAuthAdapter } from '@fayz-ai/auth';
+import { createAuthRuntime, createMockAuthAdapter } from '@fayz-ai/plugin-auth';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import React18, { createContext, useState, useRef, useEffect, useMemo, useContext, useCallback } from 'react';
+import React6, { createContext, useState, useRef, useEffect, useMemo, useContext, useCallback } from 'react';
 import { hashRouterAdapter, registerScaffold, registerBlock, renderBlocks, defineApp } from '@fayz-ai/core';
 export { getSupabaseClientOptional, renderApp } from '@fayz-ai/core';
 import * as LucideIcons from 'lucide-react';
-import { ChevronLeft, ChevronRight, ShoppingBag, X, Trash2, Phone, Mail, Search, User, UserCircle, Package, CreditCard, LogOut, Truck, RefreshCcw, ShieldCheck, Lock, Minus, Plus, Info, AlertCircle, Check, MapPin, PackageCheck, QrCode, XCircle, RotateCcw, Clock } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ShoppingBag, X, Trash2, Phone, Mail, Search, User, UserCircle, Package, CreditCard, LogOut, Truck, RefreshCcw, ShieldCheck, Lock, Minus, Plus, Info, AlertCircle, Check, Send, MessageCircle, MapPin, PackageCheck, QrCode, XCircle, RotateCcw, Clock } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { validateDiscount } from '@fayz-ai/shop';
 
@@ -27,14 +27,31 @@ var useSessionStore = create()(
 
 // src/auth.ts
 var _adapter = null;
-function resolveAuthAdapter(configured) {
-  if (configured && configured !== "mock" && configured !== "supabase") return configured;
-  if (configured === "supabase") {
-    console.warn(
-      '@fayz-ai/shop: auth.adapter="supabase" is legacy. Pass an explicit AuthAdapter or use the Fayz SDK broker path.'
-    );
-  }
-  return createMockAuthAdapter();
+function isAuthAdapter(value) {
+  return Boolean(
+    value && typeof value === "object" && "getSession" in value && "signIn" in value && "signOut" in value
+  );
+}
+function normalizeAuthConfig(configured) {
+  if (!configured) return {};
+  if (typeof configured === "string" || isAuthAdapter(configured)) return { adapter: configured };
+  return configured;
+}
+function resolveAuthAdapter(configured, fallback) {
+  const config = normalizeAuthConfig(configured);
+  return createAuthRuntime({
+    provider: config.provider ?? config.adapter ?? (fallback?.supabaseUrl ? "supabase" : "mock"),
+    adapter: config.adapter,
+    routes: config.routes,
+    requireAuth: false,
+    supabase: {
+      url: config.supabase?.url ?? fallback?.supabaseUrl,
+      anonKey: config.supabase?.anonKey ?? fallback?.supabaseAnonKey,
+      client: config.supabase?.client,
+      callbackUrl: config.supabase?.callbackUrl,
+      resetPasswordUrl: config.supabase?.resetPasswordUrl
+    }
+  }).adapter;
 }
 function initCustomerAuth(adapter2) {
   _adapter = adapter2;
@@ -105,18 +122,37 @@ async function signOutCustomer() {
 }
 function resolveConfig(config) {
   const catalogPath = config.home ? "/catalog" : "/";
+  const commerceMode = config.commerceMode ?? "checkout";
+  const checkoutEnabled = commerceMode === "checkout";
   return {
     ...config,
     currency: config.currency ?? "BRL",
     locale: config.locale ?? "pt-BR",
     shipping: { flatRate: config.shipping?.flatRate ?? 0, freeAbove: config.shipping?.freeAbove },
     payments: { mode: config.payments?.mode ?? "mock" },
+    commerceMode,
+    enquiry: {
+      label: config.enquiry?.label ?? "Contact me",
+      successMessage: config.enquiry?.successMessage ?? "Thanks. We received your enquiry.",
+      subjectPrefix: config.enquiry?.subjectPrefix ?? "Product enquiry",
+      email: config.enquiry?.email,
+      whatsappUrl: config.enquiry?.whatsappUrl,
+      requirePhone: config.enquiry?.requirePhone
+    },
     features: {
       // Auto-enable the coupon UI when the store actually ships discount codes
       // (via config.discounts or a seeded catalog), unless explicitly overridden —
       // otherwise a store can advertise a coupon with no field to enter it.
       discounts: config.features?.discounts ?? Boolean(config.discounts?.length || config.catalog?.discounts?.length),
-      accounts: config.features?.accounts ?? true
+      accounts: config.features?.accounts ?? checkoutEnabled,
+      cart: config.features?.cart ?? checkoutEnabled,
+      checkout: config.features?.checkout ?? checkoutEnabled
+    },
+    imageLoading: {
+      mode: config.imageLoading?.mode ?? "fade",
+      durationMs: config.imageLoading?.durationMs ?? 420,
+      easing: config.imageLoading?.easing ?? "cubic-bezier(0.22, 1, 0.36, 1)",
+      blur: config.imageLoading?.blur ?? true
     },
     catalogPath,
     nav: config.nav ?? (config.home ? [
@@ -132,6 +168,12 @@ function useStorefrontConfig() {
   if (!ctx) throw new Error("useStorefrontConfig must be used inside createStorefrontApp");
   return ctx;
 }
+function useStorefrontConfigOptional() {
+  return useContext(StorefrontConfigContext);
+}
+function getStorefrontComponents(config) {
+  return config.components ?? {};
+}
 var adapter = hashRouterAdapter();
 function navigateTo(to) {
   adapter.navigate(to);
@@ -162,93 +204,7 @@ function matchPath(pattern, path) {
   return params;
 }
 function Link({ to, children, ...rest }) {
-  return React18.createElement("a", { href: `#${to}`, ...rest }, children);
-}
-var RADIUS_MAP = {
-  none: { button: "0px", card: "0px", input: "0px" },
-  soft: { button: "6px", card: "10px", input: "6px" },
-  round: { button: "10px", card: "16px", input: "10px" },
-  pill: { button: "999px", card: "20px", input: "999px" }
-};
-var COLOR_VAR_MAP = {
-  background: "--background",
-  foreground: "--foreground",
-  primary: "--primary",
-  primaryForeground: "--primary-foreground",
-  card: "--card",
-  cardForeground: "--card-foreground",
-  muted: "--muted",
-  mutedForeground: "--muted-foreground",
-  border: "--border",
-  headerBackground: "--sf-header-bg",
-  headerForeground: "--sf-header-fg",
-  announcementBackground: "--sf-announcement-bg",
-  announcementForeground: "--sf-announcement-fg"
-};
-function themeToCss(theme) {
-  const lines = [];
-  for (const [key, cssVar] of Object.entries(COLOR_VAR_MAP)) {
-    const value = theme.colors?.[key];
-    if (value) lines.push(`${cssVar}: ${value};`);
-  }
-  if (!theme.colors?.headerBackground && theme.colors?.background) {
-    lines.push(`--sf-header-bg: ${theme.colors.background};`);
-  }
-  if (!theme.colors?.headerForeground && theme.colors?.foreground) {
-    lines.push(`--sf-header-fg: ${theme.colors.foreground};`);
-  }
-  if (theme.font) {
-    const fallback = theme.font.fallback ?? "sans-serif";
-    lines.push(`--font-family: '${theme.font.body}', ${fallback};`);
-    lines.push(`--sf-font-heading: '${theme.font.heading}', ${fallback};`);
-  }
-  const radius = RADIUS_MAP[theme.radius ?? "soft"];
-  lines.push(`--button-radius: ${radius.button};`);
-  lines.push(`--card-radius: ${radius.card};`);
-  lines.push(`--input-radius: ${radius.input};`);
-  lines.push(`--sf-radius-button: ${radius.button};`);
-  lines.push(`--sf-radius-card: ${radius.card};`);
-  lines.push(`--sf-radius-input: ${radius.input};`);
-  let css = `:root {
-  ${lines.join("\n  ")}
-}
-`;
-  css += `body { font-family: var(--font-family); }
-`;
-  css += `h1, h2, h3, h4, .sf-heading { font-family: var(--sf-font-heading, var(--font-family)); }
-`;
-  if (theme.uppercaseButtons) {
-    css += `.sf-cta { text-transform: uppercase; letter-spacing: 0.08em; }
-`;
-  }
-  if (theme.header?.uppercaseNav) {
-    css += `.sf-nav-link { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
-`;
-  }
-  return css;
-}
-function googleFontsHref(theme) {
-  if (!theme.font) return null;
-  const families = theme.font.googleFonts ?? [theme.font.heading, theme.font.body];
-  const unique = [...new Set(families)];
-  const params = unique.map((f) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}:wght@300;400;500;600;700`).join("&");
-  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
-}
-function StorefrontThemeStyle({ theme }) {
-  const fontsHref = googleFontsHref(theme);
-  useEffect(() => {
-    if (!fontsHref) return;
-    const id = "sf-theme-fonts";
-    let link = document.getElementById(id);
-    if (!link) {
-      link = document.createElement("link");
-      link.id = id;
-      link.rel = "stylesheet";
-      document.head.appendChild(link);
-    }
-    link.href = fontsHref;
-  }, [fontsHref]);
-  return React18.createElement("style", { "data-sf-theme": theme.name }, themeToCss(theme));
+  return React6.createElement("a", { href: `#${to}`, ...rest }, children);
 }
 
 // src/format.ts
@@ -302,7 +258,7 @@ function productOptionSelectionKey(selection) {
 // src/stores/cart.store.ts
 var useCartStore = create()(
   persist(
-    (set) => ({
+    (set, get) => ({
       lines: [],
       discountCode: null,
       discountPercent: 0,
@@ -354,7 +310,16 @@ var useCartStore = create()(
       clearDiscount: () => set({ discountCode: null, discountPercent: 0 }),
       clear: () => set({ lines: [], discountCode: null, discountPercent: 0 }),
       openDrawer: () => set({ isOpen: true }),
-      closeDrawer: () => set({ isOpen: false, justAddedLineId: null })
+      closeDrawer: () => set({ isOpen: false, justAddedLineId: null }),
+      reconcile: async (resolve) => {
+        const lines = get().lines;
+        if (lines.length === 0) return;
+        const keep = await Promise.all(
+          lines.map((line) => resolve(line).catch(() => true))
+        );
+        const kept = lines.filter((_, i) => keep[i]);
+        if (kept.length !== lines.length) set({ lines: kept });
+      }
     }),
     {
       name: "fayz.storefront.cart.v1",
@@ -376,6 +341,102 @@ var selectShipping = (s, cfg) => {
   return cfg.shipping.flatRate;
 };
 var selectTotal = (s, cfg) => roundCents(selectSubtotal(s) - selectDiscountTotal(s) + selectShipping(s, cfg));
+var RADIUS_MAP = {
+  none: { button: "0px", card: "0px", input: "0px" },
+  soft: { button: "6px", card: "10px", input: "6px" },
+  round: { button: "10px", card: "16px", input: "10px" },
+  pill: { button: "999px", card: "20px", input: "999px" }
+};
+var COLOR_VAR_MAP = {
+  background: "--background",
+  foreground: "--foreground",
+  primary: "--primary",
+  primaryForeground: "--primary-foreground",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  border: "--border",
+  headerBackground: "--sf-header-bg",
+  headerForeground: "--sf-header-fg",
+  announcementBackground: "--sf-announcement-bg",
+  announcementForeground: "--sf-announcement-fg",
+  accent: "--sf-accent",
+  accentForeground: "--sf-accent-foreground"
+};
+function themeToCss(theme) {
+  const lines = [];
+  for (const [key, cssVar] of Object.entries(COLOR_VAR_MAP)) {
+    const value = theme.colors?.[key];
+    if (value) lines.push(`${cssVar}: ${value};`);
+  }
+  if (!theme.colors?.headerBackground && theme.colors?.background) {
+    lines.push(`--sf-header-bg: ${theme.colors.background};`);
+  }
+  if (!theme.colors?.headerForeground && theme.colors?.foreground) {
+    lines.push(`--sf-header-fg: ${theme.colors.foreground};`);
+  }
+  if (theme.font) {
+    const fallback = theme.font.fallback ?? "sans-serif";
+    lines.push(`--font-family: '${theme.font.body}', ${fallback};`);
+    lines.push(`--sf-font-heading: '${theme.font.heading}', ${fallback};`);
+    if (theme.font.display) lines.push(`--sf-font-display: '${theme.font.display}', ${fallback};`);
+    if (theme.font.serif) lines.push(`--sf-font-serif: '${theme.font.serif}', serif;`);
+  }
+  for (const [key, value] of Object.entries(theme.tokens ?? {})) {
+    const name = key.startsWith("--") ? key : `--${key}`;
+    lines.push(`${name}: ${value};`);
+  }
+  const radius = RADIUS_MAP[theme.radius ?? "soft"];
+  lines.push(`--button-radius: ${radius.button};`);
+  lines.push(`--card-radius: ${radius.card};`);
+  lines.push(`--input-radius: ${radius.input};`);
+  lines.push(`--sf-radius-button: ${radius.button};`);
+  lines.push(`--sf-radius-card: ${radius.card};`);
+  lines.push(`--sf-radius-input: ${radius.input};`);
+  let css = `:root {
+  ${lines.join("\n  ")}
+}
+`;
+  css += `body { font-family: var(--font-family); }
+`;
+  css += `h1, h2, h3, h4, .sf-heading { font-family: var(--sf-font-heading, var(--font-family)); }
+`;
+  if (theme.uppercaseButtons) {
+    css += `.sf-cta { text-transform: uppercase; letter-spacing: 0.08em; }
+`;
+  }
+  if (theme.header?.uppercaseNav) {
+    css += `.sf-nav-link { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
+`;
+  }
+  return css;
+}
+function googleFontsHref(theme) {
+  if (!theme.font) return null;
+  const families = theme.font.googleFonts ?? [theme.font.heading, theme.font.body, theme.font.display, theme.font.serif].filter(
+    (f) => Boolean(f)
+  );
+  const unique = [...new Set(families)];
+  const params = unique.map((f) => `family=${encodeURIComponent(f).replace(/%20/g, "+")}:wght@300;400;500;600;700`).join("&");
+  return `https://fonts.googleapis.com/css2?${params}&display=swap`;
+}
+function StorefrontThemeStyle({ theme }) {
+  const fontsHref = googleFontsHref(theme);
+  useEffect(() => {
+    if (!fontsHref) return;
+    const id = "sf-theme-fonts";
+    let link = document.getElementById(id);
+    if (!link) {
+      link = document.createElement("link");
+      link.id = id;
+      link.rel = "stylesheet";
+      document.head.appendChild(link);
+    }
+    link.href = fontsHref;
+  }, [fontsHref]);
+  return React6.createElement("style", { "data-sf-theme": theme.name }, themeToCss(theme));
+}
 var initial = {
   search: "",
   categoryId: null,
@@ -484,6 +545,7 @@ function usePopOnChange(value) {
 var TID = {
   // header
   headerSearch: "header-search",
+  headerSearchToggle: "header-search-toggle",
   cartButton: "cart-button",
   cartCount: "cart-count",
   accountLink: "account-link",
@@ -496,6 +558,13 @@ var TID = {
   hero: "home-hero",
   heroPrev: "hero-prev",
   heroNext: "hero-next",
+  mediaCarousel: "media-carousel",
+  mediaCarouselPrev: "media-carousel-prev",
+  mediaCarouselNext: "media-carousel-next",
+  productSlider: "product-slider",
+  productSliderViewport: "product-slider-viewport",
+  productSliderPrev: "product-slider-prev",
+  productSliderNext: "product-slider-next",
   categoryShowcase: "category-showcase",
   productRail: "product-rail",
   benefits: "benefits-row",
@@ -530,6 +599,19 @@ var TID = {
   productOptionValue: (id, value) => `product-option-${id.toLowerCase().replace(/\s+/g, "-")}-${value.toLowerCase().replace(/\s+/g, "-")}`,
   pdpQtyInput: "pdp-qty-input",
   pdpAddToCart: "pdp-add-to-cart",
+  pdpRoot: "pdp-root",
+  pdpGallery: "pdp-gallery",
+  pdpActions: "pdp-actions",
+  pdpEnquiryButton: "pdp-enquiry-button",
+  enquiryForm: "enquiry-form",
+  enquiryName: "enquiry-name",
+  enquiryEmail: "enquiry-email",
+  enquiryPhone: "enquiry-phone",
+  enquirySubject: "enquiry-subject",
+  enquiryMessage: "enquiry-message",
+  enquirySubmit: "enquiry-submit",
+  enquirySuccess: "enquiry-success",
+  enquiryError: "enquiry-error",
   // cart
   cartDrawer: "cart-drawer",
   cartLine: "cart-line",
@@ -652,12 +734,26 @@ function UtilityBar() {
     /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center gap-4", children: social?.map((s) => /* @__PURE__ */ jsx("a", { href: s.href, target: "_blank", rel: "noreferrer", className: "hover:underline", children: s.label }, s.href)) })
   ] }) });
 }
-function SearchInput({ className }) {
+function SearchInput({ className, iconOnly = false }) {
   const config = useStorefrontConfig();
   const search = useCatalogStore((s) => s.search);
   const setSearch = useCatalogStore((s) => s.setSearch);
   const path = useHashPath();
-  return /* @__PURE__ */ jsxs("div", { className: `relative ${className ?? ""}`, children: [
+  const [open, setOpen] = useState(false);
+  if (iconOnly && !open) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Buscar produtos",
+        "data-testid": TID.headerSearchToggle,
+        onClick: () => setOpen(true),
+        className: "rounded-full p-2.5 transition-opacity hover:opacity-70",
+        children: /* @__PURE__ */ jsx(Search, { className: "h-5 w-5" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${iconOnly ? "w-full max-w-xs" : className ?? ""}`, children: [
     /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-60" }),
     /* @__PURE__ */ jsx(
       "input",
@@ -666,10 +762,17 @@ function SearchInput({ className }) {
         type: "search",
         placeholder: "Buscar produtos...",
         value: search,
+        autoFocus: iconOnly,
         onChange: (e) => {
           setSearch(e.target.value);
           if (path !== config.catalogPath) navigateTo(config.catalogPath);
         },
+        onKeyDown: (e) => {
+          if (e.key === "Escape" && iconOnly) setOpen(false);
+        },
+        onBlur: () => {
+          if (iconOnly && !search) setOpen(false);
+        },
         className: "w-full border bg-white/10 py-2 pl-9 pr-4 text-sm outline-none transition-colors placeholder:opacity-60 focus:border-primary focus:bg-white focus:text-gray-900",
         style: {
           borderRadius: "var(--sf-radius-input)",
@@ -757,7 +860,7 @@ function HeaderActions() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs(
+    config.features.cart && /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -784,12 +887,13 @@ function NavLinks({ className }) {
   const config = useStorefrontConfig();
   const { categories } = useCategories();
   const setCategoryId = useCatalogStore((s) => s.setCategoryId);
+  const showCategories = config.theme?.header?.showCategories !== false;
   const goCategory = (categoryId) => {
     useCatalogStore.getState().reset();
     setCategoryId(categoryId);
     navigateTo(config.catalogPath);
   };
-  return /* @__PURE__ */ jsxs("nav", { className: `flex items-center gap-6 ${className ?? ""}`, children: [
+  return /* @__PURE__ */ jsxs("nav", { className: `flex min-w-max items-center gap-6 ${className ?? ""}`, children: [
     config.nav.map((link) => /* @__PURE__ */ jsx(
       Link,
       {
@@ -800,7 +904,7 @@ function NavLinks({ className }) {
       },
       link.to
     )),
-    categories.slice(0, 6).map((c) => /* @__PURE__ */ jsxs(
+    showCategories && categories.slice(0, 6).map((c) => /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -820,6 +924,8 @@ function StorefrontHeader() {
   const config = useStorefrontConfig();
   const variant = config.theme?.header?.variant ?? "classic";
   const scrolled = useScrolled();
+  const showSearch = config.theme?.header?.showSearch !== false;
+  const iconSearch = config.theme?.header?.searchStyle === "icon";
   const logo = /* @__PURE__ */ jsx(Link, { to: "/", className: "sf-heading shrink-0 text-xl font-bold tracking-tight", children: config.logo ?? config.name });
   return /* @__PURE__ */ jsxs(
     "header",
@@ -833,21 +939,21 @@ function StorefrontHeader() {
           // Rio/Flex pattern: centered logo row, nav row below
           /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: "mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6", children: [
-              /* @__PURE__ */ jsx(SearchInput, { className: "hidden w-full max-w-xs sm:block" }),
+              showSearch ? /* @__PURE__ */ jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-full max-w-xs sm:block" }) : /* @__PURE__ */ jsx("div", {}),
               /* @__PURE__ */ jsx("div", { className: "text-center", children: logo }),
               /* @__PURE__ */ jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsx(HeaderActions, {}) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "hidden justify-center border-t py-2.5 sm:flex", style: headerDivider, children: /* @__PURE__ */ jsx(NavLinks, {}) })
+            /* @__PURE__ */ jsx("div", { className: "flex overflow-x-auto border-t py-2.5 sm:justify-center", style: headerDivider, children: /* @__PURE__ */ jsx(NavLinks, {}) })
           ] })
         ) : variant === "search" ? (
           // Brasília pattern: prominent search left, logo center, actions right; nav row below
           /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: "mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-6 px-4 sm:px-6", children: [
-              /* @__PURE__ */ jsx(SearchInput, { className: "hidden w-full max-w-sm sm:block" }),
+              showSearch ? /* @__PURE__ */ jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-full max-w-sm sm:block" }) : /* @__PURE__ */ jsx("div", {}),
               /* @__PURE__ */ jsx("div", { className: "text-center", children: logo }),
               /* @__PURE__ */ jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsx(HeaderActions, {}) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "hidden border-t sm:block", style: headerDivider, children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 py-2.5 sm:px-6", children: /* @__PURE__ */ jsx(NavLinks, {}) }) })
+            /* @__PURE__ */ jsx("div", { className: "overflow-x-auto border-t", style: headerDivider, children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-4 py-2.5 sm:px-6", children: /* @__PURE__ */ jsx(NavLinks, {}) }) })
           ] })
         ) : variant === "minimal" ? (
           // Uyuni pattern: nav left, centered logo, actions right — single compact row
@@ -855,17 +961,19 @@ function StorefrontHeader() {
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-5", children: /* @__PURE__ */ jsx(NavLinks, { className: "hidden sm:flex" }) }),
             /* @__PURE__ */ jsx("div", { className: "text-center", children: logo }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
-              /* @__PURE__ */ jsx(SearchInput, { className: "hidden w-44 lg:block" }),
+              showSearch && /* @__PURE__ */ jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-44 lg:block" }),
               /* @__PURE__ */ jsx(HeaderActions, {})
             ] })
           ] })
         ) : (
-          // classic: logo left, search center-right, actions right (original layout)
+          // classic: logo left, nav, then a right-aligned search + actions cluster
           /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6", children: [
             logo,
             /* @__PURE__ */ jsx(NavLinks, { className: "hidden md:flex" }),
-            /* @__PURE__ */ jsx(SearchInput, { className: "ml-auto hidden w-full max-w-sm sm:block" }),
-            /* @__PURE__ */ jsx(HeaderActions, {})
+            /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 sm:gap-3", children: [
+              showSearch && /* @__PURE__ */ jsx(SearchInput, { iconOnly: iconSearch, className: iconSearch ? "" : "hidden w-full max-w-sm sm:block" }),
+              /* @__PURE__ */ jsx(HeaderActions, {})
+            ] })
           ] })
         )
       ]
@@ -877,6 +985,17 @@ function StorefrontFooter() {
   const { categories } = useCategories();
   const visibleCategories = categories.slice(0, 8);
   const hiddenCategoryCount = Math.max(categories.length - visibleCategories.length, 0);
+  const labels = {
+    categories: "Departamentos",
+    navigation: "Navega\xE7\xE3o",
+    contact: "Contato",
+    viewAll: "Ver todos",
+    purchases: "Minhas compras",
+    privacy: "Privacidade",
+    terms: "Termos",
+    returns: "Trocas e devolu\xE7\xF5es",
+    ...config.footer?.labels
+  };
   const goCategory = (categoryId) => {
     useCatalogStore.getState().reset();
     useCatalogStore.getState().setCategoryId(categoryId);
@@ -889,7 +1008,7 @@ function StorefrontFooter() {
         config.footer?.about && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-muted-foreground", children: config.footer.about })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "Departamentos" }),
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.categories }),
         /* @__PURE__ */ jsxs("ul", { className: "space-y-2 text-sm", children: [
           visibleCategories.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             "button",
@@ -901,21 +1020,22 @@ function StorefrontFooter() {
             }
           ) }, c.id)),
           hiddenCategoryCount > 0 && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, { to: config.catalogPath, className: "font-medium underline-offset-2 transition-opacity hover:underline", children: [
-            "Ver todos (",
+            labels.viewAll,
+            " (",
             categories.length,
             ")"
           ] }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "Navega\xE7\xE3o" }),
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.navigation }),
         /* @__PURE__ */ jsxs("ul", { className: "space-y-2 text-sm", children: [
           config.nav.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: link.to, className: "transition-opacity hover:opacity-70", children: link.label }) }, link.to)),
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: "/account", className: "transition-opacity hover:opacity-70", children: "Minhas compras" }) })
+          config.features.accounts && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: "/account", className: "transition-opacity hover:opacity-70", children: labels.purchases }) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "Contato" }),
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: labels.contact }),
         /* @__PURE__ */ jsxs("ul", { className: "space-y-2 text-sm text-muted-foreground", children: [
           config.footer?.contact?.phone && /* @__PURE__ */ jsx("li", { children: config.footer.contact.phone }),
           config.footer?.contact?.email && /* @__PURE__ */ jsx("li", { children: config.footer.contact.email }),
@@ -926,17 +1046,15 @@ function StorefrontFooter() {
     ] }),
     /* @__PURE__ */ jsx("div", { className: "border-t", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-7xl flex-col items-center gap-3 px-4 py-5 text-xs text-muted-foreground sm:flex-row sm:justify-between sm:px-6", children: [
       /* @__PURE__ */ jsxs("nav", { className: "flex flex-wrap items-center justify-center gap-x-5 gap-y-2", children: [
-        /* @__PURE__ */ jsx(Link, { to: "/privacy", className: "transition-colors hover:text-foreground", children: "Privacidade" }),
-        /* @__PURE__ */ jsx(Link, { to: "/terms", className: "transition-colors hover:text-foreground", children: "Termos" }),
-        /* @__PURE__ */ jsx(Link, { to: "/refunds", className: "transition-colors hover:text-foreground", children: "Trocas e devolu\xE7\xF5es" })
+        /* @__PURE__ */ jsx(Link, { to: "/privacy", className: "transition-colors hover:text-foreground", children: labels.privacy }),
+        /* @__PURE__ */ jsx(Link, { to: "/terms", className: "transition-colors hover:text-foreground", children: labels.terms }),
+        /* @__PURE__ */ jsx(Link, { to: "/refunds", className: "transition-colors hover:text-foreground", children: labels.returns })
       ] }),
-      /* @__PURE__ */ jsxs("p", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-center", children: config.footer?.credit ?? /* @__PURE__ */ jsxs(Fragment, { children: [
         "\xA9 ",
         config.name,
-        " \u2014 powered by Fayz \xB7 Fotos:",
-        " ",
-        /* @__PURE__ */ jsx("a", { href: "https://unsplash.com", target: "_blank", rel: "noreferrer", className: "underline-offset-2 hover:underline", children: "Unsplash" })
-      ] })
+        " \u2014 powered by Fayz"
+      ] }) })
     ] }) })
   ] });
 }
@@ -1029,6 +1147,53 @@ function QuantityInput({ value, onChange, min = 1, max, testId, incTestId, decTe
     )
   ] });
 }
+function SmoothImage({
+  imageLoading,
+  loading = "lazy",
+  decoding = "async",
+  onLoad,
+  style,
+  ...props
+}) {
+  const config = useStorefrontConfigOptional();
+  const resolved = {
+    ...config?.imageLoading,
+    ...imageLoading
+  };
+  const mode = resolved.mode ?? "fade";
+  const durationMs = resolved.durationMs ?? 420;
+  const easing = resolved.easing ?? "cubic-bezier(0.22, 1, 0.36, 1)";
+  const blur = resolved.blur ?? true;
+  const ref = React6.useRef(null);
+  const [loaded, setLoaded] = React6.useState(mode === "none");
+  React6.useEffect(() => {
+    if (mode === "none") {
+      setLoaded(true);
+      return;
+    }
+    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true);
+  }, [mode, props.src]);
+  const revealStyle = mode === "none" ? {} : {
+    opacity: loaded ? 1 : 0,
+    filter: blur && !loaded ? "blur(10px)" : "blur(0px)",
+    transition: `opacity ${durationMs}ms ${easing}, filter ${durationMs}ms ${easing}, transform ${durationMs}ms ${easing}`
+  };
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...props,
+      ref,
+      loading,
+      decoding,
+      "data-sf-image-loaded": loaded ? "true" : "false",
+      style: { ...style, ...revealStyle },
+      onLoad: (event) => {
+        setLoaded(true);
+        onLoad?.(event);
+      }
+    }
+  );
+}
 function CartDrawer() {
   const config = useStorefrontConfig();
   const cart = useCartStore();
@@ -1128,7 +1293,7 @@ function CartDrawer() {
                 "data-line-id": line.lineId ?? line.productId,
                 className: `flex animate-fade-up gap-3 rounded-lg p-1.5 transition-all hover:bg-muted/40 ${(line.lineId ?? line.productId) === cart.justAddedLineId ? "bg-primary/5 ring-1 ring-primary/30" : ""}`,
                 children: [
-                  line.imageUrl && /* @__PURE__ */ jsx("img", { src: line.imageUrl, alt: line.name, className: "h-20 w-20 shrink-0 rounded-lg border object-cover" }),
+                  line.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: line.imageUrl, alt: line.name, className: "h-20 w-20 shrink-0 rounded-lg border object-cover" }),
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
                       /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-snug", children: line.name }),
@@ -1298,36 +1463,91 @@ function Price({ value, compareAt, testId, compareTestId, className }) {
   ] });
 }
 
-// src/slot-contracts.ts
-var productCardSlotContract = {
+// src/component-selectors.ts
+var productCardComponentContract = {
   root: { "data-testid": TID.productCard },
   name: { "data-testid": TID.productCardName },
   priceTestId: TID.productCardPrice,
   addButton: { "data-testid": TID.productCardAdd }
 };
-var storefrontSlotContracts = {
-  productCard: productCardSlotContract
+var storefrontComponentContracts = {
+  productCard: productCardComponentContract,
+  productDetail: {
+    root: { "data-testid": TID.pdpRoot },
+    gallery: { "data-testid": TID.pdpGallery },
+    name: { "data-testid": TID.pdpName },
+    description: { "data-testid": TID.pdpDescription },
+    actions: { "data-testid": TID.pdpActions },
+    addButton: { "data-testid": TID.pdpAddToCart },
+    enquiryButton: { "data-testid": TID.pdpEnquiryButton },
+    enquiryForm: { "data-testid": TID.enquiryForm }
+  }
 };
-function ProductCard({ product }) {
+function useStorefront() {
+  return useStorefrontConfig();
+}
+function useCatalog() {
   const config = useStorefrontConfig();
-  const addItem = useCartStore((s) => s.addItem);
+  const catalog = useCatalogStore();
+  return {
+    ...catalog,
+    catalogPath: config.catalogPath,
+    config
+  };
+}
+function useCart() {
+  return useCartStore();
+}
+function useEnquiry() {
+  const config = useStorefrontConfig();
+  const createProductEnquiry = async (input) => {
+    const provider = getShopProvider();
+    if (!provider.createProductEnquiry) {
+      throw new Error("The active shop provider does not support product enquiries.");
+    }
+    return provider.createProductEnquiry(input);
+  };
+  return {
+    enquiry: config.enquiry,
+    createProductEnquiry
+  };
+}
+function useStorefrontActions() {
+  const addItem = useCartStore((state) => state.addItem);
+  const openDrawer = useCartStore((state) => state.openDrawer);
+  const closeDrawer = useCartStore((state) => state.closeDrawer);
+  const { createProductEnquiry } = useEnquiry();
+  return {
+    navigateTo,
+    addToCart: (product, quantity, options) => addItem(product, quantity, options),
+    openCart: openDrawer,
+    closeCart: closeDrawer,
+    createProductEnquiry
+  };
+}
+function ProductCard({ product, config: providedConfig, actions: providedActions }) {
+  const runtimeConfig = useStorefrontConfig();
+  const runtimeActions = useStorefrontActions();
+  const config = providedConfig ?? runtimeConfig;
+  const actions = providedActions ?? runtimeActions;
   const hasOptions = getProductOptionGroups(product).length > 0;
   const soldOut = product.inventoryCount <= 0;
   const onSale = product.compareAtPrice != null && product.compareAtPrice > product.price;
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
   const cardStyle = config.theme?.productCard?.style ?? "card";
   const aspect = config.theme?.productCard?.imageAspect === "portrait" ? "aspect-[3/4]" : "aspect-square";
+  const purchaseMode = config.commerceMode === "checkout";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ...productCardSlotContract.root,
+      ...productCardComponentContract.root,
       "data-slug": product.slug,
       className: `group flex flex-col overflow-hidden transition-all duration-300 ${cardStyle === "editorial" ? "hover:-translate-y-1" : "border bg-card hover:-translate-y-1 hover:shadow-lg"}`,
       style: { borderRadius: "var(--sf-radius-card)" },
       children: [
         /* @__PURE__ */ jsxs(Link, { to: `/product/${product.slug}`, className: `relative block ${aspect} overflow-hidden bg-muted`, style: { borderRadius: cardStyle === "editorial" ? "var(--sf-radius-card)" : void 0 }, children: [
           image && /* @__PURE__ */ jsx(
-            "img",
+            SmoothImage,
             {
               src: image.url,
               alt: image.altText ?? product.name,
@@ -1360,33 +1580,37 @@ function ProductCard({ product }) {
             Link,
             {
               to: `/product/${product.slug}`,
-              ...productCardSlotContract.name,
+              ...productCardComponentContract.name,
               className: "font-medium leading-snug hover:underline",
               children: product.name
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between pt-2", children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between gap-3 pt-2", children: [
+            purchaseMode ? /* @__PURE__ */ jsx(
               Price,
               {
                 value: product.price,
                 compareAt: product.compareAtPrice,
-                testId: productCardSlotContract.priceTestId
+                testId: productCardComponentContract.priceTestId
               }
-            ),
+            ) : /* @__PURE__ */ jsx("span", { "data-testid": productCardComponentContract.priceTestId, className: "text-sm text-muted-foreground", children: config.commerceMode === "enquiry" ? config.enquiry.label : "Ver detalhes" }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                ...productCardSlotContract.addButton,
-                disabled: soldOut,
-                "aria-label": hasOptions ? `Escolher op\xE7\xF5es de ${product.name}` : `Adicionar ${product.name} ao carrinho`,
+                ...productCardComponentContract.addButton,
+                disabled: purchaseMode && soldOut,
+                "aria-label": purchaseMode ? hasOptions ? `Escolher op\xE7\xF5es de ${product.name}` : `Adicionar ${product.name} ao carrinho` : `${config.enquiry.label} ${product.name}`,
                 onClick: () => {
+                  if (!purchaseMode) {
+                    navigateTo(`/product/${product.slug}`);
+                    return;
+                  }
                   if (hasOptions) {
                     navigateTo(`/product/${product.slug}`);
                     return;
                   }
-                  addItem(product);
+                  actions.addToCart(product);
                 },
                 className: "rounded-full border bg-background/90 p-2.5 text-foreground shadow-sm transition-all duration-200 hover:scale-110 hover:bg-primary hover:text-primary-foreground hover:shadow disabled:cursor-not-allowed disabled:opacity-40 lg:translate-y-1 lg:opacity-0 lg:group-hover:translate-y-0 lg:group-hover:opacity-100 lg:disabled:opacity-0 lg:group-hover:disabled:opacity-40",
                 children: /* @__PURE__ */ jsx(ShoppingBag, { className: "h-4 w-4" })
@@ -1400,14 +1624,25 @@ function ProductCard({ product }) {
 }
 function ProductGrid({ products, loading }) {
   const config = useStorefrontConfig();
-  const ProductCardComponent = config.slots?.ProductCard ?? ProductCard;
+  const actions = useStorefrontActions();
+  const components = getStorefrontComponents(config);
+  const ProductCardComponent = components.ProductCard ?? ProductCard;
   if (loading) {
     return /* @__PURE__ */ jsx("div", { "data-testid": TID.productGrid, className: "grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx("div", { className: "aspect-[3/4] animate-pulse rounded-xl bg-muted" }, i)) });
   }
   if (products.length === 0) {
     return /* @__PURE__ */ jsx("div", { "data-testid": TID.productGrid, className: "py-20 text-center text-muted-foreground", children: "Nenhum produto encontrado." });
   }
-  return /* @__PURE__ */ jsx("div", { "data-testid": TID.productGrid, className: "grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4", children: products.map((p) => /* @__PURE__ */ jsx(ProductCardComponent, { product: p }, p.id)) });
+  return /* @__PURE__ */ jsx("div", { "data-testid": TID.productGrid, className: "grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4", children: products.map((p) => /* @__PURE__ */ jsx(
+    ProductCardComponent,
+    {
+      product: p,
+      config,
+      commerceMode: config.commerceMode,
+      actions
+    },
+    p.id
+  )) });
 }
 function FiltersPanel() {
   const { categories } = useCategories();
@@ -1645,8 +1880,15 @@ function HeroSection({
   height = "tall"
 }) {
   const [index, setIndex] = useState(0);
+  const [loadedSlides, setLoadedSlides] = useState({});
+  const config = useStorefrontConfig();
   const interacted = useRef(false);
   const hClass = height === "tall" ? "h-[72vh] min-h-[440px]" : "h-[48vh] min-h-[340px]";
+  const revealImages = config.imageLoading.mode !== "none";
+  const revealStyle = (loaded) => revealImages ? {
+    filter: config.imageLoading.blur && !loaded ? "blur(10px)" : "blur(0px)",
+    transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`
+  } : void 0;
   useEffect(() => {
     if (variant !== "slider" || slides.length < 2 || prefersReducedMotion()) return;
     const timer = setInterval(() => {
@@ -1667,7 +1909,7 @@ function HeroSection({
         className: "group relative block h-[42vh] min-h-[320px] overflow-hidden",
         children: [
           /* @__PURE__ */ jsx(
-            "img",
+            SmoothImage,
             {
               src: slideImage(slide, 900, 700),
               alt: slide.title,
@@ -1699,7 +1941,11 @@ function HeroSection({
         src: slideImage(slide),
         alt: slide.title,
         "aria-hidden": i !== index,
-        className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${i === index ? "animate-kenburns opacity-100" : "opacity-0"}`
+        loading: i === 0 ? "eager" : "lazy",
+        decoding: "async",
+        onLoad: () => setLoadedSlides((current) => ({ ...current, [i]: true })),
+        style: revealStyle(Boolean(loadedSlides[i])),
+        className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${i === index && (!revealImages || loadedSlides[i]) ? "animate-kenburns opacity-100" : "opacity-0"}`
       },
       i
     )),
@@ -1761,7 +2007,7 @@ function CategoryShowcase({ style, title }) {
       title && /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx("h2", { className: "sf-heading mb-8 text-center text-3xl font-bold", children: title }) }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start justify-center gap-8", children: categories.map((c, i) => /* @__PURE__ */ jsx(Reveal, { delay: i * 80, children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => go(c.id), className: "group flex w-28 flex-col items-center gap-3", children: [
         /* @__PURE__ */ jsx("span", { className: "block h-24 w-24 overflow-hidden rounded-full border-2 border-transparent shadow-sm transition-all duration-300 group-hover:scale-105 group-hover:border-primary group-hover:shadow-md", children: /* @__PURE__ */ jsx(
-          "img",
+          SmoothImage,
           {
             src: c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 200, 200),
             alt: c.name,
@@ -1776,7 +2022,7 @@ function CategoryShowcase({ style, title }) {
     title && /* @__PURE__ */ jsx(Reveal, { children: /* @__PURE__ */ jsx("h2", { className: "sf-heading mb-8 text-center text-3xl font-bold", children: title }) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 lg:grid-cols-4", children: categories.map((c, i) => /* @__PURE__ */ jsx(Reveal, { delay: i * 90, children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => go(c.id), className: "group relative block aspect-[4/5] w-full overflow-hidden", style: { borderRadius: "var(--sf-radius-card)" }, children: [
       /* @__PURE__ */ jsx(
-        "img",
+        SmoothImage,
         {
           src: c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 480, 600),
           alt: c.name,
@@ -1798,7 +2044,9 @@ function ProductRail({
   limit = 4
 }) {
   const config = useStorefrontConfig();
-  const ProductCardComponent = config.slots?.ProductCard ?? ProductCard;
+  const actions = useStorefrontActions();
+  const components = getStorefrontComponents(config);
+  const ProductCardComponent = components.ProductCard ?? ProductCard;
   const { products, loading } = useProducts(
     filter === "new" ? { status: "active", orderBy: "created_at", order: "desc" } : { status: "active" }
   );
@@ -1814,7 +2062,15 @@ function ProductRail({
       /* @__PURE__ */ jsx("h2", { className: "sf-heading text-3xl font-bold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: subtitle })
     ] }),
-    loading ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-5 md:grid-cols-4", children: Array.from({ length: limit }, (_, i) => /* @__PURE__ */ jsx("div", { className: "aspect-[3/4] animate-pulse bg-muted", style: { borderRadius: "var(--sf-radius-card)" } }, i)) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-5 md:grid-cols-4", children: visible.map((p, i) => /* @__PURE__ */ jsx(Reveal, { delay: i * 90, children: /* @__PURE__ */ jsx(ProductCardComponent, { product: p }) }, p.id)) }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-5 md:grid-cols-4", children: Array.from({ length: limit }, (_, i) => /* @__PURE__ */ jsx("div", { className: "aspect-[3/4] animate-pulse bg-muted", style: { borderRadius: "var(--sf-radius-card)" } }, i)) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-5 md:grid-cols-4", children: visible.map((p, i) => /* @__PURE__ */ jsx(Reveal, { delay: i * 90, children: /* @__PURE__ */ jsx(
+      ProductCardComponent,
+      {
+        product: p,
+        config,
+        commerceMode: config.commerceMode,
+        actions
+      }
+    ) }, p.id)) }),
     /* @__PURE__ */ jsx(Reveal, { className: "mt-10 text-center", delay: 200, children: /* @__PURE__ */ jsx(
       Link,
       {
@@ -1826,6 +2082,201 @@ function ProductRail({
     ) })
   ] });
 }
+var heightClass = {
+  medium: "h-[58vh] min-h-[420px]",
+  tall: "h-[74vh] min-h-[520px]",
+  screen: "min-h-[calc(100vh-64px)]"
+};
+var alignClass = {
+  start: "items-start text-left",
+  center: "items-center text-center",
+  end: "items-end text-right"
+};
+function MediaCarousel({
+  items,
+  height = "tall",
+  autoplayMs = 7e3,
+  overlay = "dark",
+  className = ""
+}) {
+  const [index, setIndex] = useState(0);
+  const [loadedItems, setLoadedItems] = useState({});
+  const config = useStorefrontConfig();
+  const interacted = useRef(false);
+  const revealImages = config.imageLoading.mode !== "none";
+  const revealStyle = (loaded) => revealImages ? {
+    filter: config.imageLoading.blur && !loaded ? "blur(10px)" : "blur(0px)",
+    transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`
+  } : void 0;
+  useEffect(() => {
+    if (items.length < 2 || autoplayMs <= 0 || prefersReducedMotion()) return;
+    const timer = setInterval(() => {
+      if (!interacted.current) setIndex((i) => (i + 1) % items.length);
+    }, autoplayMs);
+    return () => clearInterval(timer);
+  }, [autoplayMs, items.length]);
+  if (items.length === 0) return null;
+  const active = items[Math.min(index, items.length - 1)];
+  const goTo = (next) => {
+    interacted.current = true;
+    setIndex((next + items.length) % items.length);
+  };
+  const overlayClass = overlay === "dark" ? "bg-gradient-to-r from-black/70 via-black/25 to-black/25" : overlay === "soft" ? "bg-gradient-to-t from-black/45 via-black/10 to-transparent" : "";
+  return /* @__PURE__ */ jsxs("section", { "data-testid": TID.mediaCarousel, className: `relative isolate overflow-hidden ${heightClass[height]} ${className}`, children: [
+    items.map((item, i) => /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: item.image,
+        alt: item.imageAlt ?? item.title,
+        "aria-hidden": i !== index,
+        loading: i === 0 ? "eager" : "lazy",
+        decoding: "async",
+        onLoad: () => setLoadedItems((current) => ({ ...current, [i]: true })),
+        style: revealStyle(Boolean(loadedItems[i])),
+        className: `absolute inset-0 -z-10 h-full w-full object-cover transition-opacity duration-700 ${i === index && (!revealImages || loadedItems[i]) ? "opacity-100" : "opacity-0"}`
+      },
+      `${item.title}-${i}`
+    )),
+    /* @__PURE__ */ jsx("div", { className: `absolute inset-0 -z-10 ${overlayClass}` }),
+    /* @__PURE__ */ jsx("div", { className: `flex h-full px-5 py-16 sm:px-10 lg:px-16 ${alignClass[active.align ?? "start"]}`, children: /* @__PURE__ */ jsxs("div", { className: "my-auto max-w-2xl text-white drop-shadow-md", children: [
+      active.eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-4 text-xs font-semibold uppercase tracking-[0.24em] text-white/80", children: active.eyebrow }),
+      /* @__PURE__ */ jsx("h1", { className: "sf-heading text-5xl font-normal leading-[0.95] sm:text-7xl lg:text-8xl", children: active.title }),
+      active.subtitle && /* @__PURE__ */ jsx("p", { className: "mt-5 max-w-xl text-base leading-8 text-white/88 sm:text-lg", children: active.subtitle }),
+      active.cta && /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: active.href ?? "/catalog",
+          className: "mt-8 inline-flex border border-white/75 px-6 py-3 text-xs font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-white hover:text-black",
+          children: active.cta
+        }
+      )
+    ] }) }),
+    items.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous slide",
+          "data-testid": TID.mediaCarouselPrev,
+          onClick: () => goTo(index - 1),
+          className: "absolute left-4 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-white/60 bg-black/20 text-white backdrop-blur transition hover:bg-white hover:text-black",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next slide",
+          "data-testid": TID.mediaCarouselNext,
+          onClick: () => goTo(index + 1),
+          className: "absolute right-4 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-white/60 bg-black/20 text-white backdrop-blur transition hover:bg-white hover:text-black",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-5 left-1/2 flex -translate-x-1/2 gap-2", children: items.map((item, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Go to slide ${i + 1}`,
+          onClick: () => goTo(i),
+          className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/55 hover:bg-white"}`
+        },
+        `${item.title}-dot-${i}`
+      )) })
+    ] })
+  ] });
+}
+function ProductSlider({
+  title,
+  subtitle,
+  eyebrow,
+  filter = "all",
+  categoryName,
+  collection,
+  limit = 10,
+  cta = "View all",
+  href,
+  className = ""
+}) {
+  const config = useStorefrontConfig();
+  const actions = useStorefrontActions();
+  const viewportRef = useRef(null);
+  const components = getStorefrontComponents(config);
+  const ProductCardComponent = components.ProductCard ?? ProductCard;
+  const { products, loading } = useProducts(
+    filter === "new" ? { status: "active", orderBy: "created_at", order: "desc" } : { status: "active" }
+  );
+  const visible = useMemo(() => {
+    let list = products;
+    if (filter === "sale") list = list.filter((p) => p.compareAtPrice != null && p.compareAtPrice > p.price);
+    if (categoryName) list = list.filter((p) => p.categoryName === categoryName);
+    if (collection) list = list.filter((p) => p.metadata?.collection === collection);
+    return list.slice(0, limit);
+  }, [categoryName, collection, filter, limit, products]);
+  const scroll = (direction) => {
+    viewportRef.current?.scrollBy({ left: direction * Math.max(320, viewportRef.current.clientWidth * 0.75), behavior: "smooth" });
+  };
+  if (!loading && visible.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { "data-testid": TID.productSlider, className: `mx-auto max-w-7xl px-4 py-14 sm:px-6 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "max-w-2xl", children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-primary", children: eyebrow }),
+        /* @__PURE__ */ jsx("h2", { className: "sf-heading text-3xl font-normal leading-tight tracking-normal sm:text-5xl", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "mt-3 leading-7 text-muted-foreground", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous products",
+            "data-testid": TID.productSliderPrev,
+            onClick: () => scroll(-1),
+            className: "inline-flex h-10 w-10 items-center justify-center border border-border bg-background transition hover:bg-foreground hover:text-background",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next products",
+            "data-testid": TID.productSliderNext,
+            onClick: () => scroll(1),
+            className: "inline-flex h-10 w-10 items-center justify-center border border-border bg-background transition hover:bg-foreground hover:text-background",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        "data-testid": TID.productSliderViewport,
+        className: "flex snap-x gap-5 overflow-x-auto pb-5 [scrollbar-width:thin]",
+        children: loading ? Array.from({ length: Math.min(limit, 6) }, (_, i) => /* @__PURE__ */ jsx("div", { className: "h-[360px] min-w-[260px] snap-start animate-pulse bg-muted" }, i)) : visible.map((product) => /* @__PURE__ */ jsx("div", { className: "min-w-[260px] max-w-[300px] flex-[0_0_72vw] snap-start sm:flex-[0_0_300px]", children: /* @__PURE__ */ jsx(
+          ProductCardComponent,
+          {
+            product,
+            config,
+            commerceMode: config.commerceMode,
+            actions
+          }
+        ) }, product.id))
+      }
+    ),
+    cta && /* @__PURE__ */ jsx(
+      Link,
+      {
+        to: href ?? config.catalogPath,
+        className: "mt-4 inline-flex border border-foreground/30 px-6 py-3 text-xs font-semibold uppercase tracking-[0.16em] transition hover:bg-foreground hover:text-background",
+        children: cta
+      }
+    )
+  ] });
+}
 function Icon({ name, className }) {
   const C = LucideIcons[name];
   return C ? /* @__PURE__ */ jsx(C, { className }) : null;
@@ -1850,7 +2301,7 @@ function PromoBanner({
 }) {
   return /* @__PURE__ */ jsxs("section", { "data-testid": TID.promoBanner, className: "group relative my-12 overflow-hidden", children: [
     /* @__PURE__ */ jsx(
-      "img",
+      SmoothImage,
       {
         src: image ?? bannerPlaceholder(title, hue, hue + 50, 1600, 420),
         alt: title,
@@ -1953,8 +2404,10 @@ function registerStorefrontBlocks() {
   if (registered) return;
   registered = true;
   registerBlock("hero", HeroSection, { source: "sdk", label: "Hero" });
+  registerBlock("mediaCarousel", MediaCarousel, { source: "sdk", label: "Media carousel" });
   registerBlock("categories", CategoryShowcase, { source: "sdk", label: "Categories" });
   registerBlock("products", ProductRail, { source: "sdk", label: "Product rail" });
+  registerBlock("productSlider", ProductSlider, { source: "sdk", label: "Product slider" });
   registerBlock("benefits", BenefitsRow, { source: "sdk", label: "Benefits row" });
   registerBlock("banner", PromoBanner, { source: "sdk", label: "Promo banner" });
   registerBlock("manifesto", ManifestoBlock, { source: "sdk", label: "Manifesto" });
@@ -1968,9 +2421,12 @@ function sectionsToBlocks(sections) {
     return { type, id: `${type}-${i}`, props };
   });
 }
-function HomePage({ sections }) {
+function StorefrontSections({ sections }) {
   return /* @__PURE__ */ jsx("main", { children: renderBlocks(sectionsToBlocks(sections)) });
 }
+function HomePage({ sections }) {
+  return /* @__PURE__ */ jsx(StorefrontSections, { sections });
+}
 function useProduct(slug2) {
   const [product, setProduct] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -2082,18 +2538,208 @@ function ProductSpecs({ product }) {
 }
 function RelatedProducts({ product }) {
   const config = useStorefrontConfig();
-  const Card = config.slots?.ProductCard ?? ProductCard;
+  const actions = useStorefrontActions();
+  const components = getStorefrontComponents(config);
+  const Card = components.ProductCard ?? ProductCard;
   const opts = product.categoryId ? { categoryId: product.categoryId, status: "active", limit: 5 } : { status: "active", limit: 5 };
   const { products, loading } = useProducts(opts);
   const related = products.filter((p) => p.id !== product.id).slice(0, 4);
   if (loading || related.length === 0) return null;
   return /* @__PURE__ */ jsxs("section", { className: "mt-16", children: [
     /* @__PURE__ */ jsx("h2", { className: "sf-heading text-xl font-semibold tracking-tight", children: "Voc\xEA tamb\xE9m pode gostar" }),
-    /* @__PURE__ */ jsx("div", { className: "mt-6 grid grid-cols-2 gap-5 md:grid-cols-4", children: related.map((p) => /* @__PURE__ */ jsx(Card, { product: p }, p.id)) })
+    /* @__PURE__ */ jsx("div", { className: "mt-6 grid grid-cols-2 gap-5 md:grid-cols-4", children: related.map((p) => /* @__PURE__ */ jsx(
+      Card,
+      {
+        product: p,
+        config,
+        commerceMode: config.commerceMode,
+        actions
+      },
+      p.id
+    )) })
   ] });
 }
+function defaultSubject(prefix, product) {
+  return `${prefix}: ${product.name}`;
+}
+function buildWhatsAppHref(url, product) {
+  const text = encodeURIComponent(`Hello, I would like more information about ${product.name}.`);
+  const sep = url.includes("?") ? "&" : "?";
+  return `${url}${sep}text=${text}`;
+}
+function ProductEnquiryForm({ product, onSuccess }) {
+  const config = useStorefrontConfig();
+  const [customerName, setCustomerName] = useState("");
+  const [customerEmail, setCustomerEmail] = useState("");
+  const [customerPhone, setCustomerPhone] = useState("");
+  const [subject, setSubject] = useState(defaultSubject(config.enquiry.subjectPrefix, product));
+  const [message, setMessage] = useState(`I would like more information about ${product.name}.`);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const submit = async (event) => {
+    event.preventDefault();
+    setStatus("submitting");
+    setError(null);
+    try {
+      const provider = getShopProvider();
+      if (provider.createProductEnquiry) {
+        await provider.createProductEnquiry({
+          productId: product.id,
+          productName: product.name,
+          productSlug: product.slug,
+          customerName,
+          customerEmail,
+          customerPhone: customerPhone || void 0,
+          subject,
+          message,
+          sourceUrl: typeof window === "undefined" ? void 0 : window.location.href,
+          metadata: { sku: product.sku, categoryName: product.categoryName }
+        });
+      } else if (config.enquiry.email) {
+        window.location.href = `mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`;
+      }
+      setStatus("success");
+      onSuccess?.();
+    } catch (e) {
+      setStatus("error");
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ...storefrontComponentContracts.productDetail.enquiryForm,
+      onSubmit: submit,
+      className: "space-y-4",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs("label", { className: "space-y-1.5 text-sm font-medium", children: [
+            /* @__PURE__ */ jsx("span", { children: "Your name" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "data-testid": TID.enquiryName,
+                required: true,
+                value: customerName,
+                onChange: (e) => setCustomerName(e.target.value),
+                className: "w-full border bg-background px-3 py-2 outline-none focus:border-primary",
+                style: { borderRadius: "var(--sf-radius-input)" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "space-y-1.5 text-sm font-medium", children: [
+            /* @__PURE__ */ jsx("span", { children: "Your email" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "data-testid": TID.enquiryEmail,
+                required: true,
+                type: "email",
+                value: customerEmail,
+                onChange: (e) => setCustomerEmail(e.target.value),
+                className: "w-full border bg-background px-3 py-2 outline-none focus:border-primary",
+                style: { borderRadius: "var(--sf-radius-input)" }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5 text-sm font-medium", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Phone",
+            config.enquiry.requirePhone ? "" : " (optional)"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "data-testid": TID.enquiryPhone,
+              required: config.enquiry.requirePhone,
+              value: customerPhone,
+              onChange: (e) => setCustomerPhone(e.target.value),
+              className: "w-full border bg-background px-3 py-2 outline-none focus:border-primary",
+              style: { borderRadius: "var(--sf-radius-input)" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5 text-sm font-medium", children: [
+          /* @__PURE__ */ jsx("span", { children: "Subject" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "data-testid": TID.enquirySubject,
+              required: true,
+              value: subject,
+              onChange: (e) => setSubject(e.target.value),
+              className: "w-full border bg-background px-3 py-2 outline-none focus:border-primary",
+              style: { borderRadius: "var(--sf-radius-input)" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5 text-sm font-medium", children: [
+          /* @__PURE__ */ jsx("span", { children: "Message" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              "data-testid": TID.enquiryMessage,
+              required: true,
+              rows: 5,
+              value: message,
+              onChange: (e) => setMessage(e.target.value),
+              className: "w-full resize-none border bg-background px-3 py-2 outline-none focus:border-primary",
+              style: { borderRadius: "var(--sf-radius-input)" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "data-testid": TID.enquirySubmit,
+              type: "submit",
+              disabled: status === "submitting",
+              className: "sf-cta inline-flex items-center gap-2 bg-primary px-5 py-3 font-semibold text-primary-foreground disabled:cursor-wait disabled:opacity-60",
+              style: { borderRadius: "var(--sf-radius-button)" },
+              children: [
+                /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" }),
+                status === "submitting" ? "Sending..." : "Send enquiry"
+              ]
+            }
+          ),
+          config.enquiry.whatsappUrl && /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: buildWhatsAppHref(config.enquiry.whatsappUrl, product),
+              target: "_blank",
+              rel: "noreferrer",
+              className: "inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted",
+              style: { borderRadius: "var(--sf-radius-button)" },
+              children: [
+                /* @__PURE__ */ jsx(MessageCircle, { className: "h-4 w-4" }),
+                "WhatsApp"
+              ]
+            }
+          ),
+          config.enquiry.email && /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: `mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`,
+              className: "inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted",
+              style: { borderRadius: "var(--sf-radius-button)" },
+              children: [
+                /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4" }),
+                "Email"
+              ]
+            }
+          )
+        ] }),
+        status === "success" && /* @__PURE__ */ jsx("p", { "data-testid": TID.enquirySuccess, className: "text-sm font-medium text-emerald-600", children: config.enquiry.successMessage }),
+        error && /* @__PURE__ */ jsx("p", { "data-testid": TID.enquiryError, className: "text-sm font-medium text-red-600", children: error })
+      ]
+    }
+  );
+}
 function ProductDetailPage({ slug: slug2 }) {
   const config = useStorefrontConfig();
+  const actions = useStorefrontActions();
   const { product, loading } = useProduct(slug2);
   const addItem = useCartStore((s) => s.addItem);
   const [qty, setQty] = useState(1);
@@ -2129,21 +2775,56 @@ function ProductDetailPage({ slug: slug2 }) {
   const soldOut = product.inventoryCount <= 0;
   const lowStock = !soldOut && product.inventoryCount <= 5;
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
+  const components = getStorefrontComponents(config);
+  const ProductDetailComponent = components.ProductDetail;
+  const addToCart = () => addItem(product, qty, selectedOptions);
+  const openEnquiry = () => {
+    document.getElementById("storefront-product-enquiry")?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
   const discountPct = product.compareAtPrice && product.compareAtPrice > product.price ? Math.round((1 - product.price / product.compareAtPrice) * 100) : 0;
-  return /* @__PURE__ */ jsxs("main", { className: "mx-auto max-w-5xl px-4 py-8 sm:px-6", children: [
+  if (ProductDetailComponent) {
+    return /* @__PURE__ */ jsx(
+      ProductDetailComponent,
+      {
+        product,
+        config,
+        commerceMode: config.commerceMode,
+        primaryImage: image,
+        optionGroups,
+        selectedOptions,
+        setSelectedOptions,
+        quantity: qty,
+        setQuantity: setQty,
+        soldOut,
+        lowStock,
+        actions,
+        addToCart,
+        openEnquiry
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("main", { ...storefrontComponentContracts.productDetail.root, className: "mx-auto max-w-5xl px-4 py-8 sm:px-6", children: [
     /* @__PURE__ */ jsxs(Link, { to: "/", className: "mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground", children: [
       /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
       " Continuar comprando"
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid animate-fade-up gap-10 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "group overflow-hidden border bg-muted", style: { borderRadius: "var(--sf-radius-card)" }, children: image && /* @__PURE__ */ jsx(
-        "img",
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          src: image.url,
-          alt: image.altText ?? product.name,
-          className: "aspect-square w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+          ...storefrontComponentContracts.productDetail.gallery,
+          className: "group overflow-hidden border bg-muted",
+          style: { borderRadius: "var(--sf-radius-card)" },
+          children: image && /* @__PURE__ */ jsx(
+            SmoothImage,
+            {
+              src: image.url,
+              alt: image.altText ?? product.name,
+              className: "aspect-square w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+            }
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col py-2 lg:sticky lg:top-24 lg:self-start", children: [
         /* @__PURE__ */ jsxs("nav", { className: "mb-3 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsx(Link, { to: "/", className: "transition-colors hover:text-foreground", children: "In\xEDcio" }),
@@ -2155,7 +2836,7 @@ function ProductDetailPage({ slug: slug2 }) {
           /* @__PURE__ */ jsx("span", { className: "text-foreground", children: product.name })
         ] }),
         /* @__PURE__ */ jsx("h1", { "data-testid": TID.pdpName, className: "sf-heading text-3xl font-bold tracking-tight", children: product.name }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-3", children: [
+        config.commerceMode === "checkout" && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("div", { className: "text-xl", children: /* @__PURE__ */ jsx(
             Price,
             {
@@ -2172,7 +2853,7 @@ function ProductDetailPage({ slug: slug2 }) {
           ] })
         ] }),
         /* @__PURE__ */ jsx("p", { "data-testid": TID.pdpDescription, className: "mt-5 leading-relaxed text-muted-foreground", children: product.description }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm", children: [
+        config.commerceMode === "checkout" && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm", children: [
           soldOut ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 font-medium text-muted-foreground", children: [
             /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-muted-foreground" }),
             " Sem estoque"
@@ -2198,7 +2879,7 @@ function ProductDetailPage({ slug: slug2 }) {
             onChange: setSelectedOptions
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "mt-8 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx("div", { ...storefrontComponentContracts.productDetail.actions, className: "mt-8", children: config.commerceMode === "checkout" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ jsx(
             QuantityInput,
             {
@@ -2214,14 +2895,32 @@ function ProductDetailPage({ slug: slug2 }) {
               type: "button",
               "data-testid": TID.pdpAddToCart,
               disabled: soldOut,
-              onClick: () => addItem(product, qty, selectedOptions),
+              onClick: addToCart,
               className: "sf-cta flex-1 bg-primary py-3.5 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:translate-y-0",
               style: { borderRadius: "var(--sf-radius-button)" },
               children: soldOut ? "Esgotado" : "Adicionar ao carrinho"
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-3 gap-3 border-t pt-6 text-center", children: [
+        ] }) : config.commerceMode === "enquiry" ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ...storefrontComponentContracts.productDetail.enquiryButton,
+            onClick: openEnquiry,
+            className: "sf-cta w-full bg-primary py-3.5 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg",
+            style: { borderRadius: "var(--sf-radius-button)" },
+            children: config.enquiry.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: config.catalogPath,
+            className: "inline-flex border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted",
+            style: { borderRadius: "var(--sf-radius-button)" },
+            children: "Voltar ao cat\xE1logo"
+          }
+        ) }),
+        config.commerceMode === "checkout" && /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-3 gap-3 border-t pt-6 text-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [
             /* @__PURE__ */ jsx(Truck, { className: "h-5 w-5 text-primary" }),
             " Envio r\xE1pido"
@@ -2237,6 +2936,11 @@ function ProductDetailPage({ slug: slug2 }) {
         ] })
       ] })
     ] }),
+    config.commerceMode === "enquiry" && /* @__PURE__ */ jsx("section", { id: "storefront-product-enquiry", className: "mt-12 border-t pt-10", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
+      /* @__PURE__ */ jsx("h2", { className: "sf-heading text-2xl font-semibold", children: "Need more information?" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: "Send an enquiry about this product." }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(ProductEnquiryForm, { product }) })
+    ] }) }),
     /* @__PURE__ */ jsx(ProductSpecs, { product }),
     /* @__PURE__ */ jsx(RelatedProducts, { product })
   ] });
@@ -2277,7 +2981,8 @@ async function placeStorefrontOrder({
     }))
   });
   if (markPaid) {
-    await provider.updateOrder(order.id, { financialStatus: "paid" });
+    if (provider.confirmPayment) await provider.confirmPayment(order.id);
+    else await provider.updateOrder(order.id, { financialStatus: "paid" });
   }
   return { order, customerId: customerId ?? order.customerId ?? "" };
 }
@@ -2792,7 +3497,7 @@ function CheckoutPage() {
         /* @__PURE__ */ jsx("h2", { className: "sr-only", children: "Resumo do pedido" }),
         /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: cart.lines.map((line) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3 text-sm", children: [
           /* @__PURE__ */ jsxs("div", { className: "relative h-16 w-16 flex-none overflow-hidden rounded-lg border bg-background", children: [
-            line.imageUrl && /* @__PURE__ */ jsx("img", { src: line.imageUrl, alt: line.name, className: "h-full w-full object-cover" }),
+            line.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: line.imageUrl, alt: line.name, className: "h-full w-full object-cover" }),
             /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-muted-foreground px-1.5 text-[10px] font-bold text-background", children: line.quantity })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -3214,7 +3919,7 @@ function OrderConfirmationPage({ orderId }) {
           /* @__PURE__ */ jsx(OrderTrackingTimeline, { order })
         ] }),
         /* @__PURE__ */ jsx("ul", { className: "mt-8 space-y-3 text-left", children: order.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 text-sm", children: [
-          item.imageUrl && /* @__PURE__ */ jsx("img", { src: item.imageUrl, alt: item.name, className: "h-12 w-12 rounded-lg border object-cover" }),
+          item.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: item.imageUrl, alt: item.name, className: "h-12 w-12 rounded-lg border object-cover" }),
           /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
             item.name,
             " ",
@@ -3422,7 +4127,7 @@ function OrdersPanel() {
         /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: new Date(order.createdAt).toLocaleDateString(config.locale) }),
         /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(OrderTrackingTimeline, { order, compact: true }) }),
         /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap gap-2", children: order.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 rounded-lg border px-2 py-1 text-xs", children: [
-          item.imageUrl && /* @__PURE__ */ jsx("img", { src: item.imageUrl, alt: item.name, className: "h-6 w-6 rounded object-cover" }),
+          item.imageUrl && /* @__PURE__ */ jsx(SmoothImage, { src: item.imageUrl, alt: item.name, className: "h-6 w-6 rounded object-cover" }),
           item.name,
           " \xD7 ",
           item.quantity
@@ -3602,7 +4307,7 @@ function PolicyPage({ kind }) {
     ] }) })
   ] });
 }
-var StorefrontErrorBoundary = class extends React18.Component {
+var StorefrontErrorBoundary = class extends React6.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -3703,8 +4408,8 @@ function RouteSwitch({ path }) {
   if (product?.slug) return /* @__PURE__ */ jsx(ProductDetailPage, { slug: product.slug });
   const order = matchPath("/order/:id", path);
   if (order?.id) return /* @__PURE__ */ jsx(OrderConfirmationPage, { orderId: order.id });
-  if (matchPath("/checkout", path)) return /* @__PURE__ */ jsx(CheckoutPage, {});
-  if (matchPath("/account", path)) return /* @__PURE__ */ jsx(MyPurchasesPage, {});
+  if (matchPath("/checkout", path) && config.features.checkout) return /* @__PURE__ */ jsx(CheckoutPage, {});
+  if (matchPath("/account", path) && config.features.accounts) return /* @__PURE__ */ jsx(MyPurchasesPage, {});
   if (matchPath("/catalog", path)) return /* @__PURE__ */ jsx(CatalogPage, {});
   if (matchPath("/privacy", path)) return /* @__PURE__ */ jsx(PolicyPage, { kind: "privacy" });
   if (matchPath("/terms", path)) return /* @__PURE__ */ jsx(PolicyPage, { kind: "terms" });
@@ -3746,12 +4451,26 @@ function buildMockSeed(config) {
   };
 }
 function initStorefrontRuntime(config) {
-  initCustomerAuth(resolveAuthAdapter(config.auth?.adapter));
+  if (resolveConfig(config).features.accounts) {
+    initCustomerAuth(resolveAuthAdapter(config.auth, {
+      supabaseUrl: config.supabaseUrl,
+      supabaseAnonKey: config.supabaseAnonKey
+    }));
+  }
   if (config.provider) {
     setShopProvider(config.provider);
   } else {
     setShopProvider(createMockShopProvider(buildMockSeed(config)));
   }
+  const reconcileCart = () => {
+    const provider = getShopProvider();
+    void useCartStore.getState().reconcile(async (line) => {
+      const product = await provider.getProduct(line.productId);
+      return product != null;
+    });
+  };
+  if (useCartStore.persist.hasHydrated()) reconcileCart();
+  else useCartStore.persist.onFinishHydration(reconcileCart);
   if (config.supabaseUrl || config.supabaseAnonKey) {
     console.warn(
       "@fayz-ai/shop: supabaseUrl/supabaseAnonKey are legacy fields. Pass an explicit provider/adapter or use the Fayz SDK broker path."
@@ -3762,14 +4481,20 @@ function StorefrontShell() {
   const config = useStorefrontConfig();
   const path = useHashPath();
   const focused = isFocusedRoute(config, path);
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background text-foreground", children: [
+  const components = getStorefrontComponents(config);
+  const chromeProps = { config, commerceMode: config.commerceMode };
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     config.theme && /* @__PURE__ */ jsx(StorefrontThemeStyle, { theme: config.theme }),
-    !focused && /* @__PURE__ */ jsx(StorefrontHeader, {}),
+    !focused && (components.Header ? /* @__PURE__ */ jsx(components.Header, { ...chromeProps }) : /* @__PURE__ */ jsx(StorefrontHeader, {})),
     /* @__PURE__ */ jsx(StorefrontErrorBoundary, { children: /* @__PURE__ */ jsx(RouteSwitch, { path }) }, path),
-    !focused && /* @__PURE__ */ jsx(CartDrawer, {}),
-    !focused && /* @__PURE__ */ jsx(StorefrontFooter, {}),
+    !focused && config.features.cart && /* @__PURE__ */ jsx(CartDrawer, {}),
+    !focused && (components.Footer ? /* @__PURE__ */ jsx(components.Footer, { ...chromeProps }) : /* @__PURE__ */ jsx(StorefrontFooter, {})),
     /* @__PURE__ */ jsx(Toaster, {})
   ] });
+  if (components.Shell) {
+    return /* @__PURE__ */ jsx(components.Shell, { ...chromeProps, children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-background text-foreground", children: body });
 }
 function createStorefrontApp(config) {
   const resolved = resolveConfig(config);
@@ -3780,6 +4505,37 @@ function createStorefrontApp(config) {
   StorefrontApp.displayName = "StorefrontApp";
   return StorefrontApp;
 }
+function createStorefront(options) {
+  const routes = [...options.pages ?? [], ...options.routes ?? []];
+  const config = {
+    ...options.config,
+    provider: options.provider ?? options.config.provider,
+    components: {
+      ...options.config.components,
+      ...options.components
+    },
+    routes: routes.length > 0 ? routes : options.config.routes,
+    home: options.sections ? { ...options.config.home ?? { sections: [] }, sections: options.sections } : options.config.home
+  };
+  return createStorefrontApp(config);
+}
+
+// src/define.ts
+function defineStorefrontConfig(config) {
+  return config;
+}
+function defineStorefrontComponents(components) {
+  return components;
+}
+function defineStorefrontRoutes(routes) {
+  return routes;
+}
+function defineStorefrontSections(sections) {
+  return sections;
+}
+function defineStorefrontApp(options) {
+  return options;
+}
 var runtimeConfigRegistry = /* @__PURE__ */ new Map();
 function slug(name) {
   return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "app";
@@ -3838,7 +4594,7 @@ function manifestToStorefrontConfig(manifest, surfaceName) {
       provider: manifest.backend?.provider,
       url: manifest.backend?.url
     },
-    slots: runtimeConfig?.slots,
+    components: runtimeConfig?.components,
     routes: runtimeConfig?.routes,
     provider: runtimeConfig?.provider,
     auth: runtimeConfig?.auth,
@@ -3846,9 +4602,9 @@ function manifestToStorefrontConfig(manifest, surfaceName) {
   };
 }
 function StorefrontScaffold({ manifest, surface }) {
-  const config = React18.useMemo(() => manifestToStorefrontConfig(manifest, surface), [manifest, surface]);
-  const resolved = React18.useMemo(() => resolveConfig(config), [config]);
-  const inited = React18.useRef(false);
+  const config = React6.useMemo(() => manifestToStorefrontConfig(manifest, surface), [manifest, surface]);
+  const resolved = React6.useMemo(() => resolveConfig(config), [config]);
+  const inited = React6.useRef(false);
   if (!inited.current) {
     initStorefrontRuntime(config);
     inited.current = true;
@@ -4074,13 +4830,75 @@ var atelierTemplate = {
     ]
   })
 };
+var foodTemplate = {
+  id: "food",
+  inspiration: "Delivery / restaurant storefront",
+  announcement: "ENTREGA GR\xC1TIS ACIMA DE R$ 150 \xB7 PE\xC7A J\xC1",
+  theme: {
+    name: "food",
+    colors: {
+      background: "30 33% 97%",
+      foreground: "20 14% 15%",
+      primary: "14 84% 50%",
+      primaryForeground: "0 0% 100%",
+      card: "30 33% 99%",
+      cardForeground: "20 14% 15%",
+      muted: "28 20% 92%",
+      mutedForeground: "22 10% 42%",
+      border: "28 18% 85%",
+      headerBackground: "20 14% 11%",
+      headerForeground: "30 24% 96%",
+      announcementBackground: "14 84% 50%",
+      announcementForeground: "0 0% 100%"
+    },
+    font: { heading: "Poppins", body: "Inter" },
+    radius: "round",
+    header: { variant: "classic" },
+    productCard: { style: "card", imageAspect: "square" }
+  },
+  home: (storeName, images) => ({
+    sections: [
+      {
+        type: "hero",
+        variant: "banner",
+        height: "tall",
+        slides: [
+          { title: "Sabor de verdade, na sua porta", subtitle: `${storeName} \u2014 feito na hora, do jeito que voc\xEA ama.`, cta: "Ver card\xE1pio", href: "/catalog", hue: 20, image: images?.hero?.[0] }
+        ]
+      },
+      {
+        type: "benefits",
+        items: [
+          { icon: "Flame", title: "Feito na hora", text: "Preparado com capricho" },
+          { icon: "Truck", title: "Entrega r\xE1pida", text: "Frete gr\xE1tis acima de R$ 150" },
+          { icon: "CreditCard", title: "Pagamento f\xE1cil", text: "Pix, cart\xE3o e mais" }
+        ]
+      },
+      { type: "categories", style: "tiles", title: "Nosso card\xE1pio" },
+      { type: "products", title: "Mais pedidos", eyebrow: "favoritos da casa", filter: "all", limit: 8 },
+      { type: "banner", title: "Combo do dia", eyebrow: "oferta", subtitle: "Sele\xE7\xE3o especial com desconto", cta: "Aproveitar", hue: 14, image: images?.banners?.[0] },
+      { type: "products", title: "Novidades no card\xE1pio", filter: "new", limit: 4 },
+      {
+        type: "testimonials",
+        title: "O que dizem por a\xED",
+        items: [
+          { quote: "Chegou quentinho e absurdo de bom. Virei cliente!", author: "Rafael M." },
+          { quote: "Sabor de restaurante em casa, sem complica\xE7\xE3o.", author: "Beatriz L." },
+          { quote: "Entrega r\xE1pida e por\xE7\xE3o generosa. Recomendo demais.", author: "Diego S." }
+        ]
+      },
+      { type: "newsletter", title: "Receba nossas ofertas", subtitle: "Promo\xE7\xF5es e novidades do card\xE1pio, direto no seu e-mail." }
+    ]
+  })
+};
 var storefrontTemplates = {
   mare: mareTemplate,
   sertao: sertaoTemplate,
   volt: voltTemplate,
-  atelier: atelierTemplate
+  atelier: atelierTemplate,
+  food: foodTemplate
 };
 
-export { BenefitsRow, CartDrawer, CatalogPage, CategoryShowcase, CheckoutPage, FiltersPanel, HeroSection, HomePage, Link, ManifestoBlock, MyPurchasesPage, NewsletterBand, OrderConfirmationPage, OrderTrackingTimeline, Price, ProductCard, ProductDetailPage, ProductGrid, ProductOptionSelector, ProductRail, PromoBanner, QuantityInput, Reveal, StorefrontFooter, StorefrontHeader, StorefrontScaffold, StorefrontShell, StorefrontThemeStyle, TID, Testimonials, atelierTemplate, bannerPlaceholder, createStorefrontApp, defineStorefront, establishCustomerSession, formatMoney, formatProductOptionSelection, getCustomerAuthAdapter, getProductOptionGroups, initStorefrontRuntime, mareTemplate, matchPath, navigateTo, normalizeProductOptionSelection, placeStorefrontOrder, prefersReducedMotion, productCardSlotContract, productOptionSelectionKey, registerStorefrontBlocks, resolveAuthAdapter, roundCents, sectionsToBlocks, selectCount, selectDiscountTotal, selectShipping, selectSubtotal, selectTotal, sertaoTemplate, signInByEmail, signOutCustomer, signUpCustomer, storefrontSlotContracts, storefrontTemplates, themeToCss, useCartStore, useCatalogStore, useCategories, useDiscountValidator, useHashPath, useInView, useMyOrders, usePopOnChange, useProduct, useProducts, useScrolled, useSessionStore, useStorefrontConfig, voltTemplate };
+export { BenefitsRow, CartDrawer, CatalogPage, CategoryShowcase, CheckoutPage, FiltersPanel, HeroSection, HomePage, Link, ManifestoBlock, MediaCarousel, MyPurchasesPage, NewsletterBand, OrderConfirmationPage, OrderTrackingTimeline, Price, ProductCard, ProductDetailPage, ProductEnquiryForm, ProductGrid, ProductOptionSelector, ProductRail, ProductSlider, PromoBanner, QuantityInput, Reveal, SmoothImage, StorefrontFooter, StorefrontHeader, StorefrontScaffold, StorefrontSections, StorefrontShell, StorefrontThemeStyle, TID, Testimonials, atelierTemplate, bannerPlaceholder, createStorefront, createStorefrontApp, defineStorefront, defineStorefrontApp, defineStorefrontComponents, defineStorefrontConfig, defineStorefrontRoutes, defineStorefrontSections, establishCustomerSession, foodTemplate, formatMoney, formatProductOptionSelection, getCustomerAuthAdapter, getProductOptionGroups, initStorefrontRuntime, mareTemplate, matchPath, navigateTo, normalizeProductOptionSelection, placeStorefrontOrder, prefersReducedMotion, productCardComponentContract, productOptionSelectionKey, registerStorefrontBlocks, resolveAuthAdapter, roundCents, sectionsToBlocks, selectCount, selectDiscountTotal, selectShipping, selectSubtotal, selectTotal, sertaoTemplate, signInByEmail, signOutCustomer, signUpCustomer, storefrontComponentContracts, storefrontTemplates, themeToCss, useCart, useCartStore, useCatalog, useCatalogStore, useCategories, useDiscountValidator, useEnquiry, useHashPath, useInView, useMyOrders, usePopOnChange, useProduct, useProducts, useScrolled, useSessionStore, useStorefront, useStorefrontActions, useStorefrontConfig, useStorefrontConfigOptional, voltTemplate };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map