cloudcommerce 0.37.0 → 0.38.0

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

@@ -1,5 +1,6 @@
 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 { 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_zcC1GStV.mjs';
+import 'kleur/colors';
 import api from '@cloudcommerce/api';
 import { EventEmitter } from 'node:events';
 import fs, { copyFileSync } from 'node:fs';
@@ -7,13 +8,14 @@ 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';
+/* empty css                           */
+import { renderSync, parse, ELEMENT_NODE, walkSync } from 'ultrahtml';
 import mime from 'mime/lite.js';
-import { i as isESMImportedImage, g as getImage$1 } from '../astro/assets-service_a9d9ab5f.mjs';
+import { i as isESMImportedImage, g as getImage$1 } from '../astro/assets-service_QlOZG8ov.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, useDebounceFn, useTimeout, promiseTimeout, onClickOutside, watchOnce, useElementHover, createReusableTemplate, useUrlSearchParams } from '@vueuse/core';
+import { watchDebounced, useDebounceFn, useTimeout, promiseTimeout, watchOnce, onClickOutside, useElementHover, createReusableTemplate, useUrlSearchParams } from '@vueuse/core';
 import mitt from 'mitt';
 import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
 
@@ -94,6 +96,24 @@ const imageConfig = {"service":{"entrypoint":"astro/assets/services/sharp","conf
 					const assetsDir = new URL("file:///home/leo/code/ecomplus/cloud-commerce/packages/storefront/dist/client/");
 					const getImage = async (options) => await getImage$1(options, imageConfig);
 
+let id = -1;
+const useId = () => String(++id);
+const clearAccents = (str) => {
+  return str.replace(/[ÁáÃãÂâÀà]/g, "a").replace(/[ÉéÊê]/g, "e").replace(/[Íí]/g, "i").replace(/[ÕõÓóÔô]/g, "o").replace(/[Úú]/g, "u").replace(/[Çç]/g, "c");
+};
+const slugify = (str) => {
+  return clearAccents(str.trim()).toLowerCase().replace(/[\W\r\n]/gm, "-").replace(/-{2,}/g, "-").replace(/(^-)|(-$)/g, "");
+};
+const toLowerCaseAccents = (str) => {
+  return str.toLowerCase().replace(/Á/g, "á").replace(/Ã/g, "ã").replace(/Â/g, "â").replace(/À/g, "à").replace(/É/g, "é").replace(/Ê/g, "ê").replace(/Í/g, "í").replace(/Õ/g, "õ").replace(/Ó/g, "ó").replace(/Ô/g, "ô").replace(/Ú/g, "ú").replace(/Ç/g, "ç");
+};
+const termify = (str) => {
+  return toLowerCaseAccents(str.trim()).replace(/[\r\n]/gm, " ").replace(/[^\w-&%áãâàéêíõóôúç]/g, " ").replace(/\s{2,}/g, " ");
+};
+const getSearchUrl = (term, baseUrl = "/s/") => {
+  return `${baseUrl}${encodeURIComponent(termify(term))}`;
+};
+
 global.__storefrontCMS = (fs, resolvePath) => {
   const { STOREFRONT_BASE_DIR } = process.env;
   let baseDir;
@@ -174,37 +194,34 @@ const _getConfig = () => {
   const {
     ECOM_STORE_ID,
     VITE_ECOM_STORE_ID,
-    PROD,
-  } = (Object.assign({"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":true,"SITE":"https://demo.ecomplus.app","ASSETS_PREFIX":undefined},{ECOM_STORE_ID:process.env.ECOM_STORE_ID,})) || process.env;
+    PROD
+  } = Object.assign({"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}, { ECOM_STORE_ID: process.env.ECOM_STORE_ID }) || process.env;
   if (VITE_ECOM_STORE_ID) {
     config.set({ storeId: Number(VITE_ECOM_STORE_ID) });
   } else if (ECOM_STORE_ID) {
     config.set({ storeId: Number(ECOM_STORE_ID) });
   }
-
   const {
     domain,
     primaryColor,
     secondaryColor,
     settings,
-    getContent,
+    getContent
   } = global.__storefrontCMS(fs, resolve);
   config.set({ settingsContent: settings });
-
   let { storeId } = config.get();
   if (!storeId) {
-    const configFilepath = join(process.cwd(), 'config.json');
+    const configFilepath = join(process.cwd(), "config.json");
     try {
-      const mergeConfig = JSON.parse(fs.readFileSync(configFilepath), 'utf8');
+      const mergeConfig = JSON.parse(fs.readFileSync(configFilepath), "utf8");
       if (mergeConfig.storeId) {
         storeId = mergeConfig.storeId;
       }
     } catch {
-      //
     }
     if (!storeId && !PROD) {
       storeId = 1011;
-      console.warn('> `storeId` is not set, using fallback 1011 for dev only\n');
+      console.warn("> `storeId` is not set, using fallback 1011 for dev only\n");
     }
     if (storeId) {
       config.set({ storeId });
@@ -214,9 +231,8 @@ const _getConfig = () => {
     lang,
     countryCode,
     currency,
-    currencySymbol,
+    currencySymbol
   } = config.get();
-
   return {
     storeId,
     lang,
@@ -227,7 +243,7 @@ const _getConfig = () => {
     primaryColor,
     secondaryColor,
     settings,
-    getContent,
+    getContent
   };
 };
 
@@ -278,6 +294,14 @@ const loadRouteContext = async (Astro, {
     urlPath = urlPath.replace("/~preview", "");
   }
   const isHomepage = urlPath === "/";
+  const isSearchPage = !isHomepage && (urlPath.startsWith("/s/") || urlPath === "/s");
+  let searchPageTerm;
+  if (isSearchPage) {
+    const pathTerm = urlPath.split("/")[2];
+    if (typeof pathTerm === "string") {
+      searchPageTerm = termify(decodeURIComponent(pathTerm));
+    }
+  }
   const config = getConfig();
   globalThis.$storefront.settings = config.settings;
   let cmsContent = { sections: [] };
@@ -296,6 +320,8 @@ const loadRouteContext = async (Astro, {
   const { slug } = Astro.params;
   if (isHomepage) {
     cmsContent = await config.getContent("pages/home");
+  } else if (isSearchPage) {
+    cmsContent = await config.getContent("pages/search");
   } else if (slug && typeof slug === "string") {
     if (contentCollection) {
       cmsContent = await config.getContent(`${contentCollection}/${slug}`);
@@ -391,11 +417,14 @@ const loadRouteContext = async (Astro, {
   const routeContext = {
     ...config,
     isHomepage,
+    isSearchPage,
+    searchPageTerm,
     cmsContent,
     fetchingApiContext,
     apiContext,
     apiState,
     isPreview
+    // Astro,
   };
   Astro.locals.routeContext = routeContext;
   emitter$1.emit("load", routeContext);
@@ -426,12 +455,13 @@ const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
   Astro2.self = $$BaseHead;
   const isPWA = pwaInfo !== false;
   const hasViewTransitions = Astro2.props.hasViewTransitions !== false && !Astro2.url.pathname.startsWith("/app/");
-  const deployRand = ({}).DEPLOY_RAND || "_";
+  const deployRand = {"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}.DEPLOY_RAND || "_";
   const getIconUrl = (size) => {
     return `/_image?f=png&w=${size}&h=${size}&href=${encodeURIComponent(settings.icon)}&V=${deployRand}`;
   };
   const {
     storeId,
+    searchPageTerm,
     cmsContent,
     fetchingApiContext,
     apiContext,
@@ -450,7 +480,13 @@ const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
   }
   const apiDoc = apiContext.doc;
   const state = apiDoc || cmsContent || {};
-  const title = state.meta_title || state.metaTitle || state.name && `${state.name} | ${settings.name}` || state.title && `${state.title} | ${settings.name}` || settings.name;
+  let title = state.meta_title || state.metaTitle || state.name && `${state.name} | ${settings.name}` || state.title && `${state.title} | ${settings.name}` || settings.name;
+  if (searchPageTerm) {
+    title = title.replace("$term", searchPageTerm);
+    if (!title.includes(searchPageTerm)) {
+      title = `${searchPageTerm} | ${title}`;
+    }
+  }
   const description = state.meta_description || state.metaDescription || state.short_description || settings.description;
   const favicon = settings.icon ? getIconUrl(32) : "/favicon.ico";
   const shortcutIcon = settings.icon ? getIconUrl(192) : null;
@@ -542,7 +578,7 @@ window.$isCmsPreview = true;`;
     url: `https://${domain}/`,
     logo: `https://${domain}${settings.logo}`
   });
-  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)));
+  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) {
@@ -931,15 +967,15 @@ 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 deployRand = ({}).DEPLOY_RAND;
-  const versionSuffix = ({}).BUILD_OUTPUT !== "static" && deployRand ? `&V=${deployRand}` : "";
+  const deployRand = {"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}.DEPLOY_RAND;
+  const versionSuffix = {"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}.BUILD_OUTPUT !== "static" && deployRand ? `&V=${deployRand}` : "";
   const getImageFilepath = (src) => {
     const filepath = resolve(process.env.STOREFRONT_BASE_DIR, `public${src}`);
-    if (({}).BUILD_OUTPUT === "static") {
+    if ({"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}.BUILD_OUTPUT === "static") {
       try {
         copyFileSync(filepath, resolve(
           process.env.STOREFRONT_BASE_DIR,
-          ({}).BUILD_OUT_DIR || "dist/client",
+          {"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}.BUILD_OUT_DIR || "dist/client",
           "_astro",
           basename$1(filepath)
         ));
@@ -1148,12 +1184,6 @@ const setSocialNetworks = () => {
   global.$storefront.onLoad(() => setSocialNetworks());
 }
 
-let id = -1;
-const useId = () => String(++id);
-const slugify = (str) => {
-  return str.toLowerCase().trim().replace(/[ÁáÃãÂâÀà]/g, "a").replace(/[Éé]/g, "e").replace(/[Íí]/g, "i").replace(/[ÓóÔô]/g, "o").replace(/[Úú]/g, "u").replace(/[Çç]/g, "c").replace(/[\W\r\n]/gm, "-").replace(/-{2,}/g, "-").replace(/(^-)|(-$)/g, "");
-};
-
 const emptyInfo = {
   list_payments: {},
   calculate_shipping: {},
@@ -1296,7 +1326,7 @@ window.$storefront.data['${field}'] = ${JSON.stringify(value)};`
   };
 };
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "PitchBar",
   props: {
     slides: {}
@@ -1313,7 +1343,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$r(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$t(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Carousel = resolveComponent("Carousel");
   const _component_ALink = resolveComponent("ALink");
   const _component_CarouselControl = resolveComponent("CarouselControl");
@@ -1406,13 +1436,13 @@ function _sfc_ssrRender$r(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div></div>`);
 }
-const _sfc_setup$r = _sfc_main$r.setup;
-_sfc_main$r.setup = (props, ctx) => {
+const _sfc_setup$t = _sfc_main$t.setup;
+_sfc_main$t.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/PitchBar.vue");
-  return _sfc_setup$r ? _sfc_setup$r(props, ctx) : void 0;
+  return _sfc_setup$t ? _sfc_setup$t(props, ctx) : void 0;
 };
-const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["ssrRender", _sfc_ssrRender$r]]);
+const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["ssrRender", _sfc_ssrRender$t]]);
 
 const useStorage = (key, initialValue, storage = globalThis.localStorage) => {
   if (!storage) {
@@ -1512,11 +1542,12 @@ const parseProduct = (product, variationId, quantity) => {
   return item;
 };
 
-const storageKey$1 = "ecomShoppingCart";
+const storageKey$2 = "ecomShoppingCart";
 const emptyCart = {
+  subtotal: 0,
   items: []
 };
-const shoppingCart = useStorage(storageKey$1, emptyCart);
+const shoppingCart = useStorage(storageKey$2, emptyCart);
 const totalItems = computed(() => {
   return shoppingCart.items.reduce((acc, item) => {
     return acc + item.quantity;
@@ -1681,6 +1712,7 @@ const filterSubcategories = (categories, parentCategory, isAlphabeticalSort = fa
 const useShopHeader = (props) => {
   const {
     header,
+    searchInput,
     categories = globalThis.$storefront.data.categories || [],
     menuCategorySlugs,
     menuRandomCategories = 7,
@@ -1722,6 +1754,56 @@ const useShopHeader = (props) => {
     }
     return false;
   });
+  const isSearchOpen = ref(false);
+  const isSearchOpenOnce = ref(false);
+  watchOnce(isSearchOpen, () => {
+    isSearchOpenOnce.value = true;
+  });
+  const searchTerm = ref("");
+  let urlSearchQ;
+  const quickSearchTerm = computed(() => {
+    if (searchTerm.value && searchTerm.value.length >= 2 && searchTerm.value !== urlSearchQ) {
+      return searchTerm.value;
+    }
+    return "";
+  });
+  const toggleSearch = (ev) => {
+    ev.preventDefault();
+    if (isSearchOpen.value && searchTerm.value) {
+      window.location.href = getSearchUrl(searchTerm.value);
+      return;
+    }
+    isSearchOpen.value = !isSearchOpen.value;
+    if (isSearchOpen.value && searchInput) {
+      setTimeout(() => {
+        if (!searchInput.value)
+          return;
+        const { length } = searchTerm.value;
+        searchInput.value.setSelectionRange(length, length);
+        searchInput.value.focus();
+      }, 50);
+    }
+  };
+  const isCartOpen = ref(false);
+  const isCartOpenOnce = ref(false);
+  watchOnce(isCartOpen, () => {
+    isCartOpenOnce.value = true;
+  });
+  const delayedCartItems = ref(0);
+  const handleOnMounted = () => {
+    watch(totalItems, (newTotalItems, prevTotalItems) => {
+      if (typeof prevTotalItems === "number") {
+        if (prevTotalItems < newTotalItems) {
+          isCartOpen.value = true;
+        } else if (prevTotalItems && !newTotalItems) {
+          isCartOpen.value = false;
+        }
+      }
+      delayedCartItems.value = newTotalItems;
+    }, {
+      immediate: true
+    });
+  };
   return {
     isSticky,
     staticHeight,
@@ -1731,11 +1813,20 @@ const useShopHeader = (props) => {
     getSubcategories,
     getCategoryTree,
     categoryTrees,
-    inlineMenuTrees
+    inlineMenuTrees,
+    isSearchOpen,
+    isSearchOpenOnce,
+    searchTerm,
+    quickSearchTerm,
+    toggleSearch,
+    isCartOpen,
+    isCartOpenOnce,
+    cartTotalItems: delayedCartItems,
+    handleOnMounted
   };
 };
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -1833,7 +1924,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$s(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   _push(ssrRenderComponent(_component_Fade, mergeProps({
     slide: $setup.slideTo,
@@ -1932,7 +2023,7 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                 renderSlot$1(_ctx.$slots, "close", {}, () => [
                   createVNode("i", { class: "i-close text-base-400 hover:text-base-600 text-3xl" })
                 ])
-              ], 10, ["onClick"])) : createCommentVNode("", true),
+              ], 2)) : createCommentVNode("", true),
               renderSlot$1(_ctx.$slots, "default")
             ]),
             $props.backdropTarget ? (openBlock(), createBlock(Teleport, {
@@ -1959,15 +2050,15 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$q = _sfc_main$q.setup;
-_sfc_main$q.setup = (props, ctx) => {
+const _sfc_setup$s = _sfc_main$s.setup;
+_sfc_main$s.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Drawer.vue");
-  return _sfc_setup$q ? _sfc_setup$q(props, ctx) : void 0;
+  return _sfc_setup$s ? _sfc_setup$s(props, ctx) : void 0;
 };
-const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["ssrRender", _sfc_ssrRender$q]]);
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["ssrRender", _sfc_ssrRender$s]]);
 
-const storageKey = "ecomSession";
+const storageKey$1 = "ecomSession";
 const emptySession = {
   customer: {
     display_name: "",
@@ -1975,7 +2066,7 @@ const emptySession = {
   },
   auth: null
 };
-const session = useStorage(storageKey, emptySession);
+const session = useStorage(storageKey$1, emptySession);
 const isAuthenticated = computed(() => {
   const { auth } = session;
   return auth && new Date(auth.expires).getTime() - Date.now() > 1e3 * 10;
@@ -1997,14 +2088,14 @@ const isLogged = computed(() => {
 const logout = () => {
   session.auth = emptySession.auth;
   session.customer = emptySession.customer;
-  localStorage.removeItem(storageKey);
+  localStorage.removeItem(storageKey$1);
   firebaseAuth.signOut();
 };
 const initializeFirebaseAuth = (canWaitIdle) => {
   return;
 };
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "AccountLink",
   props: {
     to: {},
@@ -2039,20 +2130,20 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$p(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$r(_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$p = _sfc_main$p.setup;
-_sfc_main$p.setup = (props, ctx) => {
+const _sfc_setup$r = _sfc_main$r.setup;
+_sfc_main$r.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/AccountLink.vue");
-  return _sfc_setup$p ? _sfc_setup$p(props, ctx) : void 0;
+  return _sfc_setup$r ? _sfc_setup$r(props, ctx) : void 0;
 };
-const AccountLink = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["ssrRender", _sfc_ssrRender$p]]);
+const AccountLink = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["ssrRender", _sfc_ssrRender$r]]);
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkIcon",
   props: {
     as: { default: "i" },
@@ -2088,18 +2179,18 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), mergeProps({ class: $setup.iconClassName }, _attrs), null), _parent);
 }
-const _sfc_setup$o = _sfc_main$o.setup;
-_sfc_main$o.setup = (props, ctx) => {
+const _sfc_setup$q = _sfc_main$q.setup;
+_sfc_main$q.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/SocialNetworkIcon.vue");
-  return _sfc_setup$o ? _sfc_setup$o(props, ctx) : void 0;
+  return _sfc_setup$q ? _sfc_setup$q(props, ctx) : void 0;
 };
-const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["ssrRender", _sfc_ssrRender$o]]);
+const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["ssrRender", _sfc_ssrRender$q]]);
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkLink",
   props: {
     network: {},
@@ -2125,7 +2216,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$n(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$p(_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) => {
@@ -2146,15 +2237,15 @@ function _sfc_ssrRender$n(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$n = _sfc_main$n.setup;
-_sfc_main$n.setup = (props, ctx) => {
+const _sfc_setup$p = _sfc_main$p.setup;
+_sfc_main$p.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/SocialNetworkLink.vue");
-  return _sfc_setup$n ? _sfc_setup$n(props, ctx) : void 0;
+  return _sfc_setup$p ? _sfc_setup$p(props, ctx) : void 0;
 };
-const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["ssrRender", _sfc_ssrRender$n]]);
+const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["ssrRender", _sfc_ssrRender$p]]);
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenavCategory",
   props: {
     categoryTree: {}
@@ -2177,7 +2268,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$m(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$o(_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-base-800 text-lg" }, _attrs))}>`);
@@ -2215,15 +2306,15 @@ function _sfc_ssrRender$m(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</li>`);
 }
-const _sfc_setup$m = _sfc_main$m.setup;
-_sfc_main$m.setup = (props, ctx) => {
+const _sfc_setup$o = _sfc_main$o.setup;
+_sfc_main$o.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenavCategory.vue");
-  return _sfc_setup$m ? _sfc_setup$m(props, ctx) : void 0;
+  return _sfc_setup$o ? _sfc_setup$o(props, ctx) : void 0;
 };
-const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["ssrRender", _sfc_ssrRender$m]]);
+const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["ssrRender", _sfc_ssrRender$o]]);
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenav",
   props: {
     categoryTrees: {}
@@ -2244,7 +2335,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$n(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _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"], {
@@ -2285,13 +2376,13 @@ function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></footer></aside>`);
 }
-const _sfc_setup$l = _sfc_main$l.setup;
-_sfc_main$l.setup = (props, ctx) => {
+const _sfc_setup$n = _sfc_main$n.setup;
+_sfc_main$n.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopSidenav.vue");
-  return _sfc_setup$l ? _sfc_setup$l(props, ctx) : void 0;
+  return _sfc_setup$n ? _sfc_setup$n(props, ctx) : void 0;
 };
-const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["ssrRender", _sfc_ssrRender$l]]);
+const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["ssrRender", _sfc_ssrRender$n]]);
 
 const useShopHeaderSubmenu = (props) => {
   const categoryPicture = computed(() => {
@@ -2340,7 +2431,7 @@ const useShopHeaderSubmenu = (props) => {
   };
 };
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "ShopHeaderSubmenu",
   props: {
     categoryTree: {},
@@ -2369,7 +2460,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$m(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   const _component_AImg = resolveComponent("AImg");
   _push(ssrRenderComponent($setup["Popover"], _attrs, {
@@ -2683,15 +2774,15 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$k = _sfc_main$k.setup;
-_sfc_main$k.setup = (props, ctx) => {
+const _sfc_setup$m = _sfc_main$m.setup;
+_sfc_main$m.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeaderSubmenu.vue");
-  return _sfc_setup$k ? _sfc_setup$k(props, ctx) : void 0;
+  return _sfc_setup$m ? _sfc_setup$m(props, ctx) : void 0;
 };
-const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["ssrRender", _sfc_ssrRender$k]]);
+const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["ssrRender", _sfc_ssrRender$m]]);
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "ShopHeaderMenu",
   props: {
     inlineMenuTrees: {}
@@ -2707,7 +2798,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$j(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<nav${ssrRenderAttrs(_attrs)}><ul class="${ssrRenderClass([$props.inlineMenuTrees.length < 7 ? "text-base" : "text-sm", "text-base-700 flex gap-4 xl:gap-5"])}"><!--[-->`);
   ssrRenderList($props.inlineMenuTrees, (categoryTree, i) => {
     _push(`<li>`);
@@ -2751,15 +2842,15 @@ function _sfc_ssrRender$j(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></nav>`);
 }
-const _sfc_setup$j = _sfc_main$j.setup;
-_sfc_main$j.setup = (props, ctx) => {
+const _sfc_setup$l = _sfc_main$l.setup;
+_sfc_main$l.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeaderMenu.vue");
-  return _sfc_setup$j ? _sfc_setup$j(props, ctx) : void 0;
+  return _sfc_setup$l ? _sfc_setup$l(props, ctx) : void 0;
 };
-const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["ssrRender", _sfc_ssrRender$j]]);
+const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["ssrRender", _sfc_ssrRender$l]]);
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "AccountMenu",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -2786,7 +2877,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$i(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   const _component_ALink = resolveComponent("ALink");
   _push(ssrRenderComponent($setup["Menu"], mergeProps({
@@ -3410,17 +3501,18 @@ function _sfc_ssrRender$i(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$i = _sfc_main$i.setup;
-_sfc_main$i.setup = (props, ctx) => {
+const _sfc_setup$k = _sfc_main$k.setup;
+_sfc_main$k.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/AccountMenu.vue");
-  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
+  return _sfc_setup$k ? _sfc_setup$k(props, ctx) : void 0;
 };
-const AccountMenu = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["ssrRender", _sfc_ssrRender$i]]);
+const AccountMenu = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["ssrRender", _sfc_ssrRender$k]]);
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "ShopHeader",
   props: {
+    searchInput: {},
     categories: {},
     menuCategorySlugs: {},
     menuRandomCategories: {},
@@ -3428,59 +3520,38 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     __expose();
-    const SearchModal = defineAsyncComponent(() => import('../SearchModal_f66549d4.mjs'));
-    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_eab28771.mjs'));
+    const SearchModal = defineAsyncComponent(() => import('../SearchModal_eWb5SdQM.mjs'));
+    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_hAgJQJgm.mjs'));
     const props = __props;
     const header = ref(null);
+    const searchInput = ref(null);
     const {
       isSticky,
       positionY,
       categoryTrees,
-      inlineMenuTrees
-    } = useShopHeader({ ...props, header });
+      inlineMenuTrees,
+      isSearchOpen,
+      isSearchOpenOnce,
+      searchTerm,
+      quickSearchTerm,
+      toggleSearch,
+      isCartOpen,
+      isCartOpenOnce,
+      cartTotalItems,
+      handleOnMounted
+    } = useShopHeader({ ...props, header, searchInput });
     const isSidenavOpen = ref(false);
-    const isSearchOpen = ref(false);
-    const isSearchOpenOnce = ref(false);
-    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, () => {
-      isCartOpenOnce.value = true;
-    });
     const isMounted = ref(false);
-    const delayedTotalItems = ref(0);
     onMounted(() => {
       isMounted.value = true;
-      watch(totalItems, (newTotalItems, prevTotalItems) => {
-        if (typeof prevTotalItems === "number") {
-          if (prevTotalItems < newTotalItems) {
-            isCartOpen.value = true;
-          } else if (prevTotalItems && !newTotalItems) {
-            isCartOpen.value = false;
-          }
-        }
-        delayedTotalItems.value = newTotalItems;
-      }, { immediate: true });
+      handleOnMounted();
     });
-    const __returned__ = { SearchModal, CartSidebar, props, header, isSticky, positionY, categoryTrees, inlineMenuTrees, isSidenavOpen, isSearchOpen, isSearchOpenOnce, searchTerm, searchInput, toggleSearch, isCartOpen, isCartOpenOnce, isMounted, delayedTotalItems, Drawer, ShopSidenav, ShopHeaderMenu, AccountMenu };
+    const __returned__ = { SearchModal, CartSidebar, props, header, searchInput, isSticky, positionY, categoryTrees, inlineMenuTrees, isSearchOpen, isSearchOpenOnce, searchTerm, quickSearchTerm, toggleSearch, isCartOpen, isCartOpenOnce, cartTotalItems, handleOnMounted, isSidenavOpen, isMounted, 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) {
+function _sfc_ssrRender$j(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   const _component_Skeleton = resolveComponent("Skeleton");
   _push(`<header${ssrRenderAttrs(mergeProps({
@@ -3499,7 +3570,7 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _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>`);
+        _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="q"${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" }, [
@@ -3508,7 +3579,7 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               ref: "searchInput",
               type: "search",
               id: "HeaderSearch",
-              name: "term",
+              name: "q",
               "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"} ...`
@@ -3544,8 +3615,8 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 1
   }, _parent));
   _push(`<a${ssrRenderAttr("href", _ctx.$settings.cartUrl || "/app/")}${ssrRenderAttr("aria-label", "Abrir carrinho")} class="group relative" role="button"><i class="i-shopping-bag group-hover:text-primary h-7 w-7 group-hover:scale-110 group-active:scale-125"></i>`);
-  if ($setup.delayedTotalItems) {
-    _push(`<span class="ui-badge-pill-sm absolute -right-1.5 -top-1">${ssrInterpolate($setup.delayedTotalItems)}</span>`);
+  if ($setup.cartTotalItems) {
+    _push(`<span class="ui-badge-pill-sm absolute -right-1.5 -top-1">${ssrInterpolate($setup.cartTotalItems)}</span>`);
   } else {
     _push(`<!---->`);
   }
@@ -3575,13 +3646,14 @@ 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,
+    "is-hidden": !$setup.quickSearchTerm,
     "has-close-button": false,
     "anchor-el": $setup.searchInput?.parentElement,
+    position: "absolute",
     placement: "top",
     animation: "scale",
     "max-width": "55rem",
-    class: "bg-white lg:mt-24 lg:bg-transparent"
+    class: ["bg-transparent lg:mt-12", $setup.isSticky ? "mt-2 md:mt-3" : "mt-3 sm:mt-4 md:mt-5"]
   }, {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
@@ -3597,7 +3669,7 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           },
           default: () => {
             if ($setup.isSearchOpenOnce) {
-              _push2(ssrRenderComponent($setup["SearchModal"], { term: $setup.searchTerm }, null, _parent2, _scopeId));
+              _push2(ssrRenderComponent($setup["SearchModal"], { term: $setup.quickSearchTerm }, null, _parent2, _scopeId));
             } else {
               _push2(`<!---->`);
             }
@@ -3619,7 +3691,7 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             default: withCtx(() => [
               $setup.isSearchOpenOnce ? (openBlock(), createBlock($setup["SearchModal"], {
                 key: 0,
-                term: $setup.searchTerm
+                term: $setup.quickSearchTerm
               }, null, 8, ["term"])) : createCommentVNode("", true)
             ]),
             _: 1
@@ -3690,13 +3762,13 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</header>`);
 }
-const _sfc_setup$h = _sfc_main$h.setup;
-_sfc_main$h.setup = (props, ctx) => {
+const _sfc_setup$j = _sfc_main$j.setup;
+_sfc_main$j.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeader.vue");
-  return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
+  return _sfc_setup$j ? _sfc_setup$j(props, ctx) : void 0;
 };
-const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["ssrRender", _sfc_ssrRender$h]]);
+const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["ssrRender", _sfc_ssrRender$j]]);
 
 var __freeze$2 = Object.freeze;
 var __defProp$2 = Object.defineProperty;
@@ -3726,7 +3798,7 @@ const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
   ` })}` })))}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/PageHeader.astro", void 0);
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "PaymentMethodFlag",
   props: {
     as: { default: "i" },
@@ -3762,22 +3834,22 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$g(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$i(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   if (!$setup.iconClassName) {
     _push(`<b${ssrRenderAttrs(mergeProps({ class: "mb-1 text-[57%] leading-none tracking-tighter text-black" }, _attrs))}>${ssrInterpolate($setup.props.flag)}</b>`);
   } else {
     ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), mergeProps({ class: $setup.iconClassName }, _attrs), null), _parent);
   }
 }
-const _sfc_setup$g = _sfc_main$g.setup;
-_sfc_main$g.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/PaymentMethodFlag.vue");
-  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
+  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
 };
-const PaymentMethodFlag = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["ssrRender", _sfc_ssrRender$g]]);
+const PaymentMethodFlag = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["ssrRender", _sfc_ssrRender$i]]);
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "FooterStamps",
   props: {
     stamps: {}
@@ -3789,7 +3861,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$f(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
   _push(`<div${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}><div class="flex flex-wrap items-start justify-between gap-5 lg:flex-nowrap"><ul class="mx-auto flex items-center gap-x-6 gap-y-3 overflow-x-auto md:mx-0 md:flex-wrap md:overflow-hidden lg:gap-x-8"><!--[-->`);
   ssrRenderList($props.stamps, (stamp, i) => {
@@ -3869,7 +3941,7 @@ function _sfc_ssrRender$f(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
       flag: paymentMethod
     }, null, _parent));
   });
-  _push(`<!--]--></div></div><div class="mt-7 justify-between gap-4 text-center text-xs md:flex md:text-left"><div class="mb-3 md:mb-0"> @ ${ssrInterpolate(( new Date()).getFullYear())} ${ssrInterpolate(_ctx.$settings.corporateName)} ${ssrInterpolate(_ctx.$settings.address ? `/ ${_ctx.$settings.address}` : "")} / ${ssrInterpolate(_ctx.$settings.docNumber)}</div>`);
+  _push(`<!--]--></div></div><div class="mt-7 justify-between gap-4 text-center text-xs md:flex md:text-left"><div class="mb-3 md:mb-0"> @ ${ssrInterpolate((/* @__PURE__ */ new Date()).getFullYear())} ${ssrInterpolate(_ctx.$settings.corporateName)} ${ssrInterpolate(_ctx.$settings.address ? `/ ${_ctx.$settings.address}` : "")} / ${ssrInterpolate(_ctx.$settings.docNumber)}</div>`);
   _push(ssrRenderComponent(_component_ALink, {
     href: "https://www.ecomplus.io/",
     class: "italic text-[#37003c]"
@@ -3888,15 +3960,15 @@ function _sfc_ssrRender$f(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div></div>`);
 }
-const _sfc_setup$f = _sfc_main$f.setup;
-_sfc_main$f.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/components/FooterStamps.vue");
-  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
+  return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
 };
-const FooterStamps = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["ssrRender", _sfc_ssrRender$f]]);
+const FooterStamps = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["ssrRender", _sfc_ssrRender$h]]);
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ShopFooter",
   props: {
     stamps: {},
@@ -3914,9 +3986,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$e(_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(`<footer${ssrRenderAttrs(mergeProps({ class: "bg-base-50 border-base-100 w-screen border-t py-2" }, _attrs))}><div class="ui-section"><div class="border-base-200 flex flex-wrap justify-between gap-y-5 border-b pb-7 sm:gap-x-10 lg:flex-nowrap"><div class="shrink">`);
+  _push(`<footer${ssrRenderAttrs(mergeProps({ class: "bg-base-50 border-base-100 mt-auto w-screen border-t py-2" }, _attrs))}><div class="ui-section"><div class="border-base-200 flex flex-wrap justify-between gap-y-5 border-b pb-7 sm:gap-x-10 lg:flex-nowrap"><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>`);
@@ -4012,13 +4084,13 @@ function _sfc_ssrRender$e(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(ssrRenderComponent($setup["FooterStamps"], { stamps: $props.stamps }, null, _parent));
   _push(`</footer>`);
 }
-const _sfc_setup$e = _sfc_main$e.setup;
-_sfc_main$e.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/ShopFooter.vue");
-  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
+  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
 };
-const ShopFooter = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["ssrRender", _sfc_ssrRender$e]]);
+const ShopFooter = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["ssrRender", _sfc_ssrRender$g]]);
 
 const $$Astro$7 = createAstro("https://demo.ecomplus.app");
 const $$PageFooter = createComponent(async ($$result, $$props, $$slots) => {
@@ -4138,6 +4210,178 @@ const useProductShelf = (props) => {
   };
 };
 
+const storageKey = "ecomSeachHistory";
+const searchHistory = useStorage(storageKey, []);
+for (let i = 0; i < searchHistory.length; i++) {
+  if (typeof searchHistory[i] !== "string") {
+    searchHistory.splice(i, 1);
+    i -= 1;
+  }
+}
+const search = async ({
+  term,
+  params,
+  fields,
+  url = "search/v1"
+}) => {
+  if (typeof term === "string") {
+    term = term.trim();
+    if (term.length < 2) {
+      return { data: { result: [], meta: null } };
+    }
+  }
+  const response = await api.get(url, {
+    fields,
+    params: !term ? params : {
+      ...params,
+      term
+    }
+  });
+  if (term && response.data.result.length) {
+    const termStr = term;
+    const completeTermIndex = searchHistory.findIndex((_term) => {
+      return _term.includes(termStr) && !_term.replace(termStr, "").includes(" ");
+    });
+    if (completeTermIndex > -1) {
+      const completeTerm = searchHistory[completeTermIndex];
+      searchHistory.splice(completeTermIndex, 1);
+      searchHistory.unshift(completeTerm);
+    } else {
+      const termIndex = searchHistory.findIndex((_term) => termStr.startsWith(_term));
+      if (termIndex > -1) {
+        searchHistory.splice(termIndex, 1);
+      }
+      searchHistory.unshift(term);
+    }
+    while (searchHistory.length > 20) {
+      searchHistory.pop();
+    }
+  }
+  return response;
+};
+class SearchEngine {
+  fields;
+  term = ref("");
+  isWithCount = ref(true);
+  isWithBuckets = ref(true);
+  params = shallowReactive({});
+  pageSize = ref(24);
+  pageNumber = ref(1);
+  #isFetching = ref(false);
+  isFetching = computed(() => this.#isFetching.value);
+  #wasFetched = ref(false);
+  wasFetched = computed(() => this.#wasFetched.value);
+  #fetching = ref(null);
+  #fulfillFetching;
+  fetching = computed(() => this.#fetching.value);
+  #fetchError = ref(null);
+  fetchError = computed(() => this.#fetchError.value);
+  products = shallowReactive([]);
+  meta = shallowReactive({
+    offset: 0,
+    limit: 0,
+    fields: [],
+    sort: [],
+    query: {}
+  });
+  #search;
+  constructor({
+    fields,
+    debounce = 150
+  } = {}) {
+    this.fields = fields;
+    this.#search = useDebounceFn((opts) => {
+      this.#isFetching.value = true;
+      return search(opts);
+    }, debounce);
+    watch([this.term, this.params, this.pageSize], () => {
+      this.pageNumber.value = 1;
+    });
+    watch(this.pageNumber, () => {
+      this.#wasFetched.value = false;
+    });
+  }
+  async fetch(term) {
+    if (term && term !== this.term.value) {
+      this.term.value = term;
+      this.pageNumber.value = 1;
+    }
+    const limit = this.pageSize.value;
+    const offset = limit * (this.pageNumber.value - 1);
+    if (!this.#fetching.value) {
+      this.#fetching.value = new Promise((resolve) => {
+        this.#fulfillFetching = resolve;
+      });
+    }
+    let response;
+    try {
+      response = await this.#search({
+        term: this.term.value,
+        params: {
+          ...this.params,
+          limit,
+          offset,
+          count: this.isWithCount.value || void 0,
+          buckets: this.isWithBuckets.value || void 0
+        },
+        fields: this.fields
+      });
+    } catch (err) {
+      if (this.#fulfillFetching) {
+        this.#fetchError.value = err;
+        this.#fulfillFetching();
+      }
+      throw err;
+    }
+    if (response) {
+      this.#isFetching.value = false;
+      this.#wasFetched.value = true;
+      const { data } = response;
+      if (data.meta) {
+        this.products.splice(0);
+        Object.assign(this.meta, data.meta);
+      }
+      data.result.forEach((item) => this.products.push(item));
+      if (this.#fulfillFetching) {
+        this.#fulfillFetching();
+      }
+    }
+  }
+}
+
+const useSearchContainer = (props) => {
+  let { term, searchEngine } = props;
+  if (props.ssrError && false) {
+    console.error(new Error(`SSR search error: ${props.ssrError}`));
+    if (window.location.pathname.startsWith("/s/")) {
+      window.location.href = `/s?q=${encodeURIComponent(term || "")}`;
+    }
+  }
+  const products = shallowReactive(props.products || []);
+  if (!searchEngine) {
+    searchEngine = new SearchEngine({ debounce: 50 });
+    if (term === void 0 && false) {
+      term = new URLSearchParams(window.location.search).get("q") || null;
+    }
+    if (term !== void 0) {
+      searchEngine.term.value = term;
+    }
+  }
+  if (!searchEngine.wasFetched.value && !props.products) {
+    searchEngine.fetch().catch(console.error);
+  }
+  watch(searchEngine.products, () => {
+    products.splice(0);
+    searchEngine?.products.forEach((item) => products.push(item));
+  });
+  return {
+    searchEngine,
+    fetching: searchEngine.fetching.value,
+    isFetching: searchEngine.isFetching,
+    products
+  };
+};
+
 const now = Date.now();
 const parseBanners = (banners) => {
   const validBanners = [];
@@ -4226,6 +4470,18 @@ const usePageSections = async ({ routeContext, handleCustomSection }) => {
         };
         return;
       }
+      if (type === "search-container") {
+        const props = { ...sectionContent };
+        if (routeContext.searchPageTerm !== void 0) {
+          props.term = routeContext.searchPageTerm || null;
+          const { searchEngine, fetching } = useSearchContainer(props);
+          await fetching;
+          props.products = searchEngine.products;
+          props.ssrError = searchEngine.fetchError.value?.message;
+        }
+        sections[index] = { type, props };
+        return;
+      }
       if (type === "banners-grid") {
         sections[index] = {
           type,
@@ -4316,7 +4572,7 @@ const useBanner = (props) => {
   };
 };
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Banner",
   props: {
     img: {},
@@ -4343,7 +4599,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$d(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$f(_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]
@@ -4411,13 +4667,13 @@ function _sfc_ssrRender$d(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</div>`);
 }
-const _sfc_setup$d = _sfc_main$d.setup;
-_sfc_main$d.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/components/Banner.vue");
-  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
+  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
 };
-const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["ssrRender", _sfc_ssrRender$d]]);
+const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["ssrRender", _sfc_ssrRender$f]]);
 
 const $$Astro$5 = createAstro("https://demo.ecomplus.app");
 const $$BannersGrid = createComponent(async ($$result, $$props, $$slots) => {
@@ -4712,7 +4968,7 @@ const usePrices = (props) => {
   };
 };
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Prices",
   props: {
     isBig: { type: Boolean },
@@ -4747,7 +5003,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$e(_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]:lowercase [&_small]:[font-size:92%]", $props.isBig ? "text-lg" : null]
@@ -4877,15 +5133,15 @@ function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div>`);
 }
-const _sfc_setup$c = _sfc_main$c.setup;
-_sfc_main$c.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/components/Prices.vue");
-  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
+  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
 };
-const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
+const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["ssrRender", _sfc_ssrRender$e]]);
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "ProductCard",
   props: {
     product: {},
@@ -4920,7 +5176,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$d(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
   const _component_AImg = resolveComponent("AImg");
   _push(`<article${ssrRenderAttrs(mergeProps({
@@ -5063,15 +5319,15 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</article>`);
 }
-const _sfc_setup$b = _sfc_main$b.setup;
-_sfc_main$b.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/components/ProductCard.vue");
-  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
+  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
 };
-const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
+const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["ssrRender", _sfc_ssrRender$d]]);
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "ProductShelf",
   props: {
     collectionId: {},
@@ -5107,7 +5363,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$a(_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");
   const _component_Carousel = resolveComponent("Carousel");
   const _component_CarouselControl = resolveComponent("CarouselControl");
@@ -5141,13 +5397,13 @@ function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             if (_push3) {
               _push3(ssrRenderComponent(_component_CarouselControl, {
                 style: $setup.products.length > 2 ? null : { display: "none" },
-                class: ["uno-nxxji7", isPrev ? "!-left-4" : "!-right-4"],
+                class: ["uno-c36cp5", 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"],
+                  class: ["uno-c36cp5", isPrev ? "!-left-4" : "!-right-4"],
                   "is-prev": isPrev
                 }, null, 8, ["class", "is-prev"]), [
                   [vShow, $setup.products.length > 2]
@@ -5164,7 +5420,7 @@ function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           createVNode($setup["DefineCarouselControl"], null, {
             default: withCtx(({ isPrev }) => [
               withDirectives(createVNode(_component_CarouselControl, {
-                class: ["uno-nxxji7", isPrev ? "!-left-4" : "!-right-4"],
+                class: ["uno-c36cp5", isPrev ? "!-left-4" : "!-right-4"],
                 "is-prev": isPrev
               }, null, 8, ["class", "is-prev"]), [
                 [vShow, $setup.products.length > 2]
@@ -5209,13 +5465,13 @@ function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</section>`);
 }
-const _sfc_setup$a = _sfc_main$a.setup;
-_sfc_main$a.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/components/ProductShelf.vue");
-  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
+  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
 };
-const ProductShelf = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
+const ProductShelf = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
 
 const useBreadcrumbs = async (props = {}) => {
   const { settings, apiContext, data } = globalThis.$storefront;
@@ -5312,7 +5568,7 @@ const $$Breadcrumbs = createComponent(async ($$result, $$props, $$slots) => {
   </section>`}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/components/Breadcrumbs.astro", void 0);
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ContentClearfix",
   props: {
     html: {}
@@ -5326,18 +5582,18 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<article${ssrRenderAttrs(mergeProps({ class: "prose !max-w-full overflow-x-auto" }, _attrs))}><div class="[&amp;_iframe]:max-w-full [&amp;_img]:max-w-full [&amp;_table]:max-w-full">${$setup.parsedHTML}</div></article>`);
 }
-const _sfc_setup$9 = _sfc_main$9.setup;
-_sfc_main$9.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/lib/components/ContentClearfix.vue");
-  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
+  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
 };
-const ContentClearfix = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
+const ContentClearfix = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "Collapse",
   props: {
     title: {}
@@ -5349,20 +5605,20 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<details${ssrRenderAttrs(mergeProps({ class: "[&_i]:open:rotate-180" }, _attrs))}><summary role="button" class="text-base-700 hover:text-base-800 [&amp;&gt;i]:hover:text-primary my-4 list-none text-2xl font-medium lowercase md:my-5"><i class="i-chevron-down mr-1"></i><span>${ssrInterpolate($props.title)}</span></summary>`);
   ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
   _push(`</details>`);
 }
-const _sfc_setup$8 = _sfc_main$8.setup;
-_sfc_main$8.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/Collapse.vue");
-  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
+  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
 };
-const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
+const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "DocDescription",
   props: {
     apiDoc: { default: () => globalThis.$storefront.apiContext?.doc },
@@ -5377,7 +5633,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   if ($setup.html) {
     _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
     _push(ssrRenderComponent($setup["Collapse"], {
@@ -5400,15 +5656,15 @@ function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _push(`<!---->`);
   }
 }
-const _sfc_setup$7 = _sfc_main$7.setup;
-_sfc_main$7.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/DocDescription.vue");
-  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
+  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
 };
-const DocDescription = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
+const DocDescription = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "CheckoutLink",
   props: {
     to: { default: "cart" },
@@ -5463,20 +5719,20 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$8(_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$6 = _sfc_main$6.setup;
-_sfc_main$6.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/lib/components/CheckoutLink.vue");
-  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
+  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
 };
-const CheckoutLink = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
+const CheckoutLink = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "QuantitySelectorControl",
   props: {
     isMinus: { type: Boolean }
@@ -5493,7 +5749,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<button${ssrRenderAttrs(mergeProps({
     type: "button",
     class: "leading-12 enabled:text-primary enabled:hover:bg-primary-100/70 h-12 w-10 text-xl disabled:opacity-40",
@@ -5510,16 +5766,16 @@ function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</button>`);
 }
-const _sfc_setup$5 = _sfc_main$5.setup;
-_sfc_main$5.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/lib/components/QuantitySelectorControl.vue");
-  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
 };
-const QuantitySelectorControl = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
+const QuantitySelectorControl = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
 
 const quantitySelectorKey = Symbol("quantitySelector");
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "QuantitySelector",
   props: {
     modelValue: { default: 1 },
@@ -5568,7 +5824,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<div${ssrRenderAttrs(mergeProps({ "data-quantity-selector": "" }, _attrs))}>`);
   ssrRenderSlot(_ctx.$slots, "label", { inputId: $setup.inputId, value: $setup.value }, () => {
     _push(`<label${ssrRenderAttr("for", $setup.inputId)} class="sr-only">${ssrInterpolate("Quantidade")}</label>`);
@@ -5605,15 +5861,15 @@ function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</div></div>`);
 }
-const _sfc_setup$4 = _sfc_main$4.setup;
-_sfc_main$4.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/lib/components/QuantitySelector.vue");
-  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
 };
-const QuantitySelector = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+const QuantitySelector = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
 
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ImagesGallery",
   props: {
     pictures: {}
@@ -5633,7 +5889,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           // @ts-ignore
           import('photoswipe/lightbox'),
           import('photoswipe'),
-          !document.getElementById(styleId) && import('../photoswipe_9528923e.mjs')
+          !document.getElementById(styleId) && import('../photoswipe_IcWDJiwc.mjs')
         ]).then(([
           { default: PhotoSwipeLightbox },
           { default: pswpModule },
@@ -5670,7 +5926,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Carousel = resolveComponent("Carousel");
   const _component_AImg = resolveComponent("AImg");
   const _component_CarouselControl = resolveComponent("CarouselControl");
@@ -5850,13 +6106,13 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</div></div>`);
 }
-const _sfc_setup$3 = _sfc_main$3.setup;
-_sfc_main$3.setup = (props, ctx) => {
+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/components/ImagesGallery.vue");
-  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
 };
-const ImagesGallery = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
+const ImagesGallery = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
 
 const useSkuSelector = (props) => {
   let grids = shallowReactive(globalThis.$storefront.data.grids);
@@ -5966,7 +6222,7 @@ const useSkuSelector = (props) => {
   };
 };
 
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "SkuSelector",
   props: {
     variations: {},
@@ -5994,7 +6250,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<div${ssrRenderAttrs(_attrs)}><!--[-->`);
   ssrRenderList($setup.variationsGrids, (options, gridId) => {
     _push(`<div><span class="text-base-700 text-sm font-medium">${ssrInterpolate($setup.getGridTitle(gridId))}: `);
@@ -6021,15 +6277,15 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></div>`);
 }
-const _sfc_setup$2 = _sfc_main$2.setup;
-_sfc_main$2.setup = (props, ctx) => {
+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/SkuSelector.vue");
-  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
 };
-const SkuSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
+const SkuSelector = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
 
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "ProductDetails",
   props: {
     product: { default: () => globalThis.$storefront.apiContext?.doc }
@@ -6082,7 +6338,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section relative grid grid-cols-1 items-start gap-5 md:gap-4 lg:grid-cols-4 2xl:gap-6" }, _attrs))}><div class="w-full lg:col-span-3">`);
   if ($setup.product.pictures?.length) {
@@ -6092,7 +6348,7 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   } else {
     _push(`<!---->`);
   }
-  _push(`</div><div class="top-0 py-4 lg:sticky"><h1 class="ui-text-brand text-base-700 text-xl">${ssrInterpolate($setup.title)}</h1>`);
+  _push(`</div><div class="lg:sticky-header:translate-y-14 top-0 py-4 transition-transform lg:sticky"><h1 class="ui-text-brand text-secondary-900 text-lg">${ssrInterpolate($setup.title)}</h1>`);
   if ($setup.isActive) {
     _push(`<div class="mt-5">`);
     _push(ssrRenderComponent($setup["Prices"], {
@@ -6171,15 +6427,15 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   ssrRenderSlot(_ctx.$slots, "description", {}, null, _push, _parent);
   _push(`</div></section>`);
 }
-const _sfc_setup$1 = _sfc_main$1.setup;
-_sfc_main$1.setup = (props, ctx) => {
+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/ProductDetails.vue");
-  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
 };
-const ProductDetails = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
+const ProductDetails = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
 
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "ProductSpecifications",
   props: {
     product: { default: () => globalThis.$storefront.apiContext?.doc },
@@ -6200,7 +6456,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   if ($setup.hasSpecs) {
     _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
     _push(ssrRenderComponent($setup["Collapse"], {
@@ -6236,13 +6492,148 @@ function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $op
     _push(`<!---->`);
   }
 }
+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/ProductSpecifications.vue");
+  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+};
+const ProductSpecifications = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
+
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ProductGrid",
+  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, ProductCard };
+    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");
+  _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
+  if ($setup.title) {
+    _push(`<div class="mx-auto mb-2 max-w-prose text-center"><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(`<ul class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4"><!--[-->`);
+  ssrRenderList($setup.products, (product) => {
+    _push(`<li>`);
+    _push(ssrRenderComponent($setup["ProductCard"], { product }, null, _parent));
+    _push(`</li>`);
+  });
+  _push(`<!--]--></ul></section>`);
+}
+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/ProductGrid.vue");
+  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+const ProductGrid = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchContainer",
+  props: {
+    searchEngine: {},
+    term: {},
+    sort: {},
+    products: {},
+    ssrError: {}
+  },
+  async setup(__props, { expose: __expose }) {
+    __expose();
+    let __temp, __restore;
+    const props = __props;
+    const {
+      // searchEngine,
+      fetching,
+      isFetching,
+      products
+    } = useSearchContainer(props);
+    {
+      [__temp, __restore] = withAsyncContext(() => fetching), await __temp, __restore();
+    }
+    const __returned__ = { props, fetching, isFetching, products, ProductGrid };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Skeleton = resolveComponent("Skeleton");
+  const _component_Fade = resolveComponent("Fade");
+  _push(`<!--[-->`);
+  if ($setup.isFetching) {
+    _push(`<div class="ui-section relative min-h-[300px]">`);
+    _push(ssrRenderComponent(_component_Skeleton, {
+      class: "absolute top-0 w-full",
+      "is-bold": "",
+      "is-large": ""
+    }, null, _parent));
+    _push(`</div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(ssrRenderComponent(_component_Fade, { "is-leave-to": false }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(ssrRenderComponent($setup["ProductGrid"], { products: $setup.products }, null, _parent2, _scopeId));
+      } else {
+        return [
+          createVNode($setup["ProductGrid"], { products: $setup.products }, null, 8, ["products"])
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`<!--]-->`);
+}
 const _sfc_setup = _sfc_main.setup;
 _sfc_main.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ProductSpecifications.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/SearchContainer.vue");
   return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
 };
-const ProductSpecifications = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+const SearchContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
 
 const $$Astro$3 = createAstro("https://demo.ecomplus.app");
 const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
@@ -6274,6 +6665,12 @@ const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
         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 "search-container":
+        return renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`
+          <article class="min-h-[500px]">
+            ${renderComponent($$result2, "SearchContainer", SearchContainer, { ...props, "client:context": true, "client:component-hydration": "context", "client:component-path": "~/components/SearchContainer.vue", "client:component-export": "default" })}
+          </article>
+        ` })}`;
       case "c:foo":
         return renderTemplate`<div${addAttribute(props.foo, "data-foo")}></div>`;
       default:
@@ -6354,4 +6751,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, 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 };
+export { $$BaseHead as $, Banner as B, CheckoutLink as C, FooterStamps as F, ProductShelf as P, QuantitySelector as Q, SearchEngine as S, _export_sfc as _, $$Picture as a, $$Base as b, $$BannerPictures as c, $$Sections as d, $$PageHeader as e, $$PageFooter as f, assetsDir as g, clearAccents as h, imageConfig as i, getSearchUrl as j, Prices as k, loadRouteContext as l, freeShippingFromValue as m, shoppingCart as n, ____slug_ as o, parseProduct as p, removeCartItem as r, searchHistory as s, totalItems as t, usePageHero as u };