cloudcommerce 0.39.0 → 0.40.1

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

@@ -1,23 +1,23 @@
 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_zcC1GStV.mjs';
+import { A as AstroError, c as ExpectedImageOptions, E as ExpectedImage, d as InvalidImageService, e as createAstro, f as createComponent, 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_PpArQAsY.mjs';
 import 'kleur/colors';
 import api from '@cloudcommerce/api';
 import { EventEmitter } from 'node:events';
 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 { img, price, formatMoney, randomObjectId, nickname, inStock, gridTitle, name, onPromotion, categoriesList, imgSizes, variationsGrids, specTextValue, specValueByText } from '@ecomplus/utils';
 import 'clsx';
 /* 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_QlOZG8ov.mjs';
+import { i as isESMImportedImage, a as isLocalService, b as isRemoteImage, D as DEFAULT_HASH_PROPS } from '../astro/assets-service_TpUb271h.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, watchOnce, onClickOutside, useElementHover, createReusableTemplate, useUrlSearchParams } from '@vueuse/core';
+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, vModelRadio } from 'vue';
+import { ssrRenderAttrs, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderClass, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderSlot, ssrRenderTeleport, ssrRenderVNode, ssrInterpolate, ssrRenderSuspense, ssrLooseEqual } from 'vue/server-renderer';
+import { watchDebounced, useDebounceFn, useTimeout, promiseTimeout, watchOnce, onClickOutside, useUrlSearchParams, useElementHover, createReusableTemplate } from '@vueuse/core';
 import mitt from 'mitt';
-import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
+import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
 
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -27,6 +27,83 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
+async function getConfiguredImageService() {
+  if (!globalThis?.astroAsset?.imageService) {
+    const { default: service } = await import(
+      // @ts-expect-error
+      '../astro/assets-service_TpUb271h.mjs'
+    ).then(n => n.s).catch((e) => {
+      const error = new AstroError(InvalidImageService);
+      error.cause = e;
+      throw error;
+    });
+    if (!globalThis.astroAsset)
+      globalThis.astroAsset = {};
+    globalThis.astroAsset.imageService = service;
+    return service;
+  }
+  return globalThis.astroAsset.imageService;
+}
+async function getImage$1(options, imageConfig) {
+  if (!options || typeof options !== "object") {
+    throw new AstroError({
+      ...ExpectedImageOptions,
+      message: ExpectedImageOptions.message(JSON.stringify(options))
+    });
+  }
+  if (typeof options.src === "undefined") {
+    throw new AstroError({
+      ...ExpectedImage,
+      message: ExpectedImage.message(
+        options.src,
+        "undefined",
+        JSON.stringify(options)
+      )
+    });
+  }
+  const service = await getConfiguredImageService();
+  const resolvedOptions = {
+    ...options,
+    src: typeof options.src === "object" && "then" in options.src ? (await options.src).default ?? await options.src : options.src
+  };
+  const clonedSrc = isESMImportedImage(resolvedOptions.src) ? (
+    // @ts-expect-error - clone is a private, hidden prop
+    resolvedOptions.src.clone ?? resolvedOptions.src
+  ) : resolvedOptions.src;
+  resolvedOptions.src = clonedSrc;
+  const validatedOptions = service.validateOptions ? await service.validateOptions(resolvedOptions, imageConfig) : resolvedOptions;
+  const srcSetTransforms = service.getSrcSet ? await service.getSrcSet(validatedOptions, imageConfig) : [];
+  let imageURL = await service.getURL(validatedOptions, imageConfig);
+  let srcSets = await Promise.all(
+    srcSetTransforms.map(async (srcSet) => ({
+      transform: srcSet.transform,
+      url: await service.getURL(srcSet.transform, imageConfig),
+      descriptor: srcSet.descriptor,
+      attributes: srcSet.attributes
+    }))
+  );
+  if (isLocalService(service) && globalThis.astroAsset.addStaticImage && !(isRemoteImage(validatedOptions.src) && imageURL === validatedOptions.src)) {
+    const propsToHash = service.propertiesToHash ?? DEFAULT_HASH_PROPS;
+    imageURL = globalThis.astroAsset.addStaticImage(validatedOptions, propsToHash);
+    srcSets = srcSetTransforms.map((srcSet) => ({
+      transform: srcSet.transform,
+      url: globalThis.astroAsset.addStaticImage(srcSet.transform, propsToHash),
+      descriptor: srcSet.descriptor,
+      attributes: srcSet.attributes
+    }));
+  }
+  return {
+    rawOptions: resolvedOptions,
+    options: validatedOptions,
+    src: imageURL,
+    srcSet: {
+      values: srcSets,
+      attribute: srcSets.map((srcSet) => `${srcSet.url} ${srcSet.descriptor}`).join(", ")
+    },
+    attributes: service.getHTMLAttributes !== void 0 ? await service.getHTMLAttributes(validatedOptions, imageConfig) : {}
+  };
+}
+
 const $$Astro$h = createAstro("https://demo.ecomplus.app");
 const $$Image = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$h, $$props, $$slots);
@@ -113,6 +190,16 @@ const termify = (str) => {
 const getSearchUrl = (term, baseUrl = "/s/") => {
   return `${baseUrl}${encodeURIComponent(termify(term))}`;
 };
+const scrollToEl = (el, top = 0) => {
+  while (el.offsetParent) {
+    top += el.offsetTop;
+    el = el.offsetParent;
+  }
+  return window.scroll({
+    top,
+    behavior: "smooth"
+  });
+};
 
 global.__storefrontCMS = (fs, resolvePath) => {
   const { STOREFRONT_BASE_DIR } = process.env;
@@ -1104,6 +1191,37 @@ const $$Base = createComponent(async ($$result, $$props, $$slots) => {
 ` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Base.astro", void 0);
 
+const emitter = new EventEmitter();
+const useSharedData = async (props) => {
+  const { field, timeout = 1e3 } = props;
+  let value = props.value;
+  const $data = global.$storefront.data;
+  if (value) {
+    $data[field] = value;
+    emitter.emit(field, value);
+  } else if ($data[field]) {
+    value = $data[field];
+  } else {
+    value = await new Promise((resolve) => {
+      const callback = (_value) => {
+        resolve(_value);
+        clearTimeout(timer);
+      };
+      const abort = () => {
+        resolve(null);
+        emitter.removeListener(field, callback);
+      };
+      const timer = setTimeout(abort, timeout);
+      emitter.once(field, callback);
+    });
+  }
+  return {
+    value,
+    getInlineClientJS: () => `
+window.$storefront.data['${field}'] = ${JSON.stringify(value)};`
+  };
+};
+
 const checkObjNotNull = (obj) => {
   return Object.values(obj).filter((val) => val).length;
 };
@@ -1156,10 +1274,13 @@ const loadingGlobalInfoPreset = new Promise((resolve) => {
 });
 
 let userAgent;
+let screenWidth;
 {
   userAgent = "";
+  screenWidth = 0;
 }
 const isMobile = /Android|iPhone|iPad|iPod|webOS/i.test(userAgent);
+const isScreenLg = screenWidth >= 1024;
 
 const networkNames = [
   "whatsapp",
@@ -1267,7 +1388,7 @@ const usePageHeader = async ({ routeContext, listedCategoryFields }) => {
   } = layoutContent;
   const pitchBar = parseLayoutContent(layoutContent);
   let { categories } = apiState;
-  if (!categories && listedCategoryFields !== null) {
+  if (listedCategoryFields !== null) {
     try {
       categories = (await api.get("categories", {
         fields: listedCategoryFields || [
@@ -1285,8 +1406,10 @@ const usePageHeader = async ({ routeContext, listedCategoryFields }) => {
       console.error(err);
     }
   }
+  if (categories) {
+    useSharedData({ field: "categories", value: categories });
+  }
   const shopHeader = {
-    categories,
     menuCategorySlugs: inlineMenuCategories?.featured,
     menuRandomCategories: inlineMenuCategories?.random,
     isAlphabeticalSortSubmenu
@@ -1297,36 +1420,7 @@ const usePageHeader = async ({ routeContext, listedCategoryFields }) => {
   };
 };
 
-const emitter = new EventEmitter();
-const useSharedData = async ({ field, value, timeout = 1e3 }) => {
-  const $data = global.$storefront.data;
-  if (value) {
-    $data[field] = value;
-    emitter.emit(field, value);
-  } else if ($data[field]) {
-    value = $data[field];
-  } else {
-    value = await new Promise((resolve) => {
-      const callback = (_value) => {
-        resolve(_value);
-        clearTimeout(timer);
-      };
-      const abort = () => {
-        resolve(null);
-        emitter.removeListener(field, callback);
-      };
-      const timer = setTimeout(abort, timeout);
-      emitter.once(field, callback);
-    });
-  }
-  return {
-    value,
-    inlineClientJS: `
-window.$storefront.data['${field}'] = ${JSON.stringify(value)};`
-  };
-};
-
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "PitchBar",
   props: {
     slides: {}
@@ -1343,7 +1437,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$t(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$v(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Carousel = resolveComponent("Carousel");
   const _component_ALink = resolveComponent("ALink");
   const _component_CarouselControl = resolveComponent("CarouselControl");
@@ -1436,13 +1530,13 @@ function _sfc_ssrRender$t(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div></div>`);
 }
-const _sfc_setup$t = _sfc_main$t.setup;
-_sfc_main$t.setup = (props, ctx) => {
+const _sfc_setup$v = _sfc_main$v.setup;
+_sfc_main$v.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/PitchBar.vue");
-  return _sfc_setup$t ? _sfc_setup$t(props, ctx) : void 0;
+  return _sfc_setup$v ? _sfc_setup$v(props, ctx) : void 0;
 };
-const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["ssrRender", _sfc_ssrRender$t]]);
+const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["ssrRender", _sfc_ssrRender$v]]);
 
 const useStorage = (key, initialValue, storage = globalThis.localStorage) => {
   if (!storage) {
@@ -1826,7 +1920,7 @@ const useShopHeader = (props) => {
   };
 };
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -1837,6 +1931,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     hasCloseButton: { type: Boolean, default: true },
     anchorEl: {},
     backdropTarget: { default: "#teleported-top" },
+    canLockScroll: { type: Boolean, default: true },
     maxWidth: {},
     class: {}
   },
@@ -1862,16 +1957,20 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const scrollbarWidth = ref(0);
     watch(toRef(props, "modelValue"), async (isOpen) => {
       if (isOpen) {
-        scrollbarWidth.value = window.innerWidth - document.documentElement.clientWidth;
-        document.body.style.overflow = "hidden";
-        document.body.style.paddingRight = `${scrollbarWidth.value}px`;
+        if (props.canLockScroll) {
+          scrollbarWidth.value = window.innerWidth - document.documentElement.clientWidth;
+          document.body.style.overflow = "hidden";
+          document.body.style.paddingRight = `${scrollbarWidth.value}px`;
+        }
         setTimeout(() => {
           document.addEventListener("click", outsideClickListener, { passive: true });
           document.addEventListener("keydown", escClickListener, { passive: true });
         }, 500);
       } else {
-        document.body.style.overflow = "";
-        document.body.style.paddingRight = "";
+        if (props.canLockScroll) {
+          document.body.style.overflow = "";
+          document.body.style.paddingRight = "";
+        }
         document.removeEventListener("click", outsideClickListener);
         document.removeEventListener("keydown", escClickListener);
       }
@@ -1924,7 +2023,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$s(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$u(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   _push(ssrRenderComponent(_component_Fade, mergeProps({
     slide: $setup.slideTo,
@@ -1950,9 +2049,9 @@ function _sfc_ssrRender$s(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             ...$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}>`);
+            _push2(`<button type="button"${ssrRenderAttr("aria-label", "Fechar")} class="${ssrRenderClass([$props.placement === "end" ? "left-2" : "right-2", "absolute top-2 z-30 rounded"])}" data-drawer-close${_scopeId}>`);
             ssrRenderSlot(_ctx.$slots, "close", {}, () => {
-              _push2(`<i class="i-close text-base-400 hover:text-base-600 text-3xl"${_scopeId}></i>`);
+              _push2(`<i class="i-close text-base-400 hover:text-base-600 m-0 text-3xl"${_scopeId}></i>`);
             }, _push2, _parent2, _scopeId);
             _push2(`</button>`);
           } else {
@@ -2017,11 +2116,11 @@ function _sfc_ssrRender$s(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                 type: "button",
                 "aria-label": "Fechar",
                 onClick: withModifiers($setup.close, ["prevent"]),
-                class: ["absolute top-2 z-30", $props.placement === "end" ? "left-2" : "right-2"],
+                class: ["absolute top-2 z-30 rounded", $props.placement === "end" ? "left-2" : "right-2"],
                 "data-drawer-close": ""
               }, [
                 renderSlot$1(_ctx.$slots, "close", {}, () => [
-                  createVNode("i", { class: "i-close text-base-400 hover:text-base-600 text-3xl" })
+                  createVNode("i", { class: "i-close text-base-400 hover:text-base-600 m-0 text-3xl" })
                 ])
               ], 2)) : createCommentVNode("", true),
               renderSlot$1(_ctx.$slots, "default")
@@ -2050,13 +2149,13 @@ function _sfc_ssrRender$s(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$s = _sfc_main$s.setup;
-_sfc_main$s.setup = (props, ctx) => {
+const _sfc_setup$u = _sfc_main$u.setup;
+_sfc_main$u.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Drawer.vue");
-  return _sfc_setup$s ? _sfc_setup$s(props, ctx) : void 0;
+  return _sfc_setup$u ? _sfc_setup$u(props, ctx) : void 0;
 };
-const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["ssrRender", _sfc_ssrRender$s]]);
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["ssrRender", _sfc_ssrRender$u]]);
 
 const storageKey$1 = "ecomSession";
 const emptySession = {
@@ -2095,7 +2194,7 @@ const initializeFirebaseAuth = (canWaitIdle) => {
   return;
 };
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "AccountLink",
   props: {
     to: {},
@@ -2130,20 +2229,20 @@ 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) {
   _push(`<a${ssrRenderAttrs(mergeProps({ href: $setup.href }, _attrs))}>`);
   ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
   _push(`</a>`);
 }
-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/lib/components/AccountLink.vue");
-  return _sfc_setup$r ? _sfc_setup$r(props, ctx) : void 0;
+  return _sfc_setup$t ? _sfc_setup$t(props, ctx) : void 0;
 };
-const AccountLink = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["ssrRender", _sfc_ssrRender$r]]);
+const AccountLink = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["ssrRender", _sfc_ssrRender$t]]);
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkIcon",
   props: {
     as: { default: "i" },
@@ -2179,18 +2278,18 @@ 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) {
   ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), mergeProps({ class: $setup.iconClassName }, _attrs), null), _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/SocialNetworkIcon.vue");
-  return _sfc_setup$q ? _sfc_setup$q(props, ctx) : void 0;
+  return _sfc_setup$s ? _sfc_setup$s(props, ctx) : void 0;
 };
-const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["ssrRender", _sfc_ssrRender$q]]);
+const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["ssrRender", _sfc_ssrRender$s]]);
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkLink",
   props: {
     network: {},
@@ -2216,7 +2315,7 @@ 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) {
   const _component_ALink = resolveComponent("ALink");
   _push(ssrRenderComponent(_component_ALink, mergeProps({ href: $setup.fixedHref }, _attrs), {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
@@ -2237,15 +2336,15 @@ function _sfc_ssrRender$p(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-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/SocialNetworkLink.vue");
-  return _sfc_setup$p ? _sfc_setup$p(props, ctx) : void 0;
+  return _sfc_setup$r ? _sfc_setup$r(props, ctx) : void 0;
 };
-const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["ssrRender", _sfc_ssrRender$p]]);
+const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["ssrRender", _sfc_ssrRender$r]]);
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenavCategory",
   props: {
     categoryTree: {}
@@ -2268,7 +2367,7 @@ 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) {
   const _component_AImg = resolveComponent("AImg");
   const _component_ShopSidenavCategory = resolveComponent("ShopSidenavCategory", true);
   _push(`<li${ssrRenderAttrs(mergeProps({ class: "text-base-800 text-lg" }, _attrs))}>`);
@@ -2306,15 +2405,15 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</li>`);
 }
-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/components/ShopSidenavCategory.vue");
-  return _sfc_setup$o ? _sfc_setup$o(props, ctx) : void 0;
+  return _sfc_setup$q ? _sfc_setup$q(props, ctx) : void 0;
 };
-const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["ssrRender", _sfc_ssrRender$o]]);
+const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["ssrRender", _sfc_ssrRender$q]]);
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenav",
   props: {
     categoryTrees: {}
@@ -2335,7 +2434,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) {
   _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"], {
@@ -2376,13 +2475,13 @@ function _sfc_ssrRender$n(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></footer></aside>`);
 }
-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/components/ShopSidenav.vue");
-  return _sfc_setup$n ? _sfc_setup$n(props, ctx) : void 0;
+  return _sfc_setup$p ? _sfc_setup$p(props, ctx) : void 0;
 };
-const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["ssrRender", _sfc_ssrRender$n]]);
+const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["ssrRender", _sfc_ssrRender$p]]);
 
 const useShopHeaderSubmenu = (props) => {
   const categoryPicture = computed(() => {
@@ -2431,7 +2530,7 @@ const useShopHeaderSubmenu = (props) => {
   };
 };
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "ShopHeaderSubmenu",
   props: {
     categoryTree: {},
@@ -2460,7 +2559,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_Fade = resolveComponent("Fade");
   const _component_AImg = resolveComponent("AImg");
   _push(ssrRenderComponent($setup["Popover"], _attrs, {
@@ -2774,15 +2873,15 @@ function _sfc_ssrRender$m(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-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/ShopHeaderSubmenu.vue");
-  return _sfc_setup$m ? _sfc_setup$m(props, ctx) : void 0;
+  return _sfc_setup$o ? _sfc_setup$o(props, ctx) : void 0;
 };
-const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["ssrRender", _sfc_ssrRender$m]]);
+const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["ssrRender", _sfc_ssrRender$o]]);
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "ShopHeaderMenu",
   props: {
     inlineMenuTrees: {}
@@ -2798,7 +2897,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(`<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>`);
@@ -2811,7 +2910,7 @@ function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               open ? "underline" : null
             ], "inline group-hover:underline"])}"${_scopeId}>${ssrInterpolate(categoryTree.name)}</h3>`);
             if ($setup.hasOneLevelSubcategories) {
-              _push2(`<i class="${ssrRenderClass([open ? "rotate-180" : null, "i-chevron-down text-base-400 group-hover:text-primary-subtle ml-1 transition-transform"])}"${_scopeId}></i>`);
+              _push2(`<i class="${ssrRenderClass([open ? "-rotate-90" : "rotate-90", "i-chevron-right text-base-400 group-hover:text-primary-subtle ml-1 transition-transform"])}"${_scopeId}></i>`);
             } else {
               _push2(`<!---->`);
             }
@@ -2827,7 +2926,7 @@ function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                 }, toDisplayString(categoryTree.name), 3),
                 $setup.hasOneLevelSubcategories ? (openBlock(), createBlock("i", {
                   key: 0,
-                  class: ["i-chevron-down text-base-400 group-hover:text-primary-subtle ml-1 transition-transform", open ? "rotate-180" : null]
+                  class: ["i-chevron-right text-base-400 group-hover:text-primary-subtle ml-1 transition-transform", open ? "-rotate-90" : "rotate-90"]
                 }, null, 2)) : createCommentVNode("", true)
               ])
             ];
@@ -2842,15 +2941,15 @@ function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></nav>`);
 }
-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/ShopHeaderMenu.vue");
-  return _sfc_setup$l ? _sfc_setup$l(props, ctx) : void 0;
+  return _sfc_setup$n ? _sfc_setup$n(props, ctx) : void 0;
 };
-const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["ssrRender", _sfc_ssrRender$l]]);
+const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["ssrRender", _sfc_ssrRender$n]]);
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "AccountMenu",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -2877,7 +2976,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_ALink = resolveComponent("ALink");
   _push(ssrRenderComponent($setup["Menu"], mergeProps({
@@ -2976,7 +3075,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                         if (_push5) {
                           _push5(ssrRenderComponent($setup["AccountLink"], {
                             to: "orders",
-                            class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                            class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                           }, {
                             default: withCtx((_3, _push6, _parent6, _scopeId5) => {
                               if (_push6) {
@@ -2993,7 +3092,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                           return [
                             createVNode($setup["AccountLink"], {
                               to: "orders",
-                              class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                              class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                             }, {
                               default: withCtx(() => [
                                 createTextVNode(toDisplayString("Meus pedidos"))
@@ -3010,7 +3109,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                         if (_push5) {
                           _push5(ssrRenderComponent($setup["AccountLink"], {
                             to: "favorites",
-                            class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                            class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                           }, {
                             default: withCtx((_3, _push6, _parent6, _scopeId5) => {
                               if (_push6) {
@@ -3028,7 +3127,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                           return [
                             createVNode($setup["AccountLink"], {
                               to: "favorites",
-                              class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                              class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                             }, {
                               default: withCtx(() => [
                                 createVNode("i", { class: "i-heart mr-1" }),
@@ -3051,7 +3150,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                           if (_push5) {
                             _push5(ssrRenderComponent(_component_ALink, {
                               href,
-                              class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                              class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                             }, {
                               default: withCtx((_3, _push6, _parent6, _scopeId5) => {
                                 if (_push6) {
@@ -3068,7 +3167,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                             return [
                               createVNode(_component_ALink, {
                                 href,
-                                class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                                class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                               }, {
                                 default: withCtx(() => [
                                   createTextVNode(toDisplayString(title), 1)
@@ -3164,7 +3263,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                           default: withCtx(({ active }) => [
                             createVNode($setup["AccountLink"], {
                               to: "orders",
-                              class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                              class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                             }, {
                               default: withCtx(() => [
                                 createTextVNode(toDisplayString("Meus pedidos"))
@@ -3178,7 +3277,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                           default: withCtx(({ active }) => [
                             createVNode($setup["AccountLink"], {
                               to: "favorites",
-                              class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                              class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                             }, {
                               default: withCtx(() => [
                                 createVNode("i", { class: "i-heart mr-1" }),
@@ -3197,7 +3296,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                             default: withCtx(({ active }) => [
                               createVNode(_component_ALink, {
                                 href,
-                                class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                                class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                               }, {
                                 default: withCtx(() => [
                                   createTextVNode(toDisplayString(title), 1)
@@ -3275,7 +3374,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                         default: withCtx(({ active }) => [
                           createVNode($setup["AccountLink"], {
                             to: "orders",
-                            class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                            class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                           }, {
                             default: withCtx(() => [
                               createTextVNode(toDisplayString("Meus pedidos"))
@@ -3289,7 +3388,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                         default: withCtx(({ active }) => [
                           createVNode($setup["AccountLink"], {
                             to: "favorites",
-                            class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                            class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                           }, {
                             default: withCtx(() => [
                               createVNode("i", { class: "i-heart mr-1" }),
@@ -3308,7 +3407,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                           default: withCtx(({ active }) => [
                             createVNode(_component_ALink, {
                               href,
-                              class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                              class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                             }, {
                               default: withCtx(() => [
                                 createTextVNode(toDisplayString(title), 1)
@@ -3414,7 +3513,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                       default: withCtx(({ active }) => [
                         createVNode($setup["AccountLink"], {
                           to: "orders",
-                          class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                          class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                         }, {
                           default: withCtx(() => [
                             createTextVNode(toDisplayString("Meus pedidos"))
@@ -3428,7 +3527,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                       default: withCtx(({ active }) => [
                         createVNode($setup["AccountLink"], {
                           to: "favorites",
-                          class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                          class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                         }, {
                           default: withCtx(() => [
                             createVNode("i", { class: "i-heart mr-1" }),
@@ -3447,7 +3546,7 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                         default: withCtx(({ active }) => [
                           createVNode(_component_ALink, {
                             href,
-                            class: ["block p-2", active ? "bg-base-100 text-primary" : null]
+                            class: ["block p-2", active ? "bg-primary-100 text-primary" : null]
                           }, {
                             default: withCtx(() => [
                               createTextVNode(toDisplayString(title), 1)
@@ -3501,15 +3600,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/AccountMenu.vue");
-  return _sfc_setup$k ? _sfc_setup$k(props, ctx) : void 0;
+  return _sfc_setup$m ? _sfc_setup$m(props, ctx) : void 0;
 };
-const AccountMenu = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["ssrRender", _sfc_ssrRender$k]]);
+const AccountMenu = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["ssrRender", _sfc_ssrRender$m]]);
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "ShopHeader",
   props: {
     searchInput: {},
@@ -3520,8 +3619,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     __expose();
-    const SearchModal = defineAsyncComponent(() => import('../SearchModal_eWb5SdQM.mjs'));
-    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_hAgJQJgm.mjs'));
+    const SearchModal = defineAsyncComponent(() => import('../SearchModal_2uYZ9tHy.mjs'));
+    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_gCUGFy65.mjs'));
     const props = __props;
     const header = ref(null);
     const searchInput = ref(null);
@@ -3551,7 +3650,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) {
   const _component_Fade = resolveComponent("Fade");
   const _component_Skeleton = resolveComponent("Skeleton");
   _push(`<header${ssrRenderAttrs(mergeProps({
@@ -3570,10 +3669,10 @@ function _sfc_ssrRender$j(_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="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>`);
+        _push2(`<div style="${ssrRenderStyle($setup.isSearchOpen ? null : { display: "none" })}" class="absolute -right-0.5 -top-2.5 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" }, [
+          withDirectives(createVNode("div", { class: "absolute -right-0.5 -top-2.5 flex items-stretch" }, [
             createVNode("div", { class: "hidden w-12 bg-gradient-to-r from-transparent to-white sm:block" }),
             withDirectives(createVNode("input", {
               ref: "searchInput",
@@ -3762,13 +3861,13 @@ function _sfc_ssrRender$j(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</header>`);
 }
-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/ShopHeader.vue");
-  return _sfc_setup$j ? _sfc_setup$j(props, ctx) : void 0;
+  return _sfc_setup$l ? _sfc_setup$l(props, ctx) : void 0;
 };
-const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["ssrRender", _sfc_ssrRender$j]]);
+const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["ssrRender", _sfc_ssrRender$l]]);
 
 var __freeze$2 = Object.freeze;
 var __defProp$2 = Object.defineProperty;
@@ -3783,13 +3882,10 @@ const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
   const LogoHeading = isHomepage ? "h1" : "h2";
   const {
     pitchBar,
-    shopHeader: { categories, ...shopHeader }
+    shopHeader
   } = await usePageHeader({ routeContext });
-  const { inlineClientJS } = await useSharedData({
-    field: "categories",
-    value: categories?.map(({ _id, ...c }) => c)
-  });
-  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`
+  const { getInlineClientJS } = await useSharedData({ field: "categories" });
+  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(getInlineClientJS()), 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" })}
@@ -3798,7 +3894,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$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "PaymentMethodFlag",
   props: {
     as: { default: "i" },
@@ -3834,22 +3930,22 @@ 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) {
   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$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/lib/components/PaymentMethodFlag.vue");
-  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
+  return _sfc_setup$k ? _sfc_setup$k(props, ctx) : void 0;
 };
-const PaymentMethodFlag = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["ssrRender", _sfc_ssrRender$i]]);
+const PaymentMethodFlag = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["ssrRender", _sfc_ssrRender$k]]);
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "FooterStamps",
   props: {
     stamps: {}
@@ -3861,7 +3957,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     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_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) => {
@@ -3960,15 +4056,15 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div></div>`);
 }
-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/FooterStamps.vue");
-  return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
+  return _sfc_setup$j ? _sfc_setup$j(props, ctx) : void 0;
 };
-const FooterStamps = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["ssrRender", _sfc_ssrRender$h]]);
+const FooterStamps = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["ssrRender", _sfc_ssrRender$j]]);
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "ShopFooter",
   props: {
     stamps: {},
@@ -3986,7 +4082,7 @@ 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) {
   const _component_ALink = resolveComponent("ALink");
   _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);
@@ -4084,13 +4180,13 @@ function _sfc_ssrRender$g(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(ssrRenderComponent($setup["FooterStamps"], { stamps: $props.stamps }, null, _parent));
   _push(`</footer>`);
 }
-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/components/ShopFooter.vue");
-  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
+  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
 };
-const ShopFooter = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["ssrRender", _sfc_ssrRender$g]]);
+const ShopFooter = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["ssrRender", _sfc_ssrRender$i]]);
 
 const $$Astro$7 = createAstro("https://demo.ecomplus.app");
 const $$PageFooter = createComponent(async ($$result, $$props, $$slots) => {
@@ -4142,6 +4238,19 @@ const $$PageFooter = createComponent(async ($$result, $$props, $$slots) => {
   ` })}` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/PageFooter.astro", void 0);
 
+const i19aboveOf = "Acima de";
+const i19brands = "Marcas";
+const i19categories = "Categorias";
+const i19discount = "Desconto";
+const i19highestPrice = "Maior preço";
+const i19lowestPrice = "Menor preço";
+const i19name = "Nome";
+const i19relatedProducts = "Produtos relacionados";
+const i19releases = "Lançamentos";
+const i19relevance = "Relevância";
+const i19sales = "Vendas";
+const i19upTo = "Até";
+
 const useProductShelf = (props) => {
   const title = ref(props.title || "");
   const titleLink = ref(props.titleLink || "");
@@ -4152,31 +4261,39 @@ const useProductShelf = (props) => {
   if (!props.products) {
     isFetching.value = true;
     fetching = (async () => {
-      let searchQuery = props.searchQuery || "";
-      let collection;
-      if (props.collectionId) {
-        try {
-          const { data } = await api.get(`collections/${props.collectionId}`);
-          collection = data;
-        } catch (err) {
-          console.error(err);
-          fetchError.value = err;
-        }
-        const productIds = collection?.products;
-        if (Array.isArray(productIds) && productIds.length) {
-          searchQuery += `&_id=${productIds.slice(0, 60).join(",")}`;
-        }
-        if (!title.value && title.value !== null && collection?.name) {
-          title.value = collection?.name;
-        }
-      }
       const limit = props.limit || 24;
       const offset = props.page ? (props.page - 1) * limit : 0;
       let endpointQuery = `offset=${offset}&limit=${limit}`;
       if (props.sort) {
         endpointQuery += `&sort=${props.sort}`;
       }
-      endpointQuery += searchQuery;
+      if (props.isRelatedProducts) {
+        const { apiContext } = globalThis.$storefront;
+        if (apiContext?.resource === "products") {
+          endpointQuery = `like=${apiContext.doc._id}`;
+          title.value = i19relatedProducts;
+        }
+      } else {
+        let searchQuery = props.searchQuery || "";
+        let collection;
+        if (props.collectionId) {
+          try {
+            const { data } = await api.get(`collections/${props.collectionId}`);
+            collection = data;
+          } catch (err) {
+            console.error(err);
+            fetchError.value = err;
+          }
+          const productIds = collection?.products;
+          if (Array.isArray(productIds) && productIds.length) {
+            searchQuery += `&_id=${productIds.slice(0, 60).join(",")}`;
+          }
+          if (!title.value && title.value !== null && collection?.name) {
+            title.value = collection?.name;
+          }
+        }
+        endpointQuery += searchQuery;
+      }
       try {
         const { data } = await api.get(`search/v1?${endpointQuery}`);
         if (props.isShuffle) {
@@ -4261,10 +4378,10 @@ const search = async ({
 };
 class SearchEngine {
   fields;
-  term = ref("");
+  term = ref(null);
   isWithCount = ref(true);
   isWithBuckets = ref(true);
-  params = shallowReactive({});
+  params = reactive({});
   pageSize = ref(24);
   pageNumber = ref(1);
   #isFetching = ref(false);
@@ -4302,7 +4419,7 @@ class SearchEngine {
     });
   }
   async fetch(term) {
-    if (term && term !== this.term.value) {
+    if (term !== void 0 && term !== this.term.value) {
       this.term.value = term;
       this.pageNumber.value = 1;
     }
@@ -4338,52 +4455,443 @@ class SearchEngine {
       this.#wasFetched.value = true;
       const { data } = response;
       if (data.meta) {
-        this.products.splice(0);
-        Object.assign(this.meta, data.meta);
+        this.setResult(data);
       }
-      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 || "")}`;
+  setResult(data) {
+    if (data.meta) {
+      Object.assign(this.meta, data.meta);
     }
-  }
-  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 (data.result) {
+      this.products.splice(0);
+      data.result.forEach((item) => this.products.push(item));
     }
-    if (term !== void 0) {
-      searchEngine.term.value = term;
+    if (data.meta && data.result) {
+      this.#wasFetched.value = true;
     }
   }
-  if (!searchEngine.wasFetched.value && !props.products) {
-    searchEngine.fetch().catch(console.error);
-  }
-  watch(searchEngine.products, () => {
-    products.splice(0);
-    searchEngine?.products.forEach((item) => products.push(item));
+}
+
+const useSearchActiveFilters = ({ searchEngine, fixedParams }) => {
+  const activeFilters = computed(() => {
+    const filters = {};
+    Object.keys(searchEngine.params).forEach((param) => {
+      if (fixedParams?.[param])
+        return;
+      const val = searchEngine.params[param];
+      if (val === void 0)
+        return;
+      switch (param) {
+        case "sort":
+        case "term":
+        case "limit":
+        case "offset":
+        case "count":
+        case "buckets":
+        case "fields":
+          return;
+      }
+      filters[param] = val;
+    });
+    return filters;
   });
-  return {
-    searchEngine,
-    fetching: searchEngine.fetching.value,
-    isFetching: searchEngine.isFetching,
-    products
-  };
+  const filtersCount = computed(() => {
+    const paramKeys = Object.keys(activeFilters.value);
+    const fields = [];
+    paramKeys.forEach((key) => {
+      const field = key.replace(/[^\w.]/g, "");
+      if (field === "specs" && Array.isArray(activeFilters.value[key])) {
+        activeFilters.value[key].forEach((specAndVal) => {
+          const [spec] = specAndVal.split(":");
+          const specField = `specs.${spec}`;
+          if (!fields.includes(specField)) {
+            fields.push(specField);
+          }
+        });
+        return;
+      }
+      if (!fields.includes(field)) {
+        fields.push(field);
+      }
+    });
+    return fields.length;
+  });
+  return { activeFilters, filtersCount };
 };
-
-const now = Date.now();
-const parseBanners = (banners) => {
+const useSearchFilters = (props) => {
+  const { searchEngine, fixedParams } = props;
+  const resultMeta = computed(() => searchEngine.meta);
+  const resultBuckets = computed(() => searchEngine.meta.buckets);
+  const { activeFilters, filtersCount } = useSearchActiveFilters(props);
+  watch(searchEngine.params, () => {
+    searchEngine.fetch();
+  });
+  let _lastParamChanged = null;
+  const clearFilters = () => {
+    Object.keys(searchEngine.params).forEach((param) => {
+      if (fixedParams?.[param])
+        return;
+      delete searchEngine.params[param];
+    });
+    _lastParamChanged = null;
+  };
+  const getPriceRangeKey = ({ min, max }) => {
+    return `${min || null}/${max || null}`;
+  };
+  const currentPriceRange = computed(() => {
+    const { params } = searchEngine;
+    return {
+      min: Number(params["price>"]),
+      max: Number(params["price<"])
+    };
+  });
+  const priceRanges = ref([]);
+  const _updatePriceRanges = useDebounceFn(() => {
+    priceRanges.value.splice(0);
+    resultBuckets.value?.prices?.forEach((priceRange) => {
+      if (priceRange.min)
+        priceRange.min = Math.round(priceRange.min * 100) / 100;
+      if (priceRange.max)
+        priceRange.max = Math.round(priceRange.max * 100) / 100;
+      priceRanges.value.push({
+        range: priceRange,
+        key: getPriceRangeKey(priceRange)
+      });
+    });
+    if (!Number.isNaN(currentPriceRange.value.min)) {
+      const checkedPriceRange = priceRanges.value.find(({ range }) => {
+        return range.min === currentPriceRange.value.min && range.max === currentPriceRange.value.max;
+      });
+      if (!checkedPriceRange) {
+        priceRanges.value.unshift({
+          range: {
+            ...currentPriceRange.value,
+            count: resultMeta.value.count || 0,
+            avg: null
+          },
+          key: getPriceRangeKey(currentPriceRange.value)
+        });
+      }
+    }
+  }, 50);
+  _updatePriceRanges();
+  const priceRangeKey = ref(getPriceRangeKey(currentPriceRange.value));
+  watch(priceRangeKey, () => {
+    _lastParamChanged = "price";
+    const priceRange = priceRanges.value.find(({ range }) => {
+      return getPriceRangeKey(range) === priceRangeKey.value;
+    });
+    if (priceRange) {
+      const { min, max } = priceRange.range;
+      if (min) {
+        searchEngine.params["price>"] = min;
+      } else {
+        delete searchEngine.params["price>"];
+      }
+      if (max) {
+        searchEngine.params["price<"] = max;
+      } else {
+        delete searchEngine.params["price<"];
+      }
+      return;
+    }
+    delete searchEngine.params["price>"];
+    delete searchEngine.params["price<"];
+  });
+  const getPriceRangeLabel = ({ min, max }) => {
+    if (min && max) {
+      if (max === min) {
+        return formatMoney(max);
+      }
+      return `${formatMoney(min)} ${i19upTo.toLowerCase()} ${formatMoney(max)}`;
+    }
+    if (!min && max) {
+      return `${i19upTo} ${formatMoney(max)}`;
+    }
+    return `${i19aboveOf} ${formatMoney(min || 0)}`;
+  };
+  const filterOptions = ref([]);
+  const _updateFilterOptions = useDebounceFn(() => {
+    for (let i = 0; i < filterOptions.value.length; i++) {
+      const { field } = filterOptions.value[i];
+      if (field !== _lastParamChanged) {
+        filterOptions.value.splice(i, 1);
+        i -= 1;
+      }
+    }
+    const buckets = resultBuckets.value;
+    if (buckets) {
+      [["brands", i19brands], ["categories", i19categories]].forEach(([resource, title]) => {
+        const field = `${resource}.name`;
+        if (buckets[field] && _lastParamChanged !== field) {
+          filterOptions.value.push({
+            title,
+            options: buckets[field],
+            field
+          });
+        }
+      });
+      if (buckets.specs) {
+        const { grids } = globalThis.$storefront.data;
+        Object.keys(buckets.specs).forEach((specAndVal) => {
+          const [spec, value] = specAndVal.split(":");
+          if (value) {
+            const field = `specs.${spec}`;
+            if (_lastParamChanged === field)
+              return;
+            const title = gridTitle(spec, grids || []);
+            let filterOption = filterOptions.value.find((_filterOption) => {
+              return _filterOption.field === field;
+            });
+            if (!filterOption) {
+              filterOption = { title, options: {}, field };
+              filterOptions.value.push(filterOption);
+            }
+            filterOption.options[value] = buckets.specs[specAndVal];
+          }
+        });
+      }
+    }
+  }, 50);
+  _updateFilterOptions();
+  const parseSpecsField = (field, value) => {
+    const [, spec] = field.split(".");
+    return ["specs,", `${spec}:${value}`];
+  };
+  const checkFilterOption = (field, value) => {
+    if (field.startsWith("specs.")) {
+      [field, value] = parseSpecsField(field, value);
+    }
+    const fieldParams = activeFilters.value[field];
+    if (fieldParams === value)
+      return true;
+    if (Array.isArray(fieldParams) && fieldParams.includes(value))
+      return true;
+    return false;
+  };
+  const toggleFilterOption = (field, value) => {
+    _lastParamChanged = field;
+    console.log({ _lastParamChanged });
+    if (field.startsWith("specs.")) {
+      [field, value] = parseSpecsField(field, value);
+    }
+    const isToActivate = !checkFilterOption(field, value);
+    let fieldParams = searchEngine.params[field];
+    if (!Array.isArray(fieldParams)) {
+      fieldParams = [];
+      searchEngine.params[field] = fieldParams;
+    }
+    if (isToActivate) {
+      fieldParams.push(value);
+    } else {
+      for (let i = 0; i < fieldParams.length; i++) {
+        if (fieldParams[i] === value) {
+          fieldParams.splice(i, 1);
+          break;
+        }
+      }
+    }
+  };
+  watch(resultBuckets, () => {
+    if (_lastParamChanged !== "price") {
+      _updatePriceRanges();
+    }
+    _updateFilterOptions();
+  });
+  return {
+    resultMeta,
+    resultBuckets,
+    activeFilters,
+    filtersCount,
+    clearFilters,
+    getPriceRangeKey,
+    priceRanges,
+    priceRangeKey,
+    getPriceRangeLabel,
+    filterOptions,
+    checkFilterOption,
+    toggleFilterOption
+  };
+};
+
+const useSearchShowcase = (props) => {
+  let { term } = props;
+  const canUseUrlParams = props.canUseUrlParams !== false;
+  const urlParams = canUseUrlParams ? useUrlSearchParams("history") : null;
+  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 || []);
+  const 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;
+  }
+  Object.assign(searchEngine.params, props.fixedParams);
+  if (urlParams) {
+    Object.keys(urlParams).forEach((param) => {
+      if (param === "sort") {
+        searchEngine.params.sort = urlParams.sort;
+        return;
+      }
+      if (param === "p") {
+        const pageNumber = parseInt(String(urlParams.p), 10);
+        if (pageNumber >= 1)
+          searchEngine.pageNumber.value = pageNumber;
+        return;
+      }
+      if (param.startsWith("f\\")) {
+        const field = param.substring(2);
+        searchEngine.params[field] = urlParams[param];
+      }
+    });
+  }
+  if (!searchEngine.wasFetched.value) {
+    if (props.products || props.resultMeta) {
+      searchEngine.setResult({
+        result: props.products,
+        meta: props.resultMeta
+      });
+    }
+    if (!props.products) {
+      searchEngine.fetch().catch(console.error);
+    }
+  }
+  searchEngine.isWithCount.value = true;
+  searchEngine.isWithBuckets.value = true;
+  const resultMeta = ref({
+    count: 0,
+    ...props.resultMeta || searchEngine.meta
+  });
+  watch(searchEngine.products, () => {
+    products.splice(0);
+    searchEngine.products.forEach((item) => products.push(item));
+    resultMeta.value = {
+      count: 0,
+      ...searchEngine.meta
+    };
+  });
+  const totalPages = computed(() => {
+    const { count } = searchEngine.meta;
+    if (!count || products.length < 2)
+      return 1;
+    return Math.ceil(count / searchEngine.pageSize.value);
+  });
+  watch(searchEngine.pageNumber, (pageNumber) => {
+    if (urlParams) {
+      urlParams.p = `${pageNumber}`;
+    }
+    searchEngine.fetch();
+  });
+  const startWatchingFetch = () => {
+    watch(searchEngine.isFetching, (isFetching) => {
+      const el = props.showcase?.value;
+      if (!isFetching && el) {
+        setTimeout(() => {
+          scrollToEl(el, isScreenLg ? -25 : 0);
+        }, 50);
+      }
+    });
+  };
+  if (searchEngine.wasFetched.value) {
+    startWatchingFetch();
+  } else {
+    watchOnce(searchEngine.wasFetched, startWatchingFetch);
+  }
+  const { activeFilters, filtersCount } = useSearchActiveFilters({
+    searchEngine,
+    fixedParams: props.fixedParams
+  });
+  if (urlParams) {
+    watch(activeFilters, (params) => {
+      if (urlParams) {
+        Object.keys(urlParams).forEach((param) => {
+          if (param.startsWith("f\\"))
+            delete urlParams[param];
+        });
+      }
+      Object.keys(params).forEach((param) => {
+        const val = params[param];
+        if (typeof val === "string" || typeof val === "number") {
+          urlParams[`f\\${param}`] = `${val}`;
+          return;
+        }
+        if (Array.isArray(val) && typeof val[0] === "string") {
+          urlParams[`f\\${param}`] = val;
+        }
+      });
+    });
+  }
+  const sortOptions = [
+    {
+      value: null,
+      label: i19relevance
+    },
+    {
+      value: "-sales",
+      label: i19sales
+    },
+    {
+      value: "price",
+      label: i19lowestPrice
+    },
+    {
+      value: "-price",
+      label: i19highestPrice
+    },
+    {
+      value: "-price_discount",
+      label: i19discount
+    },
+    {
+      value: "-created_at",
+      label: i19releases
+    },
+    {
+      value: "name",
+      label: i19name
+    }
+  ];
+  const sortOption = ref(null);
+  watch(sortOption, () => {
+    searchEngine.params.sort = sortOption.value || void 0;
+    searchEngine.fetch();
+  });
+  if (urlParams) {
+    if (typeof urlParams.sort === "string" && urlParams.sort) {
+      sortOption.value = urlParams.sort;
+    }
+    watch(searchEngine.params, (params) => {
+      delete urlParams.sort;
+      if (params.sort)
+        urlParams.sort = String(params.sort);
+    });
+  }
+  return {
+    searchEngine,
+    fetching: searchEngine.fetching.value,
+    isFetching: searchEngine.isFetching,
+    products,
+    resultMeta,
+    totalPages,
+    activeFilters,
+    filtersCount,
+    sortOptions,
+    sortOption
+  };
+};
+
+const now = Date.now();
+const parseBanners = (banners) => {
   const validBanners = [];
   banners.forEach(({
     startsAt,
@@ -4470,13 +4978,38 @@ const usePageSections = async ({ routeContext, handleCustomSection }) => {
         };
         return;
       }
-      if (type === "search-container") {
+      if (type === "search-showcase" || type === "context-showcase") {
         const props = { ...sectionContent };
-        if (routeContext.searchPageTerm !== void 0) {
+        if (type === "context-showcase") {
+          if (routeContext.fetchingApiContext) {
+            await routeContext.fetchingApiContext;
+          }
+          const { resource, doc } = routeContext.apiContext;
+          if (resource === "categories" || resource === "brands") {
+            const params = { [`${resource}.name`]: [doc.name] };
+            if (resource === "categories") {
+              const { value: categories } = await useSharedData({ field: "categories" });
+              categories?.forEach(({ name, parent }) => {
+                if (name && parent && (parent._id === doc._id || parent.slug === doc.slug)) {
+                  params[`categories.name`].push(name);
+                }
+              });
+            }
+            props.fixedParams = params;
+          } else if (resource === "collections") {
+            const { products } = doc;
+            if (products?.length) {
+              props.fixedParams = { _id: products };
+            }
+          }
+        } else if (routeContext.searchPageTerm !== void 0) {
           props.term = routeContext.searchPageTerm || null;
-          const { searchEngine, fetching } = useSearchContainer(props);
+        }
+        if (props.term !== void 0 || props.fixedParams) {
+          const { searchEngine, fetching } = useSearchShowcase(props);
           await fetching;
           props.products = searchEngine.products;
+          props.resultMeta = searchEngine.meta;
           props.ssrError = searchEngine.fetchError.value?.message;
         }
         sections[index] = { type, props };
@@ -4496,12 +5029,20 @@ const usePageSections = async ({ routeContext, handleCustomSection }) => {
         case "product-details":
         case "related-products":
         case "doc-description":
+        case "doc-banners":
         case "product-specifications":
+        case "page-title":
           sections[index] = {
             type,
             props: sectionContent
           };
           return;
+        case "custom-html":
+          sections[index] = {
+            type,
+            props: { html: sectionContent.html || "" }
+          };
+          return;
       }
       if (typeof handleCustomSection === "function") {
         const { props } = await handleCustomSection(
@@ -4572,7 +5113,7 @@ const useBanner = (props) => {
   };
 };
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Banner",
   props: {
     img: {},
@@ -4599,7 +5140,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: ["mx-auto overflow-x-hidden", $setup.hasHeader ? "grid grid-cols-1 sm:grid-cols-2 items-center" : null]
@@ -4667,13 +5208,13 @@ function _sfc_ssrRender$f(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</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/Banner.vue");
-  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
+  return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
 };
-const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["ssrRender", _sfc_ssrRender$f]]);
+const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["ssrRender", _sfc_ssrRender$h]]);
 
 const $$Astro$5 = createAstro("https://demo.ecomplus.app");
 const $$BannersGrid = createComponent(async ($$result, $$props, $$slots) => {
@@ -4681,7 +5222,7 @@ const $$BannersGrid = createComponent(async ($$result, $$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">
+  <ul class="flex flex-wrap gap-4 lg:flex-nowrap">
     ${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>`)}
@@ -4968,7 +5509,7 @@ const usePrices = (props) => {
   };
 };
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Prices",
   props: {
     isBig: { type: Boolean },
@@ -5003,7 +5544,7 @@ 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_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]
@@ -5133,15 +5674,15 @@ function _sfc_ssrRender$e(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div>`);
 }
-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/Prices.vue");
-  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
+  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
 };
-const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["ssrRender", _sfc_ssrRender$e]]);
+const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["ssrRender", _sfc_ssrRender$g]]);
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ProductCard",
   props: {
     product: {},
@@ -5176,7 +5717,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");
   const _component_AImg = resolveComponent("AImg");
   _push(`<article${ssrRenderAttrs(mergeProps({
@@ -5319,17 +5860,18 @@ function _sfc_ssrRender$d(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</article>`);
 }
-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/ProductCard.vue");
-  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
+  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
 };
-const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["ssrRender", _sfc_ssrRender$d]]);
+const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["ssrRender", _sfc_ssrRender$f]]);
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "ProductShelf",
   props: {
+    isGrid: { type: Boolean },
     collectionId: {},
     searchQuery: {},
     sort: {},
@@ -5338,7 +5880,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     isShuffle: { type: Boolean },
     limit: {},
     page: {},
-    products: {}
+    products: {},
+    isRelatedProducts: { type: Boolean }
   },
   async setup(__props, { expose: __expose }) {
     __expose();
@@ -5363,13 +5906,12 @@ 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_ALink = resolveComponent("ALink");
-  const _component_Carousel = resolveComponent("Carousel");
   const _component_CarouselControl = resolveComponent("CarouselControl");
   _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(`<div class="mx-auto mb-4 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"
@@ -5389,50 +5931,9 @@ function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   } else {
     _push(`<!---->`);
   }
-  _push(ssrRenderComponent(_component_Carousel, { class: "group/shelf" }, {
-    controls: withCtx((_, _push2, _parent2, _scopeId) => {
-      if (_push2) {
-        _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-c36cp5", isPrev ? "!-left-4" : "!-right-4"],
-                "is-prev": isPrev
-              }, null, _parent3, _scopeId2));
-            } else {
-              return [
-                withDirectives(createVNode(_component_CarouselControl, {
-                  class: ["uno-c36cp5", 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 [
-          createVNode($setup["DefineCarouselControl"], null, {
-            default: withCtx(({ isPrev }) => [
-              withDirectives(createVNode(_component_CarouselControl, {
-                class: ["uno-c36cp5", 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"])
-        ];
-      }
-    }),
+  ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.isGrid ? "ul" : "Carousel"), {
+    class: ["group/shelf", $props.isGrid && "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4"]
+  }, createSlots({
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
         _push2(`<!--[-->`);
@@ -5461,17 +5962,66 @@ function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         ];
       }
     }),
-    _: 1
-  }, _parent));
+    _: 2
+  }, [
+    !$props.isGrid ? {
+      name: "controls",
+      fn: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _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-c36cp5", isPrev ? "!-left-4" : "!-right-4"],
+                  "is-prev": isPrev
+                }, null, _parent3, _scopeId2));
+              } else {
+                return [
+                  withDirectives(createVNode(_component_CarouselControl, {
+                    class: ["uno-c36cp5", 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 [
+            createVNode($setup["DefineCarouselControl"], null, {
+              default: withCtx(({ isPrev }) => [
+                withDirectives(createVNode(_component_CarouselControl, {
+                  class: ["uno-c36cp5", 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"])
+          ];
+        }
+      }),
+      key: "0"
+    } : void 0
+  ])), _parent);
+  ssrRenderSlot(_ctx.$slots, "append", {}, null, _push, _parent);
   _push(`</section>`);
 }
-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/ProductShelf.vue");
-  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
+  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
 };
-const ProductShelf = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
+const ProductShelf = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["ssrRender", _sfc_ssrRender$e]]);
 
 const useBreadcrumbs = async (props = {}) => {
   const { settings, apiContext, data } = globalThis.$storefront;
@@ -5568,7 +6118,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$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "ContentClearfix",
   props: {
     html: {}
@@ -5582,18 +6132,18 @@ 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) {
   _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$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/lib/components/ContentClearfix.vue");
-  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
+  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
 };
-const ContentClearfix = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
+const ContentClearfix = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["ssrRender", _sfc_ssrRender$d]]);
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "Collapse",
   props: {
     title: {}
@@ -5605,20 +6155,20 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-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>`);
+function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<details${ssrRenderAttrs(mergeProps({ class: "group my-4 md:my-5 [&_i]:open:-rotate-90" }, _attrs))}><summary role="button" class="text-base-700 hover:text-base-800 [&amp;&gt;i]:hover:text-primary list-none text-2xl font-medium lowercase group-open:mb-3"><i class="i-chevron-right mr-1 rotate-90"></i><span>${ssrInterpolate($props.title)}</span></summary>`);
   ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
   _push(`</details>`);
 }
-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/Collapse.vue");
-  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
+  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
 };
-const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
+const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "DocDescription",
   props: {
     apiDoc: { default: () => globalThis.$storefront.apiContext?.doc },
@@ -5633,7 +6183,7 @@ 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) {
   if ($setup.html) {
     _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
     _push(ssrRenderComponent($setup["Collapse"], {
@@ -5656,15 +6206,48 @@ function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _push(`<!---->`);
   }
 }
-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/components/DocDescription.vue");
-  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
+  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
 };
-const DocDescription = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
+const DocDescription = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "DocBanners",
+  props: {
+    apiDoc: { default: () => globalThis.$storefront.apiContext?.doc },
+    title: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const pictures = computed(() => props.apiDoc.pictures || []);
+    const __returned__ = { props, pictures };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_AImg = resolveComponent("AImg");
+  _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}><ul class="flex flex-wrap gap-4 lg:flex-nowrap"><!--[-->`);
+  ssrRenderList($setup.pictures, (picture, i) => {
+    _push(`<li class="lg:flex-1 [&amp;_img]:w-full [&amp;_img]:object-cover">`);
+    _push(ssrRenderComponent(_component_AImg, { picture }, null, _parent));
+    _push(`</li>`);
+  });
+  _push(`<!--]--></ul></section>`);
+}
+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/DocBanners.vue");
+  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
+};
+const DocBanners = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
+
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "CheckoutLink",
   props: {
     to: { default: "cart" },
@@ -5719,20 +6302,20 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<a${ssrRenderAttrs(mergeProps({ href: $setup.href }, _attrs))}>`);
   ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
   _push(`</a>`);
 }
-const _sfc_setup$8 = _sfc_main$8.setup;
-_sfc_main$8.setup = (props, ctx) => {
+const _sfc_setup$9 = _sfc_main$9.setup;
+_sfc_main$9.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/CheckoutLink.vue");
-  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
+  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
 };
-const CheckoutLink = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
+const CheckoutLink = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "QuantitySelectorControl",
   props: {
     isMinus: { type: Boolean }
@@ -5749,7 +6332,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$8(_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",
@@ -5766,16 +6349,16 @@ function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</button>`);
 }
-const _sfc_setup$7 = _sfc_main$7.setup;
-_sfc_main$7.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/QuantitySelectorControl.vue");
-  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
+  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
 };
-const QuantitySelectorControl = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
+const QuantitySelectorControl = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
 
 const quantitySelectorKey = Symbol("quantitySelector");
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "QuantitySelector",
   props: {
     modelValue: { default: 1 },
@@ -5824,7 +6407,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$7(_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>`);
@@ -5861,15 +6444,15 @@ function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</div></div>`);
 }
-const _sfc_setup$6 = _sfc_main$6.setup;
-_sfc_main$6.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/QuantitySelector.vue");
-  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
 };
-const QuantitySelector = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
+const QuantitySelector = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "ImagesGallery",
   props: {
     pictures: {}
@@ -5926,7 +6509,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Carousel = resolveComponent("Carousel");
   const _component_AImg = resolveComponent("AImg");
   const _component_CarouselControl = resolveComponent("CarouselControl");
@@ -6106,18 +6689,17 @@ function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</div></div>`);
 }
-const _sfc_setup$5 = _sfc_main$5.setup;
-_sfc_main$5.setup = (props, ctx) => {
+const _sfc_setup$6 = _sfc_main$6.setup;
+_sfc_main$6.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ImagesGallery.vue");
-  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
 };
-const ImagesGallery = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
+const ImagesGallery = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
 
 const useSkuSelector = (props) => {
-  let grids = shallowReactive(globalThis.$storefront.data.grids);
-  if (!grids) {
-    grids = shallowReactive([]);
+  const grids = shallowReactive(globalThis.$storefront.data.grids || []);
+  if (!grids.length) {
     api.get("grids").then(({ data: { result } }) => {
       result.forEach((grid) => grids.push(grid));
     });
@@ -6222,7 +6804,7 @@ const useSkuSelector = (props) => {
   };
 };
 
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "SkuSelector",
   props: {
     variations: {},
@@ -6250,10 +6832,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$5(_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))}: `);
+    _push(`<div class="mt-3"><span class="text-base-700 text-sm font-medium">${ssrInterpolate($setup.getGridTitle(gridId))}: `);
     if ($setup.selectedOptions[gridId]) {
       _push(`<strong class="text-base-800">${ssrInterpolate($setup.selectedOptions[gridId])}</strong>`);
     } else {
@@ -6264,10 +6846,10 @@ function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
       _push(`<ul class="mt-2 flex gap-2"><!--[-->`);
       ssrRenderList(options, (optionText, i) => {
         _push(`<li><button class="${ssrRenderClass([[
-          $setup.selectedOptions[gridId] === optionText ? "border-secondary ring-2" : null,
-          gridId === "colors" ? "h-9 w-9 text-[0]" : "px-2 py-1",
-          $setup.activeVariationsGrids[gridId].includes(optionText) ? "text-base-800 bg-base-100 border-base-400" : "text-base-500 bg-base-200 border-base-300"
-        ], "ring-secondary/60 rounded border"])}" style="${ssrRenderStyle(gridId === "colors" ? $setup.getColorOptionBg(optionText) : void 0)}">${ssrInterpolate(optionText)}</button></li>`);
+          $setup.selectedOptions[gridId] === optionText ? "border-primary ring-2" : null,
+          gridId === "colors" ? "h-9 w-9 text-[0px]" : "px-2.5 py-2 leading-none",
+          $setup.activeVariationsGrids[gridId].includes(optionText) ? "text-primary-950 bg-primary-100 border-primary-400" : "text-primary-600 bg-primary-200 border-primary-300"
+        ], "ring-primary/60 rounded border"])}" style="${ssrRenderStyle(gridId === "colors" ? $setup.getColorOptionBg(optionText) : void 0)}">${ssrInterpolate(optionText)}</button></li>`);
       });
       _push(`<!--]--></ul>`);
     } else {
@@ -6277,15 +6859,15 @@ function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></div>`);
 }
-const _sfc_setup$4 = _sfc_main$4.setup;
-_sfc_main$4.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/SkuSelector.vue");
-  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
 };
-const SkuSelector = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+const SkuSelector = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
 
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "ProductDetails",
   props: {
     product: { default: () => globalThis.$storefront.apiContext?.doc }
@@ -6338,7 +6920,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$4(_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) {
@@ -6427,15 +7009,15 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   ssrRenderSlot(_ctx.$slots, "description", {}, null, _push, _parent);
   _push(`</div></section>`);
 }
-const _sfc_setup$3 = _sfc_main$3.setup;
-_sfc_main$3.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/ProductDetails.vue");
-  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
+  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
 };
-const ProductDetails = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
+const ProductDetails = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
 
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "ProductSpecifications",
   props: {
     product: { default: () => globalThis.$storefront.apiContext?.doc },
@@ -6456,7 +7038,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   if ($setup.hasSpecs) {
     _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
     _push(ssrRenderComponent($setup["Collapse"], {
@@ -6492,108 +7074,369 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _push(`<!---->`);
   }
 }
-const _sfc_setup$2 = _sfc_main$2.setup;
-_sfc_main$2.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/ProductSpecifications.vue");
-  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
 };
-const ProductSpecifications = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
+const ProductSpecifications = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
 
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "ProductGrid",
+const usePagination = (props) => {
+  const totalPages = computed(() => {
+    if (props.totalPages)
+      return props.totalPages;
+    if (props.totalItems && props.pageSize) {
+      return Math.ceil(props.totalItems / props.pageSize);
+    }
+    return 1;
+  });
+  const pageNumber = computed(() => {
+    const currentPage = props.page || 1;
+    if (currentPage < 1)
+      return 1;
+    if (currentPage > totalPages.value)
+      return totalPages.value;
+    return currentPage;
+  });
+  const maxPages = computed(() => props.maxPages || 10);
+  const startPage = computed(() => {
+    if (totalPages.value <= maxPages.value)
+      return 1;
+    const maxPagesBeforeCurrent = Math.floor(maxPages.value / 2);
+    const maxPagesAfterCurrent = Math.ceil(maxPages.value / 2) - 1;
+    if (pageNumber.value <= maxPagesBeforeCurrent)
+      return 1;
+    if (pageNumber.value + maxPagesAfterCurrent >= totalPages.value) {
+      return totalPages.value - maxPages.value + 1;
+    }
+    return pageNumber.value - maxPagesBeforeCurrent;
+  });
+  const endPage = computed(() => {
+    if (totalPages.value <= maxPages.value)
+      return totalPages.value;
+    const maxPagesBeforeCurrent = Math.floor(maxPages.value / 2);
+    const maxPagesAfterCurrent = Math.ceil(maxPages.value / 2) - 1;
+    if (pageNumber.value <= maxPagesBeforeCurrent)
+      return maxPages.value;
+    if (pageNumber.value + maxPagesAfterCurrent >= totalPages.value) {
+      return totalPages.value;
+    }
+    return pageNumber.value + maxPagesAfterCurrent;
+  });
+  const pages = computed(() => {
+    return Array.from(Array(endPage.value + 1 - startPage.value).keys()).map((i) => startPage.value + i);
+  });
+  return {
+    totalPages,
+    startPage,
+    endPage,
+    pages
+  };
+};
+
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Pagination",
   props: {
-    collectionId: {},
-    searchQuery: {},
-    sort: {},
-    title: {},
-    titleLink: {},
-    isShuffle: { type: Boolean },
-    limit: {},
-    page: {},
-    products: {}
+    totalItems: {},
+    totalPages: {},
+    page: { default: 1 },
+    pageSize: {},
+    maxPages: { default: 7 }
   },
-  async setup(__props, { expose: __expose }) {
+  emits: ["update:page"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     __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 };
+    const emit = __emit;
+    const { totalPages, pages } = usePagination(props);
+    const __returned__ = { props, emit, totalPages, pages };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
-function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$2(_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(`<ol${ssrRenderAttrs(mergeProps({ class: "text-base-900 flex justify-center gap-1.5 text-center text-sm font-medium leading-9" }, _attrs))}><li>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: $props.page > 1 ? `?p=${$props.page - 1}` : null,
+    onClick: ($event) => $props.page > 1 && $setup.emit("update:page", $props.page - 1),
+    class: ["mr-1 block min-w-9 rounded border px-3", $props.page > 1 ? "border-base-100 hover:bg-base-100" : "border-transparent text-base-500"]
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<i class="i-arrow-right rotate-180"${_scopeId}></i><span class="ml-1.5 hidden md:inline"${_scopeId}>${ssrInterpolate("Anterior")}</span>`);
+      } else {
+        return [
+          createVNode("i", { class: "i-arrow-right rotate-180" }),
+          createVNode("span", { class: "ml-1.5 hidden md:inline" }, toDisplayString("Anterior"))
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</li><!--[-->`);
+  ssrRenderList($setup.pages, (pageN) => {
+    _push(`<li>`);
     _push(ssrRenderComponent(_component_ALink, {
-      href: $setup.titleLink,
-      class: $setup.titleLink ? "ui-link" : "text-base-700"
+      href: pageN !== $props.page ? `?p=${pageN}` : null,
+      onClick: ($event) => $setup.emit("update:page", pageN),
+      class: ["block w-9 rounded border ring-black/10", pageN === $props.page ? "bg-base-50 border-base-100 ring text-base-700" : "border-transparent hover:bg-base-100"]
     }, {
       default: withCtx((_, _push2, _parent2, _scopeId) => {
         if (_push2) {
-          _push2(`${ssrInterpolate($setup.title)}`);
+          _push2(`${ssrInterpolate(pageN)}`);
         } else {
           return [
-            createTextVNode(toDisplayString($setup.title), 1)
+            createTextVNode(toDisplayString(pageN), 1)
           ];
         }
       }),
-      _: 1
+      _: 2
     }, _parent));
-    _push(`</h2></div>`);
+    _push(`</li>`);
+  });
+  _push(`<!--]--><li>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: $props.page < $setup.totalPages ? `?p=${$props.page + 1}` : null,
+    onClick: ($event) => $props.page < $setup.totalPages && $setup.emit("update:page", $props.page + 1),
+    class: ["ml-1 block min-w-9 rounded border px-3", $props.page < $setup.totalPages ? "border-base-100 hover:bg-base-100" : "border-transparent text-base-500"]
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<span class="mr-1.5 hidden md:inline"${_scopeId}>${ssrInterpolate("Pr\xF3ximo")}</span><i class="i-arrow-right"${_scopeId}></i>`);
+      } else {
+        return [
+          createVNode("span", { class: "mr-1.5 hidden md:inline" }, toDisplayString("Pr\xF3ximo")),
+          createVNode("i", { class: "i-arrow-right" })
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</li></ol>`);
+}
+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/Pagination.vue");
+  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+};
+const Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
+
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "SearchFilters",
+  props: {
+    searchEngine: {},
+    fixedParams: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      resultBuckets,
+      activeFilters,
+      filtersCount,
+      clearFilters,
+      priceRanges,
+      priceRangeKey,
+      getPriceRangeLabel,
+      filterOptions,
+      checkFilterOption,
+      toggleFilterOption
+    } = useSearchFilters(props);
+    const __returned__ = { props, resultBuckets, activeFilters, filtersCount, clearFilters, priceRanges, priceRangeKey, getPriceRangeLabel, filterOptions, checkFilterOption, toggleFilterOption, Collapse };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<aside${ssrRenderAttrs(mergeProps({ class: "bg-base-50/40 h-screen overflow-y-auto" }, _attrs))}><header class="px-6 pb-3 pt-5 text-center">`);
+  if ($setup.filtersCount) {
+    _push(`<button class="ui-btn-sm ui-btn-danger py-1">${ssrInterpolate("Limpar filtros")} <i class="i-trash ml-0.5"></i></button>`);
+  } else {
+    _push(`<p class="text-base-500 border border-transparent pb-1 text-base font-semibold">${ssrInterpolate("Filtrar resultados")}</p>`);
+  }
+  _push(`</header>`);
+  if ($setup.resultBuckets) {
+    _push(`<article class="px-6 pb-3">`);
+    if ($setup.priceRanges) {
+      _push(ssrRenderComponent($setup["Collapse"], {
+        title: "Pre\xE7o",
+        class: "[&>summary]:text-xl",
+        open: ""
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="space-y-1.5"${_scopeId}><!--[-->`);
+            ssrRenderList($setup.priceRanges, ({ range, key }) => {
+              _push2(`<div class="flex items-center"${_scopeId}><input type="radio"${ssrRenderAttr("id", `priceRange-${key}`)} name="priceRange"${ssrRenderAttr("value", key)}${ssrIncludeBooleanAttr(ssrLooseEqual($setup.priceRangeKey, key)) ? " checked" : ""}${_scopeId}><label${ssrRenderAttr("for", `priceRange-${key}`)} class="cursor-pointer px-3 text-sm"${_scopeId}>${ssrInterpolate($setup.getPriceRangeLabel(range))} <small class="text-base-500 font-medium"${_scopeId}> (${ssrInterpolate(range.count)}) </small></label></div>`);
+            });
+            _push2(`<!--]-->`);
+            if ($setup.activeFilters["price<"] || $setup.activeFilters["price>"]) {
+              _push2(`<div class="flex items-center"${_scopeId}><input type="radio" id="priceRange-null" name="priceRange"${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(ssrLooseEqual($setup.priceRangeKey, null)) ? " checked" : ""}${_scopeId}><label for="priceRange-null" class="cursor-pointer px-3 text-sm"${_scopeId}>${ssrInterpolate("Qualquer pre\xE7o")}</label></div>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`</div>`);
+          } else {
+            return [
+              createVNode("div", { class: "space-y-1.5" }, [
+                (openBlock(true), createBlock(Fragment$1, null, renderList($setup.priceRanges, ({ range, key }) => {
+                  return openBlock(), createBlock("div", {
+                    key: `prices-${key}`,
+                    class: "flex items-center"
+                  }, [
+                    withDirectives(createVNode("input", {
+                      type: "radio",
+                      id: `priceRange-${key}`,
+                      name: "priceRange",
+                      value: key,
+                      "onUpdate:modelValue": ($event) => $setup.priceRangeKey = $event
+                    }, null, 8, ["id", "value", "onUpdate:modelValue"]), [
+                      [vModelRadio, $setup.priceRangeKey]
+                    ]),
+                    createVNode("label", {
+                      for: `priceRange-${key}`,
+                      class: "cursor-pointer px-3 text-sm"
+                    }, [
+                      createTextVNode(toDisplayString($setup.getPriceRangeLabel(range)) + " ", 1),
+                      createVNode("small", { class: "text-base-500 font-medium" }, " (" + toDisplayString(range.count) + ") ", 1)
+                    ], 8, ["for"])
+                  ]);
+                }), 128)),
+                $setup.activeFilters["price<"] || $setup.activeFilters["price>"] ? (openBlock(), createBlock("div", {
+                  key: 0,
+                  class: "flex items-center"
+                }, [
+                  withDirectives(createVNode("input", {
+                    type: "radio",
+                    id: "priceRange-null",
+                    name: "priceRange",
+                    value: null,
+                    "onUpdate:modelValue": ($event) => $setup.priceRangeKey = $event
+                  }, null, 8, ["onUpdate:modelValue"]), [
+                    [vModelRadio, $setup.priceRangeKey]
+                  ]),
+                  createVNode("label", {
+                    for: "priceRange-null",
+                    class: "cursor-pointer px-3 text-sm"
+                  }, toDisplayString("Qualquer pre\xE7o"))
+                ])) : createCommentVNode("", true)
+              ])
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`<!--[-->`);
+    ssrRenderList($setup.filterOptions, ({ title, options, field }) => {
+      _push(ssrRenderComponent($setup["Collapse"], {
+        key: field,
+        title,
+        class: "[&>summary]:text-xl",
+        open: !!$setup.activeFilters[field]
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="space-y-1.5"${_scopeId}><!--[-->`);
+            ssrRenderList(options, (count, value, i) => {
+              _push2(`<div class="flex items-center"${_scopeId}><input type="checkbox"${ssrRenderAttr("id", `${field}-${value}`)}${ssrRenderAttr("value", value)}${ssrIncludeBooleanAttr($setup.checkFilterOption(field, value)) ? " checked" : ""}${_scopeId}><label${ssrRenderAttr("for", `${field}-${value}`)} class="cursor-pointer px-3 text-sm"${_scopeId}>${ssrInterpolate(value)} <small class="text-base-500 font-medium"${_scopeId}> (${ssrInterpolate(count)}) </small></label></div>`);
+            });
+            _push2(`<!--]--></div>`);
+          } else {
+            return [
+              createVNode("div", { class: "space-y-1.5" }, [
+                (openBlock(true), createBlock(Fragment$1, null, renderList(options, (count, value, i) => {
+                  return openBlock(), createBlock("div", {
+                    key: `${field}-${i}`,
+                    class: "flex items-center"
+                  }, [
+                    createVNode("input", {
+                      type: "checkbox",
+                      id: `${field}-${value}`,
+                      value,
+                      checked: $setup.checkFilterOption(field, value),
+                      onChange: ($event) => $setup.toggleFilterOption(field, value)
+                    }, null, 40, ["id", "value", "checked", "onChange"]),
+                    createVNode("label", {
+                      for: `${field}-${value}`,
+                      class: "cursor-pointer px-3 text-sm"
+                    }, [
+                      createTextVNode(toDisplayString(value) + " ", 1),
+                      createVNode("small", { class: "text-base-500 font-medium" }, " (" + toDisplayString(count) + ") ", 1)
+                    ], 8, ["for"])
+                  ]);
+                }), 128))
+              ])
+            ];
+          }
+        }),
+        _: 2
+      }, _parent));
+    });
+    _push(`<!--]--></article>`);
   } 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>`);
+  _push(`</aside>`);
 }
 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");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/SearchFilters.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 SearchFilters = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "SearchContainer",
+  __name: "SearchShowcase",
   props: {
-    searchEngine: {},
     term: {},
-    sort: {},
+    fixedParams: {},
     products: {},
-    ssrError: {}
+    resultMeta: {},
+    ssrError: {},
+    canUseUrlParams: { type: Boolean, default: true },
+    showcase: {}
   },
   async setup(__props, { expose: __expose }) {
     __expose();
     let __temp, __restore;
     const props = __props;
+    const showcase = ref(null);
     const {
-      // searchEngine,
+      searchEngine,
       fetching,
       isFetching,
-      products
-    } = useSearchContainer(props);
+      products,
+      resultMeta,
+      totalPages,
+      filtersCount,
+      sortOptions,
+      sortOption
+    } = useSearchShowcase({ ...props, showcase });
     {
       [__temp, __restore] = withAsyncContext(() => fetching), await __temp, __restore();
     }
-    const __returned__ = { props, fetching, isFetching, products, ProductGrid };
+    const wasFetched = computed(() => searchEngine.wasFetched.value);
+    const searchTerm = computed(() => searchEngine.term.value);
+    const hasFiltersBar = computed(() => {
+      return wasFetched && !!(resultMeta.value.count > 4 || filtersCount.value);
+    });
+    const isFiltersOpen = ref(false);
+    const __returned__ = { props, showcase, searchEngine, fetching, isFetching, products, resultMeta, totalPages, filtersCount, sortOptions, sortOption, wasFetched, searchTerm, hasFiltersBar, isFiltersOpen, get Listbox() {
+      return Listbox;
+    }, get ListboxButton() {
+      return ListboxButton;
+    }, get ListboxOptions() {
+      return ListboxOptions;
+    }, get ListboxOption() {
+      return ListboxOption;
+    }, Drawer, Pagination, ProductShelf, SearchFilters };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -6602,10 +7445,15 @@ function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $op
   const _component_Skeleton = resolveComponent("Skeleton");
   const _component_Fade = resolveComponent("Fade");
   _push(`<!--[-->`);
-  if ($setup.isFetching) {
+  if ($setup.searchTerm) {
+    _push(`<section class="${ssrRenderClass([$setup.hasFiltersBar ? "relative z-[14] -mb-4" : "mb-0", "ui-section-slim text-base-700 px-6 text-center text-xl lowercase"])}">${ssrInterpolate("Buscando por")} <h1 class="text-base-800 inline font-bold italic">${ssrInterpolate($setup.searchTerm)}</h1></section>`);
+  } else {
+    _push(`<!---->`);
+  }
+  if ($setup.isFetching && !$setup.products.length) {
     _push(`<div class="ui-section relative min-h-[300px]">`);
     _push(ssrRenderComponent(_component_Skeleton, {
-      class: "absolute top-0 w-full",
+      class: "absolute top-0 w-full px-5",
       "is-bold": "",
       "is-large": ""
     }, null, _parent));
@@ -6613,13 +7461,411 @@ function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $op
   } else {
     _push(`<!---->`);
   }
-  _push(ssrRenderComponent(_component_Fade, { "is-leave-to": false }, {
+  _push(`<article class="relative">`);
+  _push(ssrRenderComponent(_component_Fade, null, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.hasFiltersBar) {
+          _push2(`<section class="ui-section-slim sticky-header:translate-y-16 lg:sticky-header:translate-y-14 to-base-100 sticky top-0 z-[12] flex items-center justify-between rounded-b bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm transition-transform"${_scopeId}><strong class="text-base-700 font-medium lowercase"${_scopeId}>`);
+          if ($setup.resultMeta.count > 1) {
+            _push2(`<!--[-->${ssrInterpolate($setup.resultMeta.count)} <span class="hidden lg:inline"${_scopeId}>${ssrInterpolate("Itens encontrados")}</span><span class="lg:hidden"${_scopeId}>${ssrInterpolate("Produtos")}</span><!--]-->`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</strong><div class="flex items-center gap-4"${_scopeId}><span class="hidden text-xl leading-none md:block"${_scopeId}><i class="i-adjustments-horizontal text-base-600 m-0"${_scopeId}></i></span><button class="ui-btn-sm ui-btn-secondary relative"${_scopeId}><span class="hidden md:inline"${_scopeId}>${ssrInterpolate("Filtrar produtos")}</span><span class="md:hidden"${_scopeId}><i class="i-adjustments-horizontal mr-1"${_scopeId}></i> ${ssrInterpolate("Filtrar")}</span>`);
+          if ($setup.filtersCount) {
+            _push2(`<span class="ui-badge-pill-sm outline-secondary/80 outline-3 absolute -right-1.5 -top-1 outline"${_scopeId}>${ssrInterpolate($setup.filtersCount)}</span>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</button>`);
+          _push2(ssrRenderComponent($setup["Listbox"], {
+            modelValue: $setup.sortOption,
+            "onUpdate:modelValue": ($event) => $setup.sortOption = $event,
+            as: "div",
+            class: "text-base-800 relative text-sm"
+          }, {
+            default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+              if (_push3) {
+                _push3(ssrRenderComponent($setup["ListboxButton"], { class: "ui-btn-sm ui-btn-secondary" }, {
+                  default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                    if (_push4) {
+                      _push4(`${ssrInterpolate("Ordenar")}`);
+                    } else {
+                      return [
+                        createTextVNode(toDisplayString("Ordenar"))
+                      ];
+                    }
+                  }),
+                  _: 1
+                }, _parent3, _scopeId2));
+                _push3(ssrRenderComponent(_component_Fade, null, {
+                  default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                    if (_push4) {
+                      _push4(ssrRenderComponent($setup["ListboxOptions"], { class: "divide-base-100 absolute right-0 mt-2 divide-y rounded bg-white shadow ring-1 ring-black/5 focus:outline-none" }, {
+                        default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                          if (_push5) {
+                            _push5(`<!--[-->`);
+                            ssrRenderList($setup.sortOptions, ({ label, value }) => {
+                              _push5(ssrRenderComponent($setup["ListboxOption"], {
+                                key: value || "sort",
+                                value,
+                                as: "template"
+                              }, {
+                                default: withCtx(({ selected, active }, _push6, _parent6, _scopeId5) => {
+                                  if (_push6) {
+                                    _push6(`<li${_scopeId5}>`);
+                                    ssrRenderVNode(_push6, createVNode(resolveDynamicComponent(selected ? "div" : "button"), {
+                                      class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                    }, {
+                                      default: withCtx((_5, _push7, _parent7, _scopeId6) => {
+                                        if (_push7) {
+                                          _push7(`<div class="w-5"${_scopeId6}><i style="${ssrRenderStyle(selected ? null : { display: "none" })}" class="i-check"${_scopeId6}></i></div> ${ssrInterpolate(label)}`);
+                                        } else {
+                                          return [
+                                            createVNode("div", { class: "w-5" }, [
+                                              withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                                [vShow, selected]
+                                              ])
+                                            ]),
+                                            createTextVNode(" " + toDisplayString(label), 1)
+                                          ];
+                                        }
+                                      }),
+                                      _: 2
+                                    }), _parent6, _scopeId5);
+                                    _push6(`</li>`);
+                                  } else {
+                                    return [
+                                      createVNode("li", null, [
+                                        (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                          class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                        }, {
+                                          default: withCtx(() => [
+                                            createVNode("div", { class: "w-5" }, [
+                                              withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                                [vShow, selected]
+                                              ])
+                                            ]),
+                                            createTextVNode(" " + toDisplayString(label), 1)
+                                          ]),
+                                          _: 2
+                                        }, 1032, ["class"]))
+                                      ])
+                                    ];
+                                  }
+                                }),
+                                _: 2
+                              }, _parent5, _scopeId4));
+                            });
+                            _push5(`<!--]-->`);
+                          } else {
+                            return [
+                              (openBlock(true), createBlock(Fragment$1, null, renderList($setup.sortOptions, ({ label, value }) => {
+                                return openBlock(), createBlock($setup["ListboxOption"], {
+                                  key: value || "sort",
+                                  value,
+                                  as: "template"
+                                }, {
+                                  default: withCtx(({ selected, active }) => [
+                                    createVNode("li", null, [
+                                      (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                        class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                      }, {
+                                        default: withCtx(() => [
+                                          createVNode("div", { class: "w-5" }, [
+                                            withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                              [vShow, selected]
+                                            ])
+                                          ]),
+                                          createTextVNode(" " + toDisplayString(label), 1)
+                                        ]),
+                                        _: 2
+                                      }, 1032, ["class"]))
+                                    ])
+                                  ]),
+                                  _: 2
+                                }, 1032, ["value"]);
+                              }), 128))
+                            ];
+                          }
+                        }),
+                        _: 1
+                      }, _parent4, _scopeId3));
+                    } else {
+                      return [
+                        createVNode($setup["ListboxOptions"], { class: "divide-base-100 absolute right-0 mt-2 divide-y rounded bg-white shadow ring-1 ring-black/5 focus:outline-none" }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createBlock(Fragment$1, null, renderList($setup.sortOptions, ({ label, value }) => {
+                              return openBlock(), createBlock($setup["ListboxOption"], {
+                                key: value || "sort",
+                                value,
+                                as: "template"
+                              }, {
+                                default: withCtx(({ selected, active }) => [
+                                  createVNode("li", null, [
+                                    (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                      class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode("div", { class: "w-5" }, [
+                                          withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                            [vShow, selected]
+                                          ])
+                                        ]),
+                                        createTextVNode(" " + toDisplayString(label), 1)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["class"]))
+                                  ])
+                                ]),
+                                _: 2
+                              }, 1032, ["value"]);
+                            }), 128))
+                          ]),
+                          _: 1
+                        })
+                      ];
+                    }
+                  }),
+                  _: 1
+                }, _parent3, _scopeId2));
+              } else {
+                return [
+                  createVNode($setup["ListboxButton"], { class: "ui-btn-sm ui-btn-secondary" }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString("Ordenar"))
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_Fade, null, {
+                    default: withCtx(() => [
+                      createVNode($setup["ListboxOptions"], { class: "divide-base-100 absolute right-0 mt-2 divide-y rounded bg-white shadow ring-1 ring-black/5 focus:outline-none" }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createBlock(Fragment$1, null, renderList($setup.sortOptions, ({ label, value }) => {
+                            return openBlock(), createBlock($setup["ListboxOption"], {
+                              key: value || "sort",
+                              value,
+                              as: "template"
+                            }, {
+                              default: withCtx(({ selected, active }) => [
+                                createVNode("li", null, [
+                                  (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                    class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode("div", { class: "w-5" }, [
+                                        withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                          [vShow, selected]
+                                        ])
+                                      ]),
+                                      createTextVNode(" " + toDisplayString(label), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["class"]))
+                                ])
+                              ]),
+                              _: 2
+                            }, 1032, ["value"]);
+                          }), 128))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ];
+              }
+            }),
+            _: 1
+          }, _parent2, _scopeId));
+          _push2(`</div></section>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.hasFiltersBar ? (openBlock(), createBlock("section", {
+            key: 0,
+            class: "ui-section-slim sticky-header:translate-y-16 lg:sticky-header:translate-y-14 to-base-100 sticky top-0 z-[12] flex items-center justify-between rounded-b bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm transition-transform"
+          }, [
+            createVNode("strong", { class: "text-base-700 font-medium lowercase" }, [
+              $setup.resultMeta.count > 1 ? (openBlock(), createBlock(Fragment$1, { key: 0 }, [
+                createTextVNode(toDisplayString($setup.resultMeta.count) + " ", 1),
+                createVNode("span", { class: "hidden lg:inline" }, toDisplayString("Itens encontrados")),
+                createVNode("span", { class: "lg:hidden" }, toDisplayString("Produtos"))
+              ], 64)) : createCommentVNode("", true)
+            ]),
+            createVNode("div", { class: "flex items-center gap-4" }, [
+              createVNode("span", { class: "hidden text-xl leading-none md:block" }, [
+                createVNode("i", { class: "i-adjustments-horizontal text-base-600 m-0" })
+              ]),
+              createVNode("button", {
+                onClick: ($event) => $setup.isFiltersOpen = !$setup.isFiltersOpen,
+                class: "ui-btn-sm ui-btn-secondary relative"
+              }, [
+                createVNode("span", { class: "hidden md:inline" }, toDisplayString("Filtrar produtos")),
+                createVNode("span", { class: "md:hidden" }, [
+                  createVNode("i", { class: "i-adjustments-horizontal mr-1" }),
+                  createTextVNode(" " + toDisplayString("Filtrar"))
+                ]),
+                $setup.filtersCount ? (openBlock(), createBlock("span", {
+                  key: 0,
+                  class: "ui-badge-pill-sm outline-secondary/80 outline-3 absolute -right-1.5 -top-1 outline"
+                }, toDisplayString($setup.filtersCount), 1)) : createCommentVNode("", true)
+              ], 8, ["onClick"]),
+              createVNode($setup["Listbox"], {
+                modelValue: $setup.sortOption,
+                "onUpdate:modelValue": ($event) => $setup.sortOption = $event,
+                as: "div",
+                class: "text-base-800 relative text-sm"
+              }, {
+                default: withCtx(() => [
+                  createVNode($setup["ListboxButton"], { class: "ui-btn-sm ui-btn-secondary" }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString("Ordenar"))
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_Fade, null, {
+                    default: withCtx(() => [
+                      createVNode($setup["ListboxOptions"], { class: "divide-base-100 absolute right-0 mt-2 divide-y rounded bg-white shadow ring-1 ring-black/5 focus:outline-none" }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createBlock(Fragment$1, null, renderList($setup.sortOptions, ({ label, value }) => {
+                            return openBlock(), createBlock($setup["ListboxOption"], {
+                              key: value || "sort",
+                              value,
+                              as: "template"
+                            }, {
+                              default: withCtx(({ selected, active }) => [
+                                createVNode("li", null, [
+                                  (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                    class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode("div", { class: "w-5" }, [
+                                        withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                          [vShow, selected]
+                                        ])
+                                      ]),
+                                      createTextVNode(" " + toDisplayString(label), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["class"]))
+                                ])
+                              ]),
+                              _: 2
+                            }, 1032, ["value"]);
+                          }), 128))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue", "onUpdate:modelValue"])
+            ])
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent($setup["ProductShelf"], {
+    products: $setup.products,
+    "is-grid": ""
+  }, {
+    append: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              if (!$setup.isFetching && $setup.totalPages > 1) {
+                _push3(`<nav class="mt-3 lg:mt-4"${_scopeId2}>`);
+                _push3(ssrRenderComponent($setup["Pagination"], {
+                  page: $setup.searchEngine.pageNumber.value,
+                  "onUpdate:page": ($event) => $setup.searchEngine.pageNumber.value = $event,
+                  "total-pages": $setup.totalPages
+                }, null, _parent3, _scopeId2));
+                _push3(`</nav>`);
+              } else {
+                _push3(`<!---->`);
+              }
+            } else {
+              return [
+                !$setup.isFetching && $setup.totalPages > 1 ? (openBlock(), createBlock("nav", {
+                  key: 0,
+                  class: "mt-3 lg:mt-4"
+                }, [
+                  createVNode($setup["Pagination"], {
+                    page: $setup.searchEngine.pageNumber.value,
+                    "onUpdate:page": ($event) => $setup.searchEngine.pageNumber.value = $event,
+                    "total-pages": $setup.totalPages
+                  }, null, 8, ["page", "onUpdate:page", "total-pages"])
+                ])) : createCommentVNode("", true)
+              ];
+            }
+          }),
+          _: 1
+        }, _parent2, _scopeId));
+      } else {
+        return [
+          createVNode(_component_Fade, { slide: "down" }, {
+            default: withCtx(() => [
+              !$setup.isFetching && $setup.totalPages > 1 ? (openBlock(), createBlock("nav", {
+                key: 0,
+                class: "mt-3 lg:mt-4"
+              }, [
+                createVNode($setup["Pagination"], {
+                  page: $setup.searchEngine.pageNumber.value,
+                  "onUpdate:page": ($event) => $setup.searchEngine.pageNumber.value = $event,
+                  "total-pages": $setup.totalPages
+                }, null, 8, ["page", "onUpdate:page", "total-pages"])
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent(_component_Fade, null, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.isFetching) {
+          _push2(`<div class="absolute left-0 top-0 z-[14] h-full w-full bg-white/40"${_scopeId}></div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.isFetching ? (openBlock(), createBlock("div", {
+            key: 0,
+            class: "absolute left-0 top-0 z-[14] h-full w-full bg-white/40"
+          })) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</article>`);
+  _push(ssrRenderComponent($setup["Drawer"], {
+    modelValue: $setup.isFiltersOpen,
+    "onUpdate:modelValue": ($event) => $setup.isFiltersOpen = $event,
+    placement: "end",
+    "backdrop-target": null,
+    "can-lock-scroll": false,
+    class: "!z-[80] bg-white shadow [&_[data-drawer-close]]:bg-white/80"
+  }, {
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
-        _push2(ssrRenderComponent($setup["ProductGrid"], { products: $setup.products }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["SearchFilters"], { "search-engine": $setup.searchEngine }, null, _parent2, _scopeId));
       } else {
         return [
-          createVNode($setup["ProductGrid"], { products: $setup.products }, null, 8, ["products"])
+          createVNode($setup["SearchFilters"], { "search-engine": $setup.searchEngine }, null, 8, ["search-engine"])
         ];
       }
     }),
@@ -6630,10 +7876,10 @@ function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $op
 const _sfc_setup = _sfc_main.setup;
 _sfc_main.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/SearchContainer.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/SearchShowcase.vue");
   return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
 };
-const SearchContainer = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+const SearchShowcase = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
 
 const $$Astro$3 = createAstro("https://demo.ecomplus.app");
 const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
@@ -6649,26 +7895,32 @@ const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
     }
   });
   const { isHomepage } = routeContext;
-  return renderTemplate`${maybeRenderHead()}<article class="my-9 md:my-12">
+  return renderTemplate`${maybeRenderHead()}<article class="mt-6 mb-9 md:mt-8 md:mb-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" })}`;
+      case "related-products":
+        props.isRelatedProducts = true;
+        return renderTemplate`${renderComponent($$result, "ProductShelf", ProductShelf, { ...props, "client:visible": true, "client:component-hydration": "visible", "client:component-path": "~/components/ProductShelf.vue", "client:component-export": "default" })}`;
       case "banners-grid":
         return renderTemplate`${renderComponent($$result, "BannersGrid", $$BannersGrid, { ...props })}`;
       case "breadcrumbs":
         return renderTemplate`${renderComponent($$result, "Breadcrumbs", $$Breadcrumbs, {})}`;
       case "doc-description":
         return renderTemplate`${renderComponent($$result, "DocDescription", DocDescription, {})}`;
+      case "doc-banners":
+        return renderTemplate`${renderComponent($$result, "DocBanners", DocBanners, {})}`;
       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, {})}`}` })}` })}
         ` })}`;
-      case "search-container":
+      case "search-showcase":
+      case "context-showcase":
         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" })}
+            ${renderComponent($$result2, "SearchShowcase", SearchShowcase, { ...props, "client:context": true, "client:component-hydration": "context", "client:component-path": "~/components/SearchShowcase.vue", "client:component-export": "default" })}
           </article>
         ` })}`;
       case "c:foo":
@@ -6688,8 +7940,8 @@ const $$Astro$2 = createAstro("https://demo.ecomplus.app");
 const $$SharedData = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$2, $$props, $$slots);
   Astro2.self = $$SharedData;
-  const { inlineClientJS } = await useSharedData(Astro2.props);
-  return renderTemplate(_a || (_a = __template(["<script>", "<\/script>"])), unescapeHTML(inlineClientJS));
+  const { getInlineClientJS } = await useSharedData(Astro2.props);
+  return renderTemplate(_a || (_a = __template(["<script>", "<\/script>"])), unescapeHTML(getInlineClientJS()));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/SharedData.astro", void 0);
 
 const $$Astro$1 = createAstro("https://demo.ecomplus.app");