cloudcommerce 2.2.3 → 2.3.1

package/packages/storefront/dist/server/chunks/pages/{__z8Igc_-f.mjs → __XOsz50la.mjs}

@@ -1,6 +1,7 @@
 import { img, imgSizes, i18n, formatMoney, price, randomObjectId, nickname, inStock, gridTitle, categoriesList, name, onPromotion, variationsGrids, specTextValue, specValueByText } from '@ecomplus/utils';
-import { c as createAstro, b as createComponent, r as renderTemplate, m as maybeRenderHead, s as spreadAttributes, d as addAttribute, u as unescapeHTML, e as renderComponent, f as createTransitionScope, g as renderSlotToString, h as renderAllHeadContent, i as renderSlot$1, F as Fragment } from '../astro_F4pl3toV.mjs';
+import { c as createAstro, b as createComponent, r as renderTemplate, d as addAttribute, u as unescapeHTML, e as renderComponent, f as createTransitionScope, s as spreadAttributes, g as renderSlotToString, h as renderAllHeadContent, m as maybeRenderHead, i as renderSlot$1, F as Fragment } from '../astro_ECsNQeA2.mjs';
 import 'kleur/colors';
+import 'cssesc';
 import api from '@cloudcommerce/api';
 import { EventEmitter } from 'node:events';
 import fs, { readFileSync } from 'node:fs';
@@ -11,8 +12,8 @@ import 'clsx';
 /* empty css                           */
 import { renderSync, parse as parse$1, ELEMENT_NODE, walkSync } from 'ultrahtml';
 import mime from 'mime/lite.js';
-import { useSSRContext, defineComponent, computed, createVNode, resolveDynamicComponent, mergeProps, withCtx, renderSlot, inject, ref, watch, toRef, onMounted, onBeforeUnmount, provide, resolveComponent, openBlock, createBlock, createCommentVNode, createTextVNode, toDisplayString, reactive, shallowRef, withDirectives, vShow, Fragment as Fragment$1, renderList, nextTick, withModifiers, Teleport, defineAsyncComponent, vModelText, Suspense, createSlots, shallowReactive, withAsyncContext, vModelRadio } from 'vue';
-import { ssrRenderSlotInner, ssrRenderVNode, ssrRenderSlot, ssrRenderAttrs, ssrRenderClass, ssrRenderComponent, ssrInterpolate, ssrRenderList, ssrRenderStyle, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderTeleport, ssrRenderSuspense, ssrLooseEqual } from 'vue/server-renderer';
+import { useSSRContext, defineComponent, computed, createVNode, resolveDynamicComponent, mergeProps, withCtx, renderSlot, inject, ref, watch, toRef, onMounted, onBeforeUnmount, provide, reactive, shallowRef, resolveComponent, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, nextTick, withModifiers, Teleport, createTextVNode, toDisplayString, defineAsyncComponent, vModelText, Suspense, createSlots, shallowReactive, withAsyncContext, vModelRadio } from 'vue';
+import { ssrRenderSlotInner, ssrRenderVNode, ssrRenderSlot, ssrRenderAttrs, ssrRenderClass, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderTeleport, ssrInterpolate, ssrRenderSuspense, ssrLooseEqual } from 'vue/server-renderer';
 import { useScroll, useElementHover, useDebounceFn, watchDebounced, useTimeout, promiseTimeout, watchOnce, onClickOutside, useUrlSearchParams, createReusableTemplate } from '@vueuse/core';
 import mitt from 'mitt';
 import { Popover, PopoverButton, PopoverPanel, Menu, MenuButton, MenuItems, MenuItem, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
@@ -26,7 +27,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "Fade",
   props: {
     speed: { default: "default" },
@@ -161,18 +162,18 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$F(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$G(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true);
 }
-const _sfc_setup$F = _sfc_main$F.setup;
-_sfc_main$F.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/lib/components/globals/Fade.vue");
-  return _sfc_setup$F ? _sfc_setup$F(props, ctx) : void 0;
+  return _sfc_setup$G ? _sfc_setup$G(props, ctx) : void 0;
 };
-const Fade = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["ssrRender", _sfc_ssrRender$F]]);
+const Fade = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["ssrRender", _sfc_ssrRender$G]]);
 
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "ALink",
   props: {
     href: {},
@@ -199,7 +200,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$E(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$F(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.href ? "a" : "span"), mergeProps({
     href: $props.href,
     target: $setup.linkTarget,
@@ -217,15 +218,15 @@ function _sfc_ssrRender$E(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }), _parent);
 }
-const _sfc_setup$E = _sfc_main$E.setup;
-_sfc_main$E.setup = (props, ctx) => {
+const _sfc_setup$F = _sfc_main$F.setup;
+_sfc_main$F.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/globals/ALink.vue");
-  return _sfc_setup$E ? _sfc_setup$E(props, ctx) : void 0;
+  return _sfc_setup$F ? _sfc_setup$F(props, ctx) : void 0;
 };
-const ALink = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["ssrRender", _sfc_ssrRender$E]]);
+const ALink = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["ssrRender", _sfc_ssrRender$F]]);
 
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "AImg",
   props: {
     picture: {},
@@ -259,19 +260,19 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$D(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$E(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<img${ssrRenderAttrs(mergeProps($setup.attrs, _attrs))}>`);
 }
-const _sfc_setup$D = _sfc_main$D.setup;
-_sfc_main$D.setup = (props, ctx) => {
+const _sfc_setup$E = _sfc_main$E.setup;
+_sfc_main$E.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/globals/AImg.vue");
-  return _sfc_setup$D ? _sfc_setup$D(props, ctx) : void 0;
+  return _sfc_setup$E ? _sfc_setup$E(props, ctx) : void 0;
 };
-const AImg = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["ssrRender", _sfc_ssrRender$D]]);
+const AImg = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["ssrRender", _sfc_ssrRender$E]]);
 
 const rowClassName = "bg-gray-200 rounded-md dark:bg-gray-700";
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "Skeleton",
   props: {
     isBold: { type: Boolean },
@@ -291,19 +292,52 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$C(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$D(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<div${ssrRenderAttrs(mergeProps({
     role: "status",
     class: ["animate-pulse", $props.isLarge ? "max-w-4xl" : "max-w-sm"]
   }, _attrs))}><div class="${ssrRenderClass([$setup.firstRowClassName, $props.isLarge ? "w-96" : "w-48"])}"></div><div class="${ssrRenderClass([$setup.nextRowsClassName, $props.isLarge ? "max-w-[680px]" : "max-w-[340px]"])}"></div><div class="${ssrRenderClass($setup.nextRowsClassName)}"></div><div class="${ssrRenderClass([$setup.nextRowsClassName, $props.isLarge ? "max-w-[660px]" : "max-w-[330px]"])}"></div><div class="${ssrRenderClass([$setup.nextRowsClassName, $props.isLarge ? "max-w-[600px]" : "max-w-[300px]"])}"></div><div class="${ssrRenderClass([$setup.nextRowsClassName, $props.isLarge ? "max-w-[720px]" : "max-w-[360px]"])}"></div><span class="sr-only">Loading...</span></div>`);
 }
-const _sfc_setup$C = _sfc_main$C.setup;
-_sfc_main$C.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/globals/Skeleton.vue");
-  return _sfc_setup$C ? _sfc_setup$C(props, ctx) : void 0;
+  return _sfc_setup$D ? _sfc_setup$D(props, ctx) : void 0;
+};
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["ssrRender", _sfc_ssrRender$D]]);
+
+if (!globalThis.__sfIds)
+  globalThis.__sfIds = {};
+const useId = (prefix = "_") => {
+  if (typeof globalThis.__sfIds[prefix] !== "number")
+    globalThis.__sfIds[prefix] = -1;
+  return `${prefix}${++globalThis.__sfIds[prefix]}`;
+};
+const clearAccents = (str) => {
+  return str.replace(/[ÁáÃãÂâÀà]/g, "a").replace(/[ÉéÊê]/g, "e").replace(/[Íí]/g, "i").replace(/[ÕõÓóÔô]/g, "o").replace(/[Úú]/g, "u").replace(/[Çç]/g, "c");
+};
+const slugify = (str) => {
+  return clearAccents(str.trim()).toLowerCase().replace(/[\W\r\n]/gm, "-").replace(/-{2,}/g, "-").replace(/(^-)|(-$)/g, "");
+};
+const toLowerCaseAccents = (str) => {
+  return str.toLowerCase().replace(/Á/g, "á").replace(/Ã/g, "ã").replace(/Â/g, "â").replace(/À/g, "à").replace(/É/g, "é").replace(/Ê/g, "ê").replace(/Í/g, "í").replace(/Õ/g, "õ").replace(/Ó/g, "ó").replace(/Ô/g, "ô").replace(/Ú/g, "ú").replace(/Ç/g, "ç");
+};
+const termify = (str) => {
+  return toLowerCaseAccents(str.trim()).replace(/[\r\n]/gm, " ").replace(/[^\w-&%áãâàéêíõóôúç]/g, " ").replace(/\s{2,}/g, " ");
+};
+const getSearchUrl = (term, baseUrl = "/s/") => {
+  return `${baseUrl}${encodeURIComponent(termify(term))}`;
+};
+const scrollToEl = (el, top = 0) => {
+  while (el.offsetParent) {
+    top += el.offsetTop;
+    el = el.offsetParent;
+  }
+  return window.scroll({
+    top,
+    behavior: "smooth"
+  });
 };
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["ssrRender", _sfc_ssrRender$C]]);
 
 const formatPercentage = (value, digits = 1) => {
   return Number.isInteger(value) ? `${value}%` : `${value.toFixed(digits)}%`;
@@ -320,6 +354,7 @@ const createApp$1 = (app) => {
       const { settings, apiContext } = globalThis.$storefront || {};
       app2.config.globalProperties.$settings = settings;
       app2.config.globalProperties.$apiContext = apiContext;
+      app2.config.globalProperties.$useId = useId;
     }
   });
   app.component("Fade", Fade);
@@ -328,7 +363,7 @@ const createApp$1 = (app) => {
   app.component("Skeleton", Skeleton);
 };
 
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "CarouselControl",
   props: {
     isPrev: { type: Boolean, default: false }
@@ -342,7 +377,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$B(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$C(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<button${ssrRenderAttrs(mergeProps({
     type: "button",
     "aria-label": !$props.isPrev ? "Pr\xF3ximo" : "Anterior",
@@ -359,16 +394,16 @@ function _sfc_ssrRender$B(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</button>`);
 }
-const _sfc_setup$B = _sfc_main$B.setup;
-_sfc_main$B.setup = (props, ctx) => {
+const _sfc_setup$C = _sfc_main$C.setup;
+_sfc_main$C.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/CarouselControl.vue");
-  return _sfc_setup$B ? _sfc_setup$B(props, ctx) : void 0;
+  return _sfc_setup$C ? _sfc_setup$C(props, ctx) : void 0;
 };
-const CarouselControl = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["ssrRender", _sfc_ssrRender$B]]);
+const CarouselControl = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["ssrRender", _sfc_ssrRender$C]]);
 
 const carouselKey = Symbol("carousel");
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Carousel",
   props: {
     as: { default: "ul" },
@@ -550,7 +585,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$A(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$B(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<div${ssrRenderAttrs(mergeProps({
     ref: "carousel",
     class: `relative ${!$setup.isX ? "overflow-hidden" : ""}`,
@@ -614,13 +649,13 @@ function _sfc_ssrRender$A(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</div>`);
 }
-const _sfc_setup$A = _sfc_main$A.setup;
-_sfc_main$A.setup = (props, ctx) => {
+const _sfc_setup$B = _sfc_main$B.setup;
+_sfc_main$B.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Carousel.vue");
-  return _sfc_setup$A ? _sfc_setup$A(props, ctx) : void 0;
+  return _sfc_setup$B ? _sfc_setup$B(props, ctx) : void 0;
 };
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["ssrRender", _sfc_ssrRender$A]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["ssrRender", _sfc_ssrRender$B]]);
 
 const createApp = (app) => {
   createApp$1(app);
@@ -805,34 +840,6 @@ const _getConfig = () => {
   };
 };
 
-let id = -1;
-const useId = () => String(++id);
-const clearAccents = (str) => {
-  return str.replace(/[ÁáÃãÂâÀà]/g, "a").replace(/[ÉéÊê]/g, "e").replace(/[Íí]/g, "i").replace(/[ÕõÓóÔô]/g, "o").replace(/[Úú]/g, "u").replace(/[Çç]/g, "c");
-};
-const slugify = (str) => {
-  return clearAccents(str.trim()).toLowerCase().replace(/[\W\r\n]/gm, "-").replace(/-{2,}/g, "-").replace(/(^-)|(-$)/g, "");
-};
-const toLowerCaseAccents = (str) => {
-  return str.toLowerCase().replace(/Á/g, "á").replace(/Ã/g, "ã").replace(/Â/g, "â").replace(/À/g, "à").replace(/É/g, "é").replace(/Ê/g, "ê").replace(/Í/g, "í").replace(/Õ/g, "õ").replace(/Ó/g, "ó").replace(/Ô/g, "ô").replace(/Ú/g, "ú").replace(/Ç/g, "ç");
-};
-const termify = (str) => {
-  return toLowerCaseAccents(str.trim()).replace(/[\r\n]/gm, " ").replace(/[^\w-&%áãâàéêíõóôúç]/g, " ").replace(/\s{2,}/g, " ");
-};
-const getSearchUrl = (term, baseUrl = "/s/") => {
-  return `${baseUrl}${encodeURIComponent(termify(term))}`;
-};
-const scrollToEl = (el, top = 0) => {
-  while (el.offsetParent) {
-    top += el.offsetTop;
-    el = el.offsetParent;
-  }
-  return window.scroll({
-    top,
-    behavior: "smooth"
-  });
-};
-
 const emitter$1 = new EventEmitter();
 const getConfig = _getConfig;
 if (!globalThis.$apiMergeConfig) {
@@ -1015,437 +1022,102 @@ const loadRouteContext = async (Astro, {
   };
   Astro.locals.routeContext = routeContext;
   emitter$1.emit("load", routeContext);
+  globalThis.__sfIds = {};
   return routeContext;
 };
 
-function removeQueryString(src) {
-  const index = src.lastIndexOf("?");
-  return index > 0 ? src.substring(0, index) : src;
-}
-function basename(src) {
-  return removeQueryString(src.replace(/^.*[\\\/]/, ""));
-}
-const extname = (src) => {
-  const base = basename(src);
-  const index = base.lastIndexOf(".");
-  if (index <= 0) {
-    return "";
+/* eslint-disable */
+
+const pwaInfo = false;
+
+const $$Astro$f = createAstro("https://demo.ecomplus.app");
+const $$ViewTransitions = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$f, $$props, $$slots);
+  Astro2.self = $$ViewTransitions;
+  const { fallback = "animate" } = Astro2.props;
+  return renderTemplate`<meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback"${addAttribute(fallback, "content")}>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/ViewTransitions.astro", void 0);
+
+var __freeze$3 = Object.freeze;
+var __defProp$3 = Object.defineProperty;
+var __template$3 = (cooked, raw) => __freeze$3(__defProp$3(cooked, "raw", { value: __freeze$3(raw || cooked.slice()) }));
+var _b, _c;
+const $$Astro$e = createAstro("https://demo.ecomplus.app");
+const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$e, $$props, $$slots);
+  Astro2.self = $$BaseHead;
+  const isPWA = pwaInfo !== false;
+  const hasViewTransitions = Astro2.props.hasViewTransitions !== false && !Astro2.url.pathname.startsWith("/app/");
+  const {
+    storeId,
+    isHomepage,
+    isSearchPage,
+    searchPageTerm,
+    cmsContent,
+    fetchingApiContext,
+    apiContext,
+    lang,
+    countryCode,
+    currency,
+    currencySymbol,
+    domain,
+    primaryColor,
+    settings,
+    isPreview,
+    getContent
+  } = Astro2.locals.routeContext;
+  if (fetchingApiContext) {
+    await fetchingApiContext;
   }
-  return base.substring(index);
-};
-function parseAspectRatio(aspectRatio) {
-  if (!aspectRatio) {
-    return void 0;
+  const deployRand = {"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}.DEPLOY_RAND || "_";
+  const getIconUrl = (size) => {
+    return `/_image?f=png&w=${size}&h=${size}&href=${encodeURIComponent(settings.icon)}&V=${deployRand}`;
+  };
+  const apiDoc = apiContext.doc;
+  const state = apiDoc || cmsContent || {};
+  let title = state.meta_title || state.metaTitle || state.name && `${state.name} | ${settings.name}` || state.title && `${state.title} | ${settings.name}` || "";
+  let description = state.meta_description || state.metaDescription || state.short_description || state.description || settings.description || "";
+  if (isHomepage) {
+    if (!title)
+      title = settings.name;
+    if (!description)
+      description = settings.description;
   }
-  if (typeof aspectRatio === "number") {
-    return aspectRatio;
+  if (isSearchPage) {
+    if (searchPageTerm) {
+      if (!title)
+        title = settings.name;
+      title = title.replace("$term", searchPageTerm);
+      if (!title.includes(searchPageTerm)) {
+        title = `${searchPageTerm} | ${title}`;
+      }
+    } else if (!title) {
+      title = `${i19searchProducts} | ${settings.name}`;
+    }
   }
-  const [width, height] = aspectRatio.split(":");
-  return parseInt(width, 10) / parseInt(height, 10);
-}
-async function resolveAspectRatio({ src, aspectRatio }) {
-  if (typeof src === "string") {
-    return parseAspectRatio(aspectRatio);
+  const favicon = settings.icon ? getIconUrl(32) : "/favicon.ico";
+  const shortcutIcon = settings.icon ? getIconUrl(192) : null;
+  const canonicalUrl = new URL(Astro2.url.pathname, Astro2.site || `https://${domain}`);
+  const { metatags: metatagsContent } = await getContent("layout");
+  const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
+  let ogImage;
+  if (apiDoc) {
+    const picture = img(state, void 0, "zoom");
+    ogImage = picture && picture.url;
   }
-  throw new Error('Custom (faster) `Picture.runtime.astro` works only with string ("remote") src');
-}
-async function resolveFormats({ src, formats }) {
-  const unique = new Set(formats);
-  if (typeof src === "string") {
-    unique.add(extname(src).replace(".", ""));
+  if (!ogImage) {
+    if (metatagsContent?.ogImage) {
+      ogImage = metatagsContent.ogImage.charAt(0) === "/" ? `https://${domain}${metatagsContent.ogImage}` : metatagsContent.ogImage;
+    }
   } else {
-    throw new Error("Custom `Picture.ssr.astro` works only with string src");
-  }
-  return Array.from(unique).filter(Boolean);
-}
-const createPictureGetter = (getImage) => {
-  return async (params) => {
-    const {
-      src,
-      alt,
-      widths,
-      fit,
-      position,
-      background
-    } = params;
-    if (!src) {
-      throw new Error("[@astrojs/image] `src` is required");
-    }
-    if (!widths || !Array.isArray(widths)) {
-      throw new Error("[@astrojs/image] at least one `width` is required. ex: `widths={[100]}`");
-    }
-    const aspectRatio = await resolveAspectRatio(params);
-    if (!aspectRatio) {
-      throw new Error("`aspectRatio` must be provided for remote images");
-    }
-    const allFormats = await resolveFormats(params);
-    const lastFormat = allFormats[allFormats.length - 1];
-    const maxWidth = Math.max(...widths);
-    let image;
-    async function getSource(format) {
-      const imgs = await Promise.all(
-        widths.map(async (width) => {
-          const img = await getImage({
-            src,
-            alt,
-            format,
-            width,
-            height: width / aspectRatio,
-            fit,
-            position,
-            background,
-            aspectRatio
-          });
-          if (format === lastFormat && width === maxWidth) {
-            image = img;
-          }
-          return `${img.src} ${width}w`;
-        })
-      );
-      return {
-        type: mime.getType(format) || format,
-        srcset: imgs.join(",")
-      };
-    }
-    const sources = await Promise.all(allFormats.map((format) => getSource(format)));
-    return {
-      sources,
-      // @ts-ignore
-      image
-    };
-  };
-};
-
-const { STOREFRONT_BASE_DIR } = process.env;
-const baseDir = STOREFRONT_BASE_DIR || process.cwd();
-const builtImages = [];
-const manifestFilepath = join(baseDir, "dist/server/images.dist.csv");
-try {
-  readFileSync(manifestFilepath, "utf-8").split(/\n/).forEach((line) => {
-    const [filename, width, height] = line.split(",");
-    builtImages.push({
-      filename,
-      width: Number(width),
-      height: Number(height)
-    });
-  });
-} catch (err) {
-  if (global.$renderStorefront) {
-    console.error(err);
-  }
-}
-builtImages.sort((a, b) => {
-  if (a.width < b.width)
-    return -1;
-  return 1;
-});
-const getBuiltImage = async ({ src, width, format }) => {
-  const filename = src.replace(/^.*\//, "").replace(/.\w+(\?.*)?$/, "");
-  const filenameRegExp = new RegExp(`[_.][a-z0-9]+\\.${format}$`, "i");
-  const matchFilename = (_builtImage) => {
-    return filename === _builtImage.filename.replace(filenameRegExp, "");
-  };
-  let builtImage = builtImages.find((_builtImage) => {
-    return _builtImage.width >= width && matchFilename(_builtImage);
-  });
-  if (!builtImage) {
-    builtImage = builtImages.find(matchFilename);
-  }
-  if (builtImage) {
-    return {
-      src: `/_astro/${builtImage.filename}`,
-      width: builtImage.width,
-      height: builtImage.height
-    };
-  }
-  console.warn(`Could not match built ${format} image for ${src} ${width}px`);
-  return { src, width };
-};
-
-const getBuiltPicture = createPictureGetter(getBuiltImage);
-
-const getAspectRatio = (src, tryImageSize) => {
-  if (typeof src === "string") {
-    src = tryImageSize(src);
-  } else if (src.width) {
-    return src.height ? src.width / src.height : 1;
-  }
-  return 0;
-};
-const useSSRPicture = async (params) => {
-  const {
-    src,
-    alt,
-    sizes: propSizes,
-    widths,
-    aspectRatio: propAspectRatio,
-    fit,
-    background,
-    position,
-    formats = ["avif", "webp"],
-    loading = "lazy",
-    decoding = "async",
-    hasImg = true,
-    tryImageSize,
-    getPicture,
-    assetsPrefix,
-    ...attrs
-  } = params;
-  let aspectRatio;
-  if (propAspectRatio) {
-    if (typeof propAspectRatio === "number") {
-      aspectRatio = propAspectRatio;
-    } else {
-      const [width, height] = propAspectRatio.split(":");
-      aspectRatio = Number(width) / Number(height);
-    }
-  } else if ((!attrs.width || !attrs.height) && typeof src === "string") {
-    const { width, height } = tryImageSize(src);
-    if (width && height) {
-      aspectRatio = getAspectRatio({ width, height }, tryImageSize);
-      let hasSplicedWidths = false;
-      for (let i = widths.length - 1; i >= 0; i--) {
-        if (widths[i] > width) {
-          widths.splice(i, 1);
-          hasSplicedWidths = true;
-        }
-      }
-      if (hasSplicedWidths) {
-        attrs.width = width;
-        attrs.height = height;
-        if (!widths.find((w) => w === width)) {
-          widths.push(width);
-        }
-      } else {
-        attrs.width = Math.max(...widths);
-        attrs.height = Math.round(attrs.width / aspectRatio);
-      }
-    }
-  }
-  let sizes = propSizes || "";
-  if (!sizes && attrs.class) {
-    const classNames = attrs.class.split(" ");
-    let nextSize;
-    const breakpoints = {
-      sm: 640,
-      md: 768,
-      lg: 1024,
-      xl: 1280,
-      "2xl": 1536
-    };
-    [
-      ["", 0],
-      ...Object.entries(breakpoints)
-    ].forEach(([breakpoint, minWidth]) => {
-      const classRegex = breakpoint ? new RegExp(`^${breakpoint}:max-w-(\\[\\w+\\]|screen-\\w+)$`) : /^max-w-(\[\w+\]|screen-\w+)$/;
-      let classMaxW;
-      classNames.find((_class) => {
-        const maxW = _class.replace(classRegex, "$1");
-        if (maxW !== _class) {
-          classMaxW = maxW;
-          return true;
-        }
-        return false;
-      });
-      if (classMaxW) {
-        if (nextSize) {
-          if (sizes)
-            sizes += ", ";
-          sizes += `(max-width: ${minWidth - 1}px) ${nextSize}`;
-        }
-        if (classMaxW.charAt(0) === "[") {
-          nextSize = classMaxW.slice(1, classMaxW.length - 1);
-        } else {
-          const screenSize = breakpoints[classMaxW.slice(7)];
-          if (screenSize) {
-            nextSize = `${screenSize}px`;
-          }
-        }
-      }
-    });
-    if (nextSize) {
-      if (sizes)
-        sizes += ", ";
-      sizes += nextSize;
-    }
-  }
-  if (!sizes && widths.length === 1) {
-    sizes = `${widths[0] / 2}px`;
-  }
-  const { image, sources } = await getPicture({
-    src,
-    widths,
-    formats,
-    aspectRatio,
-    fit,
-    background,
-    position,
-    alt
-  });
-  delete image.width;
-  delete image.height;
-  if (assetsPrefix && image.src?.charAt(0) === "/") {
-    image.src = `${assetsPrefix}${image.src}`;
-    sources.forEach((source) => {
-      source.srcset = `${assetsPrefix}${source.srcset}`.replace(/,\//g, `,${assetsPrefix}/`);
-    });
-  }
-  const pictureAttrs = {};
-  if (!hasImg) {
-    pictureAttrs["data-alt"] = alt;
-    Object.assign(pictureAttrs, attrs);
-    delete pictureAttrs.width;
-    delete pictureAttrs.height;
-  }
-  return {
-    sizes,
-    aspectRatio,
-    sources,
-    pictureAttrs,
-    imgAttrs: !hasImg ? null : {
-      ...image,
-      alt,
-      loading,
-      decoding,
-      ...attrs
-    }
-  };
-};
-
-const $$Astro$f = createAstro("https://demo.ecomplus.app");
-const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$f, $$props, $$slots);
-  Astro2.self = $$Picture;
-  const { STOREFRONT_BASE_DIR } = process.env;
-  const baseDir = STOREFRONT_BASE_DIR || process.cwd();
-  const originalImages = [];
-  const manifestFilepath = join(baseDir, "dist/server/images.src.csv");
-  readFileSync(manifestFilepath, "utf-8").split(/\n/).forEach((line) => {
-    const [filepath, width, height] = line.split(",");
-    originalImages.push({
-      filepath,
-      width: Number(width),
-      height: Number(height)
-    });
-  });
-  const tryImageSize = (src) => {
-    let dimensions = {};
-    if (typeof src === "string" && src.startsWith("/")) {
-      const originalImage = originalImages.find(({ filepath }) => {
-        return new RegExp(`^/${filepath}\\??.*`).test(src);
-      });
-      if (originalImage) {
-        const { width, height } = originalImage;
-        dimensions = { width, height };
-      }
-    }
-    return dimensions;
-  };
-  const {
-    sizes,
-    sources,
-    pictureAttrs,
-    imgAttrs
-  } = await useSSRPicture({
-    ...Astro2.props,
-    tryImageSize,
-    getPicture: getBuiltPicture,
-    assetsPrefix: Astro2.locals.assetsPrefix
-  });
-  return renderTemplate`${maybeRenderHead()}<picture${spreadAttributes(pictureAttrs)}> ${sources.map((attrs) => renderTemplate`<source${spreadAttributes(attrs)}${addAttribute(sizes, "sizes")}>`)} ${imgAttrs && renderTemplate`<img${spreadAttributes(imgAttrs)}>`} </picture>`;
-}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/images/Picture.runtime.astro", void 0);
-
-/* eslint-disable */
-
-const pwaInfo = false;
-
-const $$Astro$e = createAstro("https://demo.ecomplus.app");
-const $$ViewTransitions = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$e, $$props, $$slots);
-  Astro2.self = $$ViewTransitions;
-  const { fallback = "animate" } = Astro2.props;
-  return renderTemplate`<meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback"${addAttribute(fallback, "content")}>`;
-}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/ViewTransitions.astro", void 0);
-
-var __freeze$3 = Object.freeze;
-var __defProp$3 = Object.defineProperty;
-var __template$3 = (cooked, raw) => __freeze$3(__defProp$3(cooked, "raw", { value: __freeze$3(raw || cooked.slice()) }));
-var _b, _c;
-const $$Astro$d = createAstro("https://demo.ecomplus.app");
-const $$BaseHead = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$d, $$props, $$slots);
-  Astro2.self = $$BaseHead;
-  const isPWA = pwaInfo !== false;
-  const hasViewTransitions = Astro2.props.hasViewTransitions !== false && !Astro2.url.pathname.startsWith("/app/");
-  const {
-    storeId,
-    isHomepage,
-    isSearchPage,
-    searchPageTerm,
-    cmsContent,
-    fetchingApiContext,
-    apiContext,
-    lang,
-    countryCode,
-    currency,
-    currencySymbol,
-    domain,
-    primaryColor,
-    settings,
-    isPreview,
-    getContent
-  } = Astro2.locals.routeContext;
-  if (fetchingApiContext) {
-    await fetchingApiContext;
-  }
-  const deployRand = {"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}.DEPLOY_RAND || "_";
-  const getIconUrl = (size) => {
-    return `/_image?f=png&w=${size}&h=${size}&href=${encodeURIComponent(settings.icon)}&V=${deployRand}`;
-  };
-  const apiDoc = apiContext.doc;
-  const state = apiDoc || cmsContent || {};
-  let title = state.meta_title || state.metaTitle || state.name && `${state.name} | ${settings.name}` || state.title && `${state.title} | ${settings.name}` || "";
-  let description = state.meta_description || state.metaDescription || state.short_description || state.description || settings.description || "";
-  if (isHomepage) {
-    if (!title)
-      title = settings.name;
-    if (!description)
-      description = settings.description;
-  }
-  if (isSearchPage) {
-    if (searchPageTerm) {
-      if (!title)
-        title = settings.name;
-      title = title.replace("$term", searchPageTerm);
-      if (!title.includes(searchPageTerm)) {
-        title = `${searchPageTerm} | ${title}`;
-      }
-    } else if (!title) {
-      title = `${i19searchProducts} | ${settings.name}`;
-    }
-  }
-  const favicon = settings.icon ? getIconUrl(32) : "/favicon.ico";
-  const shortcutIcon = settings.icon ? getIconUrl(192) : null;
-  const canonicalUrl = new URL(Astro2.url.pathname, Astro2.site || `https://${domain}`);
-  const { metatags: metatagsContent } = await getContent("layout");
-  const ogLocale = lang.length === 2 ? lang : lang.substring(0, 2) + lang.slice(3).toUpperCase();
-  let ogImage;
-  if (apiDoc) {
-    const picture = img(state, void 0, "zoom");
-    ogImage = picture && picture.url;
-  }
-  if (!ogImage) {
-    if (metatagsContent?.ogImage) {
-      ogImage = metatagsContent.ogImage.charAt(0) === "/" ? `https://${domain}${metatagsContent.ogImage}` : metatagsContent.ogImage;
-    }
-  } else {
-    ogImage = ogImage.replace(/(\w+\.)?(ecoms\d)\.com/i, "$2-nyc3.nyc3.cdn.digitaloceanspaces.com");
+    ogImage = ogImage.replace(/(\w+\.)?(ecoms\d)\.com/i, "$2-nyc3.nyc3.cdn.digitaloceanspaces.com");
   }
   let inlineClientJS = `
 window._emitApiContext = (id = null) => {
   console.log('[ctx] emit ' + id);
   window.dispatchEvent(new Event('storefront:apiContext'));
   window._emitedContextId = id;
+  window.__sfIds = {};
 };
 window.ECOM_STORE_ID = ${storeId};
 window.ECOM_LANG = '${lang}';
@@ -1515,7 +1187,7 @@ window.$isCmsPreview = true;`;
     url: `https://${domain}/`,
     logo: `https://${domain}${settings.logo}`
   });
-  return renderTemplate(_c || (_c = __template$3(['<meta charset="UTF-8"><meta name="viewport" content="width=device-width"><meta name="theme-color"', '><link rel="icon" type="image/png"', ' sizes="32x32">', "", "", '<meta name="author"', '><meta name="generator"', '><link rel="canonical"', ">", '<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta property="og:site_name"', '><meta property="og:url"', '><meta property="og:title"', '><meta property="og:description"', '><meta property="og:type" content="website"><meta property="og:locale"', ">", "", '<meta name="twitter:card" content="summary">', '<meta name="ecom-store-id"', ">", "<script", ">", '</script><script type="application/ld+json">', "</script>", "", ""])), addAttribute(primaryColor, "content"), addAttribute(favicon, "href"), shortcutIcon && renderTemplate`<link rel="icon" type="image/png"${addAttribute(shortcutIcon, "href")} sizes="192x192">`, title && renderTemplate`<title>${title}</title>`, description && renderTemplate`<meta name="description"${addAttribute(description, "content")}>`, addAttribute(settings.name, "content"), addAttribute(Astro2.generator, "content"), addAttribute(canonicalUrl, "href"), shortcutIcon && renderTemplate`<link rel="apple-touch-icon"${addAttribute(shortcutIcon, "href")}>`, addAttribute(settings.name, "content"), addAttribute(canonicalUrl, "content"), addAttribute(title, "content"), addAttribute(description, "content"), addAttribute(ogLocale, "content"), ogImage && renderTemplate`<meta property="og:image"${addAttribute(ogImage, "content")}>`, metatagsContent?.fbAppId && renderTemplate`<meta property="fb:app_id"${addAttribute(metatagsContent.fbAppId, "content")}>`, metatagsContent?.twitterUsername && renderTemplate`<meta name="twitter:site"${addAttribute(metatagsContent.twitterUsername, "content")}>`, addAttribute(String(storeId), "content"), isPWA , addAttribute(createTransitionScope($$result, "kvdive2p"), "data-astro-transition-persist"), unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd), hasViewTransitions && renderTemplate`${renderComponent($$result, "ViewTransitions", $$ViewTransitions, { "fallback": "none" })}`, contextInlineClientJS && renderTemplate(_b || (_b = __template$3(["<script>", "</script>"])), unescapeHTML(contextInlineClientJS)));
+  return renderTemplate(_c || (_c = __template$3(['<meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <meta name="theme-color"', '> <link rel="icon" type="image/png"', ' sizes="32x32"> ', " ", " ", ' <meta name="author"', '> <meta name="generator"', '> <link rel="canonical"', "> ", ' <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta property="og:site_name"', '> <meta property="og:url"', '> <meta property="og:title"', '> <meta property="og:description"', '> <meta property="og:type" content="website"> <meta property="og:locale"', "> ", " ", ' <meta name="twitter:card" content="summary"> ', ' <meta name="ecom-store-id"', "> ", " <script", ">", '</script> <script type="application/ld+json">', "</script> ", " ", ""])), addAttribute(primaryColor, "content"), addAttribute(favicon, "href"), shortcutIcon && renderTemplate`<link rel="icon" type="image/png"${addAttribute(shortcutIcon, "href")} sizes="192x192">`, title && renderTemplate`<title>${title}</title>`, description && renderTemplate`<meta name="description"${addAttribute(description, "content")}>`, addAttribute(settings.name, "content"), addAttribute(Astro2.generator, "content"), addAttribute(canonicalUrl, "href"), shortcutIcon && renderTemplate`<link rel="apple-touch-icon"${addAttribute(shortcutIcon, "href")}>`, addAttribute(settings.name, "content"), addAttribute(canonicalUrl, "content"), addAttribute(title, "content"), addAttribute(description, "content"), addAttribute(ogLocale, "content"), ogImage && renderTemplate`<meta property="og:image"${addAttribute(ogImage, "content")}>`, metatagsContent?.fbAppId && renderTemplate`<meta property="fb:app_id"${addAttribute(metatagsContent.fbAppId, "content")}>`, metatagsContent?.twitterUsername && renderTemplate`<meta name="twitter:site"${addAttribute(metatagsContent.twitterUsername, "content")}>`, addAttribute(String(storeId), "content"), isPWA , addAttribute(createTransitionScope($$result, "kvdive2p"), "data-astro-transition-persist"), unescapeHTML(inlineClientJS), unescapeHTML(inlineJSONLd), hasViewTransitions && renderTemplate`${renderComponent($$result, "ViewTransitions", $$ViewTransitions, { "fallback": "none" })}`, contextInlineClientJS && renderTemplate(_b || (_b = __template$3(["<script>", "</script>"])), unescapeHTML(contextInlineClientJS)));
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/layouts/BaseHead.astro", "self");
 
 function has(value) {
@@ -1602,57 +1274,394 @@ function isDeferScript(name, { src, defer, async, type }) {
     return false;
   return has(src) && has(defer) || has(src) && is(type, "module") && !has(async);
 }
-function isPrefetchPrerender(name, { rel }) {
-  return name === "link" && any(rel, ["prefetch", "dns-prefetch", "prerender"]);
+function isPrefetchPrerender(name, { rel }) {
+  return name === "link" && any(rel, ["prefetch", "dns-prefetch", "prerender"]);
+}
+function getWeight(element) {
+  for (const [id, detector] of Object.entries(ElementDetectors)) {
+    const children = element.name === "style" && element.children.length > 0 ? renderSync(element) : "";
+    if (detector(element.name, element.attributes, children)) {
+      return ElementWeights[id];
+    }
+  }
+  return ElementWeights.OTHER;
+}
+
+function capo(html) {
+  const ast = parse$1(html);
+  try {
+    walkSync(ast, (node, parent, index) => {
+      if (node.type === ELEMENT_NODE && node.name === "head") {
+        if (parent) {
+          parent.children.splice(index, 1, getSortedHead(node));
+          throw "done";
+        }
+      }
+    });
+  } catch (e) {
+    if (e !== "done")
+      throw e;
+  }
+  return renderSync(ast);
+}
+function getSortedHead(head) {
+  const weightedChildren = head.children.map((node) => {
+    if (node.type === ELEMENT_NODE) {
+      const weight = getWeight(node);
+      return [weight, node];
+    }
+  }).filter(Boolean);
+  const children = weightedChildren.sort((a, b) => b[0] - a[0]).map(([_, element]) => element);
+  return { ...head, children };
+}
+
+const Head = createComponent({
+  factory: async (result, props, slots) => {
+    let head = "";
+    head += `<head${spreadAttributes(props)} data-capo>`;
+    head += await renderSlotToString(result, slots.default);
+    head += renderAllHeadContent(result);
+    head += "</head>";
+    return unescapeHTML(capo(head));
+  }
+});
+
+function removeQueryString(src) {
+  const index = src.lastIndexOf("?");
+  return index > 0 ? src.substring(0, index) : src;
+}
+function basename(src) {
+  return removeQueryString(src.replace(/^.*[\\\/]/, ""));
+}
+const extname = (src) => {
+  const base = basename(src);
+  const index = base.lastIndexOf(".");
+  if (index <= 0) {
+    return "";
+  }
+  return base.substring(index);
+};
+function parseAspectRatio(aspectRatio) {
+  if (!aspectRatio) {
+    return void 0;
+  }
+  if (typeof aspectRatio === "number") {
+    return aspectRatio;
+  }
+  const [width, height] = aspectRatio.split(":");
+  return parseInt(width, 10) / parseInt(height, 10);
+}
+async function resolveAspectRatio({ src, aspectRatio }) {
+  if (typeof src === "string") {
+    return parseAspectRatio(aspectRatio);
+  }
+  throw new Error('Custom (faster) `Picture.runtime.astro` works only with string ("remote") src');
+}
+async function resolveFormats({ src, formats }) {
+  const unique = new Set(formats);
+  if (typeof src === "string") {
+    unique.add(extname(src).replace(".", ""));
+  } else {
+    throw new Error("Custom `Picture.ssr.astro` works only with string src");
+  }
+  return Array.from(unique).filter(Boolean);
 }
-function getWeight(element) {
-  for (const [id, detector] of Object.entries(ElementDetectors)) {
-    const children = element.name === "style" && element.children.length > 0 ? renderSync(element) : "";
-    if (detector(element.name, element.attributes, children)) {
-      return ElementWeights[id];
+const createPictureGetter = (getImage) => {
+  return async (params) => {
+    const {
+      src,
+      alt,
+      widths,
+      fit,
+      position,
+      background
+    } = params;
+    if (!src) {
+      throw new Error("[@astrojs/image] `src` is required");
+    }
+    if (!widths || !Array.isArray(widths)) {
+      throw new Error("[@astrojs/image] at least one `width` is required. ex: `widths={[100]}`");
+    }
+    const aspectRatio = await resolveAspectRatio(params);
+    if (!aspectRatio) {
+      throw new Error("`aspectRatio` must be provided for remote images");
+    }
+    const allFormats = await resolveFormats(params);
+    const lastFormat = allFormats[allFormats.length - 1];
+    const maxWidth = Math.max(...widths);
+    let image;
+    async function getSource(format) {
+      const imgs = await Promise.all(
+        widths.map(async (width) => {
+          const img = await getImage({
+            src,
+            alt,
+            format,
+            width,
+            height: width / aspectRatio,
+            fit,
+            position,
+            background,
+            aspectRatio
+          });
+          if (format === lastFormat && width === maxWidth) {
+            image = img;
+          }
+          return `${img.src} ${width}w`;
+        })
+      );
+      return {
+        type: mime.getType(format) || format,
+        srcset: imgs.join(",")
+      };
     }
+    const sources = await Promise.all(allFormats.map((format) => getSource(format)));
+    return {
+      sources,
+      // @ts-ignore
+      image
+    };
+  };
+};
+
+const { STOREFRONT_BASE_DIR } = process.env;
+const baseDir = STOREFRONT_BASE_DIR || process.cwd();
+const builtImages = [];
+const manifestFilepath = join(baseDir, "dist/server/images.dist.csv");
+try {
+  readFileSync(manifestFilepath, "utf-8").split(/\n/).forEach((line) => {
+    const [filename, width, height] = line.split(",");
+    builtImages.push({
+      filename,
+      width: Number(width),
+      height: Number(height)
+    });
+  });
+} catch (err) {
+  if (global.$renderStorefront) {
+    console.error(err);
   }
-  return ElementWeights.OTHER;
 }
+builtImages.sort((a, b) => {
+  if (a.width < b.width)
+    return -1;
+  return 1;
+});
+const getBuiltImage = async ({ src, width, format }) => {
+  const filename = src.replace(/^.*\//, "").replace(/.\w+(\?.*)?$/, "");
+  const filenameRegExp = new RegExp(`[_.][a-z0-9]+\\.${format}$`, "i");
+  const matchFilename = (_builtImage) => {
+    return filename === _builtImage.filename.replace(filenameRegExp, "");
+  };
+  let builtImage = builtImages.find((_builtImage) => {
+    return _builtImage.width >= width && matchFilename(_builtImage);
+  });
+  if (!builtImage) {
+    builtImage = builtImages.find(matchFilename);
+  }
+  if (builtImage) {
+    return {
+      src: `/_astro/${builtImage.filename}`,
+      width: builtImage.width,
+      height: builtImage.height
+    };
+  }
+  console.warn(`Could not match built ${format} image for ${src} ${width}px`);
+  return { src, width };
+};
 
-function capo(html) {
-  const ast = parse$1(html);
-  try {
-    walkSync(ast, (node, parent, index) => {
-      if (node.type === ELEMENT_NODE && node.name === "head") {
-        if (parent) {
-          parent.children.splice(index, 1, getSortedHead(node));
-          throw "done";
+const getBuiltPicture = createPictureGetter(getBuiltImage);
+
+const getAspectRatio = (src, tryImageSize) => {
+  if (typeof src === "string") {
+    src = tryImageSize(src);
+  } else if (src.width) {
+    return src.height ? src.width / src.height : 1;
+  }
+  return 0;
+};
+const useSSRPicture = async (params) => {
+  const {
+    src,
+    alt,
+    sizes: propSizes,
+    widths,
+    aspectRatio: propAspectRatio,
+    fit,
+    background,
+    position,
+    formats = ["avif", "webp"],
+    loading = "lazy",
+    decoding = "async",
+    hasImg = true,
+    tryImageSize,
+    getPicture,
+    assetsPrefix,
+    ...attrs
+  } = params;
+  let aspectRatio;
+  if (propAspectRatio) {
+    if (typeof propAspectRatio === "number") {
+      aspectRatio = propAspectRatio;
+    } else {
+      const [width, height] = propAspectRatio.split(":");
+      aspectRatio = Number(width) / Number(height);
+    }
+  } else if ((!attrs.width || !attrs.height) && typeof src === "string") {
+    const { width, height } = tryImageSize(src);
+    if (width && height) {
+      aspectRatio = getAspectRatio({ width, height }, tryImageSize);
+      let hasSplicedWidths = false;
+      for (let i = widths.length - 1; i >= 0; i--) {
+        if (widths[i] > width) {
+          widths.splice(i, 1);
+          hasSplicedWidths = true;
+        }
+      }
+      if (hasSplicedWidths) {
+        attrs.width = width;
+        attrs.height = height;
+        if (!widths.find((w) => w === width)) {
+          widths.push(width);
+        }
+      } else {
+        attrs.width = Math.max(...widths);
+        attrs.height = Math.round(attrs.width / aspectRatio);
+      }
+    }
+  }
+  let sizes = propSizes || "";
+  if (!sizes && attrs.class) {
+    const classNames = attrs.class.split(" ");
+    let nextSize;
+    const breakpoints = {
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      "2xl": 1536
+    };
+    [
+      ["", 0],
+      ...Object.entries(breakpoints)
+    ].forEach(([breakpoint, minWidth]) => {
+      const classRegex = breakpoint ? new RegExp(`^${breakpoint}:max-w-(\\[\\w+\\]|screen-\\w+)$`) : /^max-w-(\[\w+\]|screen-\w+)$/;
+      let classMaxW;
+      classNames.find((_class) => {
+        const maxW = _class.replace(classRegex, "$1");
+        if (maxW !== _class) {
+          classMaxW = maxW;
+          return true;
+        }
+        return false;
+      });
+      if (classMaxW) {
+        if (nextSize) {
+          if (sizes)
+            sizes += ", ";
+          sizes += `(max-width: ${minWidth - 1}px) ${nextSize}`;
+        }
+        if (classMaxW.charAt(0) === "[") {
+          nextSize = classMaxW.slice(1, classMaxW.length - 1);
+        } else {
+          const screenSize = breakpoints[classMaxW.slice(7)];
+          if (screenSize) {
+            nextSize = `${screenSize}px`;
+          }
         }
       }
     });
-  } catch (e) {
-    if (e !== "done")
-      throw e;
+    if (nextSize) {
+      if (sizes)
+        sizes += ", ";
+      sizes += nextSize;
+    }
+  }
+  if (!sizes && widths.length === 1) {
+    sizes = `${widths[0] / 2}px`;
+  }
+  const { image, sources } = await getPicture({
+    src,
+    widths,
+    formats,
+    aspectRatio,
+    fit,
+    background,
+    position,
+    alt
+  });
+  delete image.width;
+  delete image.height;
+  if (assetsPrefix && image.src?.charAt(0) === "/") {
+    image.src = `${assetsPrefix}${image.src}`;
+    sources.forEach((source) => {
+      source.srcset = `${assetsPrefix}${source.srcset}`.replace(/,\//g, `,${assetsPrefix}/`);
+    });
+  }
+  const pictureAttrs = {};
+  if (!hasImg) {
+    pictureAttrs["data-alt"] = alt;
+    Object.assign(pictureAttrs, attrs);
+    delete pictureAttrs.width;
+    delete pictureAttrs.height;
   }
-  return renderSync(ast);
-}
-function getSortedHead(head) {
-  const weightedChildren = head.children.map((node) => {
-    if (node.type === ELEMENT_NODE) {
-      const weight = getWeight(node);
-      return [weight, node];
+  return {
+    sizes,
+    aspectRatio,
+    sources,
+    pictureAttrs,
+    imgAttrs: !hasImg ? null : {
+      ...image,
+      alt,
+      loading,
+      decoding,
+      ...attrs
     }
-  }).filter(Boolean);
-  const children = weightedChildren.sort((a, b) => b[0] - a[0]).map(([_, element]) => element);
-  return { ...head, children };
-}
+  };
+};
 
-const Head = createComponent({
-  factory: async (result, props, slots) => {
-    let head = "";
-    head += `<head${spreadAttributes(props)} data-capo>`;
-    head += await renderSlotToString(result, slots.default);
-    head += renderAllHeadContent(result);
-    head += "</head>";
-    return unescapeHTML(capo(head));
-  }
-});
+const $$Astro$d = createAstro("https://demo.ecomplus.app");
+const $$Picture = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$d, $$props, $$slots);
+  Astro2.self = $$Picture;
+  const { STOREFRONT_BASE_DIR } = process.env;
+  const baseDir = STOREFRONT_BASE_DIR || process.cwd();
+  const originalImages = [];
+  const manifestFilepath = join(baseDir, "dist/server/images.src.csv");
+  readFileSync(manifestFilepath, "utf-8").split(/\n/).forEach((line) => {
+    const [filepath, width, height] = line.split(",");
+    originalImages.push({
+      filepath,
+      width: Number(width),
+      height: Number(height)
+    });
+  });
+  const tryImageSize = (src) => {
+    let dimensions = {};
+    if (typeof src === "string" && src.startsWith("/")) {
+      const originalImage = originalImages.find(({ filepath }) => {
+        return new RegExp(`^/${filepath}\\??.*`).test(src);
+      });
+      if (originalImage) {
+        const { width, height } = originalImage;
+        dimensions = { width, height };
+      }
+    }
+    return dimensions;
+  };
+  const {
+    sizes,
+    sources,
+    pictureAttrs,
+    imgAttrs
+  } = await useSSRPicture({
+    ...Astro2.props,
+    tryImageSize,
+    getPicture: getBuiltPicture,
+    assetsPrefix: Astro2.locals.assetsPrefix
+  });
+  return renderTemplate`${maybeRenderHead()}<picture${spreadAttributes(pictureAttrs)}> ${sources.map((attrs) => renderTemplate`<source${spreadAttributes(attrs)}${addAttribute(sizes, "sizes")}>`)} ${imgAttrs && renderTemplate`<img${spreadAttributes(imgAttrs)}>`} </picture>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/images/Picture.runtime.astro", void 0);
 
 const $$Astro$c = createAstro("https://demo.ecomplus.app");
 const $$BaseBody = createComponent(async ($$result, $$props, $$slots) => {
@@ -1689,176 +1698,6 @@ const $$Base = createComponent(async ($$result, $$props, $$slots) => {
   return renderTemplate`${renderComponent($$result, "SfBase", $$Base$1, {}, { "base-head": ($$result2) => renderTemplate`${renderComponent($$result2, "Fragment", Fragment, { "slot": "base-head" }, { "default": ($$result3) => renderTemplate` ${renderSlot$1($$result3, $$slots["base-head"])} ` })}`, "before-head-end": ($$result2) => renderTemplate`${renderComponent($$result2, "InlineScripts", $$InlineScripts, { "slot": "before-head-end" })}`, "default": ($$result2) => renderTemplate`   ${renderSlot$1($$result2, $$slots["default"])} ` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Base.astro", void 0);
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
-  __name: "PaymentMethodFlag",
-  props: {
-    as: { default: "i" },
-    flag: {}
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const props = __props;
-    const iconClassName = computed(() => {
-      switch (props.flag) {
-        case "pix":
-          return "i-pix text-[#77B6A8]";
-        case "visa":
-          return "i-visa";
-        case "mastercard":
-          return "i-mastercard";
-        case "elo":
-          return "i-elo";
-        case "amex":
-          return "i-amex";
-        case "hipercard":
-          return "i-hipercard";
-        case "diners":
-          return "i-dinersclub";
-        case "discover":
-          return "i-discover";
-        default:
-          return "";
-      }
-    });
-    const __returned__ = { props, iconClassName };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-function _sfc_ssrRender$z(_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$z = _sfc_main$z.setup;
-_sfc_main$z.setup = (props, ctx) => {
-  const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/PaymentMethodFlag.vue");
-  return _sfc_setup$z ? _sfc_setup$z(props, ctx) : void 0;
-};
-const PaymentMethodFlag = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["ssrRender", _sfc_ssrRender$z]]);
-
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
-  __name: "FooterStamps",
-  props: {
-    stamps: {}
-  },
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const __returned__ = { PaymentMethodFlag };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-function _sfc_ssrRender$y(_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) => {
-    _push(`<li>`);
-    _push(ssrRenderComponent(_component_ALink, {
-      href: stamp.href?.replace("{domain}", _ctx.$settings.domain || "")
-    }, {
-      default: withCtx((_, _push2, _parent2, _scopeId) => {
-        if (_push2) {
-          ssrRenderSlot(_ctx.$slots, `picture-${i}`, {}, null, _push2, _parent2, _scopeId);
-          if (!stamp.img) {
-            _push2(`<span class="flex items-center"${_scopeId}>`);
-            if (stamp.icon) {
-              _push2(`<span class="[&amp;&gt;*]:from-success-200 [&amp;&gt;*]:to-success-700 mr-2 text-4xl [&amp;&gt;*]:bg-gradient-to-br"${_scopeId}>`);
-              if (stamp.icon === "lock") {
-                _push2(`<i class="i-lock-closed"${_scopeId}></i>`);
-              } else if (stamp.icon === "check") {
-                _push2(`<i class="i-check-badge"${_scopeId}></i>`);
-              } else {
-                _push2(`<i class="i-arrow-path-rounded-square"${_scopeId}></i>`);
-              }
-              _push2(`</span>`);
-            } else {
-              _push2(`<!---->`);
-            }
-            _push2(`<span class="text-base-600 max-w-[140px] text-sm font-medium"${_scopeId}>${ssrInterpolate(stamp.alt)} `);
-            if (stamp.href && stamp.href.charAt(0) !== "/") {
-              _push2(`<i class="bg-base-400 i-arrow-top-right-on-square ml-0.5"${_scopeId}></i>`);
-            } else {
-              _push2(`<!---->`);
-            }
-            _push2(`</span></span>`);
-          } else {
-            _push2(`<!---->`);
-          }
-        } else {
-          return [
-            renderSlot(_ctx.$slots, `picture-${i}`),
-            !stamp.img ? (openBlock(), createBlock("span", {
-              key: 0,
-              class: "flex items-center"
-            }, [
-              stamp.icon ? (openBlock(), createBlock("span", {
-                key: 0,
-                class: "[&>*]:from-success-200 [&>*]:to-success-700 mr-2 text-4xl [&>*]:bg-gradient-to-br"
-              }, [
-                stamp.icon === "lock" ? (openBlock(), createBlock("i", {
-                  key: 0,
-                  class: "i-lock-closed"
-                })) : stamp.icon === "check" ? (openBlock(), createBlock("i", {
-                  key: 1,
-                  class: "i-check-badge"
-                })) : (openBlock(), createBlock("i", {
-                  key: 2,
-                  class: "i-arrow-path-rounded-square"
-                }))
-              ])) : createCommentVNode("", true),
-              createVNode("span", { class: "text-base-600 max-w-[140px] text-sm font-medium" }, [
-                createTextVNode(toDisplayString(stamp.alt) + " ", 1),
-                stamp.href && stamp.href.charAt(0) !== "/" ? (openBlock(), createBlock("i", {
-                  key: 0,
-                  class: "bg-base-400 i-arrow-top-right-on-square ml-0.5"
-                })) : createCommentVNode("", true)
-              ])
-            ])) : createCommentVNode("", true)
-          ];
-        }
-      }),
-      _: 2
-    }, _parent));
-    _push(`</li>`);
-  });
-  _push(`<!--]--></ul><div class="mx-auto flex flex-wrap items-center justify-end gap-4 overflow-x-auto text-2xl md:mx-0 md:flex-nowrap md:overflow-hidden"><!--[-->`);
-  ssrRenderList(_ctx.$settings.paymentMethods, (paymentMethod) => {
-    _push(ssrRenderComponent($setup["PaymentMethodFlag"], {
-      key: paymentMethod,
-      flag: paymentMethod
-    }, null, _parent));
-  });
-  _push(`<!--]--></div></div><div class="mt-7 justify-between gap-4 text-center text-xs md:flex md:text-left"><div class="mb-3 md:mb-0"> @ ${ssrInterpolate((/* @__PURE__ */ new Date()).getFullYear())} ${ssrInterpolate(_ctx.$settings.corporateName)} ${ssrInterpolate(_ctx.$settings.address ? `/ ${_ctx.$settings.address}` : "")} / ${ssrInterpolate(_ctx.$settings.docNumber)}</div>`);
-  _push(ssrRenderComponent(_component_ALink, {
-    href: "https://www.ecomplus.io/",
-    class: "italic text-[#37003c]"
-  }, {
-    default: withCtx((_, _push2, _parent2, _scopeId) => {
-      if (_push2) {
-        _push2(` powered by <b${_scopeId}>e-com.plus</b>`);
-      } else {
-        return [
-          createTextVNode(" powered by "),
-          createVNode("b", null, "e-com.plus")
-        ];
-      }
-    }),
-    _: 1
-  }, _parent));
-  _push(`</div></div>`);
-}
-const _sfc_setup$y = _sfc_main$y.setup;
-_sfc_main$y.setup = (props, ctx) => {
-  const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/FooterStamps.vue");
-  return _sfc_setup$y ? _sfc_setup$y(props, ctx) : void 0;
-};
-const FooterStamps = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["ssrRender", _sfc_ssrRender$y]]);
-
 const emitter = new EventEmitter();
 const useSharedData = async (props) => {
   const { field, timeout = 1e3 } = props;
@@ -2093,7 +1932,7 @@ const usePageHeader = async ({ routeContext, listedCategoryFields }) => {
   };
 };
 
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "PitchBar",
   props: {
     slides: {}
@@ -2110,7 +1949,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$x(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$A(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Carousel = resolveComponent("Carousel");
   const _component_ALink = resolveComponent("ALink");
   const _component_CarouselControl = resolveComponent("CarouselControl");
@@ -2203,13 +2042,13 @@ function _sfc_ssrRender$x(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div></div>`);
 }
-const _sfc_setup$x = _sfc_main$x.setup;
-_sfc_main$x.setup = (props, ctx) => {
+const _sfc_setup$A = _sfc_main$A.setup;
+_sfc_main$A.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/PitchBar.vue");
-  return _sfc_setup$x ? _sfc_setup$x(props, ctx) : void 0;
+  return _sfc_setup$A ? _sfc_setup$A(props, ctx) : void 0;
 };
-const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["ssrRender", _sfc_ssrRender$x]]);
+const PitchBar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["ssrRender", _sfc_ssrRender$A]]);
 
 const useStorage = (key, initialValue, storage = globalThis.localStorage) => {
   if (!storage) {
@@ -2409,7 +2248,7 @@ const useStickyHeader = (props) => {
   watchDebounced(_y, (nextY) => {
     y.value = nextY;
   }, {
-    debounce: isMobile ? 100 : 50,
+    debounce: isMobile ? 100 : 20,
     maxWait: isMobile ? 800 : 400
   });
   const isSticky = computed(() => ready.value && y.value > staticY.value * 1.2);
@@ -2593,7 +2432,7 @@ const useShopHeader = (props) => {
   };
 };
 
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -2696,7 +2535,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$w(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$z(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   _push(ssrRenderComponent(_component_Fade, mergeProps({
     slide: $setup.slideTo,
@@ -2822,13 +2661,13 @@ function _sfc_ssrRender$w(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$w = _sfc_main$w.setup;
-_sfc_main$w.setup = (props, ctx) => {
+const _sfc_setup$z = _sfc_main$z.setup;
+_sfc_main$z.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/Drawer.vue");
-  return _sfc_setup$w ? _sfc_setup$w(props, ctx) : void 0;
+  return _sfc_setup$z ? _sfc_setup$z(props, ctx) : void 0;
 };
-const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["ssrRender", _sfc_ssrRender$w]]);
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["ssrRender", _sfc_ssrRender$z]]);
 
 const storageKey$1 = "ecomSession";
 const emptySession = {
@@ -2867,7 +2706,7 @@ const initializeFirebaseAuth = (canWaitIdle) => {
   return;
 };
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "AccountLink",
   props: {
     to: {},
@@ -2909,20 +2748,20 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$v(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$y(_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$v = _sfc_main$v.setup;
-_sfc_main$v.setup = (props, ctx) => {
+const _sfc_setup$y = _sfc_main$y.setup;
+_sfc_main$y.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/AccountLink.vue");
-  return _sfc_setup$v ? _sfc_setup$v(props, ctx) : void 0;
+  return _sfc_setup$y ? _sfc_setup$y(props, ctx) : void 0;
 };
-const AccountLink = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["ssrRender", _sfc_ssrRender$v]]);
+const AccountLink = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["ssrRender", _sfc_ssrRender$y]]);
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkIcon",
   props: {
     as: { default: "i" },
@@ -2958,18 +2797,18 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$u(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$x(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.as), mergeProps({ class: $setup.iconClassName }, _attrs), null), _parent);
 }
-const _sfc_setup$u = _sfc_main$u.setup;
-_sfc_main$u.setup = (props, ctx) => {
+const _sfc_setup$x = _sfc_main$x.setup;
+_sfc_main$x.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/SocialNetworkIcon.vue");
-  return _sfc_setup$u ? _sfc_setup$u(props, ctx) : void 0;
+  return _sfc_setup$x ? _sfc_setup$x(props, ctx) : void 0;
 };
-const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["ssrRender", _sfc_ssrRender$u]]);
+const SocialNetworkIcon = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["ssrRender", _sfc_ssrRender$x]]);
 
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "SocialNetworkLink",
   props: {
     network: {},
@@ -2995,7 +2834,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$t(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$w(_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) => {
@@ -3016,15 +2855,15 @@ function _sfc_ssrRender$t(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$t = _sfc_main$t.setup;
-_sfc_main$t.setup = (props, ctx) => {
+const _sfc_setup$w = _sfc_main$w.setup;
+_sfc_main$w.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/SocialNetworkLink.vue");
-  return _sfc_setup$t ? _sfc_setup$t(props, ctx) : void 0;
+  return _sfc_setup$w ? _sfc_setup$w(props, ctx) : void 0;
 };
-const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["ssrRender", _sfc_ssrRender$t]]);
+const SocialNetworkLink = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["ssrRender", _sfc_ssrRender$w]]);
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenavCategory",
   props: {
     categoryTree: {}
@@ -3047,7 +2886,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$s(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$v(_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))}>`);
@@ -3085,15 +2924,15 @@ function _sfc_ssrRender$s(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</li>`);
 }
-const _sfc_setup$s = _sfc_main$s.setup;
-_sfc_main$s.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/ShopSidenavCategory.vue");
-  return _sfc_setup$s ? _sfc_setup$s(props, ctx) : void 0;
+  return _sfc_setup$v ? _sfc_setup$v(props, ctx) : void 0;
 };
-const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["ssrRender", _sfc_ssrRender$s]]);
+const ShopSidenavCategory = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["ssrRender", _sfc_ssrRender$v]]);
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "ShopSidenav",
   props: {
     categoryTrees: {}
@@ -3114,7 +2953,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$r(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$u(_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"], {
@@ -3155,13 +2994,13 @@ function _sfc_ssrRender$r(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></footer></aside>`);
 }
-const _sfc_setup$r = _sfc_main$r.setup;
-_sfc_main$r.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/components/ShopSidenav.vue");
-  return _sfc_setup$r ? _sfc_setup$r(props, ctx) : void 0;
+  return _sfc_setup$u ? _sfc_setup$u(props, ctx) : void 0;
 };
-const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["ssrRender", _sfc_ssrRender$r]]);
+const ShopSidenav = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["ssrRender", _sfc_ssrRender$u]]);
 
 const useShopHeaderSubmenu = (props) => {
   const categoryPicture = computed(() => {
@@ -3210,7 +3049,7 @@ const useShopHeaderSubmenu = (props) => {
   };
 };
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "ShopHeaderSubmenu",
   props: {
     categoryTree: {},
@@ -3239,14 +3078,17 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$t(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   const _component_AImg = resolveComponent("AImg");
   _push(ssrRenderComponent($setup["Popover"], _attrs, {
     default: withCtx(({ open }, _push2, _parent2, _scopeId) => {
       if (_push2) {
         _push2(`<a${ssrRenderAttr("href", `/${$props.categoryTree.slug}`)} role="button"${_scopeId}>`);
-        _push2(ssrRenderComponent($setup["PopoverButton"], { class: "outline-none" }, {
+        _push2(ssrRenderComponent($setup["PopoverButton"], {
+          id: `PopB${$props.categoryTree._id || _ctx.$useId("c")}`,
+          class: "outline-none"
+        }, {
           default: withCtx((_, _push3, _parent3, _scopeId2) => {
             if (_push3) {
               ssrRenderSlot(_ctx.$slots, "button", { open }, null, _push3, _parent3, _scopeId2);
@@ -3457,12 +3299,15 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             href: `/${$props.categoryTree.slug}`,
             role: "button"
           }, [
-            createVNode($setup["PopoverButton"], { class: "outline-none" }, {
+            createVNode($setup["PopoverButton"], {
+              id: `PopB${$props.categoryTree._id || _ctx.$useId("c")}`,
+              class: "outline-none"
+            }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "button", { open })
               ]),
               _: 2
-            }, 1024)
+            }, 1032, ["id"])
           ], 8, ["href"]),
           createVNode("div", {
             class: "relative",
@@ -3553,15 +3398,15 @@ function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$q = _sfc_main$q.setup;
-_sfc_main$q.setup = (props, ctx) => {
+const _sfc_setup$t = _sfc_main$t.setup;
+_sfc_main$t.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShopHeaderSubmenu.vue");
-  return _sfc_setup$q ? _sfc_setup$q(props, ctx) : void 0;
+  return _sfc_setup$t ? _sfc_setup$t(props, ctx) : void 0;
 };
-const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["ssrRender", _sfc_ssrRender$q]]);
+const ShopHeaderSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["ssrRender", _sfc_ssrRender$t]]);
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "ShopHeaderMenu",
   props: {
     inlineMenuTrees: {}
@@ -3577,7 +3422,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$p(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$s(_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>`);
@@ -3621,15 +3466,15 @@ function _sfc_ssrRender$p(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></ul></nav>`);
 }
-const _sfc_setup$p = _sfc_main$p.setup;
-_sfc_main$p.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/components/ShopHeaderMenu.vue");
-  return _sfc_setup$p ? _sfc_setup$p(props, ctx) : void 0;
+  return _sfc_setup$s ? _sfc_setup$s(props, ctx) : void 0;
 };
-const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["ssrRender", _sfc_ssrRender$p]]);
+const ShopHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["ssrRender", _sfc_ssrRender$s]]);
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "AccountMenu",
   setup(__props, { expose: __expose }) {
     __expose();
@@ -3656,7 +3501,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$r(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   const _component_ALink = resolveComponent("ALink");
   _push(ssrRenderComponent($setup["Menu"], mergeProps({
@@ -3678,6 +3523,7 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           default: withCtx((_, _push3, _parent3, _scopeId2) => {
             if (_push3) {
               _push3(ssrRenderComponent($setup["MenuButton"], {
+                id: "AccountBtn",
                 class: "outline-none",
                 "aria-label": "Minha conta"
               }, {
@@ -3695,6 +3541,7 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             } else {
               return [
                 createVNode($setup["MenuButton"], {
+                  id: "AccountBtn",
                   class: "outline-none",
                   "aria-label": "Minha conta"
                 }, {
@@ -3823,8 +3670,8 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                     _push4(`<!--[-->`);
                     ssrRenderList(_ctx.$settings.serviceLinks, ({ title, href }, i) => {
                       _push4(ssrRenderComponent($setup["MenuItem"], {
-                        as: "li",
-                        key: `s-${i}`
+                        key: `s-${i}`,
+                        as: "li"
                       }, {
                         default: withCtx(({ active }, _push5, _parent5, _scopeId4) => {
                           if (_push5) {
@@ -3970,8 +3817,8 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                         }),
                         (openBlock(true), createBlock(Fragment$1, null, renderList(_ctx.$settings.serviceLinks, ({ title, href }, i) => {
                           return openBlock(), createBlock($setup["MenuItem"], {
-                            as: "li",
-                            key: `s-${i}`
+                            key: `s-${i}`,
+                            as: "li"
                           }, {
                             default: withCtx(({ active }) => [
                               createVNode(_component_ALink, {
@@ -4081,8 +3928,8 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                       }),
                       (openBlock(true), createBlock(Fragment$1, null, renderList(_ctx.$settings.serviceLinks, ({ title, href }, i) => {
                         return openBlock(), createBlock($setup["MenuItem"], {
-                          as: "li",
-                          key: `s-${i}`
+                          key: `s-${i}`,
+                          as: "li"
                         }, {
                           default: withCtx(({ active }) => [
                             createVNode(_component_ALink, {
@@ -4151,6 +3998,7 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           }, {
             default: withCtx(() => [
               createVNode($setup["MenuButton"], {
+                id: "AccountBtn",
                 class: "outline-none",
                 "aria-label": "Minha conta"
               }, {
@@ -4220,8 +4068,8 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                     }),
                     (openBlock(true), createBlock(Fragment$1, null, renderList(_ctx.$settings.serviceLinks, ({ title, href }, i) => {
                       return openBlock(), createBlock($setup["MenuItem"], {
-                        as: "li",
-                        key: `s-${i}`
+                        key: `s-${i}`,
+                        as: "li"
                       }, {
                         default: withCtx(({ active }) => [
                           createVNode(_component_ALink, {
@@ -4280,15 +4128,15 @@ function _sfc_ssrRender$o(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _: 3
   }, _parent));
 }
-const _sfc_setup$o = _sfc_main$o.setup;
-_sfc_main$o.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/components/AccountMenu.vue");
-  return _sfc_setup$o ? _sfc_setup$o(props, ctx) : void 0;
+  return _sfc_setup$r ? _sfc_setup$r(props, ctx) : void 0;
 };
-const AccountMenu = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["ssrRender", _sfc_ssrRender$o]]);
+const AccountMenu = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["ssrRender", _sfc_ssrRender$r]]);
 
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "ShopHeader",
   props: {
     searchInput: {},
@@ -4299,8 +4147,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     __expose();
-    const SearchModal = defineAsyncComponent(() => import('../SearchModal_GvRUZ6ce.mjs'));
-    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_yYIzwp_R.mjs'));
+    const SearchModal = defineAsyncComponent(() => import('../SearchModal_Sktaq643.mjs'));
+    const CartSidebar = defineAsyncComponent(() => import('../CartSidebar_blvgfFa-.mjs'));
     const props = __props;
     const header = ref(null);
     const searchInput = ref(null);
@@ -4332,7 +4180,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$n(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$q(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Fade = resolveComponent("Fade");
   const _component_Skeleton = resolveComponent("Skeleton");
   _push(`<header${ssrRenderAttrs(mergeProps({
@@ -4551,34 +4399,204 @@ function _sfc_ssrRender$n(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</header>`);
 }
-const _sfc_setup$n = _sfc_main$n.setup;
-_sfc_main$n.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/ShopHeader.vue");
+  return _sfc_setup$q ? _sfc_setup$q(props, ctx) : void 0;
+};
+const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["ssrRender", _sfc_ssrRender$q]]);
+
+var __freeze$1 = Object.freeze;
+var __defProp$1 = Object.defineProperty;
+var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", { value: __freeze$1(raw || cooked.slice()) }));
+var _a$1;
+const $$Astro$8 = createAstro("https://demo.ecomplus.app");
+const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$8, $$props, $$slots);
+  Astro2.self = $$PageHeader;
+  const { routeContext } = Astro2.locals;
+  const { settings, isHomepage } = routeContext;
+  const LogoHeading = isHomepage ? "h1" : "h2";
+  const {
+    pitchBar,
+    shopHeader
+  } = await usePageHeader({ routeContext });
+  const { getInlineClientJS } = await useSharedData({ field: "categories" });
+  return renderTemplate`${renderSlot$1($$result, $$slots["pitch-bar"], renderTemplate(_a$1 || (_a$1 = __template$1([" ", "", " <script async>", "<\/script> ", ""])), pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`, pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar })}`, unescapeHTML(getInlineClientJS()), renderComponent($$result, "ShopHeader", ShopHeader, { ...shopHeader, "client:context": "data:categories", "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": "mx-auto max-w-[150px] hover:drop-shadow-sm" })} ` })} </a> ` })}` })))}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/PageHeader.astro", void 0);
+
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "PaymentMethodFlag",
+  props: {
+    as: { default: "i" },
+    flag: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const iconClassName = computed(() => {
+      switch (props.flag) {
+        case "pix":
+          return "i-pix text-[#77B6A8]";
+        case "visa":
+          return "i-visa";
+        case "mastercard":
+          return "i-mastercard";
+        case "elo":
+          return "i-elo";
+        case "amex":
+          return "i-amex";
+        case "hipercard":
+          return "i-hipercard";
+        case "diners":
+          return "i-dinersclub";
+        case "discover":
+          return "i-discover";
+        default:
+          return "";
+      }
+    });
+    const __returned__ = { props, iconClassName };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$p(_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$p = _sfc_main$p.setup;
+_sfc_main$p.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/PaymentMethodFlag.vue");
+  return _sfc_setup$p ? _sfc_setup$p(props, ctx) : void 0;
+};
+const PaymentMethodFlag = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["ssrRender", _sfc_ssrRender$p]]);
+
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "FooterStamps",
+  props: {
+    stamps: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { PaymentMethodFlag };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$o(_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) => {
+    _push(`<li>`);
+    _push(ssrRenderComponent(_component_ALink, {
+      href: stamp.href?.replace("{domain}", _ctx.$settings.domain || "")
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          ssrRenderSlot(_ctx.$slots, `picture-${i}`, {}, null, _push2, _parent2, _scopeId);
+          if (!stamp.img) {
+            _push2(`<span class="flex items-center"${_scopeId}>`);
+            if (stamp.icon) {
+              _push2(`<span class="[&amp;&gt;*]:from-success-200 [&amp;&gt;*]:to-success-700 mr-2 text-4xl [&amp;&gt;*]:bg-gradient-to-br"${_scopeId}>`);
+              if (stamp.icon === "lock") {
+                _push2(`<i class="i-lock-closed"${_scopeId}></i>`);
+              } else if (stamp.icon === "check") {
+                _push2(`<i class="i-check-badge"${_scopeId}></i>`);
+              } else {
+                _push2(`<i class="i-arrow-path-rounded-square"${_scopeId}></i>`);
+              }
+              _push2(`</span>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`<span class="text-base-600 max-w-[140px] text-sm font-medium"${_scopeId}>${ssrInterpolate(stamp.alt)} `);
+            if (stamp.href && stamp.href.charAt(0) !== "/") {
+              _push2(`<i class="bg-base-400 i-arrow-top-right-on-square ml-0.5"${_scopeId}></i>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`</span></span>`);
+          } else {
+            _push2(`<!---->`);
+          }
+        } else {
+          return [
+            renderSlot(_ctx.$slots, `picture-${i}`),
+            !stamp.img ? (openBlock(), createBlock("span", {
+              key: 0,
+              class: "flex items-center"
+            }, [
+              stamp.icon ? (openBlock(), createBlock("span", {
+                key: 0,
+                class: "[&>*]:from-success-200 [&>*]:to-success-700 mr-2 text-4xl [&>*]:bg-gradient-to-br"
+              }, [
+                stamp.icon === "lock" ? (openBlock(), createBlock("i", {
+                  key: 0,
+                  class: "i-lock-closed"
+                })) : stamp.icon === "check" ? (openBlock(), createBlock("i", {
+                  key: 1,
+                  class: "i-check-badge"
+                })) : (openBlock(), createBlock("i", {
+                  key: 2,
+                  class: "i-arrow-path-rounded-square"
+                }))
+              ])) : createCommentVNode("", true),
+              createVNode("span", { class: "text-base-600 max-w-[140px] text-sm font-medium" }, [
+                createTextVNode(toDisplayString(stamp.alt) + " ", 1),
+                stamp.href && stamp.href.charAt(0) !== "/" ? (openBlock(), createBlock("i", {
+                  key: 0,
+                  class: "bg-base-400 i-arrow-top-right-on-square ml-0.5"
+                })) : createCommentVNode("", true)
+              ])
+            ])) : createCommentVNode("", true)
+          ];
+        }
+      }),
+      _: 2
+    }, _parent));
+    _push(`</li>`);
+  });
+  _push(`<!--]--></ul><div class="mx-auto flex flex-wrap items-center justify-end gap-4 overflow-x-auto text-2xl md:mx-0 md:flex-nowrap md:overflow-hidden"><!--[-->`);
+  ssrRenderList(_ctx.$settings.paymentMethods, (paymentMethod) => {
+    _push(ssrRenderComponent($setup["PaymentMethodFlag"], {
+      key: paymentMethod,
+      flag: paymentMethod
+    }, null, _parent));
+  });
+  _push(`<!--]--></div></div><div class="mt-7 justify-between gap-4 text-center text-xs md:flex md:text-left"><div class="mb-3 md:mb-0"> @ ${ssrInterpolate((/* @__PURE__ */ new Date()).getFullYear())} ${ssrInterpolate(_ctx.$settings.corporateName)} ${ssrInterpolate(_ctx.$settings.address ? `/ ${_ctx.$settings.address}` : "")} / ${ssrInterpolate(_ctx.$settings.docNumber)}</div>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: "https://www.ecomplus.io/",
+    class: "italic text-[#37003c]"
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(` powered by <b${_scopeId}>e-com.plus</b>`);
+      } else {
+        return [
+          createTextVNode(" powered by "),
+          createVNode("b", null, "e-com.plus")
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</div></div>`);
+}
+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/ShopHeader.vue");
-  return _sfc_setup$n ? _sfc_setup$n(props, ctx) : void 0;
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/FooterStamps.vue");
+  return _sfc_setup$o ? _sfc_setup$o(props, ctx) : void 0;
 };
-const ShopHeader = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["ssrRender", _sfc_ssrRender$n]]);
-
-var __freeze$1 = Object.freeze;
-var __defProp$1 = Object.defineProperty;
-var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", { value: __freeze$1(raw || cooked.slice()) }));
-var _a$1;
-const $$Astro$8 = createAstro("https://demo.ecomplus.app");
-const $$PageHeader = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$8, $$props, $$slots);
-  Astro2.self = $$PageHeader;
-  const { routeContext } = Astro2.locals;
-  const { settings, isHomepage } = routeContext;
-  const LogoHeading = isHomepage ? "h1" : "h2";
-  const {
-    pitchBar,
-    shopHeader
-  } = await usePageHeader({ routeContext });
-  const { getInlineClientJS } = await useSharedData({ field: "categories" });
-  return renderTemplate`${renderSlot$1($$result, $$slots["pitch-bar"], renderTemplate(_a$1 || (_a$1 = __template$1([" ", "", " <script async>", "<\/script> ", ""])), pitchBar.slides.length > 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/PitchBar.vue", "client:component-export": "default" })}`, pitchBar.slides.length === 1 && renderTemplate`${renderComponent($$result, "PitchBar", PitchBar, { ...pitchBar })}`, unescapeHTML(getInlineClientJS()), renderComponent($$result, "ShopHeader", ShopHeader, { ...shopHeader, "client:context": "data:categories", "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": "mx-auto max-w-[150px] hover:drop-shadow-sm" })} ` })} </a> ` })}` })))}`;
-}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/PageHeader.astro", void 0);
+const FooterStamps = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["ssrRender", _sfc_ssrRender$o]]);
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "ShopFooter",
   props: {
     stamps: {},
@@ -4596,7 +4614,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$m(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$n(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
   _push(`<footer${ssrRenderAttrs(mergeProps({ class: "border-base-100 bg-base-50 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);
@@ -4694,13 +4712,13 @@ function _sfc_ssrRender$m(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(ssrRenderComponent($setup["FooterStamps"], { stamps: $props.stamps }, null, _parent));
   _push(`</footer>`);
 }
-const _sfc_setup$m = _sfc_main$m.setup;
-_sfc_main$m.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/ShopFooter.vue");
-  return _sfc_setup$m ? _sfc_setup$m(props, ctx) : void 0;
+  return _sfc_setup$n ? _sfc_setup$n(props, ctx) : void 0;
 };
-const ShopFooter = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["ssrRender", _sfc_ssrRender$m]]);
+const ShopFooter = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["ssrRender", _sfc_ssrRender$n]]);
 
 const $$Astro$7 = createAstro("https://demo.ecomplus.app");
 const $$PageFooter = createComponent(async ($$result, $$props, $$slots) => {
@@ -4795,7 +4813,7 @@ const usePagination = (props) => {
     return Array.from(Array(endPage.value + 1 - startPage.value).keys()).map((i) => startPage.value + i);
   });
   const baseUrl = ref("");
-  watch(toRef(props.isUrlPath), () => {
+  watch(toRef(props, "isUrlPath"), () => {
     const url = global.astroUrl ;
     if (props.isUrlPath && !url.pathname.endsWith("/")) {
       url.pathname += "/";
@@ -4835,7 +4853,7 @@ const usePagination = (props) => {
   };
 };
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Pagination",
   props: {
     totalItems: {},
@@ -4861,7 +4879,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$m(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
   _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, {
@@ -4922,13 +4940,13 @@ function _sfc_ssrRender$l(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</li></ol>`);
 }
-const _sfc_setup$l = _sfc_main$l.setup;
-_sfc_main$l.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/Pagination.vue");
-  return _sfc_setup$l ? _sfc_setup$l(props, ctx) : void 0;
+  return _sfc_setup$m ? _sfc_setup$m(props, ctx) : void 0;
 };
-const Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["ssrRender", _sfc_ssrRender$l]]);
+const Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["ssrRender", _sfc_ssrRender$m]]);
 
 var __freeze = Object.freeze;
 var __defProp = Object.defineProperty;
@@ -5105,7 +5123,10 @@ class SearchEngine {
       return search(opts);
     }, debounce);
     watch([this.term, this.params, this.pageSize], () => {
-      this.pageNumber.value = 1;
+      if (this.wasFetched.value) {
+        this.pageNumber.value = 1;
+        this.#wasFetched.value = false;
+      }
     });
     watch(this.pageNumber, () => {
       this.#wasFetched.value = false;
@@ -5164,7 +5185,9 @@ class SearchEngine {
       data.result.forEach((item) => this.products.push(item));
     }
     if (data.meta && data.result) {
-      this.#wasFetched.value = true;
+      setTimeout(() => {
+        this.#wasFetched.value = true;
+      }, 9);
     }
   }
 }
@@ -5429,33 +5452,57 @@ const useSearchShowcase = (props) => {
   if (term !== void 0) {
     searchEngine.term.value = term;
   }
+  if (props.pageSize) {
+    searchEngine.pageSize.value = props.pageSize;
+  }
   Object.assign(searchEngine.params, props.fixedParams);
+  let hasChangedInitParams = false;
   if (urlParams) {
     Object.keys(urlParams).forEach((param) => {
+      if (!urlParams[param])
+        return;
+      if (param.startsWith("f\\")) {
+        const field = param.substring(2);
+        searchEngine.params[field] = urlParams[param];
+        if (props.fixedParams?.[field] !== urlParams[param]) {
+          hasChangedInitParams = true;
+        }
+        return;
+      }
       if (param === "sort") {
         searchEngine.params.sort = urlParams.sort;
+        if (typeof urlParams.sort === "string" && props.resultMeta?.sort?.length === 1) {
+          const { field, order } = props.resultMeta.sort[0];
+          const fetchedSort = order ? field : `-${field}`;
+          if (fetchedSort === urlParams.sort)
+            return;
+        }
+        hasChangedInitParams = true;
         return;
       }
       if (param === "p") {
         const pageNumber = parseInt(String(urlParams.p), 10);
-        if (pageNumber >= 1)
+        if (pageNumber >= 1) {
           searchEngine.pageNumber.value = pageNumber;
-        return;
-      }
-      if (param.startsWith("f\\")) {
-        const field = param.substring(2);
-        searchEngine.params[field] = urlParams[param];
+          if (props.resultMeta?.limit) {
+            const { offset, limit } = props.resultMeta;
+            const fetchedPage = offset ? Math.ceil(offset / limit) : 1;
+            if (fetchedPage === pageNumber)
+              return;
+          }
+          hasChangedInitParams = true;
+        }
       }
     });
   }
   if (!searchEngine.wasFetched.value) {
-    if (props.products || props.resultMeta) {
+    if ((props.products || props.resultMeta) && !hasChangedInitParams) {
       searchEngine.setResult({
         result: props.products,
         meta: props.resultMeta
       });
     }
-    if (!props.products) {
+    if (!props.products || hasChangedInitParams) {
       searchEngine.fetch().catch(console.error);
     }
   }
@@ -5830,7 +5877,7 @@ const useBanner = (props) => {
   };
 };
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "Banner",
   props: {
     img: {},
@@ -5857,7 +5904,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$l(_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]
@@ -5925,15 +5972,15 @@ function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</div>`);
 }
-const _sfc_setup$k = _sfc_main$k.setup;
-_sfc_main$k.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/Banner.vue");
-  return _sfc_setup$k ? _sfc_setup$k(props, ctx) : void 0;
+  return _sfc_setup$l ? _sfc_setup$l(props, ctx) : void 0;
 };
-const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["ssrRender", _sfc_ssrRender$k]]);
+const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["ssrRender", _sfc_ssrRender$l]]);
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "HeroSlider",
   props: {
     autoplay: {},
@@ -5950,7 +5997,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$j(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$k(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_Carousel = resolveComponent("Carousel");
   const _component_CarouselControl = resolveComponent("CarouselControl");
   _push(`<section${ssrRenderAttrs(mergeProps({ class: "relative mx-auto mb-9 md:mb-12" }, _attrs))}>`);
@@ -6059,13 +6106,13 @@ function _sfc_ssrRender$j(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</section>`);
 }
-const _sfc_setup$j = _sfc_main$j.setup;
-_sfc_main$j.setup = (props, ctx) => {
+const _sfc_setup$k = _sfc_main$k.setup;
+_sfc_main$k.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/HeroSlider.vue");
-  return _sfc_setup$j ? _sfc_setup$j(props, ctx) : void 0;
+  return _sfc_setup$k ? _sfc_setup$k(props, ctx) : void 0;
 };
-const HeroSlider = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["ssrRender", _sfc_ssrRender$j]]);
+const HeroSlider = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["ssrRender", _sfc_ssrRender$k]]);
 
 const $$Astro$4 = createAstro("https://demo.ecomplus.app");
 const $$Hero = createComponent(async ($$result, $$props, $$slots) => {
@@ -6077,7 +6124,7 @@ const $$Hero = createComponent(async ($$result, $$props, $$slots) => {
   return renderTemplate`${heroSlider.slides.length > 0 && renderTemplate`${renderComponent($$result, "HeroSlider", HeroSlider, { ...heroSlider, "client:idle": true, "client:component-hydration": "idle", "client:component-path": "~/components/HeroSlider.vue", "client:component-export": "default" }, { "picture-0": ($$result2) => renderTemplate`${heroSlides[0] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-0", ...heroSlides[0], "index": 0 })}`}`, "picture-1": ($$result2) => renderTemplate`${heroSlides[1] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-1", ...heroSlides[1], "index": 1 })}`}`, "picture-2": ($$result2) => renderTemplate`${heroSlides[2] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-2", ...heroSlides[2], "index": 2 })}`}`, "picture-3": ($$result2) => renderTemplate`${heroSlides[3] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-3", ...heroSlides[3], "index": 3 })}`}`, "picture-4": ($$result2) => renderTemplate`${heroSlides[4] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-4", ...heroSlides[4], "index": 4 })}`}`, "picture-5": ($$result2) => renderTemplate`${heroSlides[5] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-5", ...heroSlides[5], "index": 5 })}`}`, "picture-6": ($$result2) => renderTemplate`${heroSlides[6] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-6", ...heroSlides[6], "index": 6 })}`}`, "picture-7": ($$result2) => renderTemplate`${heroSlides[7] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-7", ...heroSlides[7], "index": 7 })}`}`, "picture-8": ($$result2) => renderTemplate`${heroSlides[8] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-8", ...heroSlides[8], "index": 8 })}`}`, "picture-9": ($$result2) => renderTemplate`${heroSlides[9] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-9", ...heroSlides[9], "index": 9 })}`}` })}`}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/content/Hero.astro", void 0);
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "ContentClearfix",
   props: {
     html: {}
@@ -6091,16 +6138,16 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$i(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$j(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<article${ssrRenderAttrs(mergeProps({ class: "!max-w-full overflow-x-auto prose" }, _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$i = _sfc_main$i.setup;
-_sfc_main$i.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/lib/components/ContentClearfix.vue");
-  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
+  return _sfc_setup$j ? _sfc_setup$j(props, ctx) : void 0;
 };
-const ContentClearfix = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["ssrRender", _sfc_ssrRender$i]]);
+const ContentClearfix = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["ssrRender", _sfc_ssrRender$j]]);
 
 const $$Astro$3 = createAstro("https://demo.ecomplus.app");
 const $$BannersGrid = createComponent(async ($$result, $$props, $$slots) => {
@@ -6170,7 +6217,7 @@ const useBreadcrumbs = async (props = {}) => {
   };
 };
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "Breadcrumbs",
   props: {
     apiDoc: {},
@@ -6187,7 +6234,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$i(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<!--[-->`);
   if ($setup.breadcrumbs.length > 1) {
     _push(`<section class="ui-section-slim"><nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm"><ol class="text-base-600 flex items-center gap-1"><li><a href="/" class="hover:text-primary"><span class="sr-only">${ssrInterpolate("In\xEDcio")}</span><i class="i-home"></i></a></li><!--[-->`);
@@ -6211,13 +6258,13 @@ function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`<!--]-->`);
 }
-const _sfc_setup$h = _sfc_main$h.setup;
-_sfc_main$h.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/Breadcrumbs.vue");
-  return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
+  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
 };
-const Breadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["ssrRender", _sfc_ssrRender$h]]);
+const Breadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["ssrRender", _sfc_ssrRender$i]]);
 
 const emitGtagEvent = async (name, _params) => {
   return;
@@ -6498,7 +6545,7 @@ const usePrices = (props) => {
   };
 };
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Prices",
   props: {
     isBig: { type: Boolean },
@@ -6533,7 +6580,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$g(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$h(_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]
@@ -6663,15 +6710,15 @@ function _sfc_ssrRender$g(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</div>`);
 }
-const _sfc_setup$g = _sfc_main$g.setup;
-_sfc_main$g.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/Prices.vue");
-  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
+  return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
 };
-const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["ssrRender", _sfc_ssrRender$g]]);
+const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["ssrRender", _sfc_ssrRender$h]]);
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ProductCard",
   props: {
     product: {},
@@ -6706,7 +6753,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$f(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$g(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
   const _component_AImg = resolveComponent("AImg");
   _push(`<article${ssrRenderAttrs(mergeProps({
@@ -6849,15 +6896,15 @@ function _sfc_ssrRender$f(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _parent));
   _push(`</article>`);
 }
-const _sfc_setup$f = _sfc_main$f.setup;
-_sfc_main$f.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/ProductCard.vue");
-  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
+  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
 };
-const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["ssrRender", _sfc_ssrRender$f]]);
+const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["ssrRender", _sfc_ssrRender$g]]);
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ProductShelf",
   props: {
     isGrid: { type: Boolean },
@@ -6895,7 +6942,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$e(_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_CarouselControl = resolveComponent("CarouselControl");
   _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
@@ -7004,15 +7051,15 @@ function _sfc_ssrRender$e(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   ssrRenderSlot(_ctx.$slots, "append", {}, null, _push, _parent);
   _push(`</section>`);
 }
-const _sfc_setup$e = _sfc_main$e.setup;
-_sfc_main$e.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/ProductShelf.vue");
-  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
+  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
 };
-const ProductShelf = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["ssrRender", _sfc_ssrRender$e]]);
+const ProductShelf = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["ssrRender", _sfc_ssrRender$f]]);
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Collapse",
   props: {
     title: {}
@@ -7024,20 +7071,20 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$d(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$e(_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$d = _sfc_main$d.setup;
-_sfc_main$d.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/Collapse.vue");
-  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
+  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
 };
-const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["ssrRender", _sfc_ssrRender$d]]);
+const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["ssrRender", _sfc_ssrRender$e]]);
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "DocDescription",
   props: {
     apiDoc: { default: () => globalThis.$storefront.apiContext?.doc },
@@ -7052,7 +7099,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$d(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   if ($setup.html) {
     _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
     _push(ssrRenderComponent($setup["Collapse"], {
@@ -7075,15 +7122,15 @@ function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _push(`<!---->`);
   }
 }
-const _sfc_setup$c = _sfc_main$c.setup;
-_sfc_main$c.setup = (props, ctx) => {
+const _sfc_setup$d = _sfc_main$d.setup;
+_sfc_main$d.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/DocDescription.vue");
-  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
+  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
 };
-const DocDescription = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
+const DocDescription = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["ssrRender", _sfc_ssrRender$d]]);
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "DocBanners",
   props: {
     apiDoc: { default: () => globalThis.$storefront.apiContext?.doc },
@@ -7098,7 +7145,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$c(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_AImg = resolveComponent("AImg");
   if ($setup.pictures.length) {
     _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}><ul class="flex flex-wrap gap-4 lg:flex-nowrap"><!--[-->`);
@@ -7112,15 +7159,15 @@ function _sfc_ssrRender$b(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     _push(`<!---->`);
   }
 }
-const _sfc_setup$b = _sfc_main$b.setup;
-_sfc_main$b.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/DocBanners.vue");
-  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
+  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
 };
-const DocBanners = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
+const DocBanners = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "CheckoutLink",
   props: {
     to: { default: "cart" },
@@ -7175,20 +7222,20 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$b(_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$a = _sfc_main$a.setup;
-_sfc_main$a.setup = (props, ctx) => {
+const _sfc_setup$b = _sfc_main$b.setup;
+_sfc_main$b.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/CheckoutLink.vue");
-  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
+  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
 };
-const CheckoutLink = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
+const CheckoutLink = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
 
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "QuantitySelectorControl",
   props: {
     isMinus: { type: Boolean }
@@ -7205,7 +7252,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return __returned__;
   }
 });
-function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+function _sfc_ssrRender$a(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<button${ssrRenderAttrs(mergeProps({
     type: "button",
     class: "leading-12 h-12 w-10 text-xl enabled:text-primary enabled:hover:bg-primary-100/70 disabled:opacity-40",
@@ -7222,16 +7269,16 @@ function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</button>`);
 }
-const _sfc_setup$9 = _sfc_main$9.setup;
-_sfc_main$9.setup = (props, ctx) => {
+const _sfc_setup$a = _sfc_main$a.setup;
+_sfc_main$a.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/QuantitySelectorControl.vue");
-  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
+  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
 };
-const QuantitySelectorControl = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
+const QuantitySelectorControl = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
 
 const quantitySelectorKey = Symbol("quantitySelector");
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "QuantitySelector",
   props: {
     modelValue: { default: 1 },
@@ -7247,7 +7294,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const input = ref(null);
-    const inputId = `NInput${useId()}`;
+    const inputId = useId("NInput");
     const value = computed({
       get() {
         return props.modelValue;
@@ -7280,7 +7327,7 @@ 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(`<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>`);
@@ -7317,15 +7364,15 @@ function _sfc_ssrRender$8(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }, _push, _parent);
   _push(`</div></div>`);
 }
-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/QuantitySelector.vue");
-  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
+  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
 };
-const QuantitySelector = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
+const QuantitySelector = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ImagesGallery",
   props: {
     pictures: {}
@@ -7382,7 +7429,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) {
   const _component_Carousel = resolveComponent("Carousel");
   const _component_AImg = resolveComponent("AImg");
   const _component_CarouselControl = resolveComponent("CarouselControl");
@@ -7562,13 +7609,13 @@ function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   }
   _push(`</div></div>`);
 }
-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/components/ImagesGallery.vue");
-  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
+  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
 };
-const ImagesGallery = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
+const ImagesGallery = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
 
 const useSkuSelector = (props) => {
   const grids = shallowReactive(
@@ -7679,7 +7726,7 @@ const useSkuSelector = (props) => {
   };
 };
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "SkuSelector",
   props: {
     variations: {},
@@ -7708,7 +7755,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(_attrs)}><!--[-->`);
   ssrRenderList($setup.variationsGrids, (options, gridId) => {
     _push(`<div class="mt-3"><span class="text-base-700 text-sm font-medium">${ssrInterpolate($setup.getGridTitle(gridId))}: `);
@@ -7735,13 +7782,26 @@ function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   });
   _push(`<!--]--></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/components/SkuSelector.vue");
-  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
+};
+const SkuSelector = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["ssrRender", _sfc_ssrRender$7]]);
+
+const _sfc_main$6 = {};
+
+function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs) {
+  _push(`<div${ssrRenderAttrs(_attrs)}></div>`);
+}
+const _sfc_setup$6 = _sfc_main$6.setup;
+_sfc_main$6.setup = (props, ctx) => {
+  const ssrContext = useSSRContext()
+  ;(ssrContext.modules || (ssrContext.modules = new Set())).add("src/components/ShippingCalculator.vue");
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : undefined
 };
-const SkuSelector = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
+const ShippingCalculator = /*#__PURE__*/_export_sfc(_sfc_main$6, [['ssrRender',_sfc_ssrRender$6]]);
 
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ProductDetails",
@@ -7791,7 +7851,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return;
       addProductToCart(product, variationId.value ? variationId.value : void 0);
     };
-    const __returned__ = { props, product, title, isActive, quantity, params, hasSkuSelectionAlert, variationId, isSkuSelected, checkVariation, addToCart, CheckoutLink, QuantitySelector, Prices, ImagesGallery, SkuSelector };
+    const __returned__ = { props, product, title, isActive, quantity, params, hasSkuSelectionAlert, variationId, isSkuSelected, checkVariation, addToCart, CheckoutLink, QuantitySelector, Prices, ImagesGallery, SkuSelector, ShippingCalculator };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -7877,7 +7937,9 @@ function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
       }),
       _: 1
     }, _parent));
-    _push(`<button class="ui-btn-lg ui-btn-contrast grow"${ssrRenderAttr("data-tooltip", !$setup.isSkuSelected ? "Escolha os detalhes do produto para comprar" : null)}>${ssrInterpolate("Adicionar ao carrinho")}</button></div></div>`);
+    _push(`<button class="ui-btn-lg ui-btn-contrast grow"${ssrRenderAttr("data-tooltip", !$setup.isSkuSelected ? "Escolha os detalhes do produto para comprar" : null)}>${ssrInterpolate("Adicionar ao carrinho")}</button></div>`);
+    _push(ssrRenderComponent($setup["ShippingCalculator"], null, null, _parent));
+    _push(`</div>`);
   } else {
     _push(`<!---->`);
   }
@@ -8130,6 +8192,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "SearchShowcase",
   props: {
     term: {},
+    pageSize: {},
     fixedParams: {},
     products: {},
     resultMeta: {},
@@ -8221,7 +8284,10 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           }, {
             default: withCtx((_2, _push3, _parent3, _scopeId2) => {
               if (_push3) {
-                _push3(ssrRenderComponent($setup["ListboxButton"], { class: "ui-btn-sm ui-btn-secondary" }, {
+                _push3(ssrRenderComponent($setup["ListboxButton"], {
+                  id: _ctx.$useId("ss"),
+                  class: "ui-btn-sm ui-btn-secondary"
+                }, {
                   default: withCtx((_3, _push4, _parent4, _scopeId3) => {
                     if (_push4) {
                       _push4(`${ssrInterpolate("Ordenar")}`);
@@ -8366,12 +8432,15 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                 }, _parent3, _scopeId2));
               } else {
                 return [
-                  createVNode($setup["ListboxButton"], { class: "ui-btn-sm ui-btn-secondary" }, {
+                  createVNode($setup["ListboxButton"], {
+                    id: _ctx.$useId("ss"),
+                    class: "ui-btn-sm ui-btn-secondary"
+                  }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString("Ordenar"))
                     ]),
                     _: 1
-                  }),
+                  }, 8, ["id"]),
                   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" }, {
@@ -8455,12 +8524,15 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
                 class: "text-base-800 relative text-sm"
               }, {
                 default: withCtx(() => [
-                  createVNode($setup["ListboxButton"], { class: "ui-btn-sm ui-btn-secondary" }, {
+                  createVNode($setup["ListboxButton"], {
+                    id: _ctx.$useId("ss"),
+                    class: "ui-btn-sm ui-btn-secondary"
+                  }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString("Ordenar"))
                     ]),
                     _: 1
-                  }),
+                  }, 8, ["id"]),
                   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" }, {
@@ -8642,7 +8714,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_AImg = resolveComponent("AImg");
   if ($setup.title) {
-    _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}><div class="flex items-center gap-4">`);
+    _push(`<section${ssrRenderAttrs(mergeProps({ class: "bg-secondary-100 py-1" }, _attrs))}><article class="ui-section"><div class="prose mx-auto"><div class="not-prose flex items-center gap-4 md:justify-center">`);
     if ($setup.logo) {
       _push(ssrRenderComponent(_component_AImg, {
         picture: $setup.logo,
@@ -8652,13 +8724,13 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     } else {
       _push(`<!---->`);
     }
-    _push(`<h1 class="ui-title">${ssrInterpolate($setup.title)}</h1></div><div class="prose">`);
+    _push(`<h1 class="ui-title text-secondary-800 text-center">${ssrInterpolate($setup.title)}</h1></div>`);
     if ($setup.description) {
-      _push(`<p>${ssrInterpolate($setup.description)}</p>`);
+      _push(`<p class="${ssrRenderClass($setup.description.length < 120 && "md:text-center")}">${ssrInterpolate($setup.description)}</p>`);
     } else {
       _push(`<!---->`);
     }
-    _push(`</div></section>`);
+    _push(`</div></article></section>`);
   } else {
     _push(`<!---->`);
   }
@@ -8822,7 +8894,7 @@ const $$ = createComponent(async ($$result, $$props, $$slots) => {
     }
     loadError = err;
   }
-  return renderTemplate`<html${addAttribute(routeContext?.lang.replace("_", "-"), "lang")}> ${routeContext && renderTemplate`${renderComponent($$result, "Base", $$Base, {}, { "base-head": ($$result2) => renderTemplate`${renderComponent($$result2, "BaseHead", $$BaseHead, { "slot": "base-head" })}`, "default": ($$result2) => renderTemplate`${renderComponent($$result2, "PageHeader", $$PageHeader, {})}${renderComponent($$result2, "Main", $$Main, {})}${renderComponent($$result2, "PageFooter", $$PageFooter, {})}` })}`}${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}</html>`;
+  return renderTemplate`<html${addAttribute(routeContext?.lang.replace("_", "-"), "lang")}> ${routeContext && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${renderComponent($$result2, "Base", $$Base, {}, { "base-head": ($$result3) => renderTemplate`${renderComponent($$result3, "BaseHead", $$BaseHead, { "slot": "base-head" })}`, "default": ($$result3) => renderTemplate`${renderComponent($$result3, "PageHeader", $$PageHeader, {})}${renderComponent($$result3, "Main", $$Main, {})}${renderComponent($$result3, "PageFooter", $$PageFooter, {})}` })}` })}`}${loadError && renderTemplate`${renderComponent($$result, "Fragment", Fragment, {}, { "default": ($$result2) => renderTemplate`${unescapeHTML(loadError.responseHTML)}` })}`}</html>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro", void 0);
 const $$file = "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro";
 const $$url = "/[...slug]";
@@ -8835,4 +8907,4 @@ const ____slug_ = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty(
   url: $$url
 }, Symbol.toStringTag, { value: 'Module' }));
 
-export { $$BaseHead as $, CheckoutLink as C, FooterStamps as F, Pagination as P, QuantitySelector as Q, SearchEngine as S, _export_sfc as _, $$PageHeader as a, $$PageFooter as b, $$Base as c, $$Picture as d, i19shoppingCart as e, i19error as f, getConfig as g, i19errorMsg as h, i19myAccount as i, i19notFound as j, i19home as k, loadRouteContext as l, mod as m, createApp as n, clearAccents as o, getSearchUrl as p, ProductShelf as q, parseProduct as r, searchHistory as s, removeCartItem as t, Prices as u, freeShippingFromValue as v, shoppingCart as w, totalItems as x, ____slug_ as y };
+export { $$Base as $, CheckoutLink as C, FooterStamps as F, Pagination as P, QuantitySelector as Q, SearchEngine as S, _export_sfc as _, $$BaseHead as a, $$PageHeader as b, $$PageFooter as c, $$Picture as d, i19shoppingCart as e, i19error as f, getConfig as g, i19errorMsg as h, i19myAccount as i, i19notFound as j, i19home as k, loadRouteContext as l, mod as m, createApp as n, clearAccents as o, getSearchUrl as p, ProductShelf as q, parseProduct as r, searchHistory as s, removeCartItem as t, Prices as u, freeShippingFromValue as v, shoppingCart as w, totalItems as x, ____slug_ as y };