cloudcommerce 0.34.0 → 0.35.1

package/packages/storefront/dist/server/chunks/pages/{__80fd1c60.mjs → __93ade2dd.mjs}

@@ -1,16 +1,19 @@
-import { d as createAstro, e as createComponent, r as renderTemplate, f as addAttribute, u as unescapeHTML, g as renderComponent, h as createTransitionScope, s as spreadAttributes, i as renderSlotToString, j as renderAllHeadContent, m as maybeRenderHead, k as renderSlot, F as Fragment } from '../astro_8447f017.mjs';
+import '@astrojs/internal-helpers/path';
+import { e as createAstro, f as createComponent, A as AstroError, g as ImageMissingAlt, r as renderTemplate, m as maybeRenderHead, h as addAttribute, s as spreadAttributes, u as unescapeHTML, i as renderComponent, j as createTransitionScope, k as renderSlotToString, l as renderAllHeadContent, n as renderSlot, F as Fragment } from '../astro_d98f7186.mjs';
 import api from '@cloudcommerce/api';
 import { EventEmitter } from 'node:events';
-import fs, { readFileSync } from 'node:fs';
-import { resolve, join } from 'node:path';
+import fs, { copyFileSync } from 'node:fs';
+import { resolve, join, basename as basename$1 } from 'node:path';
 import config from '@cloudcommerce/config';
 import { img, price, formatMoney, randomObjectId, nickname, inStock, name, onPromotion, categoriesList, imgSizes, variationsGrids, specTextValue, gridTitle, specValueByText } from '@ecomplus/utils';
 import 'clsx';
 /* empty css                            */import { renderSync, parse, walkSync, ELEMENT_NODE } from 'ultrahtml';
 import mime from 'mime/lite.js';
-import { reactive, computed, shallowRef, useSSRContext, defineComponent, resolveComponent, mergeProps, withCtx, withDirectives, createVNode, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, watch, ref, toRef, withModifiers, renderSlot as renderSlot$1, Teleport, resolveDynamicComponent, onMounted, createTextVNode, toDisplayString, defineAsyncComponent, Suspense, createSlots, shallowReactive, withAsyncContext, inject, provide } from 'vue';
+import { i as isESMImportedImage, g as getImage$1 } from '../astro/assets-service_a9d9ab5f.mjs';
+import imageSize from 'image-size';
+import { reactive, computed, shallowRef, useSSRContext, defineComponent, resolveComponent, mergeProps, withCtx, withDirectives, createVNode, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, watch, ref, toRef, nextTick, withModifiers, renderSlot as renderSlot$1, Teleport, resolveDynamicComponent, onMounted, createTextVNode, toDisplayString, defineAsyncComponent, vModelText, Suspense, createSlots, shallowReactive, withAsyncContext, inject, provide } from 'vue';
 import { ssrRenderAttrs, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderClass, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderSlot, ssrRenderTeleport, ssrRenderVNode, ssrInterpolate, ssrRenderSuspense } from 'vue/server-renderer';
-import { watchDebounced, useTimeout, promiseTimeout, onClickOutside, watchOnce, useElementHover, useUrlSearchParams } from '@vueuse/core';
+import { watchDebounced, useDebounceFn, useTimeout, promiseTimeout, onClickOutside, watchOnce, useElementHover, createReusableTemplate, useUrlSearchParams } from '@vueuse/core';
 import mitt from 'mitt';
 import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
 
@@ -22,6 +25,75 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
+const $$Astro$h = createAstro("https://demo.ecomplus.app");
+const $$Image = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$h, $$props, $$slots);
+  Astro2.self = $$Image;
+  const props = Astro2.props;
+  if (props.alt === void 0 || props.alt === null) {
+    throw new AstroError(ImageMissingAlt);
+  }
+  if (typeof props.width === "string") {
+    props.width = parseInt(props.width);
+  }
+  if (typeof props.height === "string") {
+    props.height = parseInt(props.height);
+  }
+  const image = await getImage(props);
+  const additionalAttributes = {};
+  if (image.srcSet.values.length > 0) {
+    additionalAttributes.srcset = image.srcSet.attribute;
+  }
+  return renderTemplate`${maybeRenderHead()}<img${addAttribute(image.src, "src")}${spreadAttributes(additionalAttributes)}${spreadAttributes(image.attributes)}>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/node_modules/astro/components/Image.astro", void 0);
+
+const $$Astro$g = createAstro("https://demo.ecomplus.app");
+const $$Picture$1 = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$g, $$props, $$slots);
+  Astro2.self = $$Picture$1;
+  const defaultFormats = ["webp"];
+  const defaultFallbackFormat = "png";
+  const specialFormatsFallback = ["gif", "svg", "jpg", "jpeg"];
+  const { formats = defaultFormats, pictureAttributes = {}, fallbackFormat, ...props } = Astro2.props;
+  if (props.alt === void 0 || props.alt === null) {
+    throw new AstroError(ImageMissingAlt);
+  }
+  const optimizedImages = await Promise.all(
+    formats.map(
+      async (format) => await getImage({ ...props, format, widths: props.widths, densities: props.densities })
+    )
+  );
+  let resultFallbackFormat = fallbackFormat ?? defaultFallbackFormat;
+  if (!fallbackFormat && isESMImportedImage(props.src) && specialFormatsFallback.includes(props.src.format)) {
+    resultFallbackFormat = props.src.format;
+  }
+  const fallbackImage = await getImage({
+    ...props,
+    format: resultFallbackFormat,
+    widths: props.widths,
+    densities: props.densities
+  });
+  const imgAdditionalAttributes = {};
+  const sourceAdditionaAttributes = {};
+  if (props.sizes) {
+    sourceAdditionaAttributes.sizes = props.sizes;
+  }
+  if (fallbackImage.srcSet.values.length > 0) {
+    imgAdditionalAttributes.srcset = fallbackImage.srcSet.attribute;
+  }
+  return renderTemplate`${maybeRenderHead()}<picture${spreadAttributes(pictureAttributes)}>
+	${Object.entries(optimizedImages).map(([_, image]) => {
+    const srcsetAttribute = props.densities || !props.densities && !props.widths ? `${image.src}${image.srcSet.values.length > 0 ? ", " + image.srcSet.attribute : ""}` : image.srcSet.attribute;
+    return renderTemplate`<source${addAttribute(srcsetAttribute, "srcset")}${addAttribute("image/" + image.options.format, "type")}${spreadAttributes(sourceAdditionaAttributes)}>`;
+  })}
+	<img${addAttribute(fallbackImage.src, "src")}${spreadAttributes(imgAdditionalAttributes)}${spreadAttributes(fallbackImage.attributes)}>
+</picture>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/node_modules/astro/components/Picture.astro", void 0);
+
+const imageConfig = {"service":{"entrypoint":"astro/assets/services/sharp","config":{}},"domains":[],"remotePatterns":[],"endpoint":"astro/assets/endpoint/node"};
+					const assetsDir = new URL("file:///home/leo/code/ecomplus/cloud-commerce/packages/storefront/dist/client/");
+					const getImage = async (options) => await getImage$1(options, imageConfig);
+
 global.__storefrontCMS = (fs, resolvePath) => {
   const { STOREFRONT_BASE_DIR } = process.env;
   let baseDir;
@@ -224,7 +296,7 @@ const loadRouteContext = async (Astro, {
   const { slug } = Astro.params;
   if (isHomepage) {
     cmsContent = await config.getContent("pages/home");
-  } else if (slug) {
+  } else if (slug && typeof slug === "string") {
     if (contentCollection) {
       cmsContent = await config.getContent(`${contentCollection}/${slug}`);
     } else if (slug.startsWith("_api/") || slug === "_analytics") {
@@ -339,7 +411,9 @@ const $$ViewTransitions = createComponent(async ($$result, $$props, $$slots) =>
   const Astro2 = $$result.createAstro($$Astro$f, $$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/src/lib/components/ViewTransitions.astro", void 0);
 
 var __freeze$4 = Object.freeze;
@@ -468,7 +542,7 @@ window.$isCmsPreview = true;`;
     url: `https://${domain}/`,
     logo: `https://${domain}${settings.logo}`
   });
-  return renderTemplate(_c || (_c = __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?.fbAppId && renderTemplate`<meta property="fb:app_id"${addAttribute(metatagsContent.fbAppId, "content")}>`, metatagsContent?.twitterUsername && renderTemplate`<meta name="twitter:site"${addAttribute(metatagsContent.twitterUsername, "content")}>`, addAttribute(String(storeId), "content"), isPWA , addAttribute(createTransitionScope($$result, "23j4qrxj"), "data-astro-transition-persist"), unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd), hasViewTransitions && renderTemplate`${renderComponent($$result, "ViewTransitions", $$ViewTransitions, { "fallback": "none" })}`, contextInlineClientJS && renderTemplate(_b || (_b = __template$4(["<script>", "<\/script>"])), unescapeHTML(contextInlineClientJS)));
+  return renderTemplate(_c || (_c = __template$4(['<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<script", ">", '<\/script>\n<script type="application/ld+json">', "<\/script>\n\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?.fbAppId && renderTemplate`<meta property="fb:app_id"${addAttribute(metatagsContent.fbAppId, "content")}>`, metatagsContent?.twitterUsername && renderTemplate`<meta name="twitter:site"${addAttribute(metatagsContent.twitterUsername, "content")}>`, addAttribute(String(storeId), "content"), isPWA , addAttribute(createTransitionScope($$result, "23j4qrxj"), "data-astro-transition-persist"), unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd), hasViewTransitions && renderTemplate`${renderComponent($$result, "ViewTransitions", $$ViewTransitions, { "fallback": "none" })}`, contextInlineClientJS && renderTemplate(_b || (_b = __template$4(["<script>", "<\/script>"])), unescapeHTML(contextInlineClientJS)));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseHead.astro", "self");
 
 function has(value) {
@@ -705,54 +779,6 @@ const createPictureGetter = (getImage) => {
   };
 };
 
-const { STOREFRONT_BASE_DIR } = process.env;
-const baseDir = STOREFRONT_BASE_DIR || process.cwd();
-const builtImages = [];
-const manifestFilepath = join(baseDir, "dist/server/images.dist.csv");
-try {
-  readFileSync(manifestFilepath, "utf-8").split(/\n/).forEach((line) => {
-    const [filename, width, height] = line.split(",");
-    builtImages.push({
-      filename,
-      width: Number(width),
-      height: Number(height)
-    });
-  });
-} catch (err) {
-  if (global.$renderStorefront) {
-    console.error(err);
-  }
-}
-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 };
-};
-
-const getBuiltPicture = createPictureGetter(getBuiltImage);
-
 const getAspectRatio = (src, tryImageSize) => {
   if (typeof src === "string") {
     src = tryImageSize(src);
@@ -905,27 +931,31 @@ const $$Astro$d = createAstro("https://demo.ecomplus.app");
 const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$d, $$props, $$slots);
   Astro2.self = $$Picture;
-  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 deployRand = ({}).DEPLOY_RAND;
+  const versionSuffix = ({}).BUILD_OUTPUT !== "static" && deployRand ? `&V=${deployRand}` : "";
+  const getImageFilepath = (src) => {
+    const filepath = resolve(process.env.STOREFRONT_BASE_DIR, `public${src}`);
+    if (({}).BUILD_OUTPUT === "static") {
+      try {
+        copyFileSync(filepath, resolve(
+          process.env.STOREFRONT_BASE_DIR,
+          ({}).BUILD_OUT_DIR || "dist/client",
+          "_astro",
+          basename$1(filepath)
+        ));
+      } catch (err) {
+        console.error(err);
+      }
+    }
+    return filepath;
+  };
   const tryImageSize = (src) => {
     let dimensions = {};
     if (typeof src === "string" && src.startsWith("/")) {
-      const originalImage = originalImages.find(({ filepath }) => {
-        return new RegExp(`^/${filepath}\\??.*`).test(src);
-      });
-      if (originalImage) {
-        const { width, height } = originalImage;
-        dimensions = { width, height };
+      try {
+        dimensions = imageSize(getImageFilepath(src));
+      } catch (e) {
+        dimensions = {};
       }
     }
     return dimensions;
@@ -938,18 +968,62 @@ const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
   } = await useSSRPicture({
     ...Astro2.props,
     tryImageSize,
-    getPicture: getBuiltPicture,
+    getPicture: createPictureGetter(async (imageOptions) => {
+      let imageMetadata;
+      if (imageOptions.src.startsWith("/")) {
+        const imageFilepath = getImageFilepath(imageOptions.src);
+        const { width: width2, height: height2 } = tryImageSize(imageOptions.src);
+        if (width2 && height2) {
+          const mimeType = mime.getType(imageFilepath);
+          if (mimeType?.startsWith("image/")) {
+            imageMetadata = {
+              src: imageFilepath,
+              width: width2,
+              height: height2,
+              // @ts-ignore
+              format: mimeType.replace("image/", "")
+            };
+          }
+        }
+      }
+      const {
+        src,
+        attributes: { width, height }
+      } = await getImage({
+        ...imageOptions,
+        src: imageMetadata || imageOptions.src
+      });
+      return { src, width, height };
+    }),
     assetsPrefix: Astro2.locals.assetsPrefix
   });
-  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);
+  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);
 
 const $$Astro$c = createAstro("https://demo.ecomplus.app");
 const $$BaseBody = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$c, $$props, $$slots);
   Astro2.self = $$BaseBody;
   const { settings } = Astro2.locals.routeContext;
-  return renderTemplate`${maybeRenderHead()}<body style="visibility:hidden" class="!visible"> <!-- Prevent FOUC --> <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>`;
+  return renderTemplate`${maybeRenderHead()}<body style="visibility:hidden" class="!visible"> <!-- Prevent FOUC -->
+  <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$b = createAstro("https://demo.ecomplus.app");
@@ -958,7 +1032,16 @@ const $$Base$1 = createComponent(async ($$result, $$props, $$slots) => {
   Astro2.self = $$Base$1;
   const { getContent } = Astro2.locals.routeContext;
   const { customCode } = await getContent("layout");
-  return renderTemplate`${renderComponent($$result, "Head", Head, {}, { "default": ($$result2) => renderTemplate` ${renderSlot($$result2, $$slots["base-head"])} ${customCode?.css && renderTemplate`<style>{customCode.css}</style>`}${customCode?.htmlHead && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(customCode.htmlHead)}` })}`}${renderSlot($$result2, $$slots["base-head-scripts"])} ${renderSlot($$result2, $$slots["before-head-end"])} ` })} ${renderComponent($$result, "BaseBody", $$BaseBody, {}, { "default": ($$result2) => renderTemplate` ${renderSlot($$result2, $$slots["default"])} ${customCode?.htmlBody && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(customCode.htmlBody)}` })}`}${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"])}
+  ${customCode?.css && renderTemplate`<style>{customCode.css}</style>`}${customCode?.htmlHead && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(customCode.htmlHead)}` })}`}${renderSlot($$result2, $$slots["base-head-scripts"])}
+  ${renderSlot($$result2, $$slots["before-head-end"])}
+` })}
+${renderComponent($$result, "BaseBody", $$BaseBody, {}, { "default": ($$result2) => renderTemplate`
+  ${renderSlot($$result2, $$slots["default"])}
+  ${customCode?.htmlBody && renderTemplate`${renderComponent($$result2, "Fragment", Fragment, {}, { "default": ($$result3) => renderTemplate`${unescapeHTML(customCode.htmlBody)}` })}`}${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$3 = Object.freeze;
@@ -976,7 +1059,13 @@ const $$Astro$9 = createAstro("https://demo.ecomplus.app");
 const $$Base = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$9, $$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) => {
@@ -1340,8 +1429,10 @@ const useStorage = (key, initialValue, storage = globalThis.localStorage) => {
     }
   }
   const state = reactive(persistedValue || initialValue);
-  watch(state, () => {
+  watchDebounced(state, () => {
     storage.setItem(key, JSON.stringify(state));
+  }, {
+    debounce: 50
   });
   return state;
 };
@@ -1425,73 +1516,29 @@ const storageKey$1 = "ecomShoppingCart";
 const emptyCart = {
   items: []
 };
-const cart = useStorage(storageKey$1, emptyCart);
-const cartItems = computed(() => {
-  return cart.items.map((item) => {
-    let finalPrice = item.kit_product?.price && item.kit_product.pack_quantity ? item.kit_product.price / item.kit_product.pack_quantity : item.price;
-    if (Array.isArray(item.customizations)) {
-      item.customizations.forEach((customization) => {
-        if (customization.add_to_price) {
-          const { type, addition } = customization.add_to_price;
-          finalPrice += type === "fixed" ? addition : item.price * (addition / 100);
-        }
-      });
-    }
-    item.final_price = finalPrice;
-    const min = item.min_quantity || 1;
-    const max = item.max_quantity;
-    if (typeof item.quantity !== "number" || Number.isNaN(item.quantity) || item.quantity < min) {
-      item.quantity = min;
-    } else if (max && item.quantity > max) {
-      item.quantity = max;
-    }
-    return item;
-  });
-});
-const subtotal = computed(() => {
-  return cartItems.value.reduce((acc, item) => {
-    return acc + item.quantity * (item.final_price || item.price);
-  }, 0);
-});
+const shoppingCart = useStorage(storageKey$1, emptyCart);
 const totalItems = computed(() => {
-  return cartItems.value.reduce((acc, item) => {
+  return shoppingCart.items.reduce((acc, item) => {
     return acc + item.quantity;
   }, 0);
 });
-const shoppingCart = computed({
-  get() {
-    return {
-      ...cart,
-      subtotal: subtotal.value
-    };
-  },
-  set(newCart) {
-    Object.assign(cart, newCart, {
-      subtotal: subtotal.value
-    });
-  }
-});
 const addCartItem = (newItem) => {
-  const cartObj = shoppingCart.value;
-  const upsertedItem = addCartItem$1(cartObj, newItem);
-  if (upsertedItem) {
-    shoppingCart.value.items = cartObj.items;
-  }
+  addCartItem$1(shoppingCart, newItem);
 };
 const removeCartItem = (itemId) => {
-  for (let i = 0; i < shoppingCart.value.items.length; i++) {
-    const item = shoppingCart.value.items[i];
+  for (let i = 0; i < shoppingCart.items.length; i++) {
+    const item = shoppingCart.items[i];
     if (item._id === itemId) {
-      shoppingCart.value.items.splice(i, 1);
+      shoppingCart.items.splice(i, 1);
       break;
     }
   }
 };
 const addProductToCart = (product, variationId, quantity) => addCartItem(parseProduct(product, variationId, quantity));
 const cartEmitter = mitt();
-const cloneItems = () => shoppingCart.value.items.map((item) => ({ ...item }));
+const cloneItems = () => shoppingCart.items.map((item) => ({ ...item }));
 let oldItems = cloneItems();
-watchDebounced(shoppingCart, ({ items }) => {
+const emitCartEvents = useDebounceFn((items) => {
   ["addCartItem", "removeCartItem"].forEach((evName) => {
     const isAdd = evName === "addCartItem";
     const baseItems = isAdd ? items : oldItems;
@@ -1510,7 +1557,32 @@ watchDebounced(shoppingCart, ({ items }) => {
     });
   });
   oldItems = cloneItems();
-}, { debounce: 200 });
+}, 200);
+watch(shoppingCart.items, (items) => {
+  items.forEach((item) => {
+    let finalPrice = item.kit_product?.price && item.kit_product.pack_quantity ? item.kit_product.price / item.kit_product.pack_quantity : item.price;
+    if (Array.isArray(item.customizations)) {
+      item.customizations.forEach((customization) => {
+        if (customization.add_to_price) {
+          const { type, addition } = customization.add_to_price;
+          finalPrice += type === "fixed" ? addition : item.price * (addition / 100);
+        }
+      });
+    }
+    item.final_price = finalPrice;
+    const min = item.min_quantity || 1;
+    const max = item.max_quantity;
+    if (typeof item.quantity !== "number" || Number.isNaN(item.quantity) || item.quantity < min) {
+      item.quantity = min;
+    } else if (max && item.quantity > max) {
+      item.quantity = max;
+    }
+  });
+  shoppingCart.subtotal = items.reduce((acc, item) => {
+    return acc + item.quantity * (item.final_price || item.price);
+  }, 0);
+  emitCartEvents(items);
+});
 ({
   on: cartEmitter.on,
   off: cartEmitter.off
@@ -1667,10 +1739,15 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean, default: false },
+    isHidden: { type: Boolean, default: false },
     placement: { default: "start" },
     position: { default: "fixed" },
+    animation: { default: "slide" },
     hasCloseButton: { type: Boolean, default: true },
-    backdropTarget: { default: "#teleported-top" }
+    anchorEl: {},
+    backdropTarget: { default: "#teleported-top" },
+    maxWidth: {},
+    class: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1681,6 +1758,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const drawer = ref(null);
     const outsideClickListener = (ev) => {
       if (!drawer.value?.contains(ev.target)) {
+        if (props.anchorEl?.contains(ev.target))
+          return;
         close();
       }
     };
@@ -1707,6 +1786,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
     });
     const slideTo = computed(() => {
+      if (props.animation !== "slide")
+        return null;
       switch (props.placement) {
         case "start":
           return "left";
@@ -1718,13 +1799,36 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           return "up";
       }
     });
+    const animationClassName = ref(null);
+    if (props.animation === "scale") {
+      watch(toRef(props, "modelValue"), (isShown) => {
+        if (!isShown) {
+          animationClassName.value = "transition scale-90";
+        } else {
+          nextTick(() => {
+            setTimeout(() => {
+              animationClassName.value = "transition";
+              setTimeout(() => {
+                if (props.modelValue)
+                  animationClassName.value = "";
+              }, 300);
+            }, 50);
+          });
+        }
+      }, { immediate: true });
+    }
+    const customClassList = computed(() => {
+      if (Array.isArray(props.class))
+        return props.class;
+      return [props.class];
+    });
     const isFixed = computed(() => {
       return props.position === "fixed";
     });
     const isPlacementX = computed(() => {
       return props.placement === "start" || props.placement === "end";
     });
-    const __returned__ = { props, emit, close, drawer, outsideClickListener, escClickListener, scrollbarWidth, slideTo, isFixed, isPlacementX };
+    const __returned__ = { props, emit, close, drawer, outsideClickListener, escClickListener, scrollbarWidth, slideTo, animationClassName, customClassList, isFixed, isPlacementX };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -1739,15 +1843,21 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
         if ($props.modelValue) {
-          _push2(`<dialog class="${ssrRenderClass([[
+          _push2(`<dialog style="${ssrRenderStyle([
+            !$props.isHidden ? null : { display: "none" },
+            {
+              maxWidth: $props.maxWidth ? `min(${$props.maxWidth}, calc(100vw - ${$setup.scrollbarWidth}px))` : !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : void 0
+            }
+          ])}" class="${ssrRenderClass([[
             $props.position,
+            $setup.isPlacementX ? "m-0" : "mx-auto",
+            $setup.isPlacementX && !$props.maxWidth ? "max-w-sm" : 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
-          ], "z-50 m-0 w-screen p-0 shadow"])}" style="${ssrRenderStyle({
-            maxWidth: !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : void 0
-          })}"${ssrIncludeBooleanAttr($props.modelValue) ? " open" : ""}${ssrRenderAttr("data-drawer", $props.placement)}${_scopeId}><div class="relative h-full"${_scopeId}>`);
+            $setup.animationClassName,
+            ...$setup.customClassList
+          ], "z-40 w-screen p-0"])}"${ssrIncludeBooleanAttr($props.modelValue) ? " open" : ""}${ssrRenderAttr("data-drawer", $props.placement)}${_scopeId}><div class="relative h-full"${_scopeId}>`);
           if ($props.hasCloseButton) {
             _push2(`<button type="button"${ssrRenderAttr("aria-label", "Fechar")} class="${ssrRenderClass([$props.placement === "end" ? "left-2" : "right-2", "absolute top-2 z-30"])}" data-drawer-close${_scopeId}>`);
             ssrRenderSlot(_ctx.$slots, "close", {}, () => {
@@ -1759,46 +1869,53 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           }
           ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
           _push2(`</div>`);
-          ssrRenderTeleport(_push2, (_push3) => {
-            _push3(ssrRenderComponent(_component_Fade, null, {
-              default: withCtx((_2, _push4, _parent3, _scopeId2) => {
-                if (_push4) {
-                  if ($props.modelValue) {
-                    _push4(`<div class="fixed left-0 top-0 z-40 h-screen w-screen bg-black/50" data-drawer-backdrop${_scopeId2}></div>`);
+          if ($props.backdropTarget) {
+            ssrRenderTeleport(_push2, (_push3) => {
+              _push3(ssrRenderComponent(_component_Fade, null, {
+                default: withCtx((_2, _push4, _parent3, _scopeId2) => {
+                  if (_push4) {
+                    if ($props.modelValue && !$props.isHidden) {
+                      _push4(`<div class="fixed left-0 top-0 z-30 h-screen w-screen bg-black/50" data-drawer-backdrop${_scopeId2}></div>`);
+                    } else {
+                      _push4(`<!---->`);
+                    }
                   } else {
-                    _push4(`<!---->`);
+                    return [
+                      $props.modelValue && !$props.isHidden ? (openBlock(), createBlock("div", {
+                        key: 0,
+                        class: "fixed left-0 top-0 z-30 h-screen w-screen bg-black/50",
+                        "data-drawer-backdrop": ""
+                      })) : createCommentVNode("", true)
+                    ];
                   }
-                } else {
-                  return [
-                    $props.modelValue ? (openBlock(), createBlock("div", {
-                      key: 0,
-                      class: "fixed left-0 top-0 z-40 h-screen w-screen bg-black/50",
-                      "data-drawer-backdrop": ""
-                    })) : createCommentVNode("", true)
-                  ];
-                }
-              }),
-              _: 1
-            }, _parent2, _scopeId));
-          }, $props.backdropTarget, false, _parent2);
+                }),
+                _: 1
+              }, _parent2, _scopeId));
+            }, $props.backdropTarget, false, _parent2);
+          } else {
+            _push2(`<!---->`);
+          }
           _push2(`</dialog>`);
         } else {
           _push2(`<!---->`);
         }
       } else {
         return [
-          $props.modelValue ? (openBlock(), createBlock("dialog", {
+          $props.modelValue ? withDirectives((openBlock(), createBlock("dialog", {
             key: 0,
             ref: "drawer",
-            class: ["z-50 m-0 w-screen p-0 shadow", [
+            class: ["z-40 w-screen p-0", [
               $props.position,
+              $setup.isPlacementX ? "m-0" : "mx-auto",
+              $setup.isPlacementX && !$props.maxWidth ? "max-w-sm" : 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
+              $setup.animationClassName,
+              ...$setup.customClassList
             ]],
             style: {
-              maxWidth: !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : void 0
+              maxWidth: $props.maxWidth ? `min(${$props.maxWidth}, calc(100vw - ${$setup.scrollbarWidth}px))` : !$setup.isPlacementX ? `calc(100vw - ${$setup.scrollbarWidth}px)` : void 0
             },
             open: $props.modelValue,
             "data-drawer": $props.placement
@@ -1818,19 +1935,24 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               ], 10, ["onClick"])) : createCommentVNode("", true),
               renderSlot$1(_ctx.$slots, "default")
             ]),
-            (openBlock(), createBlock(Teleport, { to: $props.backdropTarget }, [
+            $props.backdropTarget ? (openBlock(), createBlock(Teleport, {
+              key: 0,
+              to: $props.backdropTarget
+            }, [
               createVNode(_component_Fade, null, {
                 default: withCtx(() => [
-                  $props.modelValue ? (openBlock(), createBlock("div", {
+                  $props.modelValue && !$props.isHidden ? (openBlock(), createBlock("div", {
                     key: 0,
-                    class: "fixed left-0 top-0 z-40 h-screen w-screen bg-black/50",
+                    class: "fixed left-0 top-0 z-30 h-screen w-screen bg-black/50",
                     "data-drawer-backdrop": ""
                   })) : createCommentVNode("", true)
                 ]),
                 _: 1
               })
-            ], 8, ["to"]))
-          ], 14, ["open", "data-drawer"])) : createCommentVNode("", true)
+            ], 8, ["to"])) : createCommentVNode("", true)
+          ], 14, ["open", "data-drawer"])), [
+            [vShow, !$props.isHidden]
+          ]) : createCommentVNode("", true)
         ];
       }
     }),
@@ -2123,7 +2245,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
-  _push(`<aside${ssrRenderAttrs(mergeProps({ class: "flex h-full flex-col" }, _attrs))}><nav class="grow py-4"><ul class="relative h-full"><!--[-->`);
+  _push(`<aside${ssrRenderAttrs(mergeProps({ class: "flex h-full flex-col bg-white" }, _attrs))}><nav class="grow py-4"><ul class="relative h-full"><!--[-->`);
   ssrRenderList($props.categoryTrees, (categoryTree, i) => {
     _push(ssrRenderComponent($setup["ShopSidenavCategory"], {
       key: i,
@@ -2271,7 +2393,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           default: withCtx((_, _push3, _parent3, _scopeId2) => {
             if (_push3) {
               _push3(ssrRenderComponent($setup["PopoverPanel"], {
-                class: ["text-base-700 absolute left-1/2 top-3 z-20 -translate-x-1/2 !transform rounded bg-white px-6 py-4 text-base shadow", $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: ["text-base-700 absolute left-1/2 top-3 z-50 -translate-x-1/2 !transform rounded bg-white px-6 py-4 text-base shadow", $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(({ close }, _push4, _parent4, _scopeId3) => {
                   if (_push4) {
@@ -2381,7 +2503,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             } else {
               return [
                 createVNode($setup["PopoverPanel"], {
-                  class: ["text-base-700 absolute left-1/2 top-3 z-20 -translate-x-1/2 !transform rounded bg-white px-6 py-4 text-base shadow", $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: ["text-base-700 absolute left-1/2 top-3 z-50 -translate-x-1/2 !transform rounded bg-white px-6 py-4 text-base shadow", $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(({ close }) => [
                     createVNode("div", { class: "flex w-full gap-6" }, [
@@ -2479,7 +2601,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             createVNode(_component_Fade, null, {
               default: withCtx(() => [
                 createVNode($setup["PopoverPanel"], {
-                  class: ["text-base-700 absolute left-1/2 top-3 z-20 -translate-x-1/2 !transform rounded bg-white px-6 py-4 text-base shadow", $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: ["text-base-700 absolute left-1/2 top-3 z-50 -translate-x-1/2 !transform rounded bg-white px-6 py-4 text-base shadow", $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(({ close }) => [
                     createVNode("div", { class: "flex w-full gap-6" }, [
@@ -3306,8 +3428,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     __expose();
-    const SearchModal = defineAsyncComponent(() => import('../SearchModal_2afca4fe.mjs'));
-    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_03b51b57.mjs'));
+    const SearchModal = defineAsyncComponent(() => import('../SearchModal_f66549d4.mjs'));
+    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_eab28771.mjs'));
     const props = __props;
     const header = ref(null);
     const {
@@ -3322,6 +3444,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     watchOnce(isSearchOpen, () => {
       isSearchOpenOnce.value = true;
     });
+    const searchTerm = ref("");
+    const searchInput = ref(null);
+    const toggleSearch = (ev) => {
+      isSearchOpen.value = !isSearchOpen.value;
+      if (isSearchOpen.value) {
+        ev.preventDefault();
+        nextTick(() => searchInput.value?.focus());
+      } else if (!searchTerm.value) {
+        ev.preventDefault();
+      }
+    };
     const isCartOpen = ref(false);
     const isCartOpenOnce = ref(false);
     watchOnce(isCartOpen, () => {
@@ -3342,12 +3475,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         delayedTotalItems.value = newTotalItems;
       }, { immediate: true });
     });
-    const __returned__ = { SearchModal, CartSidebar, props, header, isSticky, positionY, categoryTrees, inlineMenuTrees, isSidenavOpen, isSearchOpen, isSearchOpenOnce, isCartOpen, isCartOpenOnce, isMounted, delayedTotalItems, Drawer, ShopSidenav, ShopHeaderMenu, AccountMenu };
+    const __returned__ = { SearchModal, CartSidebar, props, header, isSticky, positionY, categoryTrees, inlineMenuTrees, isSidenavOpen, isSearchOpen, isSearchOpenOnce, searchTerm, searchInput, toggleSearch, isCartOpen, isCartOpenOnce, isMounted, delayedTotalItems, Drawer, ShopSidenav, ShopHeaderMenu, AccountMenu };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Fade = resolveComponent("Fade");
   const _component_Skeleton = resolveComponent("Skeleton");
   _push(`<header${ssrRenderAttrs(mergeProps({
     ref: "header",
@@ -3361,7 +3495,40 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   ], "text-3xl transition-colors"])}"></i></button></div>`);
   ssrRenderSlot(_ctx.$slots, "logo", {}, null, _push, _parent);
   _push(ssrRenderComponent($setup["ShopHeaderMenu"], mergeProps({ class: "hidden lg:block" }, { inlineMenuTrees: $setup.inlineMenuTrees }), null, _parent));
-  _push(`<div class="text-base-800 flex basis-1/4 items-center justify-end gap-3 px-2 lg:gap-4"><a href="/s"${ssrRenderAttr("aria-label", "Buscar produtos")} role="button"><i class="i-magnifying-glass hover:text-primary h-7 w-7 hover:scale-110 active:scale-125"></i></a>`);
+  _push(`<div class="text-base-800 flex basis-1/4 items-center justify-end gap-3 px-2 lg:gap-4"><form action="/s" method="get" class="relative"><label for="HeaderSearch" class="sr-only">${ssrInterpolate("Buscar produtos")}</label>`);
+  _push(ssrRenderComponent(_component_Fade, null, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div style="${ssrRenderStyle($setup.isSearchOpen ? null : { display: "none" })}" class="absolute -right-0.5 -top-2 flex items-stretch"${_scopeId}><div class="hidden w-12 bg-gradient-to-r from-transparent to-white sm:block"${_scopeId}></div><input type="search" id="HeaderSearch" name="term"${ssrRenderAttr("value", $setup.searchTerm)} class="to-primary-50 border-primary/20 border-1 w-72 max-w-md bg-gradient-to-r from-white py-3 pl-5 pr-12 text-base ring-0 md:w-screen"${ssrRenderAttr("placeholder", `${"Buscar produtos"} ...`)}${_scopeId}></div>`);
+      } else {
+        return [
+          withDirectives(createVNode("div", { class: "absolute -right-0.5 -top-2 flex items-stretch" }, [
+            createVNode("div", { class: "hidden w-12 bg-gradient-to-r from-transparent to-white sm:block" }),
+            withDirectives(createVNode("input", {
+              ref: "searchInput",
+              type: "search",
+              id: "HeaderSearch",
+              name: "term",
+              "onUpdate:modelValue": ($event) => $setup.searchTerm = $event,
+              class: "to-primary-50 border-primary/20 border-1 w-72 max-w-md bg-gradient-to-r from-white py-3 pl-5 pr-12 text-base ring-0 md:w-screen",
+              placeholder: `${"Buscar produtos"} ...`
+            }, null, 8, ["onUpdate:modelValue", "placeholder"]), [
+              [
+                vModelText,
+                $setup.searchTerm,
+                void 0,
+                { trim: true }
+              ]
+            ])
+          ], 512), [
+            [vShow, $setup.isSearchOpen]
+          ])
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`<button type="submit"${ssrRenderAttr("aria-label", "Buscar produtos")}><i class="${ssrRenderClass([$setup.isSearchOpen && "text-primary-600 -translate-x-2", "i-magnifying-glass hover:text-primary h-7 w-7 hover:scale-110 active:scale-125"])}"></i></button></form>`);
   _push(ssrRenderComponent($setup["AccountMenu"], { class: "hidden sm:block" }, {
     button: withCtx(({ open }, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -3396,10 +3563,10 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
-        _push2(ssrRenderComponent($setup["ShopSidenav"], mergeProps({ class: "bg-white pt-6" }, { categoryTrees: $setup.categoryTrees }), null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["ShopSidenav"], mergeProps({ class: "pt-6" }, { categoryTrees: $setup.categoryTrees }), null, _parent2, _scopeId));
       } else {
         return [
-          createVNode($setup["ShopSidenav"], mergeProps({ class: "bg-white pt-6" }, { categoryTrees: $setup.categoryTrees }), null, 16)
+          createVNode($setup["ShopSidenav"], mergeProps({ class: "pt-6" }, { categoryTrees: $setup.categoryTrees }), null, 16)
         ];
       }
     }),
@@ -3408,8 +3575,13 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(ssrRenderComponent($setup["Drawer"], {
     modelValue: $setup.isSearchOpen,
     "onUpdate:modelValue": ($event) => $setup.isSearchOpen = $event,
+    "is-hidden": !$setup.searchTerm || $setup.searchTerm.length < 2,
     "has-close-button": false,
-    placement: "top"
+    "anchor-el": $setup.searchInput?.parentElement,
+    placement: "top",
+    animation: "scale",
+    "max-width": "55rem",
+    class: "bg-white lg:mt-24 lg:bg-transparent"
   }, {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -3418,13 +3590,14 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             _push2(`<div class="container mx-auto"${_scopeId}>`);
             _push2(ssrRenderComponent(_component_Skeleton, {
               class: "p-6",
-              "is-large": ""
+              "is-large": "",
+              "is-bold": ""
             }, null, _parent2, _scopeId));
             _push2(`</div>`);
           },
           default: () => {
             if ($setup.isSearchOpenOnce) {
-              _push2(ssrRenderComponent($setup["SearchModal"], null, null, _parent2, _scopeId));
+              _push2(ssrRenderComponent($setup["SearchModal"], { term: $setup.searchTerm }, null, _parent2, _scopeId));
             } else {
               _push2(`<!---->`);
             }
@@ -3438,12 +3611,16 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               createVNode("div", { class: "container mx-auto" }, [
                 createVNode(_component_Skeleton, {
                   class: "p-6",
-                  "is-large": ""
+                  "is-large": "",
+                  "is-bold": ""
                 })
               ])
             ]),
             default: withCtx(() => [
-              $setup.isSearchOpenOnce ? (openBlock(), createBlock($setup["SearchModal"], { key: 0 })) : createCommentVNode("", true)
+              $setup.isSearchOpenOnce ? (openBlock(), createBlock($setup["SearchModal"], {
+                key: 0,
+                term: $setup.searchTerm
+              }, null, 8, ["term"])) : createCommentVNode("", true)
             ]),
             _: 1
           }))
@@ -3458,16 +3635,19 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         modelValue: $setup.isCartOpen,
         "onUpdate:modelValue": ($event) => $setup.isCartOpen = $event,
         placement: "end",
-        "backdrop-target": "#teleported-overlap"
+        "backdrop-target": "#teleported-overlap",
+        class: "shadow"
       }, {
         default: withCtx((_, _push3, _parent2, _scopeId) => {
           if (_push3) {
             ssrRenderSuspense(_push3, {
               fallback: () => {
+                _push3(`<div class="h-full bg-white"${_scopeId}>`);
                 _push3(ssrRenderComponent(_component_Skeleton, {
                   class: "px-6 pt-16",
                   "is-bold": ""
                 }, null, _parent2, _scopeId));
+                _push3(`</div>`);
               },
               default: () => {
                 if ($setup.isCartOpenOnce) {
@@ -3484,10 +3664,12 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             return [
               (openBlock(), createBlock(Suspense, null, {
                 fallback: withCtx(() => [
-                  createVNode(_component_Skeleton, {
-                    class: "px-6 pt-16",
-                    "is-bold": ""
-                  })
+                  createVNode("div", { class: "h-full bg-white" }, [
+                    createVNode(_component_Skeleton, {
+                      class: "px-6 pt-16",
+                      "is-bold": ""
+                    })
+                  ])
                 ]),
                 default: withCtx(() => [
                   $setup.isCartOpenOnce ? (openBlock(), createBlock($setup["CartSidebar"], {
@@ -3535,7 +3717,13 @@ const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
     field: "categories",
     value: categories?.map(({ _id, ...c }) => c)
   });
-  return renderTemplate`${renderSlot($$result, $$slots["pitch-bar"], renderTemplate(_a$2 || (_a$2 = __template$2([" ", "", " <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:context": true, "client:component-hydration": "context", "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$2 || (_a$2 = __template$2(["\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:context": true, "client:component-hydration": "context", "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 _sfc_main$g = /* @__PURE__ */ defineComponent({
@@ -3873,7 +4061,13 @@ const $$PageFooter = createComponent(async ($$result, $$props, $$slots) => {
       }
     }
   }
-  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> ` })}` })}`;
+  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) => {
@@ -4097,7 +4291,8 @@ const $$BannerPictures = createComponent(async ($$result, $$props, $$slots) => {
   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}` })}`}`;
+  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) => {
@@ -4229,7 +4424,13 @@ const $$BannersGrid = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$5, $$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>`;
+  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 emitGtagEvent = async (name, _params) => {
@@ -4725,11 +4926,11 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(`<article${ssrRenderAttrs(mergeProps({
     ref: "card",
     "data-sku": $setup.product.sku,
-    class: "group relative mx-auto h-full max-w-[350px] py-3"
+    class: "group relative mx-auto h-full max-w-[350px] px-0.5 py-3 hover:z-[1]"
   }, _attrs))}>`);
   _push(ssrRenderComponent(_component_ALink, {
     href: $setup.link,
-    class: "flex h-full flex-col overflow-hidden rounded ring-black/5 group-hover:shadow group-hover:ring-1"
+    class: "flex h-full flex-col overflow-hidden rounded bg-white ring-black/5 group-hover:shadow group-hover:ring-1"
   }, {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -4760,7 +4961,7 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         } else {
           _push2(`<!---->`);
         }
-        _push2(`<div class="relative z-10 flex grow flex-col justify-between bg-white/40 p-4 group-hover:backdrop-blur-md"${_scopeId}>`);
+        _push2(`<div class="relative z-10 flex grow flex-col justify-between p-4"${_scopeId}>`);
         ssrRenderVNode(_push2, createVNode(resolveDynamicComponent($props.headingTag), {
           class: ["ui-link line-clamp-2 no-underline", [
             $setup.isActive ? "text-base-700" : "text-base-500",
@@ -4826,7 +5027,7 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             createVNode("strong", null, toDisplayString($setup.discountPercentage), 1),
             createTextVNode("% ")
           ])) : createCommentVNode("", true),
-          createVNode("div", { class: "relative z-10 flex grow flex-col justify-between bg-white/40 p-4 group-hover:backdrop-blur-md" }, [
+          createVNode("div", { class: "relative z-10 flex grow flex-col justify-between p-4" }, [
             (openBlock(), createBlock(resolveDynamicComponent($props.headingTag), {
               class: ["ui-link line-clamp-2 no-underline", [
                 $setup.isActive ? "text-base-700" : "text-base-500",
@@ -4887,6 +5088,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     __expose();
     let __temp, __restore;
     const props = __props;
+    const [
+      DefineCarouselControl,
+      ReuseCarouselControl
+    ] = createReusableTemplate();
     const {
       title,
       titleLink,
@@ -4897,7 +5102,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       [__temp, __restore] = withAsyncContext(() => fetching), await __temp, __restore();
     }
     const listName = title.value || `Shelf ${useId()}`;
-    const __returned__ = { props, title, titleLink, fetching, products, listName, ProductCard };
+    const __returned__ = { props, DefineCarouselControl, ReuseCarouselControl, title, titleLink, fetching, products, listName, ProductCard };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -4931,24 +5136,44 @@ function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(ssrRenderComponent(_component_Carousel, { class: "group/shelf" }, {
     controls: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
-        _push2(`<div style="${ssrRenderStyle($setup.products.length > 2 ? null : { display: "none" })}" class="text-primary text-3xl leading-none transition-opacity group-hover/shelf:opacity-90 lg:text-2xl lg:opacity-0"${_scopeId}>`);
-        _push2(ssrRenderComponent(_component_CarouselControl, {
-          class: "lg:hover:bg-primary-300/60 !-left-4 !top-1/2 h-12 w-12 rounded-full bg-transparent ring-black/5 lg:bg-white/80 lg:shadow-sm lg:ring-1",
-          "is-prev": ""
-        }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent(_component_CarouselControl, { class: "lg:hover:bg-primary-300/60 !-right-4 !top-1/2 h-12 w-12 rounded-full bg-transparent ring-black/5 lg:bg-white/80 lg:shadow-sm lg:ring-1" }, null, _parent2, _scopeId));
-        _push2(`</div>`);
+        _push2(ssrRenderComponent($setup["DefineCarouselControl"], null, {
+          default: withCtx(({ isPrev }, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(ssrRenderComponent(_component_CarouselControl, {
+                style: $setup.products.length > 2 ? null : { display: "none" },
+                class: ["uno-nxxji7", isPrev ? "!-left-4" : "!-right-4"],
+                "is-prev": isPrev
+              }, null, _parent3, _scopeId2));
+            } else {
+              return [
+                withDirectives(createVNode(_component_CarouselControl, {
+                  class: ["uno-nxxji7", isPrev ? "!-left-4" : "!-right-4"],
+                  "is-prev": isPrev
+                }, null, 8, ["class", "is-prev"]), [
+                  [vShow, $setup.products.length > 2]
+                ])
+              ];
+            }
+          }),
+          _: 1
+        }, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["ReuseCarouselControl"], { "is-prev": true }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["ReuseCarouselControl"], null, null, _parent2, _scopeId));
       } else {
         return [
-          withDirectives(createVNode("div", { class: "text-primary text-3xl leading-none transition-opacity group-hover/shelf:opacity-90 lg:text-2xl lg:opacity-0" }, [
-            createVNode(_component_CarouselControl, {
-              class: "lg:hover:bg-primary-300/60 !-left-4 !top-1/2 h-12 w-12 rounded-full bg-transparent ring-black/5 lg:bg-white/80 lg:shadow-sm lg:ring-1",
-              "is-prev": ""
-            }),
-            createVNode(_component_CarouselControl, { class: "lg:hover:bg-primary-300/60 !-right-4 !top-1/2 h-12 w-12 rounded-full bg-transparent ring-black/5 lg:bg-white/80 lg:shadow-sm lg:ring-1" })
-          ], 512), [
-            [vShow, $setup.products.length > 2]
-          ])
+          createVNode($setup["DefineCarouselControl"], null, {
+            default: withCtx(({ isPrev }) => [
+              withDirectives(createVNode(_component_CarouselControl, {
+                class: ["uno-nxxji7", isPrev ? "!-left-4" : "!-right-4"],
+                "is-prev": isPrev
+              }, null, 8, ["class", "is-prev"]), [
+                [vShow, $setup.products.length > 2]
+              ])
+            ]),
+            _: 1
+          }),
+          createVNode($setup["ReuseCarouselControl"], { "is-prev": true }),
+          createVNode($setup["ReuseCarouselControl"])
         ];
       }
     }),
@@ -5061,9 +5286,30 @@ const $$Breadcrumbs = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
   Astro2.self = $$Breadcrumbs;
   const { breadcrumbs, inlineJSONLd } = await useBreadcrumbs(Astro2.props);
-  return renderTemplate`${breadcrumbs.length > 0 && renderTemplate`${maybeRenderHead()}<section${addAttribute(`ui-section-slim ${breadcrumbs.length > 1 ? "" : "hidden lg:block"}`, "class")}><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$1 || (_a$1 = __template$1(['<script type="application/ld+json">', "<\/script>"])), unescapeHTML(inlineJSONLd))}</section>`}`;
+  return renderTemplate`${breadcrumbs.length > 0 && renderTemplate`${maybeRenderHead()}<section${addAttribute(`ui-section-slim ${breadcrumbs.length > 1 ? "" : "hidden lg:block"}`, "class")}>
+    <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$1 || (_a$1 = __template$1(['<script type="application/ld+json">', "<\/script>"])), unescapeHTML(inlineJSONLd))}
+  </section>`}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/components/Breadcrumbs.astro", void 0);
 
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
@@ -6012,7 +6258,8 @@ const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
     }
   });
   const { isHomepage } = routeContext;
-  return renderTemplate`${maybeRenderHead()}<article class="my-9 md:my-12"> ${sections.map(async ({ type, props }) => {
+  return renderTemplate`${maybeRenderHead()}<article class="my-9 md:my-12">
+  ${sections.map(async ({ type, props }) => {
     switch (type) {
       case "product-shelf":
         return isHomepage ? renderTemplate`${renderComponent($$result, "ProductShelf", ProductShelf, { ...props, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/ProductShelf.vue", "client:component-export": "default" })}` : renderTemplate`${renderComponent($$result, "ProductShelf", ProductShelf, { ...props, "client:visible": true, "client:component-hydration": "visible", "client:component-path": "~/components/ProductShelf.vue", "client:component-export": "default" })}`;
@@ -6024,13 +6271,16 @@ const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
         return renderTemplate`${renderComponent($$result, "DocDescription", DocDescription, {})}`;
       case "product-details":
         const { hasDescription, hasSpecifications, ...detailsProps } = props;
-        return renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate` ${renderComponent($$result2, "ProductDetails", ProductDetails, { ...detailsProps, "client:context": true, "client:component-hydration": "context", "client:component-path": "~/components/ProductDetails.vue", "client:component-export": "default" }, { "description": ($$result3) => renderTemplate`${renderComponent($$result3, "Fragment", Fragment, { "slot": "description" }, { "default": ($$result4) => renderTemplate`${hasDescription && renderTemplate`${renderComponent($$result4, "DocDescription", DocDescription, {})}`}${hasSpecifications && renderTemplate`${renderComponent($$result4, "ProductSpecifications", ProductSpecifications, {})}`}` })}` })} ` })}`;
+        return renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`
+          ${renderComponent($$result2, "ProductDetails", ProductDetails, { ...detailsProps, "client:context": true, "client:component-hydration": "context", "client:component-path": "~/components/ProductDetails.vue", "client:component-export": "default" }, { "description": ($$result3) => renderTemplate`${renderComponent($$result3, "Fragment", Fragment, { "slot": "description" }, { "default": ($$result4) => renderTemplate`${hasDescription && renderTemplate`${renderComponent($$result4, "DocDescription", DocDescription, {})}`}${hasSpecifications && renderTemplate`${renderComponent($$result4, "ProductSpecifications", ProductSpecifications, {})}`}` })}` })}
+        ` })}`;
       case "c:foo":
         return renderTemplate`<div${addAttribute(props.foo, "data-foo")}></div>`;
       default:
         return renderTemplate`<div${addAttribute(type, "data-section")}></div>`;
     }
-  })} </article>`;
+  })}
+</article>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Sections.astro", void 0);
 
 var __freeze = Object.freeze;
@@ -6056,7 +6306,10 @@ const $$Wildcard = createComponent(async ($$result, $$props, $$slots) => {
     api.get("grids"),
     fetchingApiContext
   ]);
-  return renderTemplate`${maybeRenderHead()}<main> ${renderComponent($$result, "SharedData", $$SharedData, { "field": "grids", "value": grids })} ${renderComponent($$result, "Sections", $$Sections, {})} </main>`;
+  return renderTemplate`${maybeRenderHead()}<main>
+  ${renderComponent($$result, "SharedData", $$SharedData, { "field": "grids", "value": grids })}
+  ${renderComponent($$result, "Sections", $$Sections, {})}
+</main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Wildcard.astro", void 0);
 
 const $$Astro = createAstro("https://demo.ecomplus.app");
@@ -6079,7 +6332,15 @@ 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, {})}${renderComponent($$result2, "PageFooter", $$PageFooter, {})}` })}`}${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";
@@ -6093,4 +6354,4 @@ const ____slug_ = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty(
   url: $$url
 }, Symbol.toStringTag, { value: 'Module' }));
 
-export { $$BaseHead as $, Banner as B, CheckoutLink as C, FooterStamps as F, Prices as P, QuantitySelector as Q, _export_sfc as _, $$Picture as a, $$Base as b, $$BannerPictures as c, $$Sections as d, $$PageHeader as e, $$PageFooter as f, freeShippingFromValue as g, ____slug_ as h, loadRouteContext as l, parseProduct as p, removeCartItem as r, shoppingCart as s, totalItems as t, usePageHero as u };
+export { $$BaseHead as $, Banner as B, CheckoutLink as C, FooterStamps as F, ProductShelf as P, QuantitySelector as Q, _export_sfc as _, $$Picture as a, $$Base as b, $$BannerPictures as c, $$Sections as d, $$PageHeader as e, $$PageFooter as f, assetsDir as g, useStorage as h, imageConfig as i, Prices as j, freeShippingFromValue as k, loadRouteContext as l, ____slug_ as m, parseProduct as p, removeCartItem as r, shoppingCart as s, totalItems as t, usePageHero as u };