@fayz-ai/storefront 0.7.0 → 0.8.2

package/dist/index.cjs

@@ -3,13 +3,14 @@
 var runtime = require('@fayz-ai/shop/runtime');
 var mock = require('@fayz-ai/shop/mock');
 var pluginAuth = require('@fayz-ai/plugin-auth');
+var shop = require('@fayz-ai/sdk/shop');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
-var React6 = require('react');
+var React7 = require('react');
 var core = require('@fayz-ai/core');
 var LucideIcons = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
-var shop = require('@fayz-ai/shop');
+var shop$1 = require('@fayz-ai/shop');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -31,7 +32,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__default = /*#__PURE__*/_interopDefault(React6);
+var React7__default = /*#__PURE__*/_interopDefault(React7);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
 // src/createStorefrontApp.tsx
@@ -76,10 +77,23 @@ function resolveAuthAdapter(configured, fallback) {
     }
   }).adapter;
 }
+var _accessToken = null;
+var _hadAuthUser = false;
+async function syncAccessToken(adapter2) {
+  try {
+    const existing = await adapter2.getSession();
+    _accessToken = existing?.session.accessToken ?? null;
+  } catch {
+    _accessToken = null;
+  }
+}
 function initCustomerAuth(adapter2) {
   _adapter = adapter2;
+  shop.setShopAccessTokenResolver(() => _accessToken);
   adapter2.getSession().then((existing) => {
+    _accessToken = existing?.session.accessToken ?? null;
     if (!existing) return;
+    _hadAuthUser = true;
     const store = useSessionStore.getState();
     if (store.email !== existing.user.email) {
       void linkCustomer(existing.user);
@@ -87,7 +101,16 @@ function initCustomerAuth(adapter2) {
   }).catch(() => {
   });
   adapter2.onAuthStateChange((user) => {
-    if (!user) useSessionStore.getState().signOut();
+    if (!user) {
+      _accessToken = null;
+      if (_hadAuthUser) {
+        _hadAuthUser = false;
+        useSessionStore.getState().signOut();
+      }
+      return;
+    }
+    _hadAuthUser = true;
+    void syncAccessToken(adapter2);
   });
 }
 function getCustomerAuthAdapter() {
@@ -123,6 +146,8 @@ async function establishCustomerSession(email, opts) {
   if (opts?.password) {
     const adapter2 = getCustomerAuthAdapter();
     const session = await adapter2.signIn(normalized, opts.password);
+    _accessToken = session.accessToken ?? null;
+    _hadAuthUser = true;
     return linkCustomer(session.user.email ? session.user : { ...session.user, email: normalized }, opts.name);
   }
   return linkCustomer({ email: normalized }, opts?.name);
@@ -134,12 +159,16 @@ async function signUpCustomer(email, password, name) {
   const adapter2 = getCustomerAuthAdapter();
   const normalized = email.trim().toLowerCase();
   const session = await adapter2.signUp(normalized, password, name);
+  _accessToken = session.accessToken ?? null;
+  _hadAuthUser = true;
   return linkCustomer(session.user.email ? session.user : { ...session.user, email: normalized }, name);
 }
 async function signOutCustomer() {
   try {
     await getCustomerAuthAdapter().signOut();
   } finally {
+    _accessToken = null;
+    _hadAuthUser = false;
     useSessionStore.getState().signOut();
   }
 }
@@ -152,7 +181,10 @@ function resolveConfig(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" },
+    payments: {
+      mode: config.payments?.mode ?? "mock",
+      methods: config.payments?.methods?.length ? config.payments.methods : ["pix", "credit_card", "cash"]
+    },
     commerceMode,
     enquiry: {
       label: config.enquiry?.label ?? "Contact me",
@@ -184,15 +216,15 @@ function resolveConfig(config) {
     ] : [{ label: "Loja", to: "/" }])
   };
 }
-var StorefrontConfigContext = React6.createContext(null);
+var StorefrontConfigContext = React7.createContext(null);
 var StorefrontConfigProvider = StorefrontConfigContext.Provider;
 function useStorefrontConfig() {
-  const ctx = React6.useContext(StorefrontConfigContext);
+  const ctx = React7.useContext(StorefrontConfigContext);
   if (!ctx) throw new Error("useStorefrontConfig must be used inside createStorefrontApp");
   return ctx;
 }
 function useStorefrontConfigOptional() {
-  return React6.useContext(StorefrontConfigContext);
+  return React7.useContext(StorefrontConfigContext);
 }
 function getStorefrontComponents(config) {
   return config.components ?? {};
@@ -202,8 +234,8 @@ function navigateTo(to) {
   adapter.navigate(to);
 }
 function useHashPath() {
-  const [path, setPath] = React6.useState(() => adapter.getCurrentPath() || "/");
-  React6.useEffect(() => {
+  const [path, setPath] = React7.useState(() => adapter.getCurrentPath() || "/");
+  React7.useEffect(() => {
     const unsub = adapter.onPathChange((p) => {
       setPath(p || "/");
       window.scrollTo(0, 0);
@@ -227,93 +259,7 @@ function matchPath(pattern, path) {
   return params;
 }
 function Link({ to, children, ...rest }) {
-  return React6__default.default.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);
-  React6.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__default.default.createElement("style", { "data-sf-theme": theme.name }, themeToCss(theme));
+  return React7__default.default.createElement("a", { href: `#${to}`, ...rest }, children);
 }
 
 // src/format.ts
@@ -323,6 +269,87 @@ function formatMoney(value, currency = "BRL", locale = "pt-BR") {
 function roundCents(value) {
   return Math.round(value * 100) / 100;
 }
+var EMPTY = {
+  postalCode: "",
+  address: null,
+  options: [],
+  selectedZoneId: null,
+  status: "idle",
+  error: null
+};
+var useDeliveryStore = zustand.create()(
+  middleware.persist(
+    (set, get) => ({
+      ...EMPTY,
+      async resolve(postalCode, subtotal) {
+        const code = core.normalizePostalCode(postalCode);
+        if (code.length !== 8) {
+          set({ ...EMPTY, postalCode, status: "error", error: "Digite os 8 d\xEDgitos do CEP." });
+          return;
+        }
+        set({ postalCode: code, status: "loading", error: null });
+        let options = [];
+        try {
+          options = await runtime.getShopProvider().quoteShipping?.(code, subtotal) ?? [];
+        } catch {
+          set({
+            ...EMPTY,
+            postalCode: code,
+            status: "error",
+            error: "N\xE3o foi poss\xEDvel calcular o frete agora. Tente de novo."
+          });
+          return;
+        }
+        let address = null;
+        let notFound = false;
+        try {
+          address = await core.lookupPostalCode(code);
+          notFound = address === null;
+        } catch {
+          address = null;
+        }
+        set({
+          postalCode: code,
+          address,
+          options,
+          selectedZoneId: options[0]?.zoneId ?? null,
+          // A store with no zones configured quotes nothing, and that must NOT
+          // read as "we don't deliver here" — it falls back to the store-wide
+          // flat rate, which the cart already knows how to show.
+          status: options.length > 0 ? "served" : "unserved",
+          // Reported alongside the price, not instead of it: the CEP may be
+          // mistyped even though its range is covered.
+          error: notFound ? "CEP n\xE3o encontrado. Confira os n\xFAmeros." : null
+        });
+      },
+      selectZone(zoneId) {
+        if (get().options.some((option) => option.zoneId === zoneId)) set({ selectedZoneId: zoneId });
+      },
+      clear() {
+        set({ ...EMPTY });
+      }
+    }),
+    {
+      name: "fayz.storefront.delivery.v1",
+      // Deliberately NOT persisting `options`: a rehydrated
+      // price would be shown as current without anything having quoted it. The
+      // address survives, the money is asked for again.
+      partialize: (state) => ({ postalCode: state.postalCode, address: state.address }),
+      onRehydrateStorage: () => (state) => {
+        if (state?.address) state.status = "idle";
+      }
+    }
+  )
+);
+function resolveOptionRate(option, subtotal) {
+  if (option.freeAbove != null && subtotal >= option.freeAbove) return 0;
+  return option.baseRate;
+}
+var selectQuotedShipping = (state, subtotal) => {
+  if (state.status !== "served") return null;
+  const option = state.options.find((o) => o.zoneId === state.selectedZoneId) ?? state.options[0];
+  return option ? resolveOptionRate(option, subtotal) : null;
+};
 
 // src/product-options.ts
 function cleanValues(value) {
@@ -367,7 +394,7 @@ function productOptionSelectionKey(selection) {
 // src/stores/cart.store.ts
 var useCartStore = zustand.create()(
   middleware.persist(
-    (set) => ({
+    (set, get) => ({
       lines: [],
       discountCode: null,
       discountPercent: 0,
@@ -419,7 +446,16 @@ var useCartStore = zustand.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",
@@ -437,10 +473,108 @@ var selectDiscountTotal = (s) => roundCents(selectSubtotal(s) * (s.discountPerce
 var selectShipping = (s, cfg) => {
   if (s.lines.length === 0) return 0;
   const subtotal = selectSubtotal(s);
+  const quoted = selectQuotedShipping(useDeliveryStore.getState(), subtotal);
+  if (quoted != null) return quoted;
   if (cfg.shipping.freeAbove != null && subtotal >= cfg.shipping.freeAbove) return 0;
   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);
+  React7.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 React7__default.default.createElement("style", { "data-sf-theme": theme.name }, themeToCss(theme));
+}
 var initial = {
   search: "",
   categoryId: null,
@@ -460,9 +594,9 @@ var useCatalogStore = zustand.create()((set) => ({
   reset: () => set(initial)
 }));
 function useCategories() {
-  const [categories, setCategories] = React6.useState([]);
-  const [loading, setLoading] = React6.useState(true);
-  React6.useEffect(() => {
+  const [categories, setCategories] = React7.useState([]);
+  const [loading, setLoading] = React7.useState(true);
+  React7.useEffect(() => {
     let cancelled = false;
     runtime.getShopProvider().listCategories().then((data) => {
       if (!cancelled) setCategories(data);
@@ -481,9 +615,9 @@ function prefersReducedMotion() {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 function useInView(margin = "0px 0px -8% 0px") {
-  const ref = React6.useRef(null);
-  const [inView, setInView] = React6.useState(() => prefersReducedMotion());
-  React6.useEffect(() => {
+  const ref = React7.useRef(null);
+  const [inView, setInView] = React7.useState(() => prefersReducedMotion());
+  React7.useEffect(() => {
     if (inView) return;
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") {
@@ -518,8 +652,8 @@ function Reveal({ delay = 0, children, className, style, ...rest }) {
   );
 }
 function useScrolled(threshold = 8) {
-  const [scrolled, setScrolled] = React6.useState(false);
-  React6.useEffect(() => {
+  const [scrolled, setScrolled] = React7.useState(false);
+  React7.useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > threshold);
     onScroll();
     window.addEventListener("scroll", onScroll, { passive: true });
@@ -528,9 +662,9 @@ function useScrolled(threshold = 8) {
   return scrolled;
 }
 function usePopOnChange(value) {
-  const [pop, setPop] = React6.useState(false);
-  const prev = React6.useRef(value);
-  React6.useEffect(() => {
+  const [pop, setPop] = React7.useState(false);
+  const prev = React7.useRef(value);
+  React7.useEffect(() => {
     if (prev.current !== value && value > 0) {
       setPop(true);
       const t = setTimeout(() => setPop(false), 400);
@@ -539,7 +673,7 @@ function usePopOnChange(value) {
     prev.current = value;
     return void 0;
   }, [value]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     prev.current = value;
   });
   return pop;
@@ -549,6 +683,7 @@ function usePopOnChange(value) {
 var TID = {
   // header
   headerSearch: "header-search",
+  headerSearchToggle: "header-search-toggle",
   cartButton: "cart-button",
   cartCount: "cart-count",
   accountLink: "account-link",
@@ -604,6 +739,9 @@ var TID = {
   pdpAddToCart: "pdp-add-to-cart",
   pdpRoot: "pdp-root",
   pdpGallery: "pdp-gallery",
+  pdpGalleryImage: "pdp-gallery-image",
+  pdpGalleryThumbs: "pdp-gallery-thumbs",
+  pdpGalleryThumb: "pdp-gallery-thumb",
   pdpActions: "pdp-actions",
   pdpEnquiryButton: "pdp-enquiry-button",
   enquiryForm: "enquiry-form",
@@ -632,6 +770,15 @@ var TID = {
   cartTotal: "cart-total",
   goCheckout: "go-checkout",
   cartEmpty: "cart-empty",
+  // delivery estimate (product page + cart)
+  deliveryEstimator: "delivery-estimator",
+  deliveryCepInput: "delivery-cep-input",
+  deliveryCepSubmit: "delivery-cep-submit",
+  deliveryOption: "delivery-option",
+  deliveryUnserved: "delivery-unserved",
+  deliveryError: "delivery-error",
+  deliveryAddress: "delivery-address",
+  deliveryClear: "delivery-clear",
   // checkout
   checkoutEmail: "checkout-email",
   checkoutName: "checkout-name",
@@ -678,7 +825,7 @@ var headerDivider = {
 var ANNOUNCEMENT_KEY = "fayz.storefront.announcement.dismissed";
 function AnnouncementBar() {
   const config = useStorefrontConfig();
-  const [dismissed, setDismissed] = React6.useState(() => {
+  const [dismissed, setDismissed] = React7.useState(() => {
     try {
       return localStorage.getItem(ANNOUNCEMENT_KEY) === config.announcement;
     } catch {
@@ -737,12 +884,26 @@ function UtilityBar() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-4", children: social?.map((s) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: `relative ${className ?? ""}`, children: [
+  const [open, setOpen] = React7.useState(false);
+  if (iconOnly && !open) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "h-5 w-5" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${iconOnly ? "w-full max-w-xs" : className ?? ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-60" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -751,10 +912,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)",
@@ -769,7 +937,7 @@ function HeaderActions() {
   const count = useCartStore(selectCount);
   const openDrawer = useCartStore((s) => s.openDrawer);
   const session = useSessionStore();
-  const [accountOpen, setAccountOpen] = React6.useState(false);
+  const [accountOpen, setAccountOpen] = React7.useState(false);
   const pop = usePopOnChange(count);
   const firstName = session.name?.split(/\s+/)[0];
   const initial2 = (firstName ?? session.email ?? "C").slice(0, 1).toUpperCase();
@@ -907,6 +1075,7 @@ function StorefrontHeader() {
   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__ */ jsxRuntime.jsx(Link, { to: "/", className: "sf-heading shrink-0 text-xl font-bold tracking-tight", children: config.logo ?? config.name });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
@@ -920,7 +1089,7 @@ function StorefrontHeader() {
           // Rio/Flex pattern: centered logo row, nav row below
           /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6", children: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "hidden w-full max-w-xs sm:block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+              showSearch ? /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-full max-w-xs sm:block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: logo }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {}) })
             ] }),
@@ -930,7 +1099,7 @@ function StorefrontHeader() {
           // Brasília pattern: prominent search left, logo center, actions right; nav row below
           /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.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: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "hidden w-full max-w-sm sm:block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+              showSearch ? /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-full max-w-sm sm:block" }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: logo }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {}) })
             ] }),
@@ -942,17 +1111,19 @@ function StorefrontHeader() {
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-5", children: /* @__PURE__ */ jsxRuntime.jsx(NavLinks, { className: "hidden sm:flex" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: logo }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3", children: [
-              showSearch && /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "hidden w-44 lg:block" }),
+              showSearch && /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { iconOnly: iconSearch, className: "hidden w-44 lg:block" }),
               /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {})
             ] })
           ] })
         ) : (
-          // classic: logo left, search center-right, actions right (original layout)
+          // classic: logo left, nav, then a right-aligned search + actions cluster
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6", children: [
             logo,
             /* @__PURE__ */ jsxRuntime.jsx(NavLinks, { className: "hidden md:flex" }),
-            showSearch && /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { className: "ml-auto hidden w-full max-w-sm sm:block" }),
-            /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {})
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2 sm:gap-3", children: [
+              showSearch && /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { iconOnly: iconSearch, className: iconSearch ? "" : "hidden w-full max-w-sm sm:block" }),
+              /* @__PURE__ */ jsxRuntime.jsx(HeaderActions, {})
+            ] })
           ] })
         )
       ]
@@ -1045,12 +1216,12 @@ var REASON_MESSAGE = {
 };
 function useDiscountValidator() {
   const config = useStorefrontConfig();
-  return React6.useCallback(async (code) => {
+  return React7.useCallback(async (code) => {
     const normalized = code.trim().toUpperCase();
     if (!normalized) return { valid: false, percent: 0, message: "Informe um cupom." };
     const configDiscount = config.discounts?.find((d) => d.code.trim().toUpperCase() === normalized);
     if (configDiscount) return { valid: true, percent: configDiscount.percent };
-    const validation = await shop.validateDiscount({ code: normalized });
+    const validation = await shop$1.validateDiscount({ code: normalized });
     if (!validation.valid) {
       return { valid: false, percent: 0, message: REASON_MESSAGE[validation.reason ?? "not_found"] ?? "Cupom inv\xE1lido ou expirado." };
     }
@@ -1126,6 +1297,113 @@ function QuantityInput({ value, onChange, min = 1, max, testId, incTestId, decTe
     )
   ] });
 }
+function DeliveryEstimator({ compact = false }) {
+  const config = useStorefrontConfig();
+  const cart = useCartStore();
+  const delivery = useDeliveryStore();
+  const [draft, setDraft] = React7.useState(() => core.formatPostalCode(delivery.postalCode));
+  const subtotal = selectSubtotal(cart);
+  const money = (value) => formatMoney(value, config.currency, config.locale);
+  const loading = delivery.status === "loading";
+  async function submit(event) {
+    event.preventDefault();
+    await delivery.resolve(draft, subtotal);
+  }
+  function eta(option) {
+    const { etaMinDays: min, etaMaxDays: max } = option;
+    if (min == null && max == null) return null;
+    if (min === 0 && (max === 0 || max === 1)) return "hoje ou amanh\xE3";
+    if (min != null && max != null && min !== max) return `${min} a ${max} dias \xFAteis`;
+    return `${max ?? min} dia(s) \xFAtil(eis)`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "data-testid": TID.deliveryEstimator,
+      className: compact ? "rounded-lg border p-3" : "mt-6 rounded-lg border p-4",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Truck, { className: "h-4 w-4 text-primary" }),
+          "Calcular entrega"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: submit, className: "mt-3 flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              "data-testid": TID.deliveryCepInput,
+              "aria-label": "CEP",
+              inputMode: "numeric",
+              autoComplete: "postal-code",
+              placeholder: "00000-000",
+              value: draft,
+              onChange: (event) => setDraft(core.formatPostalCode(event.target.value)),
+              className: "min-w-0 flex-1 rounded-lg border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              "data-testid": TID.deliveryCepSubmit,
+              disabled: loading,
+              className: "shrink-0 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:opacity-90 disabled:opacity-50",
+              children: loading ? "..." : "Calcular"
+            }
+          )
+        ] }),
+        delivery.error && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": TID.deliveryError, className: "mt-3 text-sm text-destructive", children: delivery.error }),
+        delivery.address && /* @__PURE__ */ jsxRuntime.jsxs("p", { "data-testid": TID.deliveryAddress, className: "mt-3 flex items-start gap-1.5 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MapPin, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            [delivery.address.street, delivery.address.district].filter(Boolean).join(", "),
+            delivery.address.street || delivery.address.district ? " \u2014 " : "",
+            delivery.address.city,
+            "/",
+            delivery.address.state
+          ] })
+        ] }),
+        delivery.status === "served" && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 space-y-2", children: delivery.options.map((option) => {
+          const selected = delivery.selectedZoneId === option.zoneId;
+          const label = eta(option);
+          const rate = resolveOptionRate(option, subtotal);
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "data-testid": TID.deliveryOption,
+              "data-zone": option.zoneId,
+              "data-rate": rate.toFixed(2),
+              "aria-pressed": selected,
+              onClick: () => delivery.selectZone(option.zoneId),
+              className: `flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left text-sm transition ${selected ? "border-primary bg-primary/5" : "border-border hover:bg-muted/40"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate font-medium", children: option.carrier ? `${option.carrier} \xB7 ${option.name}` : option.name }),
+                  label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground", children: label })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-semibold", children: rate === 0 ? "Gr\xE1tis" : money(rate) })
+              ]
+            }
+          ) }, option.zoneId);
+        }) }),
+        delivery.status === "unserved" && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": TID.deliveryUnserved, className: "mt-3 text-sm text-destructive", children: "Ainda n\xE3o entregamos nesse CEP." }),
+        delivery.postalCode && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": TID.deliveryClear,
+            onClick: () => {
+              delivery.clear();
+              setDraft("");
+            },
+            className: "mt-3 text-xs text-muted-foreground underline-offset-2 hover:underline",
+            children: "Trocar CEP"
+          }
+        )
+      ]
+    }
+  );
+}
 function SmoothImage({
   imageLoading,
   loading = "lazy",
@@ -1143,9 +1421,9 @@ function SmoothImage({
   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__default.default.useRef(null);
-  const [loaded, setLoaded] = React6__default.default.useState(mode === "none");
-  React6__default.default.useEffect(() => {
+  const ref = React7__default.default.useRef(null);
+  const [loaded, setLoaded] = React7__default.default.useState(mode === "none");
+  React7__default.default.useEffect(() => {
     if (mode === "none") {
       setLoaded(true);
       return;
@@ -1177,10 +1455,10 @@ function CartDrawer() {
   const config = useStorefrontConfig();
   const cart = useCartStore();
   const validate = useDiscountValidator();
-  const [code, setCode] = React6.useState("");
-  const [discountError, setDiscountError] = React6.useState(null);
-  const [applying, setApplying] = React6.useState(false);
-  React6.useEffect(() => {
+  const [code, setCode] = React7.useState("");
+  const [discountError, setDiscountError] = React7.useState(null);
+  const [applying, setApplying] = React7.useState(false);
+  React7.useEffect(() => {
     if (!cart.isOpen) return;
     const onKey = (e) => {
       if (e.key === "Escape") cart.closeDrawer();
@@ -1188,6 +1466,7 @@ function CartDrawer() {
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [cart.isOpen, cart.closeDrawer]);
+  const delivery = useDeliveryStore();
   const subtotal = selectSubtotal(cart);
   const discountTotal = selectDiscountTotal(cart);
   const shipping = selectShipping(cart, config);
@@ -1344,6 +1623,7 @@ function CartDrawer() {
                 ] }),
                 discountError && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": TID.discountError, className: "text-xs text-destructive", children: discountError })
               ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(DeliveryEstimator, { compact: true }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "space-y-1.5 text-sm", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: "Subtotal" }),
@@ -1373,7 +1653,13 @@ function CartDrawer() {
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: "Frete" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "text-muted-foreground", children: [
+                    "Frete",
+                    delivery.status === "served" && delivery.postalCode && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 text-xs", children: [
+                      "\xB7 ",
+                      core.formatPostalCode(delivery.postalCode)
+                    ] })
+                  ] }),
                   /* @__PURE__ */ jsxRuntime.jsx("dd", { "data-testid": TID.cartShipping, "data-price": shipping.toFixed(2), children: shipping === 0 ? "Gr\xE1tis" : money(shipping) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between border-t pt-2 text-base font-semibold", children: [
@@ -1403,12 +1689,12 @@ function CartDrawer() {
   ] });
 }
 function useProducts(opts) {
-  const [products, setProducts] = React6.useState([]);
-  const [loading, setLoading] = React6.useState(true);
-  const [error, setError] = React6.useState(null);
-  const [nonce, setNonce] = React6.useState(0);
+  const [products, setProducts] = React7.useState([]);
+  const [loading, setLoading] = React7.useState(true);
+  const [error, setError] = React7.useState(null);
+  const [nonce, setNonce] = React7.useState(0);
   const key = JSON.stringify(opts);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     runtime.getShopProvider().listProducts(JSON.parse(key)).then((data) => {
@@ -1726,10 +2012,10 @@ function FiltersPanel() {
 }
 function useStorefrontHead(input) {
   const { title, description } = input;
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (title) document.title = title;
   }, [title]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!description) return;
     let tag = document.head.querySelector('meta[name="description"]');
     if (!tag) {
@@ -1748,9 +2034,9 @@ var SORT_MAP = {
 };
 var SORTS = ["newest", "price-asc", "price-desc", "name"];
 function useCatalogUrlSync() {
-  const hydrated = React6.useRef(false);
+  const hydrated = React7.useRef(false);
   const catalog = useCatalogStore();
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (hydrated.current) return;
     hydrated.current = true;
     const q = window.location.hash.split("?")[1];
@@ -1765,7 +2051,7 @@ function useCatalogUrlSync() {
     if (p.has("min")) s.setPriceMin(Number(p.get("min")) || null);
     if (p.has("max")) s.setPriceMax(Number(p.get("max")) || null);
   }, []);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const p = new URLSearchParams();
     if (catalog.search) p.set("search", catalog.search);
     if (catalog.categoryId) p.set("category", catalog.categoryId);
@@ -1793,7 +2079,7 @@ function CatalogPage() {
     ...SORT_MAP[catalog.sort]
   };
   const { products, loading, error, reload } = useProducts(providerOpts);
-  const filtered = React6.useMemo(
+  const filtered = React7.useMemo(
     () => products.filter((p) => {
       if (catalog.priceMin != null && p.price < catalog.priceMin) return false;
       if (catalog.priceMax != null && p.price > catalog.priceMax) return false;
@@ -1858,17 +2144,17 @@ function HeroSection({
   slides,
   height = "tall"
 }) {
-  const [index, setIndex] = React6.useState(0);
-  const [loadedSlides, setLoadedSlides] = React6.useState({});
+  const [index, setIndex] = React7.useState(0);
+  const [loadedSlides, setLoadedSlides] = React7.useState({});
   const config = useStorefrontConfig();
-  const interacted = React6.useRef(false);
+  const interacted = React7.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;
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (variant !== "slider" || slides.length < 2 || prefersReducedMotion()) return;
     const timer = setInterval(() => {
       if (!interacted.current) setIndex((i) => (i + 1) % slides.length);
@@ -2029,7 +2315,7 @@ function ProductRail({
   const { products, loading } = useProducts(
     filter === "new" ? { status: "active", orderBy: "created_at", order: "desc" } : { status: "active" }
   );
-  const visible = React6.useMemo(() => {
+  const visible = React7.useMemo(() => {
     let list = products;
     if (filter === "sale") list = list.filter((p) => p.compareAtPrice != null && p.compareAtPrice > p.price);
     return list.slice(0, limit);
@@ -2078,16 +2364,16 @@ function MediaCarousel({
   overlay = "dark",
   className = ""
 }) {
-  const [index, setIndex] = React6.useState(0);
-  const [loadedItems, setLoadedItems] = React6.useState({});
+  const [index, setIndex] = React7.useState(0);
+  const [loadedItems, setLoadedItems] = React7.useState({});
   const config = useStorefrontConfig();
-  const interacted = React6.useRef(false);
+  const interacted = React7.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;
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (items.length < 2 || autoplayMs <= 0 || prefersReducedMotion()) return;
     const timer = setInterval(() => {
       if (!interacted.current) setIndex((i) => (i + 1) % items.length);
@@ -2180,13 +2466,13 @@ function ProductSlider({
 }) {
   const config = useStorefrontConfig();
   const actions = useStorefrontActions();
-  const viewportRef = React6.useRef(null);
+  const viewportRef = React7.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 = React6.useMemo(() => {
+  const visible = React7.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);
@@ -2334,8 +2620,8 @@ function Testimonials({ title, items }) {
   ] }) });
 }
 function NewsletterBand({ title, subtitle }) {
-  const [email, setEmail] = React6.useState("");
-  const [done, setDone] = React6.useState(false);
+  const [email, setEmail] = React7.useState("");
+  const [done, setDone] = React7.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx("section", { "data-testid": TID.newsletter, className: "bg-primary py-16 text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsxs(Reveal, { className: "mx-auto max-w-xl px-4 text-center sm:px-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "sf-heading text-3xl font-bold", children: title ?? "Receba nossas novidades" }),
     subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 opacity-90", children: subtitle }),
@@ -2407,10 +2693,10 @@ function HomePage({ sections }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StorefrontSections, { sections });
 }
 function useProduct(slug2) {
-  const [product, setProduct] = React6.useState(null);
-  const [loading, setLoading] = React6.useState(true);
-  const [error, setError] = React6.useState(null);
-  React6.useEffect(() => {
+  const [product, setProduct] = React7.useState(null);
+  const [loading, setLoading] = React7.useState(true);
+  const [error, setError] = React7.useState(null);
+  React7.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     runtime.getShopProvider().listProducts({ slug: slug2, status: "active", limit: 1 }).then((data) => {
@@ -2548,13 +2834,13 @@ function buildWhatsAppHref(url, product) {
 }
 function ProductEnquiryForm({ product, onSuccess }) {
   const config = useStorefrontConfig();
-  const [customerName, setCustomerName] = React6.useState("");
-  const [customerEmail, setCustomerEmail] = React6.useState("");
-  const [customerPhone, setCustomerPhone] = React6.useState("");
-  const [subject, setSubject] = React6.useState(defaultSubject(config.enquiry.subjectPrefix, product));
-  const [message, setMessage] = React6.useState(`I would like more information about ${product.name}.`);
-  const [status, setStatus] = React6.useState("idle");
-  const [error, setError] = React6.useState(null);
+  const [customerName, setCustomerName] = React7.useState("");
+  const [customerEmail, setCustomerEmail] = React7.useState("");
+  const [customerPhone, setCustomerPhone] = React7.useState("");
+  const [subject, setSubject] = React7.useState(defaultSubject(config.enquiry.subjectPrefix, product));
+  const [message, setMessage] = React7.useState(`I would like more information about ${product.name}.`);
+  const [status, setStatus] = React7.useState("idle");
+  const [error, setError] = React7.useState(null);
   const submit = async (event) => {
     event.preventDefault();
     setStatus("submitting");
@@ -2716,19 +3002,141 @@ function ProductEnquiryForm({ product, onSuccess }) {
     }
   );
 }
+function ProductGallery({ product, images, primaryImage }) {
+  const ordered = orderImages(images, primaryImage);
+  const [index, setIndex] = React7.useState(0);
+  const [zoom, setZoom] = React7.useState(null);
+  const frameRef = React7.useRef(null);
+  const canHover = useCanHover();
+  React7.useEffect(() => {
+    setIndex(0);
+    setZoom(null);
+  }, [product.id]);
+  const current = ordered[Math.min(index, ordered.length - 1)];
+  function trackPointer(event) {
+    if (!canHover) return;
+    const frame = frameRef.current;
+    if (!frame) return;
+    const rect = frame.getBoundingClientRect();
+    setZoom({
+      x: (event.clientX - rect.left) / rect.width * 100,
+      y: (event.clientY - rect.top) / rect.height * 100
+    });
+  }
+  function step(delta) {
+    if (ordered.length < 2) return;
+    setIndex((current2) => (current2 + delta + ordered.length) % ordered.length);
+    setZoom(null);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 self-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...storefrontComponentContracts.productDetail.gallery,
+        ref: frameRef,
+        className: "group relative aspect-square w-full overflow-hidden border bg-muted",
+        style: { borderRadius: "var(--sf-radius-card)" },
+        onMouseMove: trackPointer,
+        onMouseLeave: () => setZoom(null),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowRight") step(1);
+          if (event.key === "ArrowLeft") step(-1);
+        },
+        tabIndex: ordered.length > 1 ? 0 : -1,
+        role: ordered.length > 1 ? "group" : void 0,
+        "aria-label": ordered.length > 1 ? `Imagens de ${product.name}` : void 0,
+        children: [
+          current && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "h-full w-full transition-transform duration-150 ease-out",
+              style: zoom ? { transform: "scale(2)", transformOrigin: `${zoom.x}% ${zoom.y}%` } : { transform: "scale(1)" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SmoothImage,
+                {
+                  src: current.url,
+                  alt: current.altText ?? product.name,
+                  "data-testid": TID.pdpGalleryImage,
+                  className: "h-full w-full object-cover"
+                },
+                current.id
+              )
+            }
+          ),
+          ordered.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GalleryArrow, { side: "left", onClick: () => step(-1) }),
+            /* @__PURE__ */ jsxRuntime.jsx(GalleryArrow, { side: "right", onClick: () => step(1) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pointer-events-none absolute bottom-3 right-3 rounded-full bg-black/60 px-2 py-0.5 text-[11px] font-medium text-white", children: [
+              index + 1,
+              "/",
+              ordered.length
+            ] })
+          ] })
+        ]
+      }
+    ),
+    ordered.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("ul", { "data-testid": TID.pdpGalleryThumbs, className: "flex gap-2 overflow-x-auto pb-1", children: ordered.map((image, position) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "data-testid": TID.pdpGalleryThumb,
+        "data-index": position,
+        "aria-label": `Imagem ${position + 1} de ${ordered.length}`,
+        "aria-current": position === index,
+        onClick: () => {
+          setIndex(position);
+          setZoom(null);
+        },
+        className: `h-16 w-16 shrink-0 overflow-hidden rounded-lg border transition ${position === index ? "border-primary ring-2 ring-primary/20" : "border-border opacity-70 hover:opacity-100"}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.url, alt: "", className: "h-full w-full object-cover", loading: "lazy" })
+      }
+    ) }, image.id)) })
+  ] });
+}
+function orderImages(images, primary) {
+  const all = images.length > 0 ? images : primary ? [primary] : [];
+  return [...all].sort((a, b) => {
+    if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+    return (a.sortOrder ?? 0) - (b.sortOrder ?? 0);
+  });
+}
+function useCanHover() {
+  const [canHover, setCanHover] = React7.useState(false);
+  React7.useEffect(() => {
+    const query = window.matchMedia?.("(hover: hover) and (pointer: fine)");
+    if (!query) return;
+    setCanHover(query.matches);
+    const onChange = (event) => setCanHover(event.matches);
+    query.addEventListener?.("change", onChange);
+    return () => query.removeEventListener?.("change", onChange);
+  }, []);
+  return canHover;
+}
+function GalleryArrow({ side, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": side === "left" ? "Imagem anterior" : "Pr\xF3xima imagem",
+      className: `absolute top-1/2 z-10 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-background/80 opacity-0 shadow-md backdrop-blur transition hover:bg-background focus:opacity-100 group-hover:opacity-100 ${side === "left" ? "left-3" : "right-3"}`,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-lg leading-none", children: side === "left" ? "\u2039" : "\u203A" })
+    }
+  );
+}
 function ProductDetailPage({ slug: slug2 }) {
   const config = useStorefrontConfig();
   const actions = useStorefrontActions();
   const { product, loading } = useProduct(slug2);
   const addItem = useCartStore((s) => s.addItem);
-  const [qty, setQty] = React6.useState(1);
-  const [selectedOptions, setSelectedOptions] = React6.useState({});
+  const [qty, setQty] = React7.useState(1);
+  const [selectedOptions, setSelectedOptions] = React7.useState({});
   const optionGroups = product ? getProductOptionGroups(product) : [];
   useStorefrontHead({
     title: product ? `${product.name} \u2014 ${config.name}` : config.name,
     description: product?.description
   });
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (!product) return;
     const defaults = Object.fromEntries(
       getProductOptionGroups(product).map((group) => [group.label, group.values[0] ?? ""])
@@ -2756,6 +3164,7 @@ function ProductDetailPage({ slug: slug2 }) {
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
   const components = getStorefrontComponents(config);
   const ProductDetailComponent = components.ProductDetail;
+  const GalleryComponent = components.ProductGallery ?? ProductGallery;
   const addToCart = () => addItem(product, qty, selectedOptions);
   const openEnquiry = () => {
     document.getElementById("storefront-product-enquiry")?.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -2789,19 +3198,13 @@ function ProductDetailPage({ slug: slug2 }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid animate-fade-up gap-10 md:grid-cols-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        GalleryComponent,
         {
-          ...storefrontComponentContracts.productDetail.gallery,
-          className: "group overflow-hidden border bg-muted",
-          style: { borderRadius: "var(--sf-radius-card)" },
-          children: image && /* @__PURE__ */ jsxRuntime.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"
-            }
-          )
+          product,
+          images: product.images,
+          primaryImage: image,
+          config,
+          commerceMode: config.commerceMode
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col py-2 lg:sticky lg:top-24 lg:self-start", children: [
@@ -2899,6 +3302,7 @@ function ProductDetailPage({ slug: slug2 }) {
             children: "Voltar ao cat\xE1logo"
           }
         ) }),
+        config.commerceMode === "checkout" && /* @__PURE__ */ jsxRuntime.jsx(DeliveryEstimator, {}),
         config.commerceMode === "checkout" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 grid grid-cols-3 gap-3 border-t pt-6 text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Truck, { className: "h-5 w-5 text-primary" }),
@@ -2924,9 +3328,10 @@ function ProductDetailPage({ slug: slug2 }) {
     /* @__PURE__ */ jsxRuntime.jsx(RelatedProducts, { product })
   ] });
 }
-function formatDeliveryNotes(address) {
+function formatDeliveryNotes(address, shippingAddress) {
+  if (address?.notes?.trim()) return address.notes.trim();
+  if (shippingAddress) return void 0;
   if (!address) return void 0;
-  if (address.notes?.trim()) return address.notes.trim();
   const parts = [address.street, address.city, address.zip].map((part) => part?.trim()).filter(Boolean);
   return parts.length > 0 ? `Entrega: ${parts.join(", ")}` : void 0;
 }
@@ -2936,6 +3341,8 @@ async function placeStorefrontOrder({
   session,
   customer,
   address,
+  shippingAddress,
+  paymentMethod,
   markPaid = false
 }) {
   const email = customer.email.trim().toLowerCase();
@@ -2950,9 +3357,14 @@ async function placeStorefrontOrder({
     customerId: customerId ?? void 0,
     customer: { name, email },
     currency: config.currency,
-    notes: formatDeliveryNotes(address),
+    notes: formatDeliveryNotes(address, shippingAddress),
     discountCode: cart.discountCode ?? void 0,
     shippingTotal: selectShipping(cart, config),
+    // Structured address + method are what populate public.addresses and the
+    // transactions ledger. `notes` stays for backwards compatibility with
+    // checkouts that have not been updated yet.
+    shippingAddress,
+    paymentMethod,
     items: cart.lines.map((line) => ({
       productId: line.productId,
       quantity: line.quantity,
@@ -2960,16 +3372,17 @@ 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 ?? "" };
 }
 function SignInModal({ defaultEmail = "", onClose, onSignedIn }) {
-  const [email, setEmail] = React6.useState(defaultEmail);
-  const [password, setPassword] = React6.useState("");
-  const [busy, setBusy] = React6.useState(false);
-  const [error, setError] = React6.useState(null);
-  React6.useEffect(() => {
+  const [email, setEmail] = React7.useState(defaultEmail);
+  const [password, setPassword] = React7.useState("");
+  const [busy, setBusy] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
+  React7.useEffect(() => {
     const onKey = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -3074,19 +3487,18 @@ function SignInModal({ defaultEmail = "", onClose, onSignedIn }) {
     }
   );
 }
-var SAVED_ADDRESSES = [
-  { id: "home", label: "Casa", street: "Rua das Flores, 123", city: "S\xE3o Paulo", zip: "01310-100" }
-];
-var SAVED_PAYMENT_METHODS = [
-  { id: "visa", label: "Visa final 4242", card: "4242 4242 4242 4242", expiry: "12/29", cvc: "123" }
-];
+var PAYMENT_LABELS = {
+  pix: { label: "Pix", hint: "Voc\xEA recebe a chave para pagar ap\xF3s confirmar o pedido" },
+  credit_card: { label: "Cart\xE3o de cr\xE9dito", hint: "Maquininha na entrega" },
+  debit_card: { label: "Cart\xE3o de d\xE9bito", hint: "Maquininha na entrega" },
+  boleto: { label: "Boleto", hint: "Enviado por e-mail ap\xF3s a confirma\xE7\xE3o" },
+  cash: { label: "Dinheiro", hint: "Pagamento na entrega" },
+  other: { label: "Combinar com a loja", hint: "A loja entra em contato para acertar o pagamento" }
+};
 var PROCESSING_STEPS = [
   { icon: LucideIcons.Lock, label: "Validando seus dados..." },
-  { icon: LucideIcons.CreditCard, label: "Processando pagamento..." },
-  { icon: LucideIcons.PackageCheck, label: "Confirmando seu pedido..." }
+  { icon: LucideIcons.PackageCheck, label: "Registrando seu pedido..." }
 ];
-var DEFAULT_ADDRESS = SAVED_ADDRESSES[0];
-var DEFAULT_PAYMENT = SAVED_PAYMENT_METHODS[0];
 var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 function ProcessingOverlay({ step }) {
   const current = PROCESSING_STEPS[Math.min(step, PROCESSING_STEPS.length - 1)];
@@ -3129,41 +3541,69 @@ function CheckoutPage() {
   const config = useStorefrontConfig();
   const cart = useCartStore();
   const session = useSessionStore();
+  const delivery = useDeliveryStore();
   const validateDiscount2 = useDiscountValidator();
   useStorefrontHead({ title: `Checkout \u2014 ${config.name}` });
-  const [selectedAddressId, setSelectedAddressId] = React6.useState(DEFAULT_ADDRESS.id);
-  const [selectedPaymentId, setSelectedPaymentId] = React6.useState(DEFAULT_PAYMENT.id);
-  const [savedAddresses, setSavedAddresses] = React6.useState(SAVED_ADDRESSES);
-  const [savedPaymentMethods, setSavedPaymentMethods] = React6.useState(SAVED_PAYMENT_METHODS);
-  const [addressMode, setAddressMode] = React6.useState("saved");
-  const [paymentMode, setPaymentMode] = React6.useState("saved");
-  const [form, setForm] = React6.useState({
+  const paymentMethods = config.payments.methods;
+  const [selectedAddressId, setSelectedAddressId] = React7.useState("new");
+  const [savedAddresses, setSavedAddresses] = React7.useState([]);
+  const [addressMode, setAddressMode] = React7.useState("new");
+  const [paymentMethod, setPaymentMethod] = React7.useState(paymentMethods[0] ?? "pix");
+  const [form, setForm] = React7.useState({
     email: session.email ?? "",
     name: session.name ?? "",
-    street: DEFAULT_ADDRESS.street,
-    city: DEFAULT_ADDRESS.city,
-    zip: DEFAULT_ADDRESS.zip,
-    card: DEFAULT_PAYMENT.card,
-    expiry: DEFAULT_PAYMENT.expiry,
-    cvc: DEFAULT_PAYMENT.cvc
+    street: "",
+    city: "",
+    zip: "",
+    number: "",
+    complement: "",
+    district: "",
+    state: ""
   });
-  const [error, setError] = React6.useState(null);
-  const [discountCode, setDiscountCode] = React6.useState("");
-  const [discountError, setDiscountError] = React6.useState(null);
-  const [discountSuccess, setDiscountSuccess] = React6.useState(null);
-  const [applyingDiscount, setApplyingDiscount] = React6.useState(false);
-  const [placing, setPlacing] = React6.useState(false);
-  const [processingStep, setProcessingStep] = React6.useState(0);
-  const [showSignin, setShowSignin] = React6.useState(false);
+  const [error, setError] = React7.useState(null);
+  const [discountCode, setDiscountCode] = React7.useState("");
+  const [discountError, setDiscountError] = React7.useState(null);
+  const [discountSuccess, setDiscountSuccess] = React7.useState(null);
+  const [applyingDiscount, setApplyingDiscount] = React7.useState(false);
+  const [placing, setPlacing] = React7.useState(false);
+  const [processingStep, setProcessingStep] = React7.useState(0);
+  const [showSignin, setShowSignin] = React7.useState(false);
+  const [zipLookup, setZipLookup] = React7.useState("idle");
   const subtotal = selectSubtotal(cart);
   const discountTotal = selectDiscountTotal(cart);
   const shipping = selectShipping(cart, config);
   const total = selectTotal(cart, config);
   const money = (value) => formatMoney(value, config.currency, config.locale);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (cart.lines.length === 0 && !placing) navigateTo(config.catalogPath);
   }, [cart.lines.length, config.catalogPath, placing]);
   const set = (key) => (value) => setForm((current) => ({ ...current, [key]: value }));
+  async function setZip(value) {
+    const masked = core.formatPostalCode(value);
+    setForm((current) => ({ ...current, zip: masked }));
+    if (core.normalizePostalCode(masked).length !== 8) {
+      setZipLookup("idle");
+      return;
+    }
+    setZipLookup("loading");
+    try {
+      const found = await core.lookupPostalCode(masked);
+      if (!found) {
+        setZipLookup("not-found");
+        return;
+      }
+      setZipLookup("found");
+      setForm((current) => ({
+        ...current,
+        street: found.street || current.street,
+        district: found.district || current.district,
+        city: found.city,
+        state: found.state
+      }));
+    } catch {
+      setZipLookup("idle");
+    }
+  }
   async function applyDiscountCode() {
     setApplyingDiscount(true);
     setDiscountError(null);
@@ -3190,10 +3630,54 @@ function CheckoutPage() {
     setDiscountSuccess(null);
     setDiscountError(null);
   }
+  React7.useEffect(() => {
+    const customerId = session.customerId;
+    if (!customerId) {
+      setSavedAddresses([]);
+      setAddressMode("new");
+      return;
+    }
+    let cancelled = false;
+    const provider = runtime.getShopProvider();
+    void provider.listCustomerAddresses?.(customerId).then((addresses) => {
+      if (cancelled || addresses.length === 0) return;
+      setSavedAddresses(addresses);
+      applySavedAddress(addresses[0]);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [session.customerId]);
+  React7.useEffect(() => {
+    if (addressMode !== "new") return;
+    const looked = delivery.address;
+    if (!looked) return;
+    setForm((current) => {
+      if (current.zip.trim() || current.street.trim()) return current;
+      return {
+        ...current,
+        zip: core.formatPostalCode(looked.postalCode),
+        street: looked.street,
+        district: looked.district,
+        city: looked.city,
+        state: looked.state
+      };
+    });
+  }, [delivery.address, addressMode]);
   function applySavedAddress(address) {
     setAddressMode("saved");
     setSelectedAddressId(address.id);
-    setForm((current) => ({ ...current, street: address.street, city: address.city, zip: address.zip }));
+    setForm((current) => ({
+      ...current,
+      street: address.street,
+      city: address.city,
+      zip: address.postalCode,
+      number: address.number ?? "",
+      complement: address.complement ?? "",
+      district: address.district ?? "",
+      state: address.state
+    }));
   }
   function selectAddress(addressId) {
     const address = savedAddresses.find((item) => item.id === addressId);
@@ -3202,37 +3686,7 @@ function CheckoutPage() {
   function addNewAddress() {
     setAddressMode("new");
     setSelectedAddressId("new");
-    setForm((current) => ({ ...current, street: "", city: "", zip: "" }));
-  }
-  function removeAddress(addressId) {
-    const nextAddresses = savedAddresses.filter((item) => item.id !== addressId);
-    setSavedAddresses(nextAddresses);
-    if (selectedAddressId !== addressId) return;
-    const fallback = nextAddresses[0];
-    if (fallback) applySavedAddress(fallback);
-    else addNewAddress();
-  }
-  function applySavedPayment(method) {
-    setPaymentMode("saved");
-    setSelectedPaymentId(method.id);
-    setForm((current) => ({ ...current, card: method.card, expiry: method.expiry, cvc: method.cvc }));
-  }
-  function selectPayment(paymentId) {
-    const method = savedPaymentMethods.find((item) => item.id === paymentId);
-    if (method) applySavedPayment(method);
-  }
-  function addNewPayment() {
-    setPaymentMode("new");
-    setSelectedPaymentId("new");
-    setForm((current) => ({ ...current, card: "", expiry: "", cvc: "" }));
-  }
-  function removePayment(paymentId) {
-    const nextMethods = savedPaymentMethods.filter((item) => item.id !== paymentId);
-    setSavedPaymentMethods(nextMethods);
-    if (selectedPaymentId !== paymentId) return;
-    const fallback = nextMethods[0];
-    if (fallback) applySavedPayment(fallback);
-    else addNewPayment();
+    setForm((current) => ({ ...current, street: "", city: "", zip: "", number: "", complement: "", district: "", state: "" }));
   }
   function validate() {
     setError(null);
@@ -3244,12 +3698,20 @@ function CheckoutPage() {
       setError("Informe seu nome completo.");
       return false;
     }
-    if (!form.street.trim() || !form.city.trim() || !form.zip.trim()) {
+    if (!form.street.trim() || !form.city.trim() || !form.zip.trim() || !form.district.trim()) {
       setError("Preencha ou selecione o endere\xE7o de entrega.");
       return false;
     }
-    if (!/^\d{16}$/.test(form.card.replace(/\s+/g, "")) || !form.expiry.trim() || !form.cvc.trim()) {
-      setError("Selecione ou preencha um m\xE9todo de pagamento v\xE1lido.");
+    if (!form.number.trim()) {
+      setError("Falta o n\xFAmero do endere\xE7o.");
+      return false;
+    }
+    if (form.state.trim().length !== 2) {
+      setError("Informe a UF com duas letras (ex.: RJ).");
+      return false;
+    }
+    if (delivery.status === "unserved" && delivery.postalCode === core.normalizePostalCode(form.zip)) {
+      setError("Ainda n\xE3o entregamos nesse CEP. Tente outro endere\xE7o.");
       return false;
     }
     return true;
@@ -3271,9 +3733,22 @@ function CheckoutPage() {
         session,
         customer: { email: form.email, name: form.name },
         address: { street: form.street, city: form.city, zip: form.zip },
-        // Demo only: mock mode instantly approves. Real Pix/Mercado Pago (M4)
-        // leaves the order pending until the payment webhook confirms.
-        markPaid: config.payments.mode === "mock"
+        shippingAddress: {
+          postalCode: form.zip.trim(),
+          street: form.street.trim(),
+          number: form.number.trim() || void 0,
+          complement: form.complement.trim() || void 0,
+          district: form.district.trim() || void 0,
+          city: form.city.trim(),
+          state: form.state.trim().toUpperCase()
+        },
+        // The method the buyer actually chose, which opens the ledger row in
+        // public.transactions with the right kind.
+        paymentMethod
+        // Never marked paid from the browser. It used to be, through an RPC that
+        // was granted to anon — so any buyer holding their own order id could
+        // declare it settled. The order is now born `pending` and only the
+        // merchant (or a PSP webhook) can confirm the money arrived.
       });
       await minDuration;
       cart.clear();
@@ -3346,35 +3821,25 @@ function CheckoutPage() {
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-3 text-xl font-semibold tracking-tight", children: "Endere\xE7o de entrega" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 grid gap-3", children: [
-              savedAddresses.map((address) => /* @__PURE__ */ jsxRuntime.jsxs(
+              savedAddresses.map((address) => /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: `group relative rounded-lg border p-3 pr-11 text-left text-sm transition hover:bg-muted/40 ${selectedAddressId === address.id ? "border-primary bg-primary/5" : "border-border bg-background"}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => selectAddress(address.id), className: "block w-full text-left", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-between gap-3 font-semibold", children: [
-                        address.label,
-                        addressMode === "saved" && selectedAddressId === address.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-bold text-primary", children: "Selecionado" })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-muted-foreground", children: address.street }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "block text-muted-foreground", children: [
-                        address.city,
-                        " - ",
-                        address.zip
-                      ] })
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => selectAddress(address.id), className: "block w-full text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-between gap-3 font-semibold", children: [
+                      address.label,
+                      addressMode === "saved" && selectedAddressId === address.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-bold text-primary", children: "Selecionado" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => removeAddress(address.id),
-                        className: "absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground opacity-0 transition hover:bg-destructive/10 hover:text-destructive focus:opacity-100 group-hover:opacity-100",
-                        "aria-label": `Remover endere\xE7o ${address.label}`,
-                        title: "Remover endere\xE7o",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4" })
-                      }
-                    )
-                  ]
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-1 block text-muted-foreground", children: [
+                      [address.street, address.number].filter(Boolean).join(", "),
+                      address.complement ? ` \u2014 ${address.complement}` : ""
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "block text-muted-foreground", children: [
+                      [address.district, address.city, address.state].filter(Boolean).join(" \xB7 "),
+                      " \u2014 ",
+                      address.postalCode
+                    ] })
+                  ] })
                 },
                 address.id
               )),
@@ -3385,83 +3850,62 @@ function CheckoutPage() {
                   onClick: addNewAddress,
                   className: `rounded-lg border border-dashed p-3 text-left text-sm transition hover:bg-muted/40 ${addressMode === "new" ? "border-primary bg-primary/5" : "border-border bg-muted/20"}`,
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-semibold text-primary", children: "+ Adicionar novo endere\xE7o" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-semibold text-primary", children: savedAddresses.length > 0 ? "+ Adicionar novo endere\xE7o" : "Informe o endere\xE7o de entrega" }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-muted-foreground", children: "Preencher outro endere\xE7o para esta compra" })
                   ]
                 }
               )
             ] }),
             addressMode === "new" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3", children: [
-              field("Endere\xE7o", TID.checkoutStreet, form.street, set("street"), { placeholder: "Endere\xE7o" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 sm:grid-cols-[1fr_160px]", children: [
-                field("Cidade", TID.checkoutCity, form.city, set("city"), { placeholder: "Cidade" }),
-                field("CEP", TID.checkoutZip, form.zip, set("zip"), { placeholder: "CEP" })
-              ] })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1 sm:grid-cols-[200px_1fr] sm:items-center", children: [
+                field("CEP", TID.checkoutZip, form.zip, setZip, {
+                  placeholder: "CEP",
+                  inputMode: "numeric",
+                  autoComplete: "postal-code"
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-1 text-xs text-muted-foreground", children: zipLookup === "loading" ? "Buscando endere\xE7o\u2026" : zipLookup === "not-found" ? "CEP n\xE3o encontrado \u2014 preencha o endere\xE7o \xE0 m\xE3o." : "Preenchemos o endere\xE7o para voc\xEA." })
+              ] }),
+              field("Endere\xE7o", TID.checkoutStreet, form.street, set("street"), { placeholder: "Rua, avenida\u2026" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+                field("N\xFAmero", "checkout-number", form.number, set("number"), { placeholder: "N\xFAmero" }),
+                field("Complemento", "checkout-complement", form.complement, set("complement"), { placeholder: "Apto, bloco (opcional)" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+                field("Bairro", "checkout-district", form.district, set("district"), { placeholder: "Bairro" }),
+                field("UF", "checkout-state", form.state, set("state"), { placeholder: "UF" })
+              ] }),
+              field("Cidade", TID.checkoutCity, form.city, set("city"), { placeholder: "Cidade" })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-3 text-xl font-semibold tracking-tight", children: "Pagamento" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 grid gap-3", children: [
-              savedPaymentMethods.map((method) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: `group relative rounded-lg border p-3 pr-11 text-left text-sm transition hover:bg-muted/40 ${selectedPaymentId === method.id ? "border-primary bg-primary/5" : "border-border bg-background"}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => selectPayment(method.id), className: "block w-full text-left", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-between gap-3 font-semibold", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CreditCard, { className: "h-4 w-4" }),
-                          method.label
-                        ] }),
-                        paymentMode === "saved" && selectedPaymentId === method.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-bold text-primary", children: "Selecionado" })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-1 block text-muted-foreground", children: [
-                        "Expira em ",
-                        method.expiry
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => removePayment(method.id),
-                        className: "absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground opacity-0 transition hover:bg-destructive/10 hover:text-destructive focus:opacity-100 group-hover:opacity-100",
-                        "aria-label": `Remover cart\xE3o ${method.label}`,
-                        title: "Remover cart\xE3o",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4" })
-                      }
-                    )
-                  ]
-                },
-                method.id
-              )),
-              /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 grid gap-3", role: "radiogroup", "aria-label": "Forma de pagamento", children: paymentMethods.map((method) => {
+              const copy = PAYMENT_LABELS[method];
+              const selected = paymentMethod === method;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: addNewPayment,
-                  className: `rounded-lg border border-dashed p-3 text-left text-sm transition hover:bg-muted/40 ${paymentMode === "new" ? "border-primary bg-primary/5" : "border-border bg-muted/20"}`,
+                  role: "radio",
+                  "aria-checked": selected,
+                  "data-testid": `checkout-payment-${method}`,
+                  onClick: () => setPaymentMethod(method),
+                  className: `rounded-lg border p-3 text-left text-sm transition hover:bg-muted/40 ${selected ? "border-primary bg-primary/5" : "border-border bg-background"}`,
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 font-semibold text-primary", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CreditCard, { className: "h-4 w-4" }),
-                      "+ Adicionar novo cart\xE3o"
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center justify-between gap-3 font-semibold", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CreditCard, { className: "h-4 w-4" }),
+                        copy.label
+                      ] }),
+                      selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-bold text-primary", children: "Selecionado" })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-muted-foreground", children: "Usar outro cart\xE3o nesta compra" })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-muted-foreground", children: copy.hint })
                   ]
-                }
-              )
-            ] }),
-            paymentMode === "new" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3", children: [
-              field("N\xFAmero do cart\xE3o", TID.checkoutCard, form.card, set("card"), {
-                placeholder: "N\xFAmero do cart\xE3o",
-                inputMode: "numeric"
-              }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
-                field("Validade", TID.checkoutExpiry, form.expiry, set("expiry"), { placeholder: "MM/AA" }),
-                field("CVC", TID.checkoutCvc, form.cvc, set("cvc"), { placeholder: "CVC", inputMode: "numeric" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Pagamento de demonstra\xE7\xE3o - nenhuma cobran\xE7a \xE9 feita." })
+                },
+                method
+              );
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Nenhuma cobran\xE7a \xE9 feita agora. Seu pedido \xE9 registrado e a loja confirma o pagamento." })
           ] }),
           error && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-testid": TID.checkoutError, className: "rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive", children: error })
         ] }),
@@ -3815,11 +4259,11 @@ function SuccessMark() {
 }
 function OrderConfirmationPage({ orderId }) {
   const config = useStorefrontConfig();
-  const [order, setOrder] = React6.useState(null);
-  const [loading, setLoading] = React6.useState(true);
+  const [order, setOrder] = React7.useState(null);
+  const [loading, setLoading] = React7.useState(true);
   const money = (v) => formatMoney(v, config.currency, config.locale);
   useStorefrontHead({ title: order ? `Pedido #${order.orderNumber} \u2014 ${config.name}` : config.name });
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     let cancelled = false;
     runtime.getShopProvider().getOrder(orderId).then((o) => {
       if (!cancelled) setOrder(o);
@@ -3951,11 +4395,11 @@ function OrderConfirmationPage({ orderId }) {
 function useMyOrders() {
   const customerId = useSessionStore((s) => s.customerId);
   const email = useSessionStore((s) => s.email);
-  const [orders, setOrders] = React6.useState([]);
-  const [loading, setLoading] = React6.useState(true);
-  const [tick, setTick] = React6.useState(0);
-  const refresh = React6.useCallback(() => setTick((t) => t + 1), []);
-  React6.useEffect(() => {
+  const [orders, setOrders] = React7.useState([]);
+  const [loading, setLoading] = React7.useState(true);
+  const [tick, setTick] = React7.useState(0);
+  const refresh = React7.useCallback(() => setTick((t) => t + 1), []);
+  React7.useEffect(() => {
     let cancelled = false;
     if (!customerId && !email) {
       setOrders([]);
@@ -3977,12 +4421,12 @@ function useMyOrders() {
   return { orders, loading, refresh };
 }
 function AuthForm() {
-  const [mode, setMode] = React6.useState("signin");
-  const [email, setEmail] = React6.useState("");
-  const [password, setPassword] = React6.useState("");
-  const [name, setName] = React6.useState("");
-  const [busy, setBusy] = React6.useState(false);
-  const [error, setError] = React6.useState(null);
+  const [mode, setMode] = React7.useState("signin");
+  const [email, setEmail] = React7.useState("");
+  const [password, setPassword] = React7.useState("");
+  const [name, setName] = React7.useState("");
+  const [busy, setBusy] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
   async function submit(e) {
     e.preventDefault();
     setError(null);
@@ -4124,9 +4568,9 @@ function OrdersPanel() {
 }
 function ProfilePanel() {
   const session = useSessionStore();
-  const [name, setName] = React6.useState(session.name ?? "");
-  const [saving, setSaving] = React6.useState(false);
-  const [saved, setSaved] = React6.useState(false);
+  const [name, setName] = React7.useState(session.name ?? "");
+  const [saving, setSaving] = React7.useState(false);
+  const [saved, setSaved] = React7.useState(false);
   async function save(e) {
     e.preventDefault();
     const trimmed = name.trim();
@@ -4222,7 +4666,7 @@ var SECTION_SUBTITLE = {
 function MyPurchasesPage() {
   const config = useStorefrontConfig();
   const session = useSessionStore();
-  const [section, setSection] = React6.useState("orders");
+  const [section, setSection] = React7.useState("orders");
   useStorefrontHead({ title: `Minha conta \u2014 ${config.name}` });
   if (!session.email) {
     return /* @__PURE__ */ jsxRuntime.jsx("main", { className: "mx-auto max-w-3xl px-4 py-12 sm:px-6", children: /* @__PURE__ */ jsxRuntime.jsx(AuthForm, {}) });
@@ -4285,7 +4729,7 @@ function PolicyPage({ kind }) {
     ] }) })
   ] });
 }
-var StorefrontErrorBoundary = class extends React6__default.default.Component {
+var StorefrontErrorBoundary = class extends React7__default.default.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -4329,7 +4773,7 @@ var ACCENT = {
 function ToastCard({ toast: toast2 }) {
   const dismiss = useToastStore((s) => s.dismiss);
   const Icon2 = ICON[toast2.variant];
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const timer = window.setTimeout(() => dismiss(toast2.id), toast2.durationMs);
     return () => window.clearTimeout(timer);
   }, [toast2.id, toast2.durationMs, dismiss]);
@@ -4440,6 +4884,15 @@ function initStorefrontRuntime(config) {
   } else {
     runtime.setShopProvider(mock.createMockShopProvider(buildMockSeed(config)));
   }
+  const reconcileCart = () => {
+    const provider = runtime.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."
@@ -4571,9 +5024,9 @@ function manifestToStorefrontConfig(manifest, surfaceName) {
   };
 }
 function StorefrontScaffold({ manifest, surface }) {
-  const config = React6__default.default.useMemo(() => manifestToStorefrontConfig(manifest, surface), [manifest, surface]);
-  const resolved = React6__default.default.useMemo(() => resolveConfig(config), [config]);
-  const inited = React6__default.default.useRef(false);
+  const config = React7__default.default.useMemo(() => manifestToStorefrontConfig(manifest, surface), [manifest, surface]);
+  const resolved = React7__default.default.useMemo(() => resolveConfig(config), [config]);
+  const inited = React7__default.default.useRef(false);
   if (!inited.current) {
     initStorefrontRuntime(config);
     inited.current = true;
@@ -4799,11 +5252,73 @@ 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
 };
 
 Object.defineProperty(exports, "getSupabaseClientOptional", {
@@ -4860,6 +5375,7 @@ exports.defineStorefrontConfig = defineStorefrontConfig;
 exports.defineStorefrontRoutes = defineStorefrontRoutes;
 exports.defineStorefrontSections = defineStorefrontSections;
 exports.establishCustomerSession = establishCustomerSession;
+exports.foodTemplate = foodTemplate;
 exports.formatMoney = formatMoney;
 exports.formatProductOptionSelection = formatProductOptionSelection;
 exports.getCustomerAuthAdapter = getCustomerAuthAdapter;