cloudcommerce 0.26.6 → 0.26.7

package/packages/storefront/dist/server/chunks/pages/{_...slug_.astro.36e8882b.mjs → _...slug_.astro.0808946e.mjs}

@@ -1,22 +1,14 @@
-import 'kleur/colors';
-import 'node:fs/promises';
-import { resolve, join } from 'node:path';
-import 'node:url';
-import 'http-cache-semantics';
-import 'node:os';
-import sizeOf from 'image-size';
-import 'magic-string';
-import mime from 'mime';
-import 'node:stream';
 import { c as createAstro, a as createComponent, r as renderTemplate, b as addAttribute, d as renderComponent, u as unescapeHTML, F as Fragment, s as spreadAttributes, e as renderSlotToString, f as renderAllHeadContent, m as maybeRenderHead, g as renderSlot } from '../astro.708269c6.mjs';
 import api from '@cloudcommerce/api';
 import { EventEmitter } from 'node:events';
-import fs from 'node:fs';
+import fs, { readFileSync } from 'node:fs';
+import { resolve, join } from 'node:path';
 import config from '@cloudcommerce/config';
-import { img, price, formatMoney, randomObjectId, nickname } from '@ecomplus/utils';
+import { img, price, formatMoney, randomObjectId, nickname, inStock, name, onPromotion, categoriesList } from '@ecomplus/utils';
 import { renderSync, parse, walkSync, ELEMENT_NODE } from 'ultrahtml';
-/* empty css                               */import { reactive, computed, shallowRef, useSSRContext, defineComponent, inject, mergeProps, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, resolveComponent, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, withModifiers, Teleport, createTextVNode, toDisplayString, defineAsyncComponent, Suspense } from 'vue';
-import { useScroll, useElementHover, useDebounceFn, useTimeout, watchDebounced, promiseTimeout, watchOnce } from '@vueuse/core';
+/* empty css                               */import mime from 'mime';
+import { reactive, computed, shallowRef, useSSRContext, defineComponent, inject, mergeProps, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, resolveComponent, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, withModifiers, Teleport, createTextVNode, toDisplayString, defineAsyncComponent, Suspense, createSlots, shallowReactive, withAsyncContext } from 'vue';
+import { useScroll, useElementHover, useDebounceFn, useTimeout, watchDebounced, promiseTimeout, onClickOutside, watchOnce } from '@vueuse/core';
 import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderTeleport, ssrInterpolate, ssrRenderSuspense } from 'vue/server-renderer';
 import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
 
@@ -28,108 +20,6 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-function isOutputFormat(value) {
-  return ["avif", "jpeg", "jpg", "png", "webp", "svg"].includes(value);
-}
-function isOutputFormatSupportsAlpha(value) {
-  return ["avif", "png", "webp"].includes(value);
-}
-function isAspectRatioString(value) {
-  return /^\d*:\d*$/.test(value);
-}
-function parseAspectRatio(aspectRatio) {
-  if (!aspectRatio) {
-    return void 0;
-  }
-  if (typeof aspectRatio === "number") {
-    return aspectRatio;
-  } else {
-    const [width, height] = aspectRatio.split(":");
-    return parseInt(width) / parseInt(height);
-  }
-}
-function isSSRService(service) {
-  return "transform" in service;
-}
-class BaseSSRService {
-  async getImageAttributes(transform) {
-    const { width, height, src, format, quality, aspectRatio, ...rest } = transform;
-    return {
-      ...rest,
-      width,
-      height
-    };
-  }
-  serializeTransform(transform) {
-    const searchParams = new URLSearchParams();
-    if (transform.quality) {
-      searchParams.append("q", transform.quality.toString());
-    }
-    if (transform.format) {
-      searchParams.append("f", transform.format);
-    }
-    if (transform.width) {
-      searchParams.append("w", transform.width.toString());
-    }
-    if (transform.height) {
-      searchParams.append("h", transform.height.toString());
-    }
-    if (transform.aspectRatio) {
-      searchParams.append("ar", transform.aspectRatio.toString());
-    }
-    if (transform.fit) {
-      searchParams.append("fit", transform.fit);
-    }
-    if (transform.background) {
-      searchParams.append("bg", transform.background);
-    }
-    if (transform.position) {
-      searchParams.append("p", encodeURI(transform.position));
-    }
-    searchParams.append("href", transform.src);
-    return { searchParams };
-  }
-  parseTransform(searchParams) {
-    if (!searchParams.has("href")) {
-      return void 0;
-    }
-    let transform = { src: searchParams.get("href") };
-    if (searchParams.has("q")) {
-      transform.quality = parseInt(searchParams.get("q"));
-    }
-    if (searchParams.has("f")) {
-      const format = searchParams.get("f");
-      if (isOutputFormat(format)) {
-        transform.format = format;
-      }
-    }
-    if (searchParams.has("w")) {
-      transform.width = parseInt(searchParams.get("w"));
-    }
-    if (searchParams.has("h")) {
-      transform.height = parseInt(searchParams.get("h"));
-    }
-    if (searchParams.has("ar")) {
-      const ratio = searchParams.get("ar");
-      if (isAspectRatioString(ratio)) {
-        transform.aspectRatio = ratio;
-      } else {
-        transform.aspectRatio = parseFloat(ratio);
-      }
-    }
-    if (searchParams.has("fit")) {
-      transform.fit = searchParams.get("fit");
-    }
-    if (searchParams.has("p")) {
-      transform.position = decodeURI(searchParams.get("p"));
-    }
-    if (searchParams.has("bg")) {
-      transform.background = searchParams.get("bg");
-    }
-    return transform;
-  }
-}
-
 global.__storefrontCMS = (fs, resolvePath) => {
   const { STOREFRONT_BASE_DIR } = process.env;
   let baseDir;
@@ -308,7 +198,7 @@ const loadRouteContext = async (Astro, {
   const isHomepage = urlPath === "/";
   const config = getConfig();
   globalThis.$storefront.settings = config.settings;
-  let cmsContent;
+  let cmsContent = { sections: [] };
   const apiState = {};
   const apiPrefetchings = [
     ...apiPrefetchEndpoints.map((endpoint) => {
@@ -338,6 +228,11 @@ const loadRouteContext = async (Astro, {
         api.get(`slugs/${slug}`).then((response) => {
           Object.assign(apiContext, response.data);
           const apiResource = apiContext.resource;
+          config.getContent(`pages/${apiResource}`).then((_cmsContent) => {
+            if (cmsContent && _cmsContent) {
+              Object.assign(cmsContent, _cmsContent);
+            }
+          }).catch(console.warn);
           const apiDoc = apiContext.doc;
           apiState[`${apiResource}/${apiDoc._id}`] = apiDoc;
           globalThis.$storefront.apiContext = {
@@ -419,23 +314,21 @@ const loadRouteContext = async (Astro, {
 
 const pwaInfo = {"pwaInDevEnvironment":false,"webManifest":{"href":"/manifest.webmanifest","useCredentials":false,"linkTag":"<link rel=\"manifest\" href=\"/manifest.webmanifest\">"}};
 
-const $$Astro$9 = createAstro("https://ecom2-demo.web.app");
+const $$Astro$g = createAstro("https://ecom2-demo.web.app");
 const $$ViewTransitions = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$9, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$g, $$props, $$slots);
   Astro2.self = $$ViewTransitions;
   const { fallback = "animate" } = Astro2.props;
-  return renderTemplate`<meta name="astro-view-transitions-enabled" content="true">
-<meta name="astro-view-transitions-fallback"${addAttribute(fallback, "content")}>
-`;
+  return renderTemplate`<meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback"${addAttribute(fallback, "content")}>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/node_modules/astro/components/ViewTransitions.astro", void 0);
 
-var __freeze$2 = Object.freeze;
-var __defProp$2 = Object.defineProperty;
-var __template$2 = (cooked, raw) => __freeze$2(__defProp$2(cooked, "raw", { value: __freeze$2(raw || cooked.slice()) }));
-var _a$2;
-const $$Astro$8 = createAstro("https://ecom2-demo.web.app");
+var __freeze$4 = Object.freeze;
+var __defProp$4 = Object.defineProperty;
+var __template$4 = (cooked, raw) => __freeze$4(__defProp$4(cooked, "raw", { value: __freeze$4(raw || cooked.slice()) }));
+var _a$4;
+const $$Astro$f = createAstro("https://ecom2-demo.web.app");
 const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$8, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$f, $$props, $$slots);
   Astro2.self = $$BaseHead;
   const deployRand = ({}).DEPLOY_RAND || "_";
   const getIconUrl = (size) => {
@@ -517,13 +410,18 @@ setTimeout(() => {
       }
       return nestedDoc;
     };
-    inlineClientJS += `
-window.$storefront.apiContext = ${JSON.stringify({
+    Astro2.locals.contextInlineClientJS = `
+$storefront.apiContext = ${JSON.stringify({
       resource: apiContext.resource,
       doc: minifyApiDoc({ ...apiDoc }),
       timestamp: Date.now()
     })};
-window.$storefront.context /* DEPRECATED */ = window.$storefront.apiContext`;
+$storefront.context /* DEPRECATED */ = $storefront.apiContext`;
+  } else {
+    Astro2.locals.contextInlineClientJS = `
+$storefront.apiContext = null;
+delete $storefront.apiContext;
+delete $storefront.context;`;
   }
   if (isPreview) {
     inlineClientJS += `
@@ -536,7 +434,7 @@ window.$isCmsPreview = true;`;
     url: `https://${domain}/`,
     logo: `https://${domain}${settings.logo}`
   });
-  return renderTemplate(_a$2 || (_a$2 = __template$2(['<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width">\n<meta name="theme-color"', '>\n<link rel="icon" type="image/png"', ' sizes="32x32">\n', "\n<title>", '</title>\n<meta name="description"', '>\n<meta name="author"', '>\n<meta name="generator"', '>\n<link rel="canonical"', ">\n", '\n<meta name="apple-mobile-web-app-capable" content="yes">\n<meta name="apple-mobile-web-app-status-bar-style" content="default">\n<meta property="og:site_name"', '>\n<meta property="og:url"', '>\n<meta property="og:title"', '>\n<meta property="og:description"', '>\n<meta property="og:type" content="website">\n<meta property="og:locale"', ">\n", "\n", '\n<meta name="twitter:card" content="summary">\n', '\n<meta name="ecom-store-id"', ">\n\n\n", "\n", "\n\n<script>", '<\/script>\n<script type="application/ld+json">', "<\/script>\n\n", ""])), addAttribute(primaryColor, "content"), addAttribute(favicon, "href"), shortcutIcon && renderTemplate`<link rel="icon" type="image/png"${addAttribute(shortcutIcon, "href")} sizes="192x192">`, title, addAttribute(description, "content"), addAttribute(settings.name, "content"), addAttribute(Astro2.generator, "content"), addAttribute(canonicalUrl, "href"), shortcutIcon && renderTemplate`<link rel="apple-touch-icon"${addAttribute(shortcutIcon, "href")}>`, addAttribute(settings.name, "content"), addAttribute(canonicalUrl, "content"), addAttribute(title, "content"), addAttribute(description, "content"), addAttribute(ogLocale, "content"), ogImage && renderTemplate`<meta property="og:image"${addAttribute(ogImage, "content")}>`, metatagsContent?.fb_app_id && renderTemplate`<meta property="fb:app_id"${addAttribute(metatagsContent.fb_app_id, "content")}>`, metatagsContent?.twitter_username && renderTemplate`<meta name="twitter:site"${addAttribute(metatagsContent.twitter_username, "content")}>`, addAttribute(String(storeId), "content"), pwaInfo && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(pwaInfo.webManifest.linkTag)}` })}`, !pwaInfo && !false && renderTemplate`<link rel="manifest" href="/manifest.webmanifest">`, unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd), renderComponent($$result, "ViewTransitions", $$ViewTransitions, {}));
+  return renderTemplate(_a$4 || (_a$4 = __template$4(['<meta charset="UTF-8"><meta name="viewport" content="width=device-width"><meta name="theme-color"', '><link rel="icon" type="image/png"', ' sizes="32x32">', "<title>", '</title><meta name="description"', '><meta name="author"', '><meta name="generator"', '><link rel="canonical"', ">", '<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta property="og:site_name"', '><meta property="og:url"', '><meta property="og:title"', '><meta property="og:description"', '><meta property="og:type" content="website"><meta property="og:locale"', ">", "", '<meta name="twitter:card" content="summary">', '<meta name="ecom-store-id"', ">", "", "<script>", '<\/script><script type="application/ld+json">', "<\/script>", ""])), addAttribute(primaryColor, "content"), addAttribute(favicon, "href"), shortcutIcon && renderTemplate`<link rel="icon" type="image/png"${addAttribute(shortcutIcon, "href")} sizes="192x192">`, title, addAttribute(description, "content"), addAttribute(settings.name, "content"), addAttribute(Astro2.generator, "content"), addAttribute(canonicalUrl, "href"), shortcutIcon && renderTemplate`<link rel="apple-touch-icon"${addAttribute(shortcutIcon, "href")}>`, addAttribute(settings.name, "content"), addAttribute(canonicalUrl, "content"), addAttribute(title, "content"), addAttribute(description, "content"), addAttribute(ogLocale, "content"), ogImage && renderTemplate`<meta property="og:image"${addAttribute(ogImage, "content")}>`, metatagsContent?.fb_app_id && renderTemplate`<meta property="fb:app_id"${addAttribute(metatagsContent.fb_app_id, "content")}>`, metatagsContent?.twitter_username && renderTemplate`<meta name="twitter:site"${addAttribute(metatagsContent.twitter_username, "content")}>`, addAttribute(String(storeId), "content"), pwaInfo && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(pwaInfo.webManifest.linkTag)}` })}`, !pwaInfo && !false && renderTemplate`<link rel="manifest" href="/manifest.webmanifest">`, unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd), renderComponent($$result, "ViewTransitions", $$ViewTransitions, {}));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseHead.astro", void 0);
 
 function has(value) {
@@ -675,147 +573,95 @@ const Head = createComponent({
   }
 });
 
-function isRemoteImage(src) {
-  return /^(https?:)?\/\//.test(src);
-}
+const { STOREFRONT_BASE_DIR } = process.env;
+const baseDir = STOREFRONT_BASE_DIR || process.cwd();
+const builtImages = [];
+const manifestFilepath = join(baseDir, "dist/server/images.dist.csv");
+readFileSync(manifestFilepath, "utf-8").split(/\n/).forEach((line) => {
+  const [filename, width, height] = line.split(",");
+  builtImages.push({
+    filename,
+    width: Number(width),
+    height: Number(height)
+  });
+});
+builtImages.sort((a, b) => {
+  if (a.width < b.width)
+    return -1;
+  return 1;
+});
+const getBuiltImage = async ({ src, width, format }) => {
+  const filename = src.replace(/^.*\//, "").replace(/.\w+(\?.*)?$/, "");
+  const filenameRegExp = new RegExp(`[_.][a-z0-9]+\\.${format}$`, "i");
+  const matchFilename = (_builtImage) => {
+    return filename === _builtImage.filename.replace(filenameRegExp, "");
+  };
+  let builtImage = builtImages.find((_builtImage) => {
+    return _builtImage.width >= width && matchFilename(_builtImage);
+  });
+  if (!builtImage) {
+    builtImage = builtImages.find(matchFilename);
+  }
+  if (builtImage) {
+    return {
+      src: `/_astro/${builtImage.filename}`,
+      width: builtImage.width,
+      height: builtImage.height
+    };
+  }
+  console.warn(`Could not match built ${format} image for ${src} ${width}px`);
+  return { src, width };
+};
+
 function removeQueryString(src) {
   const index = src.lastIndexOf("?");
   return index > 0 ? src.substring(0, index) : src;
 }
-function extname(src) {
+function basename(src) {
+  return removeQueryString(src.replace(/^.*[\\\/]/, ""));
+}
+const extname = (src) => {
   const base = basename(src);
   const index = base.lastIndexOf(".");
   if (index <= 0) {
     return "";
   }
   return base.substring(index);
-}
-function basename(src) {
-  return removeQueryString(src.replace(/^.*[\\\/]/, ""));
-}
-
-function resolveSize(transform) {
-  if (transform.width && transform.height) {
-    return transform;
-  }
-  if (!transform.width && !transform.height) {
-    throw new Error(`"width" and "height" cannot both be undefined`);
-  }
-  if (!transform.aspectRatio) {
-    throw new Error(
-      `"aspectRatio" must be included if only "${transform.width ? "width" : "height"}" is provided`
-    );
-  }
-  let aspectRatio;
-  if (typeof transform.aspectRatio === "number") {
-    aspectRatio = transform.aspectRatio;
-  } else {
-    const [width, height] = transform.aspectRatio.split(":");
-    aspectRatio = Number.parseInt(width) / Number.parseInt(height);
-  }
-  if (transform.width) {
-    return {
-      ...transform,
-      width: transform.width,
-      height: Math.round(transform.width / aspectRatio)
-    };
-  } else if (transform.height) {
-    return {
-      ...transform,
-      width: Math.round(transform.height * aspectRatio),
-      height: transform.height
-    };
-  }
-  return transform;
-}
-async function resolveTransform(input) {
-  if (typeof input.src === "string") {
-    return resolveSize(input);
-  }
-  const metadata = "then" in input.src ? (await input.src).default : input.src;
-  let { width, height, aspectRatio, background, format = metadata.format, ...rest } = input;
-  if (!width && !height) {
-    width = metadata.width;
-    height = metadata.height;
-  } else if (width) {
-    let ratio = parseAspectRatio(aspectRatio) || metadata.width / metadata.height;
-    height = height || Math.round(width / ratio);
-  } else if (height) {
-    let ratio = parseAspectRatio(aspectRatio) || metadata.width / metadata.height;
-    width = width || Math.round(height * ratio);
-  }
-  return {
-    ...rest,
-    src: metadata.src,
-    width,
-    height,
-    aspectRatio,
-    format,
-    background
-  };
-}
-async function getImage(transform) {
-  var _a, _b, _c;
-  if (!transform.src) {
-    throw new Error("[@astrojs/image] `src` is required");
-  }
-  let loader = (_a = globalThis.astroImage) == null ? void 0 : _a.loader;
-  if (!loader) {
-    const { default: mod } = await import('./endpoint.js.f7a896a1.mjs').then(n => n.s).catch(() => {
-      throw new Error(
-        "[@astrojs/image] Builtin image loader not found. (Did you remember to add the integration to your Astro config?)"
-      );
-    });
-    loader = mod;
-    globalThis.astroImage = globalThis.astroImage || {};
-    globalThis.astroImage.loader = loader;
-  }
-  const resolved = await resolveTransform(transform);
-  const attributes = await loader.getImageAttributes(resolved);
-  const isDev = (_b = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":true,"SITE":"https://ecom2-demo.web.app","ASSETS_PREFIX":undefined},{SSR:true,}))) == null ? void 0 : _b.DEV;
-  const isLocalImage = !isRemoteImage(resolved.src);
-  const _loader = isDev && isLocalImage ? globalThis.astroImage.defaultLoader : loader;
-  if (!_loader) {
-    throw new Error("@astrojs/image: loader not found!");
-  }
-  const { searchParams } = isSSRService(_loader) ? _loader.serializeTransform(resolved) : globalThis.astroImage.defaultLoader.serializeTransform(resolved);
-  const imgSrc = !isLocalImage && resolved.src.startsWith("//") ? `https:${resolved.src}` : resolved.src;
-  let src;
-  if (/^[\/\\]?@astroimage/.test(imgSrc)) {
-    src = `${imgSrc}?${searchParams.toString()}`;
-  } else {
-    searchParams.set("href", imgSrc);
-    src = `/_image?${searchParams.toString()}`;
+};
+function parseAspectRatio(aspectRatio) {
+  if (!aspectRatio) {
+    return void 0;
   }
-  if ((_c = globalThis.astroImage) == null ? void 0 : _c.addStaticImage) {
-    src = globalThis.astroImage.addStaticImage(resolved);
+  if (typeof aspectRatio === "number") {
+    return aspectRatio;
   }
-  return {
-    ...attributes,
-    src
-  };
+  const [width, height] = aspectRatio.split(":");
+  return parseInt(width, 10) / parseInt(height, 10);
 }
-
 async function resolveAspectRatio({ src, aspectRatio }) {
   if (typeof src === "string") {
     return parseAspectRatio(aspectRatio);
-  } else {
-    const metadata = "then" in src ? (await src).default : src;
-    return parseAspectRatio(aspectRatio) || metadata.width / metadata.height;
   }
+  throw new Error('Custom (faster) `Picture.ssr.astro` works only with string ("remote") src');
 }
 async function resolveFormats({ src, formats }) {
   const unique = new Set(formats);
   if (typeof src === "string") {
     unique.add(extname(src).replace(".", ""));
   } else {
-    const metadata = "then" in src ? (await src).default : src;
-    unique.add(extname(metadata.src).replace(".", ""));
+    throw new Error("Custom `Picture.ssr.astro` works only with string src");
   }
   return Array.from(unique).filter(Boolean);
 }
-async function getPicture(params) {
-  const { src, alt, widths, fit, position, background } = params;
+async function getBuiltPicture(params) {
+  const {
+    src,
+    alt,
+    widths,
+    fit,
+    position,
+    background
+  } = params;
   if (!src) {
     throw new Error("[@astrojs/image] `src` is required");
   }
@@ -833,8 +679,7 @@ async function getPicture(params) {
   async function getSource(format) {
     const imgs = await Promise.all(
       widths.map(async (width) => {
-        var _a;
-        const img = await getImage({
+        const img = await getBuiltImage({
           src,
           alt,
           format,
@@ -847,7 +692,7 @@ async function getPicture(params) {
         if (format === lastFormat && width === maxWidth) {
           image = img;
         }
-        return `${(_a = img.src) == null ? void 0 : _a.replaceAll(" ", encodeURI)} ${width}w`;
+        return `${img.src} ${width}w`;
       })
     );
     return {
@@ -858,7 +703,7 @@ async function getPicture(params) {
   const sources = await Promise.all(allFormats.map((format) => getSource(format)));
   return {
     sources,
-    // @ts-expect-error image will always be defined
+    // @ts-ignore
     image
   };
 }
@@ -1004,22 +849,31 @@ const useSSRPicture = async (params) => {
   };
 };
 
-const $$Astro$7 = createAstro("https://ecom2-demo.web.app");
+const $$Astro$e = createAstro("https://ecom2-demo.web.app");
 const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$7, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$e, $$props, $$slots);
   Astro2.self = $$Picture;
-  const deployRand = ({}).DEPLOY_RAND;
-  const versionSuffix = ({}).BUILD_OUTPUT !== "static" && deployRand ? `&V=${deployRand}` : "";
-  const getImageFilepath = (src) => {
-    return resolve(process.env.STOREFRONT_BASE_DIR, `public${src}`);
-  };
+  const { STOREFRONT_BASE_DIR } = process.env;
+  const baseDir = STOREFRONT_BASE_DIR || process.cwd();
+  const originalImages = [];
+  const manifestFilepath = join(baseDir, "dist/server/images.src.csv");
+  readFileSync(manifestFilepath, "utf-8").split(/\n/).forEach((line) => {
+    const [filepath, width, height] = line.split(",");
+    originalImages.push({
+      filepath,
+      width: Number(width),
+      height: Number(height)
+    });
+  });
   const tryImageSize = (src) => {
     let dimensions = {};
     if (typeof src === "string" && src.startsWith("/")) {
-      try {
-        dimensions = sizeOf(getImageFilepath(src));
-      } catch (e) {
-        dimensions = {};
+      const originalImage = originalImages.find(({ filepath }) => {
+        return new RegExp(`^/${filepath}\\??.*`).test(src);
+      });
+      if (originalImage) {
+        const { width, height } = originalImage;
+        dimensions = { width, height };
       }
     }
     return dimensions;
@@ -1032,77 +886,49 @@ const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
   } = await useSSRPicture({
     ...Astro2.props,
     tryImageSize,
-    getPicture
+    getPicture: getBuiltPicture
   });
-  if (imgAttrs) {
-    imgAttrs.src += versionSuffix;
-  }
-  return renderTemplate`${maybeRenderHead()}<picture${spreadAttributes(pictureAttrs)}>
-  ${sources.map((attrs) => {
-    if (versionSuffix) {
-      attrs.srcset = attrs.srcset.replace(/\s(\w+)$/, `${versionSuffix} $1`);
-    }
-    return renderTemplate`<source${spreadAttributes(attrs)}${addAttribute(sizes, "sizes")}>`;
-  })}
-  ${imgAttrs && renderTemplate`<img${spreadAttributes(imgAttrs)}>`}
-</picture>`;
-}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/Picture.astro", void 0);
+  return renderTemplate`${maybeRenderHead()}<picture${spreadAttributes(pictureAttrs)}>${sources.map((attrs) => renderTemplate`<source${spreadAttributes(attrs)}${addAttribute(sizes, "sizes")}>`)}${imgAttrs && renderTemplate`<img${spreadAttributes(imgAttrs)}>`}</picture>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/images/Picture.runtime.astro", void 0);
 
-const $$Astro$6 = createAstro("https://ecom2-demo.web.app");
+var __freeze$3 = Object.freeze;
+var __defProp$3 = Object.defineProperty;
+var __template$3 = (cooked, raw) => __freeze$3(__defProp$3(cooked, "raw", { value: __freeze$3(raw || cooked.slice()) }));
+var _a$3;
+const $$Astro$d = createAstro("https://ecom2-demo.web.app");
 const $$BaseBody = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$6, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$d, $$props, $$slots);
   Astro2.self = $$BaseBody;
   const { settings } = Astro2.locals.routeContext;
-  return renderTemplate`${maybeRenderHead()}<body>
-  <div id="teleported-overlap" class="relative z-[59]"></div>
-  <div id="teleported-top" class="relative z-[19]"></div>
-  ${renderSlot($$result, $$slots["default"])}
-  ${renderSlot($$result, $$slots["before-body-end"])}
-  <div id="teleported-bottom" class="relative z-[19]"></div>
-  ${settings.icon && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": settings.icon, "alt": "Icon", "formats": ["png"], "widths": [32, 192, 512], "sizes": "32px", "class": "hidden absolute", "style": "bottom: -1000px", "hasImg": false })}`}
-</body>`;
+  const { contextInlineClientJS } = Astro2.locals;
+  return renderTemplate`${maybeRenderHead()}<body style="visibility:hidden" class="!visible"><!-- Prevent FOUC -->${contextInlineClientJS && renderTemplate(_a$3 || (_a$3 = __template$3(["<script>", "<\/script>"])), unescapeHTML(contextInlineClientJS))}<div id="teleported-overlap" class="relative z-[59]"></div><div id="teleported-top" class="relative z-[19]"></div>${renderSlot($$result, $$slots["default"])}${renderSlot($$result, $$slots["before-body-end"])}<div id="teleported-bottom" class="relative z-[19]"></div>${settings.icon && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": settings.icon, "alt": "Icon", "formats": ["png"], "widths": [32, 192, 512], "sizes": "32px", "class": "hidden absolute", "style": "bottom: -1000px", "hasImg": false })}`}</body>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseBody.astro", void 0);
 
-const $$Astro$5 = createAstro("https://ecom2-demo.web.app");
+const $$Astro$c = createAstro("https://ecom2-demo.web.app");
 const $$Base$1 = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$5, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$c, $$props, $$slots);
   Astro2.self = $$Base$1;
   const { getContent } = Astro2.locals.routeContext;
   const { custom_code: customCodeContent } = await getContent("layout");
-  return renderTemplate`${renderComponent($$result, "Head", Head, {}, { "default": ($$result2) => renderTemplate`
-  ${renderSlot($$result2, $$slots["base-head"])}
-  ${customCodeContent?.css && renderTemplate`<style>{customCodeContent.css}</style>`}${customCodeContent?.html_head && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(customCodeContent.html_head)}` })}`}${renderSlot($$result2, $$slots["base-head-scripts"])}
-  ${renderSlot($$result2, $$slots["before-head-end"])}
-` })}
-${renderComponent($$result, "BaseBody", $$BaseBody, {}, { "default": ($$result2) => renderTemplate`
-  ${renderSlot($$result2, $$slots["default"])}
-  ${customCodeContent?.html_body && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(customCodeContent.html_body)}` })}`}${renderSlot($$result2, $$slots["base-body-scripts"])}
-  ${renderSlot($$result2, $$slots["before-body-end"])}
-` })}`;
+  return renderTemplate`${renderComponent($$result, "Head", Head, {}, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["base-head"])}${customCodeContent?.css && renderTemplate`<style>{customCodeContent.css}</style>`}${customCodeContent?.html_head && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(customCodeContent.html_head)}` })}`}${renderSlot($$result2, $$slots["base-head-scripts"])}${renderSlot($$result2, $$slots["before-head-end"])}` })}${renderComponent($$result, "BaseBody", $$BaseBody, {}, { "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["default"])}${customCodeContent?.html_body && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(customCodeContent.html_body)}` })}`}${renderSlot($$result2, $$slots["base-body-scripts"])}${renderSlot($$result2, $$slots["before-body-end"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/Base.astro", void 0);
 
-var __freeze$1 = Object.freeze;
-var __defProp$1 = Object.defineProperty;
-var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", { value: __freeze$1(raw || cooked.slice()) }));
-var _a$1;
-const $$Astro$4 = createAstro("https://ecom2-demo.web.app");
+var __freeze$2 = Object.freeze;
+var __defProp$2 = Object.defineProperty;
+var __template$2 = (cooked, raw) => __freeze$2(__defProp$2(cooked, "raw", { value: __freeze$2(raw || cooked.slice()) }));
+var _a$2;
+const $$Astro$b = createAstro("https://ecom2-demo.web.app");
 const $$InlineScripts = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$b, $$props, $$slots);
   Astro2.self = $$InlineScripts;
-  return renderTemplate(_a$1 || (_a$1 = __template$1(['<script>\n  window.$firebaseConfig = {\n    apiKey: "AIzaSyCnvm7QrPKzSBrUi09Z3zTgjDST0t4Yikg",\n    authDomain: "ecom2-demo.firebaseapp.com",\n    projectId: "ecom2-demo",\n    storageBucket: "ecom2-demo.appspot.com",\n    messagingSenderId: "70369627313",\n    appId: "1:70369627313:web:06634033b9c6208fe7e690"\n  };\n<\/script>'])));
+  return renderTemplate(_a$2 || (_a$2 = __template$2(['<script>\n  window.$firebaseConfig = {\n    apiKey: "AIzaSyCnvm7QrPKzSBrUi09Z3zTgjDST0t4Yikg",\n    authDomain: "ecom2-demo.firebaseapp.com",\n    projectId: "ecom2-demo",\n    storageBucket: "ecom2-demo.appspot.com",\n    messagingSenderId: "70369627313",\n    appId: "1:70369627313:web:06634033b9c6208fe7e690"\n  };\n<\/script>'])));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/scripts/InlineScripts.astro", void 0);
 
-const $$Astro$3 = createAstro("https://ecom2-demo.web.app");
+const $$Astro$a = createAstro("https://ecom2-demo.web.app");
 const $$Base = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$3, $$props, $$slots);
+  const Astro2 = $$result.createAstro($$Astro$a, $$props, $$slots);
   Astro2.self = $$Base;
-  return renderTemplate`${renderComponent($$result, "SfBase", $$Base$1, {}, { "base-head": ($$result2) => renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "slot": "base-head" }, { "default": ($$result3) => renderTemplate`
-    ${renderSlot($$result3, $$slots["base-head"])}
-  ` })}`, "before-head-end": ($$result2) => renderTemplate`${renderComponent($$result2, "InlineScripts", $$InlineScripts, { "slot": "before-head-end" })}`, "default": ($$result2) => renderTemplate`
-  
-  
-  ${renderSlot($$result2, $$slots["default"])}
-` })}`;
+  return renderTemplate`${renderComponent($$result, "SfBase", $$Base$1, {}, { "base-head": ($$result2) => renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "slot": "base-head" }, { "default": ($$result3) => renderTemplate`${renderSlot($$result3, $$slots["base-head"])}` })}`, "before-head-end": ($$result2) => renderTemplate`${renderComponent($$result2, "InlineScripts", $$InlineScripts, { "slot": "before-head-end" })}`, "default": ($$result2) => renderTemplate`${renderSlot($$result2, $$slots["default"])}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Base.astro", void 0);
 
 const checkObjNotNull = (obj) => {
@@ -1268,7 +1094,7 @@ const usePageHeader = async ({ routeContext, listedCategoryFields }) => {
   const { header: headerContent } = layoutContent;
   const pitchBar = parseLayoutContent(layoutContent);
   let { categories } = apiState;
-  if (!categories) {
+  if (!categories && listedCategoryFields !== null) {
     try {
       categories = (await api.get("categories", {
         fields: listedCategoryFields || [
@@ -1299,7 +1125,7 @@ const usePageHeader = async ({ routeContext, listedCategoryFields }) => {
 };
 
 const emitter = new EventEmitter();
-const useSharedData = async ({ field, value }) => {
+const useSharedData = async ({ field, value, timeout = 1e3 }) => {
   const $data = global.$storefront.data;
   if (value) {
     $data[field] = value;
@@ -1308,7 +1134,16 @@ const useSharedData = async ({ field, value }) => {
     value = $data[field];
   } else {
     value = await new Promise((resolve) => {
-      emitter.once(field, resolve);
+      const callback = (_value) => {
+        resolve(_value);
+        clearTimeout(timer);
+      };
+      const abort = () => {
+        resolve(null);
+        emitter.removeListener(field, callback);
+      };
+      const timer = setTimeout(abort, timeout);
+      emitter.once(field, callback);
     });
   }
   return {
@@ -1318,7 +1153,7 @@ window.$storefront.data['${field}'] = ${JSON.stringify(value)};`
   };
 };
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "CarouselControl",
   props: {
     isPrev: { type: Boolean, default: false }
@@ -1331,7 +1166,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$i(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<button${ssrRenderAttrs(mergeProps({
     type: "button",
     "aria-label": !$props.isPrev ? "Pr\xF3ximo" : "Anterior",
@@ -1343,16 +1178,16 @@ function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</button>`);
 }
-const _sfc_setup$c = _sfc_main$c.setup;
-_sfc_main$c.setup = (props, ctx) => {
+const _sfc_setup$i = _sfc_main$i.setup;
+_sfc_main$i.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/CarouselControl.vue");
-  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
+  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
 };
-const CarouselControl = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
+const CarouselControl = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["ssrRender", _sfc_ssrRender$i]]);
 
 const carouselKey = Symbol("carousel");
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Carousel",
   props: {
     as: { default: "ul" },
@@ -1513,7 +1348,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<div${ssrRenderAttrs(mergeProps({
     ref: "carousel",
     class: "relative",
@@ -1570,15 +1405,15 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</div>`);
 }
-const _sfc_setup$b = _sfc_main$b.setup;
-_sfc_main$b.setup = (props, ctx) => {
+const _sfc_setup$h = _sfc_main$h.setup;
+_sfc_main$h.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Carousel.vue");
-  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
+  return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
 };
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["ssrRender", _sfc_ssrRender$h]]);
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PitchBar",
   props: {
     slides: {}
@@ -1595,7 +1430,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$g(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
   _push(`<div${ssrRenderAttrs(mergeProps({ class: "bg-base-100 relative z-20" }, _attrs))}><div class="container md:w-2/3 mx-auto px-3 py-1">`);
   _push(ssrRenderComponent($setup["Carousel"], {
@@ -1686,13 +1521,13 @@ function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div></div>`);
 }
-const _sfc_setup$a = _sfc_main$a.setup;
-_sfc_main$a.setup = (props, ctx) => {
+const _sfc_setup$g = _sfc_main$g.setup;
+_sfc_main$g.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/PitchBar.vue");
-  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
+  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
 };
-const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
+const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["ssrRender", _sfc_ssrRender$g]]);
 
 const useStorage = (key, initialValue, storage = globalThis.localStorage) => {
   if (!storage) {
@@ -2002,7 +1837,7 @@ const useShopHeader = (props) => {
   };
 };
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -2069,7 +1904,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$f(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   _push(ssrRenderComponent(_component_Fade, mergeProps({
     slide: $setup.slideTo,
@@ -2081,7 +1916,7 @@ function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         if ($props.modelValue) {
           _push2(`<dialog class="${ssrRenderClass([[
             $props.position,
-            $setup.isFixed ? `top-0 ${$setup.isPlacementX ? "h-screen" : ""}` : null,
+            $setup.isFixed ? `top-0 ${$setup.isPlacementX ? "h-screen" : "max-h-screen"}` : null,
             $setup.isFixed && $props.placement !== "end" ? "left-0" : null,
             $setup.isFixed && $props.placement === "end" ? "left-auto right-0" : null,
             $setup.isPlacementX ? "max-w-sm" : null
@@ -2132,7 +1967,7 @@ function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             ref: "drawer",
             class: ["w-screen shadow p-0 m-0 z-50", [
               $props.position,
-              $setup.isFixed ? `top-0 ${$setup.isPlacementX ? "h-screen" : ""}` : null,
+              $setup.isFixed ? `top-0 ${$setup.isPlacementX ? "h-screen" : "max-h-screen"}` : null,
               $setup.isFixed && $props.placement !== "end" ? "left-0" : null,
               $setup.isFixed && $props.placement === "end" ? "left-auto right-0" : null,
               $setup.isPlacementX ? "max-w-sm" : null
@@ -2177,13 +2012,13 @@ function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$9 = _sfc_main$9.setup;
-_sfc_main$9.setup = (props, ctx) => {
+const _sfc_setup$f = _sfc_main$f.setup;
+_sfc_main$f.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Drawer.vue");
-  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
+  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
 };
-const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["ssrRender", _sfc_ssrRender$f]]);
 
 const storageKey = "ecomSession";
 const emptySession = {
@@ -2222,7 +2057,7 @@ const initializeFirebaseAuth = (canWaitIdle = !window.location.pathname.startsWi
   return;
 };
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "AccountLink",
   props: {
     to: {},
@@ -2257,20 +2092,20 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$e(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<a${ssrRenderAttrs(mergeProps({ href: $setup.href }, _attrs))}>`);
   ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
   _push(`</a>`);
 }
-const _sfc_setup$8 = _sfc_main$8.setup;
-_sfc_main$8.setup = (props, ctx) => {
+const _sfc_setup$e = _sfc_main$e.setup;
+_sfc_main$e.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/AccountLink.vue");
-  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
+  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
 };
-const AccountLink = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
+const AccountLink = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["ssrRender", _sfc_ssrRender$e]]);
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkIcon",
   props: {
     as: { default: "i" },
@@ -2306,18 +2141,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$d(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), mergeProps({ class: $setup.iconClassName }, _attrs), null), _parent);
 }
-const _sfc_setup$7 = _sfc_main$7.setup;
-_sfc_main$7.setup = (props, ctx) => {
+const _sfc_setup$d = _sfc_main$d.setup;
+_sfc_main$d.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/SocialNetworkIcon.vue");
-  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
+  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
 };
-const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
+const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["ssrRender", _sfc_ssrRender$d]]);
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkLink",
   props: {
     network: {},
@@ -2343,7 +2178,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
   _push(ssrRenderComponent(_component_ALink, mergeProps({ href: $setup.fixedHref }, _attrs), {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
@@ -2364,15 +2199,15 @@ function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$6 = _sfc_main$6.setup;
-_sfc_main$6.setup = (props, ctx) => {
+const _sfc_setup$c = _sfc_main$c.setup;
+_sfc_main$c.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/SocialNetworkLink.vue");
-  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
+  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
 };
-const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
+const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenavCategory",
   props: {
     categoryTree: {}
@@ -2395,7 +2230,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_AImg = resolveComponent("AImg");
   const _component_ShopSidenavCategory = resolveComponent("ShopSidenavCategory", true);
   _push(`<li${ssrRenderAttrs(mergeProps({ class: "text-lg text-base-800" }, _attrs))}>`);
@@ -2433,15 +2268,15 @@ function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</li>`);
 }
-const _sfc_setup$5 = _sfc_main$5.setup;
-_sfc_main$5.setup = (props, ctx) => {
+const _sfc_setup$b = _sfc_main$b.setup;
+_sfc_main$b.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenavCategory.vue");
-  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
 };
-const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
+const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
 
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenav",
   props: {
     categoryTrees: {}
@@ -2462,7 +2297,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<aside${ssrRenderAttrs(mergeProps({ class: "flex flex-col h-full" }, _attrs))}><nav class="py-4 grow"><ul class="relative h-full"><!--[-->`);
   ssrRenderList($props.categoryTrees, (categoryTree, i) => {
     _push(ssrRenderComponent($setup["ShopSidenavCategory"], {
@@ -2503,13 +2338,13 @@ function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></footer></aside>`);
 }
-const _sfc_setup$4 = _sfc_main$4.setup;
-_sfc_main$4.setup = (props, ctx) => {
+const _sfc_setup$a = _sfc_main$a.setup;
+_sfc_main$a.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenav.vue");
-  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
 };
-const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
 
 const useShopHeaderSubmenu = (props) => {
   const categoryPicture = computed(() => {
@@ -2558,7 +2393,7 @@ const useShopHeaderSubmenu = (props) => {
   };
 };
 
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "ShopHeaderSubmenu",
   props: {
     categoryTree: {},
@@ -2573,7 +2408,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       subcategoryCols,
       countMenuCols
     } = useShopHeaderSubmenu(props);
-    const __returned__ = { props, categoryPicture, subcategoryLinks, subcategoryCols, countMenuCols, get Popover() {
+    const panel = ref(null);
+    const close = ref(null);
+    onClickOutside(panel, () => close.value?.click());
+    const __returned__ = { props, categoryPicture, subcategoryLinks, subcategoryCols, countMenuCols, panel, close, get Popover() {
       return Popover;
     }, get PopoverButton() {
       return PopoverButton;
@@ -2584,7 +2422,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   const _component_AImg = resolveComponent("AImg");
   _push(ssrRenderComponent($setup["Popover"], _attrs, {
@@ -2607,9 +2445,9 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           default: withCtx((_, _push3, _parent3, _scopeId2) => {
             if (_push3) {
               _push3(ssrRenderComponent($setup["PopoverPanel"], {
-                class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded backdrop-blur-md shadow bg-white/80 text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
+                class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded shadow bg-white text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
               }, {
-                default: withCtx((_2, _push4, _parent4, _scopeId3) => {
+                default: withCtx(({ close }, _push4, _parent4, _scopeId3) => {
                   if (_push4) {
                     _push4(`<div class="flex gap-6 w-full"${_scopeId3}>`);
                     if ($setup.subcategoryLinks.length) {
@@ -2640,7 +2478,7 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                     } else {
                       _push4(`<!---->`);
                     }
-                    _push4(`</div><a${ssrRenderAttr("href", `/${$props.categoryTree.slug}`)} class="block mt-1 text-xs text-base-600 leading-snug underline"${_scopeId3}>${ssrInterpolate("Ver toda a categoria $1".replace("$1", $props.categoryTree.name))}</a>`);
+                    _push4(`</div><a${ssrRenderAttr("href", `/${$props.categoryTree.slug}`)} class="block mt-1 text-xs text-base-600 leading-snug underline"${_scopeId3}>${ssrInterpolate("Ver toda a categoria $1".replace("$1", $props.categoryTree.name))}</a><button class="hidden"${_scopeId3}></button>`);
                   } else {
                     return [
                       createVNode("div", { class: "flex gap-6 w-full" }, [
@@ -2703,7 +2541,12 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                       createVNode("a", {
                         href: `/${$props.categoryTree.slug}`,
                         class: "block mt-1 text-xs text-base-600 leading-snug underline"
-                      }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"])
+                      }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"]),
+                      createVNode("button", {
+                        ref: "close",
+                        onClick: withModifiers(close, ["stop"]),
+                        class: "hidden"
+                      }, null, 8, ["onClick"])
                     ];
                   }
                 }),
@@ -2712,9 +2555,9 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             } else {
               return [
                 createVNode($setup["PopoverPanel"], {
-                  class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded backdrop-blur-md shadow bg-white/80 text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
+                  class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded shadow bg-white text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
                 }, {
-                  default: withCtx(() => [
+                  default: withCtx(({ close }) => [
                     createVNode("div", { class: "flex gap-6 w-full" }, [
                       $setup.subcategoryLinks.length ? (openBlock(), createBlock("ul", {
                         key: 0,
@@ -2775,7 +2618,12 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                     createVNode("a", {
                       href: `/${$props.categoryTree.slug}`,
                       class: "block mt-1 text-xs text-base-600 leading-snug underline"
-                    }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"])
+                    }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"]),
+                    createVNode("button", {
+                      ref: "close",
+                      onClick: withModifiers(close, ["stop"]),
+                      class: "hidden"
+                    }, null, 8, ["onClick"])
                   ]),
                   _: 1
                 }, 8, ["class"])
@@ -2793,13 +2641,16 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             ]),
             _: 2
           }, 1024),
-          createVNode("div", { class: "relative" }, [
+          createVNode("div", {
+            class: "relative",
+            ref: "panel"
+          }, [
             createVNode(_component_Fade, null, {
               default: withCtx(() => [
                 createVNode($setup["PopoverPanel"], {
-                  class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded backdrop-blur-md shadow bg-white/80 text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
+                  class: ["absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform px-6 py-4 rounded shadow bg-white text-base text-base-700", $setup.countMenuCols === 1 ? "w-60" : $setup.countMenuCols === 2 ? `w-screen ${$setup.categoryPicture ? "max-w-lg" : "max-w-sm"}` : $setup.countMenuCols === 3 ? `w-screen ${$setup.categoryPicture ? "max-w-xl" : "max-w-md"}` : $setup.countMenuCols < 6 ? "w-screen max-w-3xl" : "w-screen max-w-5xl"]
                 }, {
-                  default: withCtx(() => [
+                  default: withCtx(({ close }) => [
                     createVNode("div", { class: "flex gap-6 w-full" }, [
                       $setup.subcategoryLinks.length ? (openBlock(), createBlock("ul", {
                         key: 0,
@@ -2860,29 +2711,34 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                     createVNode("a", {
                       href: `/${$props.categoryTree.slug}`,
                       class: "block mt-1 text-xs text-base-600 leading-snug underline"
-                    }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"])
+                    }, toDisplayString("Ver toda a categoria $1".replace("$1", $props.categoryTree.name)), 9, ["href"]),
+                    createVNode("button", {
+                      ref: "close",
+                      onClick: withModifiers(close, ["stop"]),
+                      class: "hidden"
+                    }, null, 8, ["onClick"])
                   ]),
                   _: 1
                 }, 8, ["class"])
               ]),
               _: 1
             })
-          ])
+          ], 512)
         ];
       }
     }),
     _: 3
   }, _parent));
 }
-const _sfc_setup$3 = _sfc_main$3.setup;
-_sfc_main$3.setup = (props, ctx) => {
+const _sfc_setup$9 = _sfc_main$9.setup;
+_sfc_main$9.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeaderSubmenu.vue");
-  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
+  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
 };
-const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
+const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
 
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ShopHeaderMenu",
   props: {
     inlineMenuTrees: {}
@@ -2898,7 +2754,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<nav${ssrRenderAttrs(_attrs)}><ul class="${ssrRenderClass([$props.inlineMenuTrees.length < 7 ? "text-base" : "text-sm", "flex gap-4 xl:gap-5 text-base-700"])}"><!--[-->`);
   ssrRenderList($props.inlineMenuTrees, (categoryTree, i) => {
     _push(`<li>`);
@@ -2942,15 +2798,15 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></nav>`);
 }
-const _sfc_setup$2 = _sfc_main$2.setup;
-_sfc_main$2.setup = (props, ctx) => {
+const _sfc_setup$8 = _sfc_main$8.setup;
+_sfc_main$8.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeaderMenu.vue");
-  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
 };
-const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
+const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
 
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "AccountMenu",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -2977,7 +2833,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   const _component_ALink = resolveComponent("ALink");
   _push(ssrRenderComponent($setup["Menu"], mergeProps({
@@ -3569,15 +3425,15 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$1 = _sfc_main$1.setup;
-_sfc_main$1.setup = (props, ctx) => {
+const _sfc_setup$7 = _sfc_main$7.setup;
+_sfc_main$7.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/AccountMenu.vue");
-  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
 };
-const AccountMenu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
+const AccountMenu = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
 
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "ShopHeader",
   props: {
     categories: {},
@@ -3588,8 +3444,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     __expose();
     const props = __props;
-    const SearchModal = defineAsyncComponent(() => import('../SearchModal.5f5e6a15.mjs'));
-    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar.41b20543.mjs'));
+    const SearchModal = defineAsyncComponent(() => import('../SearchModal.146ce2f7.mjs'));
+    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar.4179ad81.mjs'));
     const header = ref(null);
     const {
       isSticky,
@@ -3628,7 +3484,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Skeleton = resolveComponent("Skeleton");
   _push(`<header${ssrRenderAttrs(mergeProps({
     ref: "header",
@@ -3667,7 +3523,10 @@ function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $op
     "has-close-button": false,
     position: "absolute",
     class: $setup.isSticky ? "mt-2 md:mt-3" : "mt-3 sm:mt-4 md:mt-5",
-    style: { height: `calc(100vh - ${$setup.positionY}px + .5rem)` }
+    style: {
+      height: `calc(100vh - ${$setup.positionY}px + .5rem)`,
+      maxHeight: `calc(100dvh - ${$setup.positionY}px + .5rem)`
+    }
   }, {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -3783,21 +3642,21 @@ function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $op
   }
   _push(`</header>`);
 }
-const _sfc_setup = _sfc_main.setup;
-_sfc_main.setup = (props, ctx) => {
+const _sfc_setup$6 = _sfc_main$6.setup;
+_sfc_main$6.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeader.vue");
-  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
 };
-const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
 
-var __freeze = Object.freeze;
-var __defProp = Object.defineProperty;
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
-var _a;
-const $$Astro$2 = createAstro("https://ecom2-demo.web.app");
-const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$2, $$props, $$slots);
+var __freeze$1 = Object.freeze;
+var __defProp$1 = Object.defineProperty;
+var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", { value: __freeze$1(raw || cooked.slice()) }));
+var _a$1;
+const $$Astro$9 = createAstro("https://ecom2-demo.web.app");
+const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$9, $$props, $$slots);
   Astro2.self = $$PageHeader;
   const { routeContext } = Astro2.locals;
   const { settings, isHomepage } = routeContext;
@@ -3810,29 +3669,1563 @@ const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
     field: "categories",
     value: categories?.map(({ _id, ...c }) => c)
   });
-  return renderTemplate`${renderSlot($$result, $$slots["pitch-bar"], renderTemplate(_a || (_a = __template(["\n  ", "\n  ", "\n\n<script>", "<\/script>\n", ""])), pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`, pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar })}`, unescapeHTML(inlineClientJS), renderComponent($$result, "ShopHeader", ShopHeader, { ...shopHeader, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/ShopHeader.vue", "client:component-export": "default" }, { "logo": ($$result2) => renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "slot": "logo" }, { "default": ($$result3) => renderTemplate`
-    ${maybeRenderHead()}<a href="/">
-      ${renderComponent($$result3, "LogoHeading", LogoHeading, {}, { "default": ($$result4) => renderTemplate`
-        ${renderComponent($$result4, "Picture", $$Picture, { "src": settings.logo, "alt": settings.name, "widths": [300], "fetchpriority": "high", "loading": "eager", "class": "hover:drop-shadow-sm max-w-[150px] mx-auto" })}
-      ` })}
-    </a>
-  ` })}` })))}`;
+  return renderTemplate`${renderSlot($$result, $$slots["pitch-bar"], renderTemplate(_a$1 || (_a$1 = __template$1(["", "", "<script>", "<\/script>", ""])), pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`, pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar })}`, unescapeHTML(inlineClientJS), renderComponent($$result, "ShopHeader", ShopHeader, { ...shopHeader, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/ShopHeader.vue", "client:component-export": "default" }, { "logo": ($$result2) => renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "slot": "logo" }, { "default": ($$result3) => renderTemplate`${maybeRenderHead()}<a href="/">${renderComponent($$result3, "LogoHeading", LogoHeading, {}, { "default": ($$result4) => renderTemplate`${renderComponent($$result4, "Picture", $$Picture, { "src": settings.logo, "alt": settings.name, "widths": [300], "fetchpriority": "high", "loading": "eager", "class": "hover:drop-shadow-sm max-w-[150px] mx-auto" })}` })}</a>` })}` })))}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/PageHeader.astro", void 0);
 
-const $$Astro$1 = createAstro("https://ecom2-demo.web.app");
-const $$Wildcard = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$1, $$props, $$slots);
-  Astro2.self = $$Wildcard;
-  const { fetchingApiContext, apiContext } = Astro2.locals.routeContext;
-  await fetchingApiContext;
-  const apiDoc = apiContext.doc;
-  return renderTemplate`${maybeRenderHead()}<main>
-  ${apiDoc && renderTemplate`<h1>Hello <span class="text-gradient">${apiDoc.name}</span></h1><hr><div class="mt-3">
-      <mark>${apiDoc._id}</mark> from <i>${apiContext.resource}</i>
-      <p>${Math.random()}</p>
-      <em>Lorem ipsum dolor sit amet</em>
-    </div>`}
-</main>`;
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "PaymentMethodFlag",
+  props: {
+    as: { default: "i" },
+    flag: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const iconClassName = computed(() => {
+      switch (props.flag) {
+        case "pix":
+          return "i-pix text-[#77B6A8]";
+        case "visa":
+          return "i-visa";
+        case "mastercard":
+          return "i-mastercard";
+        case "elo":
+          return "i-elo";
+        case "amex":
+          return "i-amex";
+        case "hipercard":
+          return "i-hipercard";
+        case "diners":
+          return "i-dinersclub";
+        case "discover":
+          return "i-discover";
+        default:
+          return "";
+      }
+    });
+    const __returned__ = { props, iconClassName };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  if (!$setup.iconClassName) {
+    _push(`<b${ssrRenderAttrs(mergeProps({ class: "tracking-tighter leading-none mb-1 text-black text-[57%]" }, _attrs))}>${ssrInterpolate($setup.props.flag)}</b>`);
+  } else {
+    ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), mergeProps({ class: $setup.iconClassName }, _attrs), null), _parent);
+  }
+}
+const _sfc_setup$5 = _sfc_main$5.setup;
+_sfc_main$5.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/PaymentMethodFlag.vue");
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+};
+const PaymentMethodFlag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
+
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "ShopFooter",
+  props: {
+    stamps: {},
+    categories: {},
+    categoriesColTitle: {},
+    pageLinks: {},
+    pagesColTitle: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { get socialNetworks() {
+      return socialNetworks;
+    }, SocialNetworkLink, PaymentMethodFlag };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ALink = resolveComponent("ALink");
+  _push(`<footer${ssrRenderAttrs(mergeProps({ class: "w-screen bg-base-50 border-t border-base-100 py-2" }, _attrs))}><div class="ui-section"><div class="pb-7 border-b border-base-200 flex justify-between flex-wrap lg:flex-nowrap sm:gap-x-10 gap-y-5"><div class="shrink">`);
+  ssrRenderSlot(_ctx.$slots, "logo", {}, null, _push, _parent);
+  if (_ctx.$settings.description) {
+    _push(`<div class="prose"><p>${ssrInterpolate(_ctx.$settings.description)}</p></div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`<div class="flex gap-2 text-base-500"><!--[-->`);
+  ssrRenderList($setup.socialNetworks, (href, network) => {
+    _push(`<span>`);
+    _push(ssrRenderComponent($setup["SocialNetworkLink"], {
+      network,
+      class: "p-1 hover:text-primary"
+    }, createSlots({ _: 2 }, [
+      network === "whatsapp" ? {
+        name: "append",
+        fn: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<span class="ml-1 text-sm text-base-600"${_scopeId}>${ssrInterpolate(_ctx.$settings.whatsapp)}</span>`);
+          } else {
+            return [
+              createVNode("span", { class: "ml-1 text-sm text-base-600" }, toDisplayString(_ctx.$settings.whatsapp), 1)
+            ];
+          }
+        }),
+        key: "0"
+      } : void 0
+    ]), _parent));
+    _push(`</span>`);
+  });
+  _push(`<!--]--></div>`);
+  if (_ctx.$settings.address || _ctx.$settings.phone) {
+    _push(`<div class="mt-3 text-base-700">`);
+    if (_ctx.$settings.address) {
+      _push(`<address class="inline-block mr-4">${ssrInterpolate(_ctx.$settings.address)}</address>`);
+    } else {
+      _push(`<!---->`);
+    }
+    if (_ctx.$settings.phone) {
+      _push(ssrRenderComponent(_component_ALink, {
+        href: `tel:${_ctx.$settings.phone.replace(/\D/g, "")}`,
+        class: "hover:text-primary"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<i class="i-phone mr-0.5"${_scopeId}></i> ${ssrInterpolate(_ctx.$settings.phone)}`);
+          } else {
+            return [
+              createVNode("i", { class: "i-phone mr-0.5" }),
+              createTextVNode(" " + toDisplayString(_ctx.$settings.phone), 1)
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div>`);
+  if ($props.categories?.length) {
+    _push(`<div class="basis-1/2 sm:basis-auto"><div class="text-lg font-medium mb-2.5">${ssrInterpolate($props.categoriesColTitle || "Categorias")}</div><ul class="${ssrRenderClass([$props.categories.length > 4 ? "grid md:grid-cols-2 gap-x-5 gap-y-1.5" : "space-y-1.5", "text-sm"])}"><!--[-->`);
+    ssrRenderList($props.categories, ({ name, slug }, i) => {
+      _push(`<li>`);
+      _push(ssrRenderComponent(_component_ALink, {
+        href: `/${slug}`,
+        class: "ui-link text-base-600"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate(name)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString(name), 1)
+            ];
+          }
+        }),
+        _: 2
+      }, _parent));
+      _push(`</li>`);
+    });
+    _push(`<!--]--><li>`);
+    _push(ssrRenderComponent(_component_ALink, {
+      href: "/s",
+      class: "ui-link text-base-900"
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(`${ssrInterpolate("Todos os produtos")}`);
+        } else {
+          return [
+            createTextVNode(toDisplayString("Todos os produtos"))
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+    _push(`</li></ul></div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  if ($props.pageLinks?.length) {
+    _push(`<div class="basis-1/2 sm:basis-auto"><div class="text-lg font-medium mb-2.5">${ssrInterpolate($props.pagesColTitle || "Institucional")}</div><ul class="${ssrRenderClass([$props.pageLinks.length > 5 ? "grid md:grid-cols-2 gap-x-5 gap-y-1.5" : "space-y-1.5", "text-sm"])}"><!--[-->`);
+    ssrRenderList($props.pageLinks, ({ title, href }, i) => {
+      _push(`<li>`);
+      _push(ssrRenderComponent(_component_ALink, {
+        href,
+        class: "ui-link text-base-600"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate(title)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString(title), 1)
+            ];
+          }
+        }),
+        _: 2
+      }, _parent));
+      _push(`</li>`);
+    });
+    _push(`<!--]--></ul></div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div></div><div class="ui-section"><div class="flex flex-wrap lg:flex-nowrap justify-between items-start gap-5"><ul class="flex gap-y-3 gap-x-6 lg:gap-x-8 items-center md:flex-wrap mx-auto md:mx-0 overflow-x-auto md:overflow-hidden"><!--[-->`);
+  ssrRenderList($props.stamps, (stamp, i) => {
+    _push(`<li>`);
+    _push(ssrRenderComponent(_component_ALink, {
+      href: stamp.href?.replace("{domain}", _ctx.$settings.domain || "")
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          ssrRenderSlot(_ctx.$slots, `picture-${i}`, {}, null, _push2, _parent2, _scopeId);
+          if (!stamp.img) {
+            _push2(`<span class="flex items-center"${_scopeId}>`);
+            if (stamp.icon) {
+              _push2(`<span class="text-4xl mr-2 [&amp;&gt;*]:bg-gradient-to-br [&amp;&gt;*]:from-success-200 [&amp;&gt;*]:to-success-700"${_scopeId}>`);
+              if (stamp.icon === "lock") {
+                _push2(`<i class="i-lock-closed"${_scopeId}></i>`);
+              } else if (stamp.icon === "check") {
+                _push2(`<i class="i-check-badge"${_scopeId}></i>`);
+              } else {
+                _push2(`<i class="i-arrow-path-rounded-square"${_scopeId}></i>`);
+              }
+              _push2(`</span>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`<span class="text-sm font-medium text-base-600 max-w-[140px]"${_scopeId}>${ssrInterpolate(stamp.alt)} `);
+            if (stamp.href && stamp.href.charAt(0) !== "/") {
+              _push2(`<i class="bg-base-400 ml-0.5 i-arrow-top-right-on-square"${_scopeId}></i>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`</span></span>`);
+          } else {
+            _push2(`<!---->`);
+          }
+        } else {
+          return [
+            renderSlot$1(_ctx.$slots, `picture-${i}`),
+            !stamp.img ? (openBlock(), createBlock("span", {
+              key: 0,
+              class: "flex items-center"
+            }, [
+              stamp.icon ? (openBlock(), createBlock("span", {
+                key: 0,
+                class: "text-4xl mr-2 [&>*]:bg-gradient-to-br [&>*]:from-success-200 [&>*]:to-success-700"
+              }, [
+                stamp.icon === "lock" ? (openBlock(), createBlock("i", {
+                  key: 0,
+                  class: "i-lock-closed"
+                })) : stamp.icon === "check" ? (openBlock(), createBlock("i", {
+                  key: 1,
+                  class: "i-check-badge"
+                })) : (openBlock(), createBlock("i", {
+                  key: 2,
+                  class: "i-arrow-path-rounded-square"
+                }))
+              ])) : createCommentVNode("", true),
+              createVNode("span", { class: "text-sm font-medium text-base-600 max-w-[140px]" }, [
+                createTextVNode(toDisplayString(stamp.alt) + " ", 1),
+                stamp.href && stamp.href.charAt(0) !== "/" ? (openBlock(), createBlock("i", {
+                  key: 0,
+                  class: "bg-base-400 ml-0.5 i-arrow-top-right-on-square"
+                })) : createCommentVNode("", true)
+              ])
+            ])) : createCommentVNode("", true)
+          ];
+        }
+      }),
+      _: 2
+    }, _parent));
+    _push(`</li>`);
+  });
+  _push(`<!--]--></ul><div class="flex flex-wrap md:flex-nowrap justify-end items-center gap-4 text-2xl mx-auto md:mx-0 overflow-x-auto md:overflow-hidden"><!--[-->`);
+  ssrRenderList(_ctx.$settings.payment_methods, (paymentMethod) => {
+    _push(ssrRenderComponent($setup["PaymentMethodFlag"], {
+      key: paymentMethod,
+      flag: paymentMethod
+    }, null, _parent));
+  });
+  _push(`<!--]--></div></div><div class="mt-7 text-xs text-center md:text-left md:flex justify-between gap-4"><div class="mb-3 md:mb-0"> @ ${ssrInterpolate(( new Date()).getFullYear())} ${ssrInterpolate(_ctx.$settings.corporate_name)} ${ssrInterpolate(_ctx.$settings.address ? `/ ${_ctx.$settings.address}` : "")} / ${ssrInterpolate(_ctx.$settings.doc_number)}</div>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: "https://www.ecomplus.io/",
+    class: "italic text-[#37003c]"
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(` powered by <b${_scopeId}>E-Com Plus</b>`);
+      } else {
+        return [
+          createTextVNode(" powered by "),
+          createVNode("b", null, "E-Com Plus")
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</div></div></footer>`);
+}
+const _sfc_setup$4 = _sfc_main$4.setup;
+_sfc_main$4.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopFooter.vue");
+  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+};
+const ShopFooter = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+
+const $$Astro$8 = createAstro("https://ecom2-demo.web.app");
+const $$PageFooter = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$8, $$props, $$slots);
+  Astro2.self = $$PageFooter;
+  const { routeContext } = Astro2.locals;
+  const { settings, getContent, isHomepage } = routeContext;
+  const LogoHeading = isHomepage ? "h2" : "h3";
+  const layoutContent = await getContent("layout");
+  const {
+    footer: {
+      stamps,
+      categories_list: categoriesList,
+      pages_list: pagesList
+    }
+  } = layoutContent;
+  let mainCategories;
+  let pageLinks;
+  if (categoriesList?.enabled) {
+    if (categoriesList.categories?.length) {
+      mainCategories = categoriesList.categories;
+    } else {
+      const { value: categories } = await useSharedData({ field: "categories" });
+      if (categories) {
+        mainCategories = filterMainCategories(categories);
+      }
+    }
+  }
+  if (pagesList?.enabled) {
+    if (pagesList.links?.length) {
+      pageLinks = pagesList.links;
+    } else {
+      pageLinks = [];
+      const pageSlugs = await getContent("extra-pages/");
+      for (let i = 0; i < pageSlugs.length; i++) {
+        const { title } = await getContent(`extra-pages/${pageSlugs[i]}`);
+        if (title) {
+          pageLinks.push({ title, href: `/p/${pageSlugs[i]}` });
+        }
+      }
+    }
+  }
+  return renderTemplate`${renderComponent($$result, "ShopFooter", ShopFooter, { "stamps": stamps, "categories": mainCategories, "categoriesColTitle": categoriesList?.title, "pageLinks": pageLinks, "pagesColTitle": pagesList?.title }, { "logo": ($$result2) => renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "slot": "logo" }, { "default": ($$result3) => renderTemplate`${maybeRenderHead()}<a href="/">${renderComponent($$result3, "LogoHeading", LogoHeading, {}, { "default": ($$result4) => renderTemplate`${renderComponent($$result4, "Picture", $$Picture, { "src": settings.logo, "alt": settings.name, "widths": [300], "loading": "lazy", "class": "max-w-[150px]" })}` })}</a>` })}` })}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/PageFooter.astro", void 0);
+
+const useProductShelf = (props) => {
+  const title = ref(props.title || "");
+  const titleLink = ref(props.titleLink || "");
+  const isFetching = ref(false);
+  let fetching = null;
+  const fetchError = ref(null);
+  const products = shallowReactive(props.products || []);
+  if (!props.products) {
+    isFetching.value = true;
+    fetching = (async () => {
+      let searchQuery = props.searchQuery || "";
+      let collection;
+      if (props.collectionId) {
+        try {
+          const { data } = await api.get(`collections/${props.collectionId}`);
+          collection = data;
+        } catch (err) {
+          console.error(err);
+          fetchError.value = err;
+        }
+        const productIds = collection?.products;
+        if (Array.isArray(productIds) && productIds.length) {
+          searchQuery += `&_id=${productIds.slice(0, 60).join(",")}`;
+        }
+        if (!title.value && title.value !== null && collection?.name) {
+          title.value = collection?.name;
+        }
+      }
+      const limit = props.limit || 24;
+      const offset = props.page ? (props.page - 1) * limit : 0;
+      let endpointQuery = `offset=${offset}&limit=${limit}`;
+      if (props.sort) {
+        endpointQuery += `&sort=${props.sort}`;
+      }
+      endpointQuery += searchQuery;
+      try {
+        const { data } = await api.get(`search/v1?${endpointQuery}`);
+        if (props.isShuffle) {
+          let m = data.result.filter((item) => {
+            return item.available && inStock(item);
+          }).length;
+          let t;
+          let i;
+          while (m) {
+            i = Math.floor(Math.random() * m--);
+            t = data.result[m];
+            data.result[m] = data.result[i];
+            data.result[i] = t;
+          }
+        }
+        data.result.forEach((item) => products.push(item));
+      } catch (err) {
+        console.error(err);
+        fetchError.value = err;
+      }
+      isFetching.value = false;
+    })();
+  }
+  return {
+    title,
+    titleLink,
+    isFetching,
+    fetching,
+    fetchError,
+    products
+  };
+};
+
+const now = Date.now();
+const parseBanners = (banners) => {
+  const validBanners = [];
+  banners.forEach(({
+    img,
+    start,
+    end,
+    mobile_img: mobileImg,
+    button_link: buttonLink,
+    button_text: buttonText,
+    ...rest
+  }) => {
+    if (start && new Date(start).getTime() < now)
+      return;
+    if (end && new Date(end).getTime() > now)
+      return;
+    validBanners.push({
+      ...rest,
+      img,
+      mobileImg,
+      buttonLink,
+      buttonText
+    });
+  });
+  return validBanners;
+};
+const usePageHero = async ({ routeContext }) => {
+  const { cmsContent } = routeContext;
+  const heroSlider = { slides: [] };
+  const heroContent = cmsContent?.hero;
+  if (heroContent) {
+    heroSlider.autoplay = heroContent.autoplay;
+    if (heroContent.slides) {
+      heroSlider.slides = parseBanners(heroContent.slides);
+    }
+  }
+  return { heroSlider };
+};
+const usePageSections = async ({ routeContext, handleCustomSection }) => {
+  const sectionsContent = routeContext.cmsContent?.sections;
+  const sections = [];
+  if (sectionsContent) {
+    await Promise.all(sectionsContent.map(async ({ type, ...sectionContent }, index) => {
+      if (type === "product-shelf") {
+        const {
+          collection_id: collectionIdAndInfo,
+          headless: isHeadless,
+          shuffle: isShuffle,
+          ...rest
+        } = sectionContent;
+        let { sort, title } = sectionContent;
+        switch (sort) {
+          case "offers":
+            sort = "-price_discount";
+            break;
+          case "news":
+            sort = "-_id";
+            break;
+          case "lowest_price":
+            sort = "price";
+            break;
+          case "highest_price":
+            sort = "-price";
+            break;
+        }
+        let collectionId = null;
+        let searchQuery;
+        let titleLink;
+        if (collectionIdAndInfo) {
+          const [_id, resource, name, path] = collectionIdAndInfo.split(":");
+          collectionId = _id;
+          if (resource === "categories") {
+            searchQuery = `&categories._id=${_id}`;
+          } else if (resource === "brands") {
+            searchQuery = `&brands._id=${_id}`;
+          }
+          if (!title && title !== null && name) {
+            title = name;
+          }
+          titleLink = path;
+        }
+        const props = {
+          ...rest,
+          collectionId,
+          searchQuery,
+          sort,
+          title: isHeadless ? null : title,
+          titleLink,
+          isShuffle
+        };
+        const { fetching, products } = useProductShelf(props);
+        await fetching;
+        sections[index] = {
+          type,
+          props: {
+            ...rest,
+            collectionId,
+            searchQuery,
+            sort,
+            title: isHeadless ? null : title,
+            titleLink,
+            isShuffle,
+            products
+          }
+        };
+        return;
+      }
+      if (type === "banners-grid") {
+        sections[index] = {
+          type,
+          props: {
+            banners: parseBanners(sectionContent.banners || [])
+          }
+        };
+        return;
+      }
+      switch (type) {
+        case "breadcrumbs":
+        case "product-details":
+        case "related-products":
+        case "doc-description":
+        case "product-specifications":
+          sections[index] = {
+            type,
+            props: {}
+          };
+          return;
+      }
+      if (typeof handleCustomSection === "function") {
+        const { props } = await handleCustomSection(
+          type,
+          sectionContent
+        );
+        sections[index] = { type, props };
+      }
+    }));
+  }
+  return {
+    sections
+  };
+};
+
+const $$Astro$7 = createAstro("https://ecom2-demo.web.app");
+const $$BannerPictures = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$7, $$props, $$slots);
+  Astro2.self = $$BannerPictures;
+  const {
+    img,
+    alt,
+    mobileImg,
+    title,
+    subtitle,
+    buttonText,
+    index,
+    class: className = "max-w-screen-sm sm:max-w-[828px] md:max-w-screen-2xl",
+    mobileClass = "max-w-screen-sm sm:max-w-screen-lg"
+  } = Astro2.props;
+  const hasHeader = title || subtitle || buttonText;
+  let { widths, mobileWidths } = Astro2.props;
+  if (!widths?.length) {
+    if (mobileImg) {
+      widths = [1536, 2048];
+    } else {
+      widths = [640, 828, 1536, 2048];
+      if (hasHeader) {
+        widths = widths.map((w) => w / 2);
+      }
+    }
+  }
+  if (!mobileWidths?.length) {
+    mobileWidths = [640, 1024];
+  }
+  return renderTemplate`${img && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": img, "alt": alt || "", "widths": widths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `${mobileImg ? "hidden md:block " : ""}mx-auto text-sm text-opacity-70 ${className}` })}`}${mobileImg && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": mobileImg, "alt": alt || "", "widths": mobileWidths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `md:hidden mx-auto text-sm text-opacity-70 ${mobileClass}` })}`}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/BannerPictures.astro", void 0);
+
+const useBanner = (props) => {
+  const parsedTitle = computed(() => {
+    return props.title ? parseShippingPhrase(props.title).value : "";
+  });
+  const parsedSubtitle = computed(() => {
+    return props.subtitle ? parseShippingPhrase(props.subtitle).value : "";
+  });
+  const parsedButtonText = computed(() => {
+    return props.buttonText ? parseShippingPhrase(props.buttonText).value : "";
+  });
+  const hasHeader = computed(() => {
+    return Boolean(parsedTitle.value || parsedSubtitle.value || parsedButtonText.value);
+  });
+  return {
+    parsedTitle,
+    parsedSubtitle,
+    parsedButtonText,
+    hasHeader
+  };
+};
+
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "Banner",
+  props: {
+    img: {},
+    alt: {},
+    mobileImg: {},
+    href: {},
+    title: {},
+    subtitle: {},
+    buttonLink: {},
+    buttonText: {},
+    headingTag: { default: "h3" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      hasHeader,
+      parsedTitle,
+      parsedSubtitle,
+      parsedButtonText
+    } = useBanner(props);
+    const __returned__ = { props, hasHeader, parsedTitle, parsedSubtitle, parsedButtonText };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ALink = resolveComponent("ALink");
+  _push(`<div${ssrRenderAttrs(mergeProps({
+    class: ["mx-auto overflow-x-hidden", $setup.hasHeader ? "grid grid-cols-1 sm:grid-cols-2 items-center" : null]
+  }, _attrs))}>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: $props.href,
+    class: $setup.hasHeader ? "sm:order-last [&_img]:max-w-full sm:[&_img]:max-w-none [&_img]:aspect-video sm:[&_img]:aspect-[2.5] [&_img]:object-cover" : "[&_img]:max-w-full"
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "picture", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot$1(_ctx.$slots, "picture")
+        ];
+      }
+    }),
+    _: 3
+  }, _parent));
+  if ($setup.hasHeader) {
+    _push(`<div class="p-12 xl:ps-32 mb-3 sm:mb-0">`);
+    if ($setup.parsedTitle) {
+      ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.headingTag), { class: "ui-title mt-1" }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate($setup.parsedTitle)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString($setup.parsedTitle), 1)
+            ];
+          }
+        }),
+        _: 1
+      }), _parent);
+    } else {
+      _push(`<!---->`);
+    }
+    if ($setup.parsedSubtitle) {
+      _push(`<p class="text-lg mt-4 md:mt-6">${ssrInterpolate($setup.parsedSubtitle)}</p>`);
+    } else {
+      _push(`<!---->`);
+    }
+    if ($setup.parsedButtonText) {
+      _push(ssrRenderComponent(_component_ALink, {
+        href: $props.buttonLink,
+        class: "ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate($setup.parsedButtonText)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString($setup.parsedButtonText), 1)
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div>`);
+}
+const _sfc_setup$3 = _sfc_main$3.setup;
+_sfc_main$3.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Banner.vue");
+  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
+};
+const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
+
+const $$Astro$6 = createAstro("https://ecom2-demo.web.app");
+const $$BannersGrid = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$6, $$props, $$slots);
+  Astro2.self = $$BannersGrid;
+  const { banners } = Astro2.props;
+  return renderTemplate`${maybeRenderHead()}<section class="ui-section"><ul class="flex flex-wrap lg:flex-nowrap gap-4">${banners.map((banner) => renderTemplate`<li class="lg:flex-1 [&_img]:w-full [&_img]:object-cover">${renderComponent($$result, "Banner", Banner, { ...banner }, { "picture": ($$result2) => renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { ...banner, "slot": "picture" })}` })}</li>`)}</ul></section>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/components/BannersGrid.astro", void 0);
+
+const useProductCard = (props) => {
+  const isFetching = ref(false);
+  let fetching = null;
+  const fetchError = ref(null);
+  const { productId } = props;
+  const product = shallowReactive({
+    ...props.product,
+    _id: props.product?._id || productId,
+    price: price(props.product || {})
+  });
+  if (!props.product && productId) {
+    isFetching.value = true;
+    fetching = (async () => {
+      try {
+        const { data } = await api.get(`products/${productId}`);
+        Object.assign(product, data);
+      } catch (err) {
+        console.error(err);
+        fetchError.value = err;
+      }
+      isFetching.value = false;
+    })();
+  }
+  const title = computed(() => {
+    return name(product);
+  });
+  const link = computed(() => {
+    const { slug } = product;
+    if (typeof slug === "string") {
+      return `/${slug}`;
+    }
+    return null;
+  });
+  const images = computed(() => {
+    const { pictures } = product;
+    const _images = [];
+    if (pictures) {
+      pictures.forEach((picture) => {
+        const img$1 = img(picture);
+        if (img$1)
+          _images.push(img$1);
+      });
+    }
+    return _images;
+  });
+  const isInStock = computed(() => {
+    return inStock(product);
+  });
+  const isActive = computed(() => {
+    return isInStock.value && product.available && product.visible;
+  });
+  const discountPercentage = computed(() => {
+    if (onPromotion(product)) {
+      const basePrice = product.base_price;
+      return Math.round((basePrice - price(product)) * 100 / basePrice);
+    }
+    return 0;
+  });
+  const hasVariations = computed(() => {
+    if (product.has_variations)
+      return true;
+    return Boolean(product.variations?.length);
+  });
+  return {
+    isFetching,
+    fetching,
+    fetchError,
+    product,
+    title,
+    link,
+    images,
+    isInStock,
+    isActive,
+    discountPercentage,
+    hasVariations
+  };
+};
+
+const getPriceWithDiscount = (price, discount) => {
+  const { type, value } = discount;
+  let priceWithDiscount;
+  if (value) {
+    if (type === "percentage") {
+      priceWithDiscount = price * ((100 - value) / 100);
+    } else {
+      priceWithDiscount = price - value;
+    }
+    return priceWithDiscount > 0 ? priceWithDiscount : 0;
+  }
+  return price;
+};
+const usePrices = (props) => {
+  const _product = computed(() => {
+    return props.product || {
+      price: props.price || 0,
+      base_price: props.basePrice
+    };
+  });
+  const hasVariedPrices = computed(() => {
+    const { variations } = _product.value;
+    if (variations) {
+      const productPrice = price(_product.value);
+      for (let i = 0; i < variations.length; i++) {
+        const price$1 = price({
+          ..._product.value,
+          ...variations[i]
+        });
+        if (price$1 > productPrice) {
+          return true;
+        }
+      }
+    }
+    return false;
+  });
+  const salePrice = computed(() => {
+    const price$1 = price(_product.value);
+    const discount = availableExtraDiscount.value;
+    if (discount && (!discount.min_amount || price$1 > discount.min_amount)) {
+      return getPriceWithDiscount(price$1, discount);
+    }
+    return price$1;
+  });
+  const comparePrice = computed(() => {
+    if (onPromotion(_product.value)) {
+      return _product.value.base_price;
+    }
+    const price$1 = price(_product.value);
+    if (price$1 > salePrice.value) {
+      return price$1;
+    }
+    return 0;
+  });
+  const installmentsObject = computed(() => {
+    return props.installmentsOption || installmentsOption.value || { max_number: 1 };
+  });
+  const installmentsNumber = computed(() => {
+    if (installmentsObject.value.max_number <= 1) {
+      return 1;
+    }
+    const minInstallment = installmentsObject.value.min_installment || 5;
+    const maxInstallmentsNumber = Math.floor(salePrice.value / minInstallment);
+    return Math.min(maxInstallmentsNumber, installmentsObject.value.max_number);
+  });
+  const monthlyInterest = computed(() => {
+    return installmentsObject.value.monthly_interest || 0;
+  });
+  const installmentValue = computed(() => {
+    if (installmentsNumber.value >= 2) {
+      if (!monthlyInterest.value) {
+        return salePrice.value / installmentsNumber.value;
+      }
+      const interest = monthlyInterest.value / 100;
+      return salePrice.value * interest / (1 - (1 + interest) ** -installmentsNumber.value);
+    }
+    return 0;
+  });
+  const discountObject = computed(() => {
+    const discount = props.discountOption || discountOption.value;
+    if (discount && (!discount.min_amount || discount.min_amount <= salePrice.value) && (!props.isAmountTotal || discount.apply_at === "total")) {
+      return discount;
+    }
+    return {};
+  });
+  const discountLabel = computed(() => {
+    const { label } = discountObject.value;
+    if (label) {
+      if (label.includes(" ")) {
+        return label;
+      }
+      return `via ${label}`;
+    }
+    return "";
+  });
+  const priceWithDiscount = computed(() => {
+    return getPriceWithDiscount(salePrice.value, discountObject.value);
+  });
+  const pointsProgramObject = computed(() => {
+    if (props.loyaltyPointsProgram) {
+      return props.loyaltyPointsProgram;
+    }
+    const pointsPrograms = loyaltyPointsPrograms.value;
+    if (pointsPrograms) {
+      const programIds = Object.keys(pointsPrograms);
+      for (let i = 0; i < programIds.length; i++) {
+        const program = pointsPrograms[programIds[i]];
+        if (program?.earn_percentage && program.earn_percentage > 0) {
+          return program;
+        }
+      }
+    }
+    return { ratio: 0 };
+  });
+  const pointsMinPrice = computed(() => {
+    return pointsProgramObject.value.min_subtotal_to_earn || 0;
+  });
+  const pointsProgramName = computed(() => {
+    return pointsProgramObject.value.name || "";
+  });
+  const earnPointsPercentage = computed(() => {
+    return pointsProgramObject.value.earn_percentage || 0;
+  });
+  const cashbackPercentage = computed(() => {
+    return earnPointsPercentage.value * pointsProgramObject.value.ratio;
+  });
+  const cashbackValue = computed(() => {
+    return cashbackPercentage.value >= 1 ? salePrice.value * (cashbackPercentage.value / 100) : 0;
+  });
+  return {
+    hasVariedPrices,
+    salePrice,
+    comparePrice,
+    installmentsObject,
+    installmentsNumber,
+    monthlyInterest,
+    installmentValue,
+    discountObject,
+    discountLabel,
+    priceWithDiscount,
+    pointsProgramObject,
+    pointsMinPrice,
+    pointsProgramName,
+    earnPointsPercentage,
+    cashbackPercentage,
+    cashbackValue
+  };
+};
+
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Prices",
+  props: {
+    isBig: { type: Boolean },
+    isLiteral: { type: Boolean },
+    hasCashback: { type: Boolean, default: true },
+    hasPriceOptions: { type: Boolean, default: true },
+    product: {},
+    price: {},
+    basePrice: {},
+    isAmountTotal: { type: Boolean },
+    installmentsOption: {},
+    discountOption: {},
+    loyaltyPointsProgram: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      hasVariedPrices,
+      salePrice,
+      comparePrice,
+      cashbackPercentage,
+      cashbackValue,
+      installmentsNumber,
+      monthlyInterest,
+      installmentValue,
+      priceWithDiscount,
+      discountLabel
+    } = usePrices(props);
+    const __returned__ = { props, hasVariedPrices, salePrice, comparePrice, cashbackPercentage, cashbackValue, installmentsNumber, monthlyInterest, installmentValue, priceWithDiscount, discountLabel };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Fade = resolveComponent("Fade");
+  _push(`<div${ssrRenderAttrs(mergeProps({
+    class: ["text-base-600 [&>div]:[font-size:90%] [&_small]:[font-size:92%] [&_small]:lowercase", $props.isBig ? "text-lg" : null]
+  }, _attrs))}>`);
+  if ($setup.comparePrice) {
+    _push(`<span class="text-base-500 mr-1 text-[87%]">`);
+    if ($props.isLiteral) {
+      _push(`<small>${ssrInterpolate(`${"De"} `)}</small>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`<s>${ssrInterpolate(_ctx.$money($setup.comparePrice))}</s>`);
+    if ($props.isLiteral) {
+      _push(`<small>${ssrInterpolate(` ${"Por"}`)}</small>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</span>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`<strong class="${ssrRenderClass([$props.isBig ? "text-5xl block" : null, "inline-block text-base-800"])}">`);
+  if ($setup.hasVariedPrices) {
+    _push(`<small>${ssrInterpolate(`${"A partir de"} `)}</small>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(` ${ssrInterpolate(_ctx.$money($setup.salePrice))}</strong>`);
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.cashbackValue && $props.hasCashback) {
+          _push2(`<div class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage)))}${_scopeId}><i class="i-arrow-uturn-left mr-1"${_scopeId}></i><span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money($setup.cashbackValue))}</span><small${_scopeId}> cashback</small></span></div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.cashbackValue && $props.hasCashback ? (openBlock(), createBlock("div", {
+            key: 0,
+            class: "relative z-10"
+          }, [
+            createVNode("span", {
+              "data-tooltip": "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage))
+            }, [
+              createVNode("i", { class: "i-arrow-uturn-left mr-1" }),
+              createVNode("span", { class: "font-medium" }, toDisplayString(_ctx.$money($setup.cashbackValue)), 1),
+              createVNode("small", null, " cashback")
+            ], 8, ["data-tooltip"])
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.installmentValue && $props.hasPriceOptions) {
+          _push2(`<div${_scopeId}>`);
+          if ($props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(`${"At\xE9"} `)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(` ${ssrInterpolate($setup.installmentsNumber)}x `);
+          if ($props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(` ${"De"} `)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money($setup.installmentValue))}</span>`);
+          if (!$setup.monthlyInterest && $props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(` ${"Sem juros"}`)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.installmentValue && $props.hasPriceOptions ? (openBlock(), createBlock("div", { key: 0 }, [
+            $props.isLiteral ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"At\xE9"} `))) : createCommentVNode("", true),
+            createTextVNode(" " + toDisplayString($setup.installmentsNumber) + "x ", 1),
+            $props.isLiteral ? (openBlock(), createBlock("small", { key: 1 }, toDisplayString(` ${"De"} `))) : createCommentVNode("", true),
+            createVNode("span", null, toDisplayString(_ctx.$money($setup.installmentValue)), 1),
+            !$setup.monthlyInterest && $props.isLiteral ? (openBlock(), createBlock("small", { key: 2 }, toDisplayString(` ${"Sem juros"}`))) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.priceWithDiscount < $setup.salePrice && $props.hasPriceOptions) {
+          _push2(`<div${_scopeId}>`);
+          if (!$setup.discountLabel) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(`${"A partir de"} `)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money($setup.priceWithDiscount))}</span>`);
+          if ($setup.discountLabel) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(` ${$setup.discountLabel}`)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.priceWithDiscount < $setup.salePrice && $props.hasPriceOptions ? (openBlock(), createBlock("div", { key: 0 }, [
+            !$setup.discountLabel ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"A partir de"} `))) : createCommentVNode("", true),
+            createVNode("span", null, toDisplayString(_ctx.$money($setup.priceWithDiscount)), 1),
+            $setup.discountLabel ? (openBlock(), createBlock("small", { key: 1 }, toDisplayString(` ${$setup.discountLabel}`), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</div>`);
+}
+const _sfc_setup$2 = _sfc_main$2.setup;
+_sfc_main$2.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Prices.vue");
+  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+};
+const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
+
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ProductCard",
+  props: {
+    product: {},
+    productId: {},
+    headingTag: { default: "h3" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      product,
+      title,
+      link,
+      images,
+      isInStock,
+      isActive,
+      discountPercentage,
+      hasVariations
+    } = useProductCard(props);
+    const card = ref(null);
+    const isHovered = useElementHover(card);
+    const wasHoveredOnce = ref(false);
+    watchOnce(isHovered, () => {
+      wasHoveredOnce.value = true;
+    });
+    const __returned__ = { props, product, title, link, images, isInStock, isActive, discountPercentage, hasVariations, card, isHovered, wasHoveredOnce, get addProductToCart() {
+      return addProductToCart;
+    }, Prices };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ALink = resolveComponent("ALink");
+  const _component_AImg = resolveComponent("AImg");
+  _push(`<article${ssrRenderAttrs(mergeProps({
+    ref: "card",
+    "data-sku": $setup.product.sku,
+    class: "relative h-full max-w-[350px] mx-auto py-3 group"
+  }, _attrs))}>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: $setup.link,
+    class: "flex flex-col h-full rounded overflow-hidden group-hover:shadow group-hover:ring-1 ring-black/5"
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div class="aspect-square p-2 motion-safe:group-hover:scale-110 transition-transform"${_scopeId}><div class="relative w-full h-full bg-white rounded overflow-hidden group-hover:rounded-none"${_scopeId}>`);
+        if ($setup.images?.length) {
+          _push2(`<span class="text-xs text-opacity-70"${_scopeId}>`);
+          _push2(ssrRenderComponent(_component_AImg, {
+            picture: $setup.images[0],
+            alt: $setup.title,
+            class: "absolute top-0 left-0 block w-full h-full object-cover"
+          }, null, _parent2, _scopeId));
+          if ($setup.images[1] && $setup.wasHoveredOnce) {
+            _push2(ssrRenderComponent(_component_AImg, {
+              picture: $setup.images[1],
+              alt: $setup.title,
+              class: "absolute top-0 left-0 block w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity motion-safe:duration-300 text-transparent z-10"
+            }, null, _parent2, _scopeId));
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</span>`);
+        } else {
+          _push2(`<div class="w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"${_scopeId}></div>`);
+        }
+        _push2(`</div></div>`);
+        if ($setup.discountPercentage) {
+          _push2(`<span class="uno-bm03rg"${_scopeId}> -<strong${_scopeId}>${ssrInterpolate($setup.discountPercentage)}</strong>% </span>`);
+        } else {
+          _push2(`<!---->`);
+        }
+        _push2(`<div class="relative flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10"${_scopeId}>`);
+        ssrRenderVNode(_push2, createVNode(resolveDynamicComponent($props.headingTag), {
+          class: ["ui-link no-underline line-clamp-2", [
+            $setup.isActive ? "text-base-700" : "text-base-500",
+            $setup.link ? "group-hover:underline group-hover:text-primary" : null
+          ]]
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`${ssrInterpolate($setup.title)}`);
+            } else {
+              return [
+                createTextVNode(toDisplayString($setup.title), 1)
+              ];
+            }
+          }),
+          _: 1
+        }), _parent2, _scopeId);
+        _push2(`<div class="pt-2"${_scopeId}>`);
+        if ($setup.isActive) {
+          _push2(`<div${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["Prices"], { product: $setup.product }, null, _parent2, _scopeId));
+          _push2(`</div>`);
+        } else {
+          _push2(`<span class="ui-badge bg-warning-100 text-warning-700"${_scopeId}>${ssrInterpolate(!$setup.isInStock ? "Sem estoque" : "Inativo")}</span>`);
+        }
+        _push2(`</div>`);
+        if ($setup.isActive && !$setup.hasVariations) {
+          _push2(`<button class="uno-3suct9 ui-btn-sm ui-btn-primary"${_scopeId}><span class="inline-block h-4 w-4 leading-none text-base text-center bg-on-primary text-primary opacity-80 rounded-full mr-1"${_scopeId}> + </span> ${ssrInterpolate("Adicionar ao carrinho")}</button>`);
+        } else {
+          _push2(`<!---->`);
+        }
+        _push2(`</div>`);
+      } else {
+        return [
+          createVNode("div", { class: "aspect-square p-2 motion-safe:group-hover:scale-110 transition-transform" }, [
+            createVNode("div", { class: "relative w-full h-full bg-white rounded overflow-hidden group-hover:rounded-none" }, [
+              $setup.images?.length ? (openBlock(), createBlock("span", {
+                key: 0,
+                class: "text-xs text-opacity-70"
+              }, [
+                createVNode(_component_AImg, {
+                  picture: $setup.images[0],
+                  alt: $setup.title,
+                  class: "absolute top-0 left-0 block w-full h-full object-cover"
+                }, null, 8, ["picture", "alt"]),
+                $setup.images[1] && $setup.wasHoveredOnce ? (openBlock(), createBlock(_component_AImg, {
+                  key: 0,
+                  picture: $setup.images[1],
+                  alt: $setup.title,
+                  class: "absolute top-0 left-0 block w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity motion-safe:duration-300 text-transparent z-10"
+                }, null, 8, ["picture", "alt"])) : createCommentVNode("", true)
+              ])) : (openBlock(), createBlock("div", {
+                key: 1,
+                class: "w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"
+              }))
+            ])
+          ]),
+          $setup.discountPercentage ? (openBlock(), createBlock("span", {
+            key: 0,
+            class: "uno-bm03rg"
+          }, [
+            createTextVNode(" -"),
+            createVNode("strong", null, toDisplayString($setup.discountPercentage), 1),
+            createTextVNode("% ")
+          ])) : createCommentVNode("", true),
+          createVNode("div", { class: "relative flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10" }, [
+            (openBlock(), createBlock(resolveDynamicComponent($props.headingTag), {
+              class: ["ui-link no-underline line-clamp-2", [
+                $setup.isActive ? "text-base-700" : "text-base-500",
+                $setup.link ? "group-hover:underline group-hover:text-primary" : null
+              ]]
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString($setup.title), 1)
+              ]),
+              _: 1
+            }, 8, ["class"])),
+            createVNode("div", { class: "pt-2" }, [
+              $setup.isActive ? (openBlock(), createBlock("div", { key: 0 }, [
+                createVNode($setup["Prices"], { product: $setup.product }, null, 8, ["product"])
+              ])) : (openBlock(), createBlock("span", {
+                key: 1,
+                class: "ui-badge bg-warning-100 text-warning-700"
+              }, toDisplayString(!$setup.isInStock ? "Sem estoque" : "Inativo"), 1))
+            ]),
+            $setup.isActive && !$setup.hasVariations ? (openBlock(), createBlock("button", {
+              key: 0,
+              class: "uno-3suct9 ui-btn-sm ui-btn-primary",
+              onClick: withModifiers(($event) => $setup.addProductToCart($setup.product), ["prevent"])
+            }, [
+              createVNode("span", { class: "inline-block h-4 w-4 leading-none text-base text-center bg-on-primary text-primary opacity-80 rounded-full mr-1" }, " + "),
+              createTextVNode(" " + toDisplayString("Adicionar ao carrinho"))
+            ], 8, ["onClick"])) : createCommentVNode("", true)
+          ])
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</article>`);
+}
+const _sfc_setup$1 = _sfc_main$1.setup;
+_sfc_main$1.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ProductCard.vue");
+  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ProductShelf",
+  props: {
+    collectionId: {},
+    searchQuery: {},
+    sort: {},
+    title: {},
+    titleLink: {},
+    isShuffle: { type: Boolean },
+    limit: {},
+    page: {},
+    products: {}
+  },
+  async setup(__props, { expose: __expose }) {
+    __expose();
+    let __temp, __restore;
+    const props = __props;
+    const {
+      title,
+      titleLink,
+      fetching,
+      products
+    } = useProductShelf(props);
+    {
+      [__temp, __restore] = withAsyncContext(() => fetching), await __temp, __restore();
+    }
+    const __returned__ = { props, title, titleLink, fetching, products, Carousel, CarouselControl, ProductCard };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ALink = resolveComponent("ALink");
+  _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
+  if ($setup.title) {
+    _push(`<div class="max-w-prose mx-auto text-center mb-2"><h2 class="ui-text-brand text-3xl">`);
+    _push(ssrRenderComponent(_component_ALink, {
+      href: $setup.titleLink,
+      class: $setup.titleLink ? "ui-link" : "text-base-700"
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(`${ssrInterpolate($setup.title)}`);
+        } else {
+          return [
+            createTextVNode(toDisplayString($setup.title), 1)
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+    _push(`</h2></div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(ssrRenderComponent($setup["Carousel"], { class: "group/shelf" }, {
+    controls: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div style="${ssrRenderStyle($setup.products.length > 2 ? null : { display: "none" })}" class="text-3xl lg:text-2xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"${_scopeId}>`);
+        _push2(ssrRenderComponent($setup["CarouselControl"], {
+          class: "!top-1/2 !-left-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
+          "is-prev": ""
+        }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["CarouselControl"], { class: "!top-1/2 !-right-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" }, null, _parent2, _scopeId));
+        _push2(`</div>`);
+      } else {
+        return [
+          withDirectives(createVNode("div", { class: "text-3xl lg:text-2xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity" }, [
+            createVNode($setup["CarouselControl"], {
+              class: "!top-1/2 !-left-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
+              "is-prev": ""
+            }),
+            createVNode($setup["CarouselControl"], { class: "!top-1/2 !-right-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" })
+          ], 512), [
+            [vShow, $setup.products.length > 2]
+          ])
+        ];
+      }
+    }),
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<!--[-->`);
+        ssrRenderList($setup.products, (product) => {
+          _push2(`<li class="basis-1/2 md:basis-1/3 lg:basis-1/4 shrink-0"${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["ProductCard"], { product }, null, _parent2, _scopeId));
+          _push2(`</li>`);
+        });
+        _push2(`<!--]-->`);
+      } else {
+        return [
+          (openBlock(true), createBlock(Fragment$1, null, renderList($setup.products, (product) => {
+            return openBlock(), createBlock("li", {
+              key: product._id,
+              class: "basis-1/2 md:basis-1/3 lg:basis-1/4 shrink-0"
+            }, [
+              createVNode($setup["ProductCard"], { product }, null, 8, ["product"])
+            ]);
+          }), 128))
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</section>`);
+}
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ProductShelf.vue");
+  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+const ProductShelf = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+
+const useBreadcrumbs = async (props = {}) => {
+  const { settings, apiContext, data } = globalThis.$storefront;
+  const {
+    apiDoc = apiContext?.doc,
+    domain = settings.domain
+  } = props;
+  let categories = props.categories || data.categories;
+  if (!categories) {
+    categories = (await useSharedData({ field: "categories" })).value;
+  }
+  const breadcrumbs = [];
+  if (apiDoc) {
+    const productCategories = apiDoc.categories;
+    if (productCategories) {
+      categoriesList(apiDoc).forEach((categoryName) => {
+        const findCategory = (category2) => {
+          return category2.name === categoryName;
+        };
+        const category = productCategories && productCategories.find(findCategory) || categories?.find(findCategory);
+        if (category) {
+          breadcrumbs.push({
+            name: name(category),
+            link: `/${category.slug}`
+          });
+        }
+      });
+    }
+    breadcrumbs.push({
+      name: name(apiDoc),
+      link: `/${apiDoc.slug}`
+    });
+  }
+  return {
+    breadcrumbs,
+    inlineJSONLd: domain ? JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      itemListElement: [
+        {
+          "@type": "ListItem",
+          position: 1,
+          item: {
+            "@id": `https://${domain}/`,
+            name: "Homepage"
+          }
+        }
+      ].concat(breadcrumbs.map(({ name, link }, index) => {
+        return {
+          "@type": "ListItem",
+          position: index + 2,
+          item: {
+            "@id": `https://${domain}${link}`,
+            name
+          }
+        };
+      }))
+    }) : null
+  };
+};
+
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
+const $$Astro$5 = createAstro("https://ecom2-demo.web.app");
+const $$Breadcrumbs = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$5, $$props, $$slots);
+  Astro2.self = $$Breadcrumbs;
+  const { breadcrumbs, inlineJSONLd } = await useBreadcrumbs(Astro2.props);
+  return renderTemplate`${breadcrumbs.length > 0 && renderTemplate`${maybeRenderHead()}<section class="ui-section-slim"><nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm"><ol class="flex items-center gap-1 text-base-600"><li><a href="/" class="hover:text-primary"><span class="sr-only"> Home </span><i class="i-home"></i></a></li>${breadcrumbs.map(
+    ({ name, link }, i) => renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${i + 1 < breadcrumbs.length ? renderTemplate`<li class="text-base-300"><i class="i-chevron-right"></i></li><li class="whitespace-nowrap"><a${addAttribute(link, "href")} class="hover:text-primary">${name}</a></li>` : renderTemplate`<li class="hidden lg:block text-base-300"><i class="i-chevron-right"></i></li><li class="hidden lg:block whitespace-nowrap overflow-hidden text-ellipsis"><span class="text-base-500">${name}</span></li>`}` })}`
+  )}</ol></nav>${inlineJSONLd && renderTemplate(_a || (_a = __template(['<script type="application/ld+json">', "<\/script>"])), unescapeHTML(inlineJSONLd))}</section>`}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/components/Breadcrumbs.astro", void 0);
+
+const i19description = "Descrição";
+
+const $$Astro$4 = createAstro("https://ecom2-demo.web.app");
+const $$ContentClearfix = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
+  Astro2.self = $$ContentClearfix;
+  const { html } = Astro2.props;
+  const parsedHTML = html.replace(/<(img|iframe) /g, '<$1 loading="lazy" ');
+  return renderTemplate`${maybeRenderHead()}<article class="overflow-x-auto lg:overflow-x-hidden prose !max-w-full"><div class="[&_table]:max-w-full [&_img]:max-w-full [&_iframe]:max-w-full">${unescapeHTML(parsedHTML)}</div></article>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/ContentClearfix.astro", void 0);
+
+const $$Astro$3 = createAstro("https://ecom2-demo.web.app");
+const $$DocDescription = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$3, $$props, $$slots);
+  Astro2.self = $$DocDescription;
+  const { apiDoc, title } = Astro2.props;
+  const html = apiDoc.body_html || apiDoc.body_text;
+  return renderTemplate`${html && renderTemplate`${maybeRenderHead()}<section class="ui-section"><p class="text-2xl font-medium lowercase text-base-700"><a href="#description" id="description"><i class="i-link text-base-400 mr-1"></i>${title || i19description}</a></p>${renderComponent($$result, "ContentClearfix", $$ContentClearfix, { "html": html })}</section>`}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/components/DocDescription.astro", void 0);
+
+const $$Astro$2 = createAstro("https://ecom2-demo.web.app");
+const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$2, $$props, $$slots);
+  Astro2.self = $$Sections;
+  const { routeContext } = Astro2.locals;
+  const { sections } = await usePageSections({
+    routeContext,
+    handleCustomSection: async (type, content) => {
+      if (type === "c:foo")
+        return { props: { ...content, foo: "bar" } };
+      return { props: content };
+    }
+  });
+  const { apiContext: { doc: apiDoc } } = routeContext;
+  return renderTemplate`${maybeRenderHead()}<article class="my-9 md:my-12">${sections.map(async ({ type, props }) => {
+    switch (type) {
+      case "product-shelf":
+        return renderTemplate`${renderComponent($$result, "ProductShelf", ProductShelf, { ...props, "client:visible": true, "client:component-hydration": "visible", "client:component-path": "~/components/ProductShelf.vue", "client:component-export": "default" })}`;
+      case "banners-grid":
+        return renderTemplate`${renderComponent($$result, "BannersGrid", $$BannersGrid, { ...props })}`;
+      case "breadcrumbs":
+        return apiDoc && renderTemplate`${renderComponent($$result, "Breadcrumbs", $$Breadcrumbs, { ...props, "apiDoc": apiDoc })}`;
+      case "doc-description":
+        return apiDoc && renderTemplate`${renderComponent($$result, "DocDescription", $$DocDescription, { "apiDoc": apiDoc })}`;
+      case "c:foo":
+        return renderTemplate`<div${addAttribute(props.foo, "data-foo")}></div>`;
+      default:
+        return renderTemplate`<div${addAttribute(type, "data-section")}></div>`;
+    }
+  })}</article>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Sections.astro", void 0);
+
+const $$Astro$1 = createAstro("https://ecom2-demo.web.app");
+const $$Wildcard = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$1, $$props, $$slots);
+  Astro2.self = $$Wildcard;
+  const { fetchingApiContext } = Astro2.locals.routeContext;
+  await fetchingApiContext;
+  return renderTemplate`${maybeRenderHead()}<main>${renderComponent($$result, "Sections", $$Sections, {})}</main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Wildcard.astro", void 0);
 
 const $$Astro = createAstro("https://ecom2-demo.web.app");
@@ -3855,14 +5248,7 @@ const $$ = createComponent(async ($$result, $$props, $$slots) => {
     }
     loadError = err;
   }
-  return renderTemplate`<html${addAttribute(routeContext?.lang.replace("_", "-"), "lang")}>
-${routeContext && renderTemplate`${renderComponent($$result, "Base", $$Base, {}, { "base-head": ($$result2) => renderTemplate`${renderComponent($$result2, "BaseHead", $$BaseHead, { "slot": "base-head" })}`, "default": ($$result2) => renderTemplate`
-    
-    ${renderComponent($$result2, "PageHeader", $$PageHeader, {})}
-    ${renderComponent($$result2, "WildcardMain", $$Wildcard, {})}
-  ` })}`}
-${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}
-</html>`;
+  return renderTemplate`<html${addAttribute(routeContext?.lang.replace("_", "-"), "lang")}>${routeContext && renderTemplate`${renderComponent($$result, "Base", $$Base, {}, { "base-head": ($$result2) => renderTemplate`${renderComponent($$result2, "BaseHead", $$BaseHead, { "slot": "base-head" })}`, "default": ($$result2) => renderTemplate`${renderComponent($$result2, "PageHeader", $$PageHeader, {})}${renderComponent($$result2, "WildcardMain", $$Wildcard, {})}${renderComponent($$result2, "PageFooter", $$PageFooter, {})}` })}`}${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}</html>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro", void 0);
 
 const $$file = "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro";
@@ -3876,4 +5262,4 @@ const ____slug_ = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty(
   url: $$url
 }, Symbol.toStringTag, { value: 'Module' }));
 
-export { $$Picture as $, BaseSSRService as B, Carousel as C, SocialNetworkLink as S, _export_sfc as _, CarouselControl as a, availableExtraDiscount as b, installmentsOption as c, discountOption as d, addProductToCart as e, filterMainCategories as f, loadRouteContext as g, $$BaseHead as h, isOutputFormatSupportsAlpha as i, $$PageHeader as j, $$Base as k, loyaltyPointsPrograms as l, parseProduct as m, useId as n, freeShippingFromValue as o, parseShippingPhrase as p, shoppingCart as q, removeCartItem as r, socialNetworks as s, totalItems as t, useSharedData as u, ____slug_ as v };
+export { $$BannerPictures as $, Banner as B, Carousel as C, Prices as P, _export_sfc as _, CarouselControl as a, $$Sections as b, $$BaseHead as c, $$PageHeader as d, $$PageFooter as e, $$Base as f, useId as g, freeShippingFromValue as h, ____slug_ as i, loadRouteContext as l, parseProduct as p, removeCartItem as r, shoppingCart as s, totalItems as t, usePageHero as u };