cloudcommerce 2.10.2 → 2.10.4

package/packages/storefront/dist/server/chunks/pages/__ByRpsTnC.mjs

@@ -0,0 +1,4630 @@
+import { e as createAstro, f as createComponent, r as renderTemplate, u as unescapeHTML, l as renderComponent, n as Fragment$1, m as maybeRenderHead, h as addAttribute } from '../astro_8KdHu_Gf.mjs';
+import 'kleur/colors';
+import api from '@cloudcommerce/api';
+import { _ as _export_sfc, u as useSharedData, a as useSectionPreview, i as i19relatedProducts, b as useStorage, c as i19brands, d as i19categories, e as i19upTo, f as i19aboveOf, s as scrollToEl, g as i19relevance, h as i19sales, j as i19lowestPrice, k as i19highestPrice, l as i19discount, m as i19releases, n as i19name, o as isScreenLg, $ as $$Picture, p as parseShippingPhrase, q as slugify, r as availableExtraDiscount, t as installmentsOption, v as discountOption, w as loyaltyPointsPrograms, x as addProductToCart, y as isMobile, z as useId, A as fetchModule, B as i19workingDays, C as i19days, D as i19untilTomorrow, E as i19pickUpToday, F as i19receiveToday, G as i19free, H as i19freeShipping, I as Drawer, J as getConfig, K as loadRouteContext, L as $$Base, M as $$BaseHead, N as $$PageHeader, O as $$PageFooter } from './404_BPSxJtl3.mjs';
+import 'clsx';
+import { computed, ref, watch, toRef, useSSRContext, defineComponent, mergeModels, useModel, resolveComponent, mergeProps, withCtx, createVNode, toDisplayString, createTextVNode, shallowReactive, reactive, renderSlot, resolveDynamicComponent, onMounted, withDirectives, vShow, openBlock, createBlock, Fragment, renderList, withAsyncContext, createCommentVNode, withModifiers, createSlots, inject, provide, vModelRadio } from 'vue';
+import { inStock, gridTitle, formatMoney, categoriesList, name, price, img, onPromotion, imgSizes, variationsGrids, specTextValue, specValueByText } from '@ecomplus/utils';
+import { useDebounceFn, useUrlSearchParams, useElementHover, createReusableTemplate } from '@vueuse/core';
+import { ssrRenderAttrs, ssrRenderComponent, ssrInterpolate, ssrRenderList, ssrRenderSlot, ssrRenderVNode, ssrRenderStyle, ssrRenderClass, ssrRenderAttr, ssrIncludeBooleanAttr, ssrLooseEqual } from 'vue/server-renderer';
+import config from '@cloudcommerce/config';
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
+import { micromark } from 'micromark';
+
+const usePagination = (props) => {
+  const totalPages = computed(() => {
+    if (props.totalPages)
+      return props.totalPages;
+    if (props.totalItems && props.pageSize) {
+      return Math.ceil(props.totalItems / props.pageSize);
+    }
+    return 1;
+  });
+  const pageNumber = computed(() => {
+    const currentPage = props.page || 1;
+    if (currentPage < 1)
+      return 1;
+    if (currentPage > totalPages.value)
+      return totalPages.value;
+    return currentPage;
+  });
+  const maxPages = computed(() => props.maxPages || 10);
+  const startPage = computed(() => {
+    if (totalPages.value <= maxPages.value)
+      return 1;
+    const maxPagesBeforeCurrent = Math.floor(maxPages.value / 2);
+    const maxPagesAfterCurrent = Math.ceil(maxPages.value / 2) - 1;
+    if (pageNumber.value <= maxPagesBeforeCurrent)
+      return 1;
+    if (pageNumber.value + maxPagesAfterCurrent >= totalPages.value) {
+      return totalPages.value - maxPages.value + 1;
+    }
+    return pageNumber.value - maxPagesBeforeCurrent;
+  });
+  const endPage = computed(() => {
+    if (totalPages.value <= maxPages.value)
+      return totalPages.value;
+    const maxPagesBeforeCurrent = Math.floor(maxPages.value / 2);
+    const maxPagesAfterCurrent = Math.ceil(maxPages.value / 2) - 1;
+    if (pageNumber.value <= maxPagesBeforeCurrent)
+      return maxPages.value;
+    if (pageNumber.value + maxPagesAfterCurrent >= totalPages.value) {
+      return totalPages.value;
+    }
+    return pageNumber.value + maxPagesAfterCurrent;
+  });
+  const pages = computed(() => {
+    return Array.from(Array(endPage.value + 1 - startPage.value).keys()).map((i) => startPage.value + i);
+  });
+  const baseUrl = ref("");
+  watch(toRef(props, "isUrlPath"), () => {
+    const { url } = globalThis.$storefront;
+    if (props.isUrlPath && !url.pathname.endsWith("/")) {
+      url.pathname += "/";
+    } else {
+      url.searchParams.delete("p");
+    }
+    baseUrl.value = `${url.pathname}${url.search}`;
+  }, {
+    immediate: true
+  });
+  const getPageLink = (pageN) => {
+    if (props.isUrlPath)
+      return `../${pageN}`;
+    return `?p=${pageN}`;
+  };
+  const pageLinks = computed(() => {
+    return pages.value.map((pageN) => baseUrl.value + getPageLink(pageN));
+  });
+  const prevPageLink = computed(() => {
+    if (pageNumber.value <= 1)
+      return null;
+    return baseUrl.value + getPageLink(pageNumber.value - 1);
+  });
+  const nextPageLink = computed(() => {
+    if (pageNumber.value >= totalPages.value)
+      return null;
+    return baseUrl.value + getPageLink(pageNumber.value + 1);
+  });
+  return {
+    totalPages,
+    startPage,
+    endPage,
+    pages,
+    pageLinks,
+    prevPageLink,
+    nextPageLink
+  };
+};
+
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "Pagination",
+  props: /* @__PURE__ */ mergeModels({
+    totalItems: {},
+    totalPages: {},
+    page: {},
+    pageSize: {},
+    maxPages: { default: 7 },
+    isUrlPath: { type: Boolean, default: false }
+  }, {
+    "page": { default: 1 },
+    "pageModifiers": {}
+  }),
+  emits: ["update:page"],
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const page = useModel(__props, "page");
+    const {
+      pages,
+      pageLinks,
+      prevPageLink,
+      nextPageLink
+    } = usePagination(props);
+    const __returned__ = { props, page, pages, pageLinks, prevPageLink, nextPageLink };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$n(_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, {
+    href: $setup.prevPageLink,
+    onClick: ($event) => $setup.prevPageLink && ($setup.page = $setup.page - 1),
+    class: ["mr-1 block min-w-9 rounded border px-3", $setup.prevPageLink ? "border-base-100 hover:bg-base-100" : "border-transparent text-base-500"]
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<i class="i-arrow-right rotate-180"${_scopeId}></i><span class="ml-1.5 hidden md:inline"${_scopeId}>${ssrInterpolate("Anterior")}</span>`);
+      } else {
+        return [
+          createVNode("i", { class: "i-arrow-right rotate-180" }),
+          createVNode("span", { class: "ml-1.5 hidden md:inline" }, toDisplayString("Anterior"))
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</li><!--[-->`);
+  ssrRenderList($setup.pages, (pageN, i) => {
+    _push(`<li>`);
+    _push(ssrRenderComponent(_component_ALink, {
+      href: pageN !== $setup.page ? $setup.pageLinks[i] : null,
+      onClick: ($event) => $setup.page = pageN,
+      class: ["block w-9 rounded border ring-black/10", pageN === $setup.page ? "bg-base-50 border-base-100 ring text-base-700" : "border-transparent hover:bg-base-100"]
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(`${ssrInterpolate(pageN)}`);
+        } else {
+          return [
+            createTextVNode(toDisplayString(pageN), 1)
+          ];
+        }
+      }),
+      _: 2
+    }, _parent));
+    _push(`</li>`);
+  });
+  _push(`<!--]--><li>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: $setup.nextPageLink,
+    onClick: ($event) => $setup.nextPageLink && ($setup.page = $setup.page + 1),
+    class: ["ml-1 block min-w-9 rounded border px-3", $setup.nextPageLink ? "border-base-100 hover:bg-base-100" : "border-transparent text-base-500"]
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<span class="mr-1.5 hidden md:inline"${_scopeId}>${ssrInterpolate("Pr\xF3ximo")}</span><i class="i-arrow-right"${_scopeId}></i>`);
+      } else {
+        return [
+          createVNode("span", { class: "mr-1.5 hidden md:inline" }, toDisplayString("Pr\xF3ximo")),
+          createVNode("i", { class: "i-arrow-right" })
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</li></ol>`);
+}
+const _sfc_setup$n = _sfc_main$n.setup;
+_sfc_main$n.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Pagination.vue");
+  return _sfc_setup$n ? _sfc_setup$n(props, ctx) : void 0;
+};
+const Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["ssrRender", _sfc_ssrRender$n]]);
+
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
+const $$Astro$6 = createAstro("https://demo.ecomplus.app");
+const $$SharedData = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$6, $$props, $$slots);
+  Astro2.self = $$SharedData;
+  const { getInlineClientJS } = await useSharedData(Astro2.props);
+  return renderTemplate(_a || (_a = __template(["<script async>", "<\/script>"])), unescapeHTML(getInlineClientJS()));
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/SharedData.astro", void 0);
+
+const useProductShelf = (props) => {
+  const title = ref(props.title || "");
+  const titleLink = ref(props.titleLink || "");
+  const isFetching = ref(false);
+  let fetching = null;
+  const fetchError = ref(null);
+  const products = shallowReactive(props.products || []);
+  useSectionPreview(props, { title, titleLink, products });
+  if (!props.products) {
+    isFetching.value = true;
+    fetching = (async () => {
+      const limit = props.limit || 12;
+      const offset = props.page ? (props.page - 1) * limit : 0;
+      let endpointQuery = `offset=${offset}&limit=${limit}`;
+      if (props.sort) {
+        endpointQuery += `&sort=${props.sort}`;
+      }
+      if (props.isRelatedProducts) {
+        const { apiContext } = globalThis.$storefront;
+        if (apiContext?.resource === "products") {
+          endpointQuery += `&like=${apiContext.doc._id}`;
+          if (!title.value && title.value !== null) {
+            title.value = i19relatedProducts;
+          }
+        }
+      } else {
+        let searchQuery = props.searchQuery || "";
+        let collection;
+        let productIds;
+        if (props.collectionId) {
+          try {
+            const { data } = await api.get(`collections/${props.collectionId}`);
+            collection = data;
+          } catch (err) {
+            console.error(err);
+            fetchError.value = err;
+          }
+          productIds = collection?.products;
+          if (!title.value && title.value !== null && collection?.name) {
+            title.value = collection?.name;
+          }
+        } else if (!searchQuery && props.orderedProductIds) {
+          productIds = props.orderedProductIds;
+        }
+        if (productIds?.length) {
+          searchQuery += `&_id=${productIds.slice(0, 60).join(",")}`;
+        }
+        endpointQuery += searchQuery;
+      }
+      try {
+        const { data } = await api.get(`search/v1?${endpointQuery}`);
+        if (props.isShuffle) {
+          let m = data.result.filter((item) => {
+            return item.available && inStock(item);
+          }).length;
+          let t;
+          let i;
+          while (m) {
+            i = Math.floor(Math.random() * m--);
+            t = data.result[m];
+            data.result[m] = data.result[i];
+            data.result[i] = t;
+          }
+        }
+        const { orderedProductIds } = props;
+        if (orderedProductIds) {
+          data.result.sort((a, b) => {
+            if (b.available && inStock(b)) {
+              if (!a.available || !inStock(a))
+                return 1;
+              const indexA = orderedProductIds.indexOf(a._id);
+              const indexB = orderedProductIds.indexOf(b._id);
+              if (indexA === -1 && indexB > -1)
+                return 1;
+              if (indexB === -1 && indexA > -1)
+                return -1;
+              return indexA - indexB;
+            }
+            if (a.available && inStock(a))
+              return -1;
+            return 0;
+          });
+        }
+        data.result.forEach((item) => products.push(item));
+      } catch (err) {
+        console.error(err);
+        fetchError.value = err;
+      }
+      isFetching.value = false;
+    })();
+  }
+  return {
+    title,
+    titleLink,
+    isFetching,
+    fetching,
+    fetchError,
+    products
+  };
+};
+
+const storageKey = "ecomSeachHistory";
+const searchHistory = useStorage(storageKey, []);
+for (let i = 0; i < searchHistory.length; i++) {
+  if (typeof searchHistory[i] !== "string") {
+    searchHistory.splice(i, 1);
+    i -= 1;
+  }
+}
+const search = async ({
+  term,
+  params,
+  fields,
+  url = "search/v1"
+}) => {
+  if (typeof term === "string") {
+    term = term.trim();
+    if (term.length < 2) {
+      return { data: { result: [], meta: null } };
+    }
+  }
+  const response = await api.get(url, {
+    fields,
+    params: !term ? params : {
+      ...params,
+      term
+    }
+  });
+  if (term && response.data.result.length) {
+    const termStr = term;
+    const completeTermIndex = searchHistory.findIndex((_term) => {
+      return _term.includes(termStr) && !_term.replace(termStr, "").includes(" ");
+    });
+    if (completeTermIndex > -1) {
+      const completeTerm = searchHistory[completeTermIndex];
+      searchHistory.splice(completeTermIndex, 1);
+      searchHistory.unshift(completeTerm);
+    } else {
+      const termIndex = searchHistory.findIndex((_term) => termStr.startsWith(_term));
+      if (termIndex > -1) {
+        searchHistory.splice(termIndex, 1);
+      }
+      searchHistory.unshift(term);
+    }
+    while (searchHistory.length > 20) {
+      searchHistory.pop();
+    }
+  }
+  return response;
+};
+class SearchEngine {
+  fields;
+  term = ref(null);
+  isWithCount = ref(true);
+  isWithBuckets = ref(true);
+  params = reactive({});
+  pageSize = ref(24);
+  pageNumber = ref(1);
+  #middlewares = [];
+  #isFetching = ref(false);
+  isFetching = computed(() => this.#isFetching.value);
+  #wasFetched = ref(false);
+  wasFetched = computed(() => this.#wasFetched.value);
+  #fetching = ref(null);
+  #fulfillFetching;
+  fetching = computed(() => this.#fetching.value);
+  #fetchError = ref(null);
+  fetchError = computed(() => this.#fetchError.value);
+  products = shallowReactive([]);
+  meta = shallowReactive({
+    offset: 0,
+    limit: 0,
+    fields: [],
+    sort: [],
+    query: {}
+  });
+  #search;
+  constructor({
+    fields,
+    debounce = 150
+  } = {}) {
+    this.fields = fields;
+    this.#search = useDebounceFn((opts) => {
+      this.#isFetching.value = true;
+      return search(opts);
+    }, debounce);
+    watch([this.term, this.params, this.pageSize], () => {
+      if (this.wasFetched.value) {
+        this.pageNumber.value = 1;
+        this.#wasFetched.value = false;
+      }
+    });
+    watch(this.pageNumber, () => {
+      this.#wasFetched.value = false;
+    });
+  }
+  async fetch(term) {
+    if (term !== void 0 && term !== this.term.value) {
+      this.term.value = term;
+      this.pageNumber.value = 1;
+    }
+    const limit = this.pageSize.value;
+    const offset = limit * (this.pageNumber.value - 1);
+    if (!this.#fetching.value) {
+      this.#fetching.value = new Promise((resolve) => {
+        this.#fulfillFetching = resolve;
+      });
+    }
+    let response;
+    const searchOptions = {
+      term: this.term.value,
+      params: {
+        ...this.params,
+        limit,
+        offset,
+        count: this.isWithCount.value || void 0,
+        buckets: this.isWithBuckets.value || void 0
+      },
+      fields: this.fields
+    };
+    try {
+      for (let i = 0; i < this.#middlewares.length; i++) {
+        this.#middlewares[i](searchOptions);
+      }
+      response = await this.#search(searchOptions);
+    } catch (err) {
+      if (this.#fulfillFetching) {
+        this.#fetchError.value = err;
+        this.#fulfillFetching();
+      }
+      throw err;
+    }
+    if (response) {
+      this.#isFetching.value = false;
+      this.#wasFetched.value = true;
+      const { data } = response;
+      if (data.meta) {
+        this.setResult(data);
+      }
+      if (this.#fulfillFetching) {
+        this.#fulfillFetching();
+      }
+    }
+  }
+  addMiddleware(cb) {
+    this.#middlewares.push(cb);
+  }
+  setResult(data) {
+    if (data.meta) {
+      Object.assign(this.meta, data.meta);
+    }
+    if (data.result) {
+      this.products.splice(0);
+      data.result.forEach((item) => this.products.push(item));
+    }
+    if (data.meta && data.result) {
+      setTimeout(() => {
+        this.#wasFetched.value = true;
+      }, 9);
+    }
+  }
+}
+
+const useSearchActiveFilters = ({ searchEngine, fixedParams }) => {
+  const activeFilters = computed(() => {
+    const filters = {};
+    Object.keys(searchEngine.params).forEach((param) => {
+      if (fixedParams?.[param])
+        return;
+      const val = searchEngine.params[param];
+      if (val === void 0)
+        return;
+      switch (param) {
+        case "sort":
+        case "term":
+        case "limit":
+        case "offset":
+        case "count":
+        case "buckets":
+        case "fields":
+          return;
+      }
+      filters[param] = val;
+    });
+    return filters;
+  });
+  const filtersCount = computed(() => {
+    const paramKeys = Object.keys(activeFilters.value);
+    const fields = [];
+    paramKeys.forEach((key) => {
+      const field = key.replace(/[^\w.]/g, "");
+      if (field === "specs" && Array.isArray(activeFilters.value[key])) {
+        activeFilters.value[key].forEach((specAndVal) => {
+          const [spec] = specAndVal.split(":");
+          const specField = `specs.${spec}`;
+          if (!fields.includes(specField)) {
+            fields.push(specField);
+          }
+        });
+        return;
+      }
+      if (!fields.includes(field)) {
+        fields.push(field);
+      }
+    });
+    return fields.length;
+  });
+  return { activeFilters, filtersCount };
+};
+const useSearchFilters = (props) => {
+  const { searchEngine, fixedParams } = props;
+  const resultMeta = computed(() => searchEngine.meta);
+  const resultBuckets = computed(() => searchEngine.meta.buckets);
+  const { activeFilters, filtersCount } = useSearchActiveFilters(props);
+  watch(searchEngine.params, () => {
+    searchEngine.fetch();
+  });
+  let _lastParamChanged = null;
+  const clearFilters = () => {
+    Object.keys(searchEngine.params).forEach((param) => {
+      if (fixedParams?.[param])
+        return;
+      delete searchEngine.params[param];
+    });
+    _lastParamChanged = null;
+  };
+  const getPriceRangeKey = ({ min, max }) => {
+    return `${min || null}/${max || null}`;
+  };
+  const currentPriceRange = computed(() => {
+    const { params } = searchEngine;
+    return {
+      min: Number(params["price>"]),
+      max: Number(params["price<"])
+    };
+  });
+  const priceRanges = ref([]);
+  const _updatePriceRanges = useDebounceFn(() => {
+    priceRanges.value.splice(0);
+    resultBuckets.value?.prices?.forEach((priceRange) => {
+      if (priceRange.min)
+        priceRange.min = Math.round(priceRange.min * 100) / 100;
+      if (priceRange.max)
+        priceRange.max = Math.round(priceRange.max * 100) / 100;
+      priceRanges.value.push({
+        range: priceRange,
+        key: getPriceRangeKey(priceRange)
+      });
+    });
+    if (!Number.isNaN(currentPriceRange.value.min)) {
+      const checkedPriceRange = priceRanges.value.find(({ range }) => {
+        return range.min === currentPriceRange.value.min && range.max === currentPriceRange.value.max;
+      });
+      if (!checkedPriceRange) {
+        priceRanges.value.unshift({
+          range: {
+            ...currentPriceRange.value,
+            count: resultMeta.value.count || 0,
+            avg: null
+          },
+          key: getPriceRangeKey(currentPriceRange.value)
+        });
+      }
+    }
+  }, 50);
+  _updatePriceRanges();
+  const priceRangeKey = ref(getPriceRangeKey(currentPriceRange.value));
+  watch(priceRangeKey, () => {
+    _lastParamChanged = "price";
+    const priceRange = priceRanges.value.find(({ range }) => {
+      return getPriceRangeKey(range) === priceRangeKey.value;
+    });
+    if (priceRange) {
+      const { min, max } = priceRange.range;
+      if (min) {
+        searchEngine.params["price>"] = min;
+      } else {
+        delete searchEngine.params["price>"];
+      }
+      if (max) {
+        searchEngine.params["price<"] = max;
+      } else {
+        delete searchEngine.params["price<"];
+      }
+      return;
+    }
+    delete searchEngine.params["price>"];
+    delete searchEngine.params["price<"];
+  });
+  const getPriceRangeLabel = ({ min, max }) => {
+    if (min && max) {
+      if (max === min) {
+        return formatMoney(max);
+      }
+      return `${formatMoney(min)} ${i19upTo.toLowerCase()} ${formatMoney(max)}`;
+    }
+    if (!min && max) {
+      return `${i19upTo} ${formatMoney(max)}`;
+    }
+    return `${i19aboveOf} ${formatMoney(min || 0)}`;
+  };
+  const filterOptions = ref([]);
+  const _updateFilterOptions = useDebounceFn(() => {
+    for (let i = 0; i < filterOptions.value.length; i++) {
+      const { field } = filterOptions.value[i];
+      if (field !== _lastParamChanged) {
+        filterOptions.value.splice(i, 1);
+        i -= 1;
+      }
+    }
+    const buckets = resultBuckets.value;
+    if (buckets) {
+      [["brands", i19brands], ["categories", i19categories]].forEach(([resource, title]) => {
+        const field = `${resource}.name`;
+        if (buckets[field] && _lastParamChanged !== field) {
+          filterOptions.value.push({
+            title,
+            options: buckets[field],
+            field
+          });
+        }
+      });
+      if (buckets.specs) {
+        const { grids } = globalThis.$storefront.data;
+        Object.keys(buckets.specs).forEach((specAndVal) => {
+          const [spec, value] = specAndVal.split(":");
+          if (value) {
+            const field = `specs.${spec}`;
+            if (_lastParamChanged === field)
+              return;
+            const title = gridTitle(spec, grids || []);
+            let filterOption = filterOptions.value.find((_filterOption) => {
+              return _filterOption.field === field;
+            });
+            if (!filterOption) {
+              filterOption = { title, options: {}, field };
+              filterOptions.value.push(filterOption);
+            }
+            filterOption.options[value] = buckets.specs[specAndVal];
+          }
+        });
+      }
+    }
+  }, 50);
+  _updateFilterOptions();
+  const parseSpecsField = (field, value) => {
+    const [, spec] = field.split(".");
+    return ["specs,", `${spec}:${value}`];
+  };
+  const checkFilterOption = (field, value) => {
+    if (field.startsWith("specs.")) {
+      [field, value] = parseSpecsField(field, value);
+    }
+    const fieldParams = activeFilters.value[field];
+    if (fieldParams === value)
+      return true;
+    if (Array.isArray(fieldParams) && fieldParams.includes(value))
+      return true;
+    return false;
+  };
+  const toggleFilterOption = (field, value) => {
+    _lastParamChanged = field;
+    console.log({ _lastParamChanged });
+    if (field.startsWith("specs.")) {
+      [field, value] = parseSpecsField(field, value);
+    }
+    const isToActivate = !checkFilterOption(field, value);
+    let fieldParams = searchEngine.params[field];
+    if (!Array.isArray(fieldParams)) {
+      fieldParams = [];
+      searchEngine.params[field] = fieldParams;
+    }
+    if (isToActivate) {
+      fieldParams.push(value);
+    } else {
+      for (let i = 0; i < fieldParams.length; i++) {
+        if (fieldParams[i] === value) {
+          fieldParams.splice(i, 1);
+          break;
+        }
+      }
+    }
+  };
+  watch(resultBuckets, () => {
+    if (_lastParamChanged !== "price") {
+      _updatePriceRanges();
+    }
+    _updateFilterOptions();
+  });
+  return {
+    resultMeta,
+    resultBuckets,
+    activeFilters,
+    filtersCount,
+    clearFilters,
+    getPriceRangeKey,
+    priceRanges,
+    priceRangeKey,
+    getPriceRangeLabel,
+    filterOptions,
+    checkFilterOption,
+    toggleFilterOption
+  };
+};
+
+const useSearchShowcase = (props) => {
+  let { term } = props;
+  const canUseUrlParams = props.canUseUrlParams !== false;
+  const urlParams = canUseUrlParams ? useUrlSearchParams("history") : null;
+  if (props.ssrError && false) {
+    console.error(new Error(`SSR search error: ${props.ssrError}`));
+    if (window.location.pathname.startsWith("/s/")) {
+      window.location.href = `/s?q=${encodeURIComponent(term || "")}`;
+    }
+  }
+  const products = shallowReactive(props.products || []);
+  const searchEngine = props.searchEngine || new SearchEngine({ debounce: 50 });
+  if (term === void 0 && false) {
+    term = new URLSearchParams(window.location.search).get("q") || null;
+  }
+  if (term !== void 0) {
+    searchEngine.term.value = term;
+  }
+  if (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) {
+          searchEngine.pageNumber.value = pageNumber;
+          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) && !hasChangedInitParams) {
+      searchEngine.setResult({
+        result: props.products,
+        meta: props.resultMeta
+      });
+    }
+    if (!props.products || hasChangedInitParams) {
+      searchEngine.fetch().catch(console.error);
+    }
+  }
+  searchEngine.isWithCount.value = true;
+  searchEngine.isWithBuckets.value = true;
+  const resultMeta = ref({
+    count: 0,
+    ...props.resultMeta || searchEngine.meta
+  });
+  watch(searchEngine.products, () => {
+    products.splice(0);
+    searchEngine.products.forEach((item) => products.push(item));
+    resultMeta.value = {
+      count: 0,
+      ...searchEngine.meta
+    };
+  });
+  const totalPages = computed(() => {
+    const { count } = searchEngine.meta;
+    if (!count || products.length < 2)
+      return 1;
+    return Math.ceil(count / searchEngine.pageSize.value);
+  });
+  watch(searchEngine.pageNumber, (pageNumber) => {
+    if (urlParams) {
+      urlParams.p = `${pageNumber}`;
+    }
+    searchEngine.fetch();
+  });
+  const startWatchingFetch = () => {
+    watch(searchEngine.isFetching, (isFetching) => {
+      const el = props.showcase?.value;
+      if (!isFetching && el) {
+        setTimeout(() => {
+          scrollToEl(el, isScreenLg ? -25 : 0);
+        }, 50);
+      }
+    });
+  };
+  if (searchEngine.wasFetched.value) {
+    startWatchingFetch();
+  } else {
+    watch(searchEngine.wasFetched, startWatchingFetch, { once: true });
+  }
+  const { activeFilters, filtersCount } = useSearchActiveFilters({
+    searchEngine,
+    fixedParams: props.fixedParams
+  });
+  if (urlParams) {
+    watch(activeFilters, (params) => {
+      if (urlParams) {
+        Object.keys(urlParams).forEach((param) => {
+          if (param.startsWith("f\\"))
+            delete urlParams[param];
+        });
+      }
+      Object.keys(params).forEach((param) => {
+        const val = params[param];
+        if (typeof val === "string" || typeof val === "number") {
+          urlParams[`f\\${param}`] = `${val}`;
+          return;
+        }
+        if (Array.isArray(val) && typeof val[0] === "string") {
+          urlParams[`f\\${param}`] = val;
+        }
+      });
+    });
+  }
+  const sortOptions = [
+    {
+      value: null,
+      label: i19relevance
+    },
+    {
+      value: "-sales",
+      label: i19sales
+    },
+    {
+      value: "price",
+      label: i19lowestPrice
+    },
+    {
+      value: "-price",
+      label: i19highestPrice
+    },
+    {
+      value: "-price_discount",
+      label: i19discount
+    },
+    {
+      value: "-created_at",
+      label: i19releases
+    },
+    {
+      value: "name",
+      label: i19name
+    }
+  ];
+  const sortOption = ref(null);
+  watch(sortOption, () => {
+    searchEngine.params.sort = sortOption.value || void 0;
+    searchEngine.fetch();
+  });
+  if (urlParams) {
+    if (typeof urlParams.sort === "string" && urlParams.sort) {
+      sortOption.value = urlParams.sort;
+    }
+    watch(searchEngine.params, (params) => {
+      delete urlParams.sort;
+      if (params.sort)
+        urlParams.sort = String(params.sort);
+    });
+  }
+  return {
+    searchEngine,
+    fetching: searchEngine.fetching.value,
+    isFetching: searchEngine.isFetching,
+    products,
+    resultMeta,
+    totalPages,
+    activeFilters,
+    filtersCount,
+    sortOptions,
+    sortOption
+  };
+};
+
+const now = Date.now();
+const parseBanners = (banners) => {
+  const validBanners = [];
+  banners.forEach(({
+    startsAt,
+    endsAt,
+    ...bannerProps
+  }) => {
+    if (startsAt && new Date(startsAt).getTime() < now)
+      return;
+    if (endsAt && new Date(endsAt).getTime() > now)
+      return;
+    validBanners.push(bannerProps);
+  });
+  return validBanners;
+};
+const usePageHero = async ({ routeContext }) => {
+  const { cmsContent } = routeContext;
+  const heroSlider = { slides: [] };
+  const heroContent = cmsContent?.hero;
+  if (heroContent) {
+    heroSlider.autoplay = heroContent.autoplay;
+    if (heroContent.slides) {
+      heroSlider.slides = parseBanners(heroContent.slides);
+    }
+  }
+  return { heroSlider };
+};
+const usePageSections = async ({ routeContext, handleCustomSection, searchEngine }) => {
+  const { cmsContent } = routeContext;
+  let sectionsContent = cmsContent?.sections;
+  if (cmsContent?.markdown && !sectionsContent?.find(({ type }) => type === "content-entry")) {
+    if (!sectionsContent)
+      sectionsContent = [];
+    sectionsContent.push({ type: "content-entry" });
+  }
+  const sections = [];
+  if (sectionsContent) {
+    await Promise.all(sectionsContent.map(async ({ type, ...sectionContent }, index) => {
+      if (type === "product-shelf" || type === "related-products") {
+        const {
+          collectionIdAndInfo,
+          isHeadless,
+          isShuffle,
+          ...rest
+        } = sectionContent;
+        let { sort, title } = sectionContent;
+        switch (sort) {
+          case "offers":
+            sort = "-price_discount";
+            break;
+          case "news":
+            sort = "-_id";
+            break;
+          case "lowest_price":
+            sort = "price";
+            break;
+          case "highest_price":
+            sort = "-price";
+            break;
+        }
+        let collectionId = null;
+        let searchQuery;
+        let titleLink = sectionContent.titleLink;
+        if (collectionIdAndInfo) {
+          const [_id, resource, name, path] = collectionIdAndInfo.split(":");
+          if (!resource || resource === "collection") {
+            collectionId = _id;
+          } else if (resource === "categories") {
+            searchQuery = `&categories._id=${_id}`;
+          } else if (resource === "brands") {
+            searchQuery = `&brands._id=${_id}`;
+          }
+          if (!title && title !== null && name)
+            title = name;
+          if (!titleLink)
+            titleLink = path;
+        }
+        const props = {
+          ...rest,
+          collectionId,
+          searchQuery,
+          sort,
+          title: isHeadless ? null : title,
+          titleLink,
+          isShuffle,
+          isRelatedProducts: type === "related-products"
+        };
+        const {
+          fetching,
+          products,
+          title: { value: finalTitle },
+          titleLink: { value: finalTitleLink }
+        } = useProductShelf(props);
+        await fetching;
+        sections[index] = {
+          type,
+          props: {
+            ...props,
+            title: finalTitle,
+            titleLink: finalTitleLink,
+            products
+          }
+        };
+        return;
+      }
+      if (type === "search-showcase" || type === "context-showcase") {
+        const props = { ...sectionContent };
+        if (type === "context-showcase") {
+          if (routeContext.fetchingApiContext) {
+            await routeContext.fetchingApiContext;
+          }
+          const { resource, doc } = routeContext.apiContext;
+          if (resource === "categories" || resource === "brands") {
+            const params = { [`${resource}.name`]: [doc.name] };
+            if (resource === "categories") {
+              const { value: categories } = await useSharedData({ field: "categories" });
+              categories?.forEach(({ name, parent }) => {
+                if (name && parent && (parent._id === doc._id || parent.slug === doc.slug)) {
+                  params[`categories.name`].push(name);
+                }
+              });
+            }
+            props.fixedParams = params;
+          } else if (resource === "collections") {
+            const { products } = doc;
+            if (products?.length) {
+              props.fixedParams = { _id: products };
+            }
+          }
+        } else if (routeContext.searchPageTerm !== void 0) {
+          props.term = routeContext.searchPageTerm || null;
+        }
+        if (props.term !== void 0 || props.fixedParams) {
+          const {
+            searchEngine: resultSearchEngine,
+            fetching
+          } = useSearchShowcase({ ...props, searchEngine });
+          await fetching;
+          props.products = resultSearchEngine.products;
+          props.resultMeta = resultSearchEngine.meta;
+          props.ssrError = resultSearchEngine.fetchError.value?.message;
+        }
+        sections[index] = { type, props };
+        return;
+      }
+      switch (type) {
+        case "banners-grid":
+          sections[index] = {
+            type,
+            props: {
+              banners: parseBanners(sectionContent.banners || [])
+            }
+          };
+          return;
+        case "custom-html":
+          sections[index] = {
+            type,
+            props: { html: sectionContent.html || "" }
+          };
+          return;
+        case "content-entry":
+          sections[index] = {
+            type,
+            props: {
+              title: sectionContent.title || cmsContent?.title || "",
+              markdown: sectionContent.markdown || cmsContent?.markdown || ""
+            }
+          };
+          return;
+        case "breadcrumbs":
+        case "product-details":
+        case "doc-description":
+        case "doc-banners":
+        case "product-specifications":
+        case "page-title":
+          sections[index] = {
+            type,
+            props: sectionContent
+          };
+          return;
+      }
+      if (typeof handleCustomSection === "function") {
+        const { props } = await handleCustomSection(
+          type,
+          sectionContent
+        );
+        sections[index] = { type, props };
+      }
+    }));
+  }
+  return {
+    sections
+  };
+};
+
+const $$Astro$5 = createAstro("https://demo.ecomplus.app");
+const $$BannerPictures = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$5, $$props, $$slots);
+  Astro2.self = $$BannerPictures;
+  const {
+    img,
+    alt,
+    mobileImg,
+    title,
+    subtitle,
+    buttonText,
+    index,
+    class: className = "max-w-screen-sm sm:max-w-[828px] md:max-w-screen-2xl",
+    mobileClass = "max-w-screen-sm sm:max-w-screen-lg"
+  } = Astro2.props;
+  const hasHeader = title || subtitle || buttonText;
+  let { widths, mobileWidths } = Astro2.props;
+  if (!widths?.length) {
+    if (mobileImg) {
+      widths = [1536, 2048];
+    } else {
+      widths = [640, 828, 1536, 2048];
+      if (hasHeader) {
+        widths = widths.map((w) => w / 2);
+      }
+    }
+  }
+  if (!mobileWidths?.length) {
+    mobileWidths = [640, 1024];
+  }
+  return renderTemplate`${img && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": img, "alt": alt || "", "widths": widths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `${mobileImg ? "hidden md:block " : ""}mx-auto
+    text-sm text-opacity-70 ${className}` })}`}
+${mobileImg && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": mobileImg, "alt": alt || "", "widths": mobileWidths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `mx-auto text-sm text-opacity-70 md:hidden ${mobileClass}` })}`}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/BannerPictures.astro", void 0);
+
+const useBanner = (props) => {
+  const parsedTitle = computed(() => {
+    return props.title ? parseShippingPhrase(props.title).value : "";
+  });
+  const parsedSubtitle = computed(() => {
+    return props.subtitle ? parseShippingPhrase(props.subtitle).value : "";
+  });
+  const parsedButtonText = computed(() => {
+    return props.buttonText ? parseShippingPhrase(props.buttonText).value : "";
+  });
+  const hasHeader = computed(() => {
+    return Boolean(parsedTitle.value || parsedSubtitle.value || parsedButtonText.value);
+  });
+  return {
+    parsedTitle,
+    parsedSubtitle,
+    parsedButtonText,
+    hasHeader
+  };
+};
+
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  __name: "Banner",
+  props: {
+    img: {},
+    alt: {},
+    mobileImg: {},
+    href: {},
+    title: {},
+    subtitle: {},
+    buttonLink: {},
+    buttonText: {},
+    headingTag: { default: "h3" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      hasHeader,
+      parsedTitle,
+      parsedSubtitle,
+      parsedButtonText
+    } = useBanner(props);
+    const __returned__ = { props, hasHeader, parsedTitle, parsedSubtitle, parsedButtonText };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$m(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ALink = resolveComponent("ALink");
+  _push(`<div${ssrRenderAttrs(mergeProps({
+    class: ["mx-auto overflow-x-hidden", $setup.hasHeader ? "grid grid-cols-1 sm:grid-cols-2 items-center" : null]
+  }, _attrs))}>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: $props.href,
+    prefetch: "visible",
+    class: $setup.hasHeader ? "sm:order-last [&_img]:max-w-full sm:[&_img]:max-w-none [&_img]:aspect-video sm:[&_img]:aspect-[2.5] [&_img]:object-cover" : "[&_img]:max-w-full"
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "picture", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "picture")
+        ];
+      }
+    }),
+    _: 3
+  }, _parent));
+  if ($setup.hasHeader) {
+    _push(`<div class="mb-3 p-12 sm:mb-0 xl:ps-32">`);
+    if ($setup.parsedTitle) {
+      ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.headingTag), { class: "mt-1 ui-title" }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate($setup.parsedTitle)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString($setup.parsedTitle), 1)
+            ];
+          }
+        }),
+        _: 1
+      }), _parent);
+    } else {
+      _push(`<!---->`);
+    }
+    if ($setup.parsedSubtitle) {
+      _push(`<p class="mt-4 text-lg md:mt-6">${ssrInterpolate($setup.parsedSubtitle)}</p>`);
+    } else {
+      _push(`<!---->`);
+    }
+    if ($setup.parsedButtonText) {
+      _push(ssrRenderComponent(_component_ALink, {
+        href: $props.buttonLink,
+        prefetch: $props.href ? "hover" : "visible",
+        class: "mt-7 min-w-[150px] ui-btn-lg ui-btn-contrast md:mt-10"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate($setup.parsedButtonText)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString($setup.parsedButtonText), 1)
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div>`);
+}
+const _sfc_setup$m = _sfc_main$m.setup;
+_sfc_main$m.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Banner.vue");
+  return _sfc_setup$m ? _sfc_setup$m(props, ctx) : void 0;
+};
+const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["ssrRender", _sfc_ssrRender$m]]);
+
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "HeroSlider",
+  props: {
+    autoplay: {},
+    slides: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const isMounted = ref(false);
+    onMounted(() => {
+      isMounted.value = true;
+    });
+    const __returned__ = { isMounted, Banner };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$l(_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))}>`);
+  _push(ssrRenderComponent(_component_Carousel, {
+    autoplay: $props.autoplay,
+    class: "secondary [&>*]:items-center"
+  }, {
+    controls: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div style="${ssrRenderStyle($props.slides.length > 1 ? null : { display: "none" })}" class="absolute bottom-5 right-5 z-10 flex w-screen items-center justify-end xl:left-1/2 xl:right-auto xl:-ms-[640px] xl:max-w-screen-xl"${_scopeId}><div class="${ssrRenderClass([$setup.isMounted ? "opacity-100" : "opacity-20 [&>*]:cursor-wait", "text-primary relative h-10 w-20 rounded-full bg-white/50 shadow-sm ring-1 ring-black/5 transition-opacity"])}"${_scopeId}>`);
+        _push2(ssrRenderComponent(_component_CarouselControl, {
+          class: "hover:bg-primary/10 size-10 rounded-full",
+          "is-prev": ""
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`<i class="i-arrow-right rotate-180"${_scopeId2}></i>`);
+            } else {
+              return [
+                createVNode("i", { class: "i-arrow-right rotate-180" })
+              ];
+            }
+          }),
+          _: 1
+        }, _parent2, _scopeId));
+        _push2(ssrRenderComponent(_component_CarouselControl, { class: "hover:bg-primary/10 size-10 rounded-full" }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`<i class="i-arrow-right"${_scopeId2}></i>`);
+            } else {
+              return [
+                createVNode("i", { class: "i-arrow-right" })
+              ];
+            }
+          }),
+          _: 1
+        }, _parent2, _scopeId));
+        _push2(`</div></div>`);
+      } else {
+        return [
+          withDirectives(createVNode("div", { class: "absolute bottom-5 right-5 z-10 flex w-screen items-center justify-end xl:left-1/2 xl:right-auto xl:-ms-[640px] xl:max-w-screen-xl" }, [
+            createVNode("div", {
+              class: ["text-primary relative h-10 w-20 rounded-full bg-white/50 shadow-sm ring-1 ring-black/5 transition-opacity", $setup.isMounted ? "opacity-100" : "opacity-20 [&>*]:cursor-wait"]
+            }, [
+              createVNode(_component_CarouselControl, {
+                class: "hover:bg-primary/10 size-10 rounded-full",
+                "is-prev": ""
+              }, {
+                default: withCtx(() => [
+                  createVNode("i", { class: "i-arrow-right rotate-180" })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CarouselControl, { class: "hover:bg-primary/10 size-10 rounded-full" }, {
+                default: withCtx(() => [
+                  createVNode("i", { class: "i-arrow-right" })
+                ]),
+                _: 1
+              })
+            ], 2)
+          ], 512), [
+            [vShow, $props.slides.length > 1]
+          ])
+        ];
+      }
+    }),
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<!--[-->`);
+        ssrRenderList($props.slides, (slide, i) => {
+          _push2(`<li class="shrink-0 basis-full"${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["Banner"], mergeProps({ ...slide, headingTag: i === 0 ? "h2" : "h3" }, { class: "w-screen max-w-screen-2xl" }), {
+            picture: withCtx((_2, _push3, _parent3, _scopeId2) => {
+              if (_push3) {
+                ssrRenderSlot(_ctx.$slots, `picture-${i}`, {}, null, _push3, _parent3, _scopeId2);
+              } else {
+                return [
+                  renderSlot(_ctx.$slots, `picture-${i}`)
+                ];
+              }
+            }),
+            _: 2
+          }, _parent2, _scopeId));
+          _push2(`</li>`);
+        });
+        _push2(`<!--]-->`);
+      } else {
+        return [
+          (openBlock(true), createBlock(Fragment, null, renderList($props.slides, (slide, i) => {
+            return openBlock(), createBlock("li", {
+              key: i,
+              class: "shrink-0 basis-full"
+            }, [
+              createVNode($setup["Banner"], mergeProps({ ...slide, headingTag: i === 0 ? "h2" : "h3" }, { class: "w-screen max-w-screen-2xl" }), {
+                picture: withCtx(() => [
+                  renderSlot(_ctx.$slots, `picture-${i}`)
+                ]),
+                _: 2
+              }, 1040)
+            ]);
+          }), 128))
+        ];
+      }
+    }),
+    _: 3
+  }, _parent));
+  _push(`</section>`);
+}
+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/HeroSlider.vue");
+  return _sfc_setup$l ? _sfc_setup$l(props, ctx) : void 0;
+};
+const HeroSlider = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["ssrRender", _sfc_ssrRender$l]]);
+
+const $$Astro$4 = createAstro("https://demo.ecomplus.app");
+const $$Hero = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
+  Astro2.self = $$Hero;
+  const { routeContext } = Astro2.locals;
+  const { heroSlider } = await usePageHero({ routeContext });
+  const heroSlides = heroSlider.slides;
+  return renderTemplate`${heroSlider.slides.length > 0 && renderTemplate`${renderComponent($$result, "Fragment", Fragment$1, {}, { "default": ($$result2) => renderTemplate`
+  ${renderComponent($$result2, "HeroSlider", HeroSlider, { ...heroSlider, "client:sf": "lazy", "client:component-hydration": "sf", "client:component-path": "~/components/HeroSlider.vue", "client:component-export": "default" }, { "picture-0": ($$result3) => renderTemplate`${heroSlides[0] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-0", ...heroSlides[0], "index": 0 })}`}`, "picture-1": ($$result3) => renderTemplate`${heroSlides[1] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-1", ...heroSlides[1], "index": 1 })}`}`, "picture-2": ($$result3) => renderTemplate`${heroSlides[2] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-2", ...heroSlides[2], "index": 2 })}`}`, "picture-3": ($$result3) => renderTemplate`${heroSlides[3] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-3", ...heroSlides[3], "index": 3 })}`}`, "picture-4": ($$result3) => renderTemplate`${heroSlides[4] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-4", ...heroSlides[4], "index": 4 })}`}`, "picture-5": ($$result3) => renderTemplate`${heroSlides[5] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-5", ...heroSlides[5], "index": 5 })}`}`, "picture-6": ($$result3) => renderTemplate`${heroSlides[6] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-6", ...heroSlides[6], "index": 6 })}`}`, "picture-7": ($$result3) => renderTemplate`${heroSlides[7] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-7", ...heroSlides[7], "index": 7 })}`}`, "picture-8": ($$result3) => renderTemplate`${heroSlides[8] && renderTemplate`${renderComponent($$result3, "BannerPictures", $$BannerPictures, { "slot": "picture-8", ...heroSlides[8], "index": 8 })}`}`, "picture-9": ($$result3) => renderTemplate`${heroSlides[9] && renderTemplate`${renderComponent($$result3, "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$k = /* @__PURE__ */ defineComponent({
+  __name: "ContentClearfix",
+  props: {
+    html: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const { html } = __props;
+    const parsedHTML = html.replace(/<(img|iframe) /g, '<$1 loading="lazy" ');
+    const __returned__ = { parsedHTML };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$k(_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$k = _sfc_main$k.setup;
+_sfc_main$k.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/lib/components/ContentClearfix.vue");
+  return _sfc_setup$k ? _sfc_setup$k(props, ctx) : void 0;
+};
+const ContentClearfix = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["ssrRender", _sfc_ssrRender$k]]);
+
+const $$Astro$3 = createAstro("https://demo.ecomplus.app");
+const $$BannersGrid = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$3, $$props, $$slots);
+  Astro2.self = $$BannersGrid;
+  const { banners } = Astro2.props;
+  return renderTemplate`${maybeRenderHead()}<section class="ui-section">
+  <ul class="flex flex-wrap gap-4 lg:flex-nowrap">
+    ${banners.map((banner) => renderTemplate`<li class="lg:flex-1 [&_img]:w-full [&_img]:object-cover">
+        ${renderComponent($$result, "Banner", Banner, { ...banner }, { "picture": ($$result2) => renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { ...banner, "slot": "picture" })}` })}
+      </li>`)}
+  </ul>
+</section>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/components/BannersGrid.astro", void 0);
+
+const useBreadcrumbs = async (props = {}) => {
+  const { settings, apiContext, data } = globalThis.$storefront;
+  const {
+    apiDoc = apiContext?.doc,
+    domain = settings.domain
+  } = props;
+  let categories = props.categories || data.categories;
+  if (!categories) {
+    categories = (await useSharedData({ field: "categories" })).value;
+  }
+  const breadcrumbs = [];
+  if (apiDoc) {
+    const productCategories = apiDoc.categories;
+    if (productCategories) {
+      categoriesList(apiDoc).forEach((categoryName) => {
+        const findCategory = (category2) => {
+          return category2.name === categoryName;
+        };
+        const category = productCategories && productCategories.find(findCategory) || categories?.find(findCategory);
+        if (category) {
+          breadcrumbs.push({
+            name: name(category),
+            link: `/${category.slug}`
+          });
+        }
+      });
+    }
+    breadcrumbs.push({
+      name: name(apiDoc),
+      link: `/${apiDoc.slug}`
+    });
+  }
+  return {
+    breadcrumbs,
+    inlineJSONLd: domain ? JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      itemListElement: [
+        {
+          "@type": "ListItem",
+          position: 1,
+          item: {
+            "@id": `https://${domain}/`,
+            name: "Homepage"
+          }
+        }
+      ].concat(breadcrumbs.map(({ name, link }, index) => {
+        return {
+          "@type": "ListItem",
+          position: index + 2,
+          item: {
+            "@id": `https://${domain}${link}`,
+            name
+          }
+        };
+      }))
+    }) : null
+  };
+};
+
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "Breadcrumbs",
+  props: {
+    apiDoc: {},
+    categories: {},
+    domain: {},
+    cmsPreview: {}
+  },
+  async setup(__props, { expose: __expose }) {
+    __expose();
+    let __temp, __restore;
+    const props = __props;
+    const { breadcrumbs, inlineJSONLd } = ([__temp, __restore] = withAsyncContext(() => useBreadcrumbs(props)), __temp = await __temp, __restore(), __temp);
+    const __returned__ = { props, breadcrumbs, inlineJSONLd };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$j(_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><!--[-->`);
+    ssrRenderList($setup.breadcrumbs, ({ name, link }, i) => {
+      _push(`<!--[-->`);
+      if (i + 1 < $setup.breadcrumbs.length) {
+        _push(`<!--[--><li class="text-base-300"><i class="i-chevron-right"></i></li><li class="whitespace-nowrap"><a${ssrRenderAttr("href", link)} class="hover:text-primary">${ssrInterpolate(name)}</a></li><!--]-->`);
+      } else {
+        _push(`<!--[--><li class="text-base-300 hidden lg:block"><i class="i-chevron-right"></i></li><li class="hidden truncate lg:block"><span class="text-base-500">${ssrInterpolate(name)}</span></li><!--]-->`);
+      }
+      _push(`<!--]-->`);
+    });
+    _push(`<!--]--></ol></nav></section>`);
+  } else {
+    _push(`<!---->`);
+  }
+  if ($setup.inlineJSONLd) {
+    _push(`<script type="application/ld+json">${$setup.inlineJSONLd}<\/script>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`<!--]-->`);
+}
+const _sfc_setup$j = _sfc_main$j.setup;
+_sfc_main$j.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Breadcrumbs.vue");
+  return _sfc_setup$j ? _sfc_setup$j(props, ctx) : void 0;
+};
+const Breadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["ssrRender", _sfc_ssrRender$j]]);
+
+const emitGtagEvent = async (name, _params) => {
+  return;
+};
+const getGtagItem = (product) => {
+  const [name$1, ...variants] = name(product).split(" / ");
+  const item = {
+    item_name: name$1,
+    item_id: product.sku,
+    price: Math.round(price(product) * 100) / 100,
+    // https://developers.google.com/analytics/devguides/collection/ga4/item-scoped-ecommerce#add_an_item-scoped_custom_parameter
+    // @ts-ignore
+    object_id: product._id
+  };
+  if (variants && variants.length) {
+    item.item_variant = variants.join(" / ");
+  } else if (product.variation_id) {
+    item.item_name = name$1.replace(
+      window.__customGTMVariantRegex || /\s[^\s]+$/,
+      ""
+    );
+    item.item_variant = name$1.replace(item.item_name, "").trim();
+  }
+  if (product.quantity === 0 || product.quantity && product.product_id) {
+    item.quantity = product.quantity;
+  }
+  const { brands, categories } = product;
+  if (brands?.length) {
+    item.item_brand = brands[0].name;
+  }
+  if (categories?.length) {
+    for (let i = 0; i < categories.length; i++) {
+      const { name: categoryName } = categories[i];
+      if (i === 0) {
+        item.item_category = categoryName;
+      } else {
+        item[`item_category${i + 1}`] = categoryName;
+        if (i === 4)
+          break;
+      }
+    }
+  }
+  return item;
+};
+
+const useProductCard = (props) => {
+  const isFetching = ref(false);
+  let fetching = null;
+  const fetchError = ref(null);
+  const { productId } = props;
+  const product = shallowReactive({
+    ...props.product,
+    _id: props.product?._id || productId,
+    price: price(props.product || {})
+  });
+  if (!props.product && productId) {
+    isFetching.value = true;
+    fetching = (async () => {
+      try {
+        const { data } = await api.get(`products/${productId}`);
+        Object.assign(product, data);
+      } catch (err) {
+        console.error(err);
+        fetchError.value = err;
+      }
+      isFetching.value = false;
+    })();
+  }
+  const title = computed(() => {
+    return name(product);
+  });
+  const link = computed(() => {
+    const { slug } = product;
+    if (typeof slug === "string") {
+      return `/${slug}`;
+    }
+    return null;
+  });
+  const images = computed(() => {
+    const { pictures } = product;
+    const _images = [];
+    if (pictures) {
+      pictures.forEach((picture) => {
+        const img$1 = img(picture);
+        if (img$1)
+          _images.push(img$1);
+      });
+    }
+    return _images;
+  });
+  const isInStock = computed(() => {
+    return inStock(product);
+  });
+  const isActive = computed(() => {
+    return isInStock.value && product.available && product.visible;
+  });
+  const discountPercentage = computed(() => {
+    if (onPromotion(product)) {
+      const basePrice = product.base_price;
+      return Math.round((basePrice - price(product)) * 100 / basePrice);
+    }
+    return 0;
+  });
+  const hasVariations = computed(() => {
+    if (product.has_variations)
+      return true;
+    return Boolean(product.variations?.length);
+  });
+  emitGtagEvent("view_item", {
+    value: isActive.value ? product.price : 0,
+    items: [{
+      ...getGtagItem(product),
+      item_list_name: props.listName,
+      item_list_id: props.listId || props.listName && slugify(props.listName)
+    }]
+  });
+  return {
+    isFetching,
+    fetching,
+    fetchError,
+    product,
+    title,
+    link,
+    images,
+    isInStock,
+    isActive,
+    discountPercentage,
+    hasVariations
+  };
+};
+
+const getPriceWithDiscount = (price, discount) => {
+  const { type, value } = discount;
+  let priceWithDiscount;
+  if (value) {
+    if (type === "percentage") {
+      priceWithDiscount = price * ((100 - value) / 100);
+    } else {
+      priceWithDiscount = price - value;
+    }
+    return priceWithDiscount > 0 ? priceWithDiscount : 0;
+  }
+  return price;
+};
+const usePrices = (props) => {
+  const _product = computed(() => {
+    return props.product || {
+      price: props.price || 0,
+      base_price: props.basePrice
+    };
+  });
+  const hasVariedPrices = computed(() => {
+    const { variations } = _product.value;
+    if (variations) {
+      const productPrice = price(_product.value);
+      for (let i = 0; i < variations.length; i++) {
+        const price$1 = price({
+          ..._product.value,
+          ...variations[i]
+        });
+        if (price$1 > productPrice) {
+          return true;
+        }
+      }
+    }
+    return false;
+  });
+  const salePrice = computed(() => {
+    const price$1 = price(_product.value);
+    const discount = availableExtraDiscount.value;
+    if (discount && (!discount.min_amount || price$1 > discount.min_amount)) {
+      return getPriceWithDiscount(price$1, discount);
+    }
+    return price$1;
+  });
+  const comparePrice = computed(() => {
+    if (onPromotion(_product.value)) {
+      return _product.value.base_price;
+    }
+    const price$1 = price(_product.value);
+    if (price$1 > salePrice.value) {
+      return price$1;
+    }
+    return 0;
+  });
+  const installmentsObject = computed(() => {
+    return props.installmentsOption || installmentsOption.value || { max_number: 1 };
+  });
+  const installmentsNumber = computed(() => {
+    if (installmentsObject.value.max_number <= 1) {
+      return 1;
+    }
+    const minInstallment = installmentsObject.value.min_installment || 5;
+    const maxInstallmentsNumber = Math.floor(salePrice.value / minInstallment);
+    return Math.min(maxInstallmentsNumber, installmentsObject.value.max_number);
+  });
+  const monthlyInterest = computed(() => {
+    return installmentsObject.value.monthly_interest || 0;
+  });
+  const installmentValue = computed(() => {
+    if (installmentsNumber.value >= 2) {
+      if (!monthlyInterest.value) {
+        return salePrice.value / installmentsNumber.value;
+      }
+      const interest = monthlyInterest.value / 100;
+      return salePrice.value * interest / (1 - (1 + interest) ** -installmentsNumber.value);
+    }
+    return 0;
+  });
+  const discountObject = computed(() => {
+    const discount = props.discountOption || discountOption.value;
+    if (discount && (!discount.min_amount || discount.min_amount <= salePrice.value) && (!props.isAmountTotal || discount.apply_at === "total")) {
+      return discount;
+    }
+    return {};
+  });
+  const discountLabel = computed(() => {
+    const { label } = discountObject.value;
+    if (label) {
+      if (label.includes(" ")) {
+        return label;
+      }
+      return `via ${label}`;
+    }
+    return "";
+  });
+  const priceWithDiscount = computed(() => {
+    return getPriceWithDiscount(salePrice.value, discountObject.value);
+  });
+  const pointsProgramObject = computed(() => {
+    if (props.loyaltyPointsProgram) {
+      return props.loyaltyPointsProgram;
+    }
+    const pointsPrograms = loyaltyPointsPrograms.value;
+    if (pointsPrograms) {
+      const programIds = Object.keys(pointsPrograms);
+      for (let i = 0; i < programIds.length; i++) {
+        const program = pointsPrograms[programIds[i]];
+        if (program?.earn_percentage && program.earn_percentage > 0) {
+          return program;
+        }
+      }
+    }
+    return { ratio: 0 };
+  });
+  const pointsMinPrice = computed(() => {
+    return pointsProgramObject.value.min_subtotal_to_earn || 0;
+  });
+  const pointsProgramName = computed(() => {
+    return pointsProgramObject.value.name || "";
+  });
+  const earnPointsPercentage = computed(() => {
+    return pointsProgramObject.value.earn_percentage || 0;
+  });
+  const cashbackPercentage = computed(() => {
+    return earnPointsPercentage.value * pointsProgramObject.value.ratio;
+  });
+  const cashbackValue = computed(() => {
+    return cashbackPercentage.value >= 1 ? salePrice.value * (cashbackPercentage.value / 100) : 0;
+  });
+  return {
+    hasVariedPrices,
+    salePrice,
+    comparePrice,
+    installmentsObject,
+    installmentsNumber,
+    monthlyInterest,
+    installmentValue,
+    discountObject,
+    discountLabel,
+    priceWithDiscount,
+    pointsProgramObject,
+    pointsMinPrice,
+    pointsProgramName,
+    earnPointsPercentage,
+    cashbackPercentage,
+    cashbackValue
+  };
+};
+
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "Prices",
+  props: {
+    isBig: { type: Boolean },
+    isLiteral: { type: Boolean },
+    hasCashback: { type: Boolean, default: true },
+    hasPriceOptions: { type: Boolean, default: true },
+    product: {},
+    price: {},
+    basePrice: {},
+    isAmountTotal: { type: Boolean },
+    installmentsOption: {},
+    discountOption: {},
+    loyaltyPointsProgram: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      hasVariedPrices,
+      salePrice,
+      comparePrice,
+      cashbackPercentage,
+      cashbackValue,
+      installmentsNumber,
+      monthlyInterest,
+      installmentValue,
+      priceWithDiscount,
+      discountLabel
+    } = usePrices(props);
+    const __returned__ = { props, hasVariedPrices, salePrice, comparePrice, cashbackPercentage, cashbackValue, installmentsNumber, monthlyInterest, installmentValue, priceWithDiscount, discountLabel };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$i(_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]
+  }, _attrs))}>`);
+  if ($setup.comparePrice) {
+    _push(`<span class="text-base-500 mr-1 text-[87%]">`);
+    if ($props.isLiteral) {
+      _push(`<small>${ssrInterpolate(`${"De"} `)}</small>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`<s>${ssrInterpolate(_ctx.$money($setup.comparePrice))}</s>`);
+    if ($props.isLiteral) {
+      _push(`<small>${ssrInterpolate(` ${"Por"}`)}</small>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</span>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`<strong class="${ssrRenderClass([$props.isBig ? "text-4xl block" : "inline-block", "text-base-800"])}">`);
+  if ($setup.hasVariedPrices) {
+    _push(`<small>${ssrInterpolate(`${"A partir de"} `)}</small>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(` ${ssrInterpolate(_ctx.$money($setup.salePrice))}</strong>`);
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.cashbackValue && $props.hasCashback) {
+          _push2(`<div class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage)))}${_scopeId}><i class="i-arrow-uturn-left mr-1"${_scopeId}></i><span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money($setup.cashbackValue))}</span><small${_scopeId}> cashback</small></span></div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.cashbackValue && $props.hasCashback ? (openBlock(), createBlock("div", {
+            key: 0,
+            class: "relative z-10"
+          }, [
+            createVNode("span", {
+              "data-tooltip": "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage))
+            }, [
+              createVNode("i", { class: "i-arrow-uturn-left mr-1" }),
+              createVNode("span", { class: "font-medium" }, toDisplayString(_ctx.$money($setup.cashbackValue)), 1),
+              createVNode("small", null, " cashback")
+            ], 8, ["data-tooltip"])
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.installmentValue && $props.hasPriceOptions) {
+          _push2(`<div${_scopeId}>`);
+          if ($props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(`${"At\xE9"} `)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(` ${ssrInterpolate($setup.installmentsNumber)}x `);
+          if ($props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(` ${"De"} `)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money($setup.installmentValue))}</span>`);
+          if (!$setup.monthlyInterest && $props.isLiteral) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(` ${"Sem juros"}`)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.installmentValue && $props.hasPriceOptions ? (openBlock(), createBlock("div", { key: 0 }, [
+            $props.isLiteral ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"At\xE9"} `))) : createCommentVNode("", true),
+            createTextVNode(" " + toDisplayString($setup.installmentsNumber) + "x ", 1),
+            $props.isLiteral ? (openBlock(), createBlock("small", { key: 1 }, toDisplayString(` ${"De"} `))) : createCommentVNode("", true),
+            createVNode("span", null, toDisplayString(_ctx.$money($setup.installmentValue)), 1),
+            !$setup.monthlyInterest && $props.isLiteral ? (openBlock(), createBlock("small", { key: 2 }, toDisplayString(` ${"Sem juros"}`))) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.priceWithDiscount < $setup.salePrice && $props.hasPriceOptions) {
+          _push2(`<div${_scopeId}>`);
+          if (!$setup.discountLabel) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(`${"A partir de"} `)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`<span${_scopeId}>${ssrInterpolate(_ctx.$money($setup.priceWithDiscount))}</span>`);
+          if ($setup.discountLabel) {
+            _push2(`<small${_scopeId}>${ssrInterpolate(` ${$setup.discountLabel}`)}</small>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.priceWithDiscount < $setup.salePrice && $props.hasPriceOptions ? (openBlock(), createBlock("div", { key: 0 }, [
+            !$setup.discountLabel ? (openBlock(), createBlock("small", { key: 0 }, toDisplayString(`${"A partir de"} `))) : createCommentVNode("", true),
+            createVNode("span", null, toDisplayString(_ctx.$money($setup.priceWithDiscount)), 1),
+            $setup.discountLabel ? (openBlock(), createBlock("small", { key: 1 }, toDisplayString(` ${$setup.discountLabel}`), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</div>`);
+}
+const _sfc_setup$i = _sfc_main$i.setup;
+_sfc_main$i.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Prices.vue");
+  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
+};
+const Prices = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["ssrRender", _sfc_ssrRender$i]]);
+
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "ProductCard",
+  props: {
+    product: {},
+    productId: {},
+    listName: {},
+    listId: {},
+    headingTag: { default: "h3" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      product,
+      title,
+      link,
+      images,
+      isInStock,
+      isActive,
+      discountPercentage,
+      hasVariations
+    } = useProductCard(props);
+    const card = ref(null);
+    const isHovered = useElementHover(card);
+    const wasHoveredOnce = ref(false);
+    const unwatch = watch(isHovered, () => {
+      wasHoveredOnce.value = true;
+      unwatch();
+    });
+    const __returned__ = { props, product, title, link, images, isInStock, isActive, discountPercentage, hasVariations, card, isHovered, wasHoveredOnce, unwatch, get addProductToCart() {
+      return addProductToCart;
+    }, get isMobile() {
+      return isMobile;
+    }, Prices };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$h(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ALink = resolveComponent("ALink");
+  const _component_AImg = resolveComponent("AImg");
+  _push(`<article${ssrRenderAttrs(mergeProps({
+    ref: "card",
+    "data-sku": $setup.product.sku,
+    class: "group relative mx-auto h-full max-w-[350px] px-0.5 py-3 hover:z-[1]"
+  }, _attrs))}>`);
+  _push(ssrRenderComponent(_component_ALink, {
+    href: $setup.link,
+    prefetch: "visible",
+    class: "flex h-full flex-col overflow-hidden rounded bg-white ring-black/5 group-hover:shadow group-hover:ring-1"
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<div class="aspect-square p-2 transition-transform motion-safe:group-hover:scale-110"${_scopeId}><div class="relative size-full overflow-hidden rounded bg-white group-hover:rounded-none"${_scopeId}>`);
+        if ($setup.images?.length) {
+          _push2(`<span class="text-xs text-opacity-70"${_scopeId}>`);
+          _push2(ssrRenderComponent(_component_AImg, {
+            picture: $setup.images[0],
+            alt: $setup.title,
+            class: "absolute left-0 top-0 block size-full object-cover"
+          }, null, _parent2, _scopeId));
+          if (!$setup.isMobile && $setup.images[1] && $setup.wasHoveredOnce) {
+            _push2(ssrRenderComponent(_component_AImg, {
+              picture: $setup.images[1],
+              alt: $setup.title,
+              class: "absolute left-0 top-0 z-10 block size-full object-cover text-transparent opacity-0 transition-opacity group-hover:opacity-100 motion-safe:duration-300"
+            }, null, _parent2, _scopeId));
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</span>`);
+        } else {
+          _push2(`<div class="size-full bg-gradient-to-br from-base-50/20 to-base-100"${_scopeId}></div>`);
+        }
+        _push2(`</div></div>`);
+        if ($setup.discountPercentage) {
+          _push2(`<span class="uno-bm03rg"${_scopeId}> -<strong${_scopeId}>${ssrInterpolate($setup.discountPercentage)}</strong>% </span>`);
+        } else {
+          _push2(`<!---->`);
+        }
+        _push2(`<div class="relative z-10 flex grow flex-col justify-between p-4"${_scopeId}>`);
+        ssrRenderVNode(_push2, createVNode(resolveDynamicComponent($props.headingTag), {
+          class: ["line-clamp-2 no-underline ui-link", [
+            $setup.isActive ? "text-base-700" : "text-base-500",
+            $setup.link ? "group-hover:text-primary group-hover:underline" : null
+          ]]
+        }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              _push3(`${ssrInterpolate($setup.title)}`);
+            } else {
+              return [
+                createTextVNode(toDisplayString($setup.title), 1)
+              ];
+            }
+          }),
+          _: 1
+        }), _parent2, _scopeId);
+        _push2(`<div class="pt-2"${_scopeId}>`);
+        if ($setup.isActive) {
+          _push2(`<div${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["Prices"], { product: $setup.product }, null, _parent2, _scopeId));
+          _push2(`</div>`);
+        } else {
+          _push2(`<span class="bg-warning-100 text-warning-700 ui-badge"${_scopeId}>${ssrInterpolate(!$setup.isInStock ? "Sem estoque" : "Inativo")}</span>`);
+        }
+        _push2(`</div>`);
+        if ($setup.isActive && !$setup.hasVariations) {
+          _push2(`<button class="uno-3suct9 ui-btn-sm ui-btn-primary"${_scopeId}><span class="mr-1 inline-block size-4 rounded-full bg-on-primary text-center text-base leading-none text-primary opacity-80"${_scopeId}> + </span> ${ssrInterpolate("Adicionar ao carrinho")}</button>`);
+        } else {
+          _push2(`<!---->`);
+        }
+        _push2(`</div>`);
+      } else {
+        return [
+          createVNode("div", { class: "aspect-square p-2 transition-transform motion-safe:group-hover:scale-110" }, [
+            createVNode("div", { class: "relative size-full overflow-hidden rounded bg-white group-hover:rounded-none" }, [
+              $setup.images?.length ? (openBlock(), createBlock("span", {
+                key: 0,
+                class: "text-xs text-opacity-70"
+              }, [
+                createVNode(_component_AImg, {
+                  picture: $setup.images[0],
+                  alt: $setup.title,
+                  class: "absolute left-0 top-0 block size-full object-cover"
+                }, null, 8, ["picture", "alt"]),
+                !$setup.isMobile && $setup.images[1] && $setup.wasHoveredOnce ? (openBlock(), createBlock(_component_AImg, {
+                  key: 0,
+                  picture: $setup.images[1],
+                  alt: $setup.title,
+                  class: "absolute left-0 top-0 z-10 block size-full object-cover text-transparent opacity-0 transition-opacity group-hover:opacity-100 motion-safe:duration-300"
+                }, null, 8, ["picture", "alt"])) : createCommentVNode("", true)
+              ])) : (openBlock(), createBlock("div", {
+                key: 1,
+                class: "size-full bg-gradient-to-br from-base-50/20 to-base-100"
+              }))
+            ])
+          ]),
+          $setup.discountPercentage ? (openBlock(), createBlock("span", {
+            key: 0,
+            class: "uno-bm03rg"
+          }, [
+            createTextVNode(" -"),
+            createVNode("strong", null, toDisplayString($setup.discountPercentage), 1),
+            createTextVNode("% ")
+          ])) : createCommentVNode("", true),
+          createVNode("div", { class: "relative z-10 flex grow flex-col justify-between p-4" }, [
+            (openBlock(), createBlock(resolveDynamicComponent($props.headingTag), {
+              class: ["line-clamp-2 no-underline ui-link", [
+                $setup.isActive ? "text-base-700" : "text-base-500",
+                $setup.link ? "group-hover:text-primary group-hover:underline" : null
+              ]]
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString($setup.title), 1)
+              ]),
+              _: 1
+            }, 8, ["class"])),
+            createVNode("div", { class: "pt-2" }, [
+              $setup.isActive ? (openBlock(), createBlock("div", { key: 0 }, [
+                createVNode($setup["Prices"], { product: $setup.product }, null, 8, ["product"])
+              ])) : (openBlock(), createBlock("span", {
+                key: 1,
+                class: "bg-warning-100 text-warning-700 ui-badge"
+              }, toDisplayString(!$setup.isInStock ? "Sem estoque" : "Inativo"), 1))
+            ]),
+            $setup.isActive && !$setup.hasVariations ? (openBlock(), createBlock("button", {
+              key: 0,
+              class: "uno-3suct9 ui-btn-sm ui-btn-primary",
+              onClick: withModifiers(($event) => $setup.addProductToCart($setup.product), ["stop", "prevent"])
+            }, [
+              createVNode("span", { class: "mr-1 inline-block size-4 rounded-full bg-on-primary text-center text-base leading-none text-primary opacity-80" }, " + "),
+              createTextVNode(" " + toDisplayString("Adicionar ao carrinho"))
+            ], 8, ["onClick"])) : createCommentVNode("", true)
+          ])
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</article>`);
+}
+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/ProductCard.vue");
+  return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
+};
+const ProductCard = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["ssrRender", _sfc_ssrRender$h]]);
+
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "ProductShelf",
+  props: {
+    isGrid: { type: Boolean },
+    collectionId: {},
+    searchQuery: {},
+    sort: {},
+    title: {},
+    titleLink: {},
+    isShuffle: { type: Boolean },
+    limit: {},
+    page: {},
+    products: {},
+    orderedProductIds: {},
+    isRelatedProducts: { type: Boolean },
+    cmsPreview: {}
+  },
+  async setup(__props, { expose: __expose }) {
+    __expose();
+    let __temp, __restore;
+    const props = __props;
+    const [
+      DefineCarouselControl,
+      ReuseCarouselControl
+    ] = createReusableTemplate();
+    const {
+      title,
+      titleLink,
+      fetching,
+      products
+    } = useProductShelf(props);
+    {
+      [__temp, __restore] = withAsyncContext(() => fetching), await __temp, __restore();
+    }
+    const listName = title.value || `Shelf ${useId()}`;
+    const __returned__ = { props, DefineCarouselControl, ReuseCarouselControl, title, titleLink, fetching, products, listName, ProductCard };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$g(_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))}>`);
+  if ($setup.title) {
+    _push(`<div class="mx-auto mb-4 max-w-prose text-center"><h3>`);
+    _push(ssrRenderComponent(_component_ALink, {
+      href: $setup.titleLink,
+      class: ["text-3xl text-base-700 ui-text-brand", $setup.titleLink && "ui-link decoration-primary/60"]
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(`${ssrInterpolate($setup.title)}`);
+        } else {
+          return [
+            createTextVNode(toDisplayString($setup.title), 1)
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+    _push(`</h3></div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.isGrid ? "ul" : "Carousel"), {
+    class: ["group/shelf", $props.isGrid && "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4"]
+  }, createSlots({
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<!--[-->`);
+        ssrRenderList($setup.products, (product) => {
+          _push2(`<li class="shrink-0 basis-1/2 md:basis-1/3 lg:basis-1/4"${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["ProductCard"], {
+            product,
+            "list-name": $setup.listName
+          }, null, _parent2, _scopeId));
+          _push2(`</li>`);
+        });
+        _push2(`<!--]-->`);
+      } else {
+        return [
+          (openBlock(true), createBlock(Fragment, null, renderList($setup.products, (product) => {
+            return openBlock(), createBlock("li", {
+              key: product._id,
+              class: "shrink-0 basis-1/2 md:basis-1/3 lg:basis-1/4"
+            }, [
+              createVNode($setup["ProductCard"], {
+                product,
+                "list-name": $setup.listName
+              }, null, 8, ["product", "list-name"])
+            ]);
+          }), 128))
+        ];
+      }
+    }),
+    _: 2
+  }, [
+    !$props.isGrid ? {
+      name: "controls",
+      fn: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(ssrRenderComponent($setup["DefineCarouselControl"], null, {
+            default: withCtx(({ isPrev }, _push3, _parent3, _scopeId2) => {
+              if (_push3) {
+                _push3(ssrRenderComponent(_component_CarouselControl, {
+                  style: $setup.products.length > 2 ? null : { display: "none" },
+                  class: ["uno-t0rdy7", isPrev ? "!-left-4" : "!-right-4"],
+                  "is-prev": isPrev
+                }, null, _parent3, _scopeId2));
+              } else {
+                return [
+                  withDirectives(createVNode(_component_CarouselControl, {
+                    class: ["uno-t0rdy7", isPrev ? "!-left-4" : "!-right-4"],
+                    "is-prev": isPrev
+                  }, null, 8, ["class", "is-prev"]), [
+                    [vShow, $setup.products.length > 2]
+                  ])
+                ];
+              }
+            }),
+            _: 1
+          }, _parent2, _scopeId));
+          _push2(ssrRenderComponent($setup["ReuseCarouselControl"], { "is-prev": true }, null, _parent2, _scopeId));
+          _push2(ssrRenderComponent($setup["ReuseCarouselControl"], null, null, _parent2, _scopeId));
+        } else {
+          return [
+            createVNode($setup["DefineCarouselControl"], null, {
+              default: withCtx(({ isPrev }) => [
+                withDirectives(createVNode(_component_CarouselControl, {
+                  class: ["uno-t0rdy7", isPrev ? "!-left-4" : "!-right-4"],
+                  "is-prev": isPrev
+                }, null, 8, ["class", "is-prev"]), [
+                  [vShow, $setup.products.length > 2]
+                ])
+              ]),
+              _: 1
+            }),
+            createVNode($setup["ReuseCarouselControl"], { "is-prev": true }),
+            createVNode($setup["ReuseCarouselControl"])
+          ];
+        }
+      }),
+      key: "0"
+    } : void 0
+  ])), _parent);
+  ssrRenderSlot(_ctx.$slots, "append", {}, null, _push, _parent);
+  _push(`</section>`);
+}
+const _sfc_setup$g = _sfc_main$g.setup;
+_sfc_main$g.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ProductShelf.vue");
+  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
+};
+const ProductShelf = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["ssrRender", _sfc_ssrRender$g]]);
+
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "Collapse",
+  props: {
+    title: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = {};
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$f(_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$f = _sfc_main$f.setup;
+_sfc_main$f.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Collapse.vue");
+  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
+};
+const Collapse = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["ssrRender", _sfc_ssrRender$f]]);
+
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "DocDescription",
+  props: {
+    apiDoc: { default: () => globalThis.$storefront.apiContext?.doc },
+    title: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const html = computed(() => props.apiDoc.body_html);
+    const __returned__ = { props, html, ContentClearfix, Collapse };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$e(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  if ($setup.html) {
+    _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
+    _push(ssrRenderComponent($setup["Collapse"], {
+      title: $props.title || "Descri\xE7\xE3o",
+      open: ""
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(ssrRenderComponent($setup["ContentClearfix"], { html: $setup.html }, null, _parent2, _scopeId));
+        } else {
+          return [
+            createVNode($setup["ContentClearfix"], { html: $setup.html }, null, 8, ["html"])
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+    _push(`</section>`);
+  } else {
+    _push(`<!---->`);
+  }
+}
+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/DocDescription.vue");
+  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
+};
+const DocDescription = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["ssrRender", _sfc_ssrRender$e]]);
+
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "DocBanners",
+  props: {
+    apiDoc: { default: () => globalThis.$storefront.apiContext?.doc },
+    title: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const pictures = computed(() => props.apiDoc.pictures || []);
+    const __returned__ = { props, pictures };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$d(_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"><!--[-->`);
+    ssrRenderList($setup.pictures, (picture, i) => {
+      _push(`<li class="lg:flex-1 [&amp;_img]:w-full [&amp;_img]:object-cover">`);
+      _push(ssrRenderComponent(_component_AImg, { picture }, null, _parent));
+      _push(`</li>`);
+    });
+    _push(`<!--]--></ul></section>`);
+  } else {
+    _push(`<!---->`);
+  }
+}
+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/DocBanners.vue");
+  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
+};
+const DocBanners = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["ssrRender", _sfc_ssrRender$d]]);
+
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "CheckoutLink",
+  props: {
+    to: { default: "cart" },
+    cartUrl: { default: globalThis.$storefront?.settings.cartUrl || "/app/#/cart" },
+    checkoutUrl: { default: globalThis.$storefront?.settings.checkoutUrl || "/app/#/checkout" },
+    cartId: {},
+    cartItem: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const href = computed(() => {
+      let url = props.to === "cart" ? props.cartUrl : props.checkoutUrl;
+      if (props.cartId) {
+        url += `/${props.cartId}`;
+      } else if (props.cartItem) {
+        const params = {
+          product_id: props.cartItem.product_id
+        };
+        const {
+          variation_id: variationId,
+          quantity,
+          sku,
+          customizations
+        } = props.cartItem;
+        if (variationId)
+          params.variation_id = variationId;
+        if (quantity)
+          params.quantity = String(quantity);
+        if (sku)
+          params.sku = sku;
+        if (customizations) {
+          customizations.forEach(({ label, option, attachment }, i) => {
+            const prefix = `customizations.${i}.`;
+            if (label)
+              params[prefix + "label"] = label;
+            if (option) {
+              if (option._id)
+                params[prefix + "option._id"] = option._id;
+              params[prefix + "option.text"] = option.text;
+            }
+            if (attachment)
+              params[prefix + "attachment"] = attachment;
+          });
+        }
+        url += "?" + new URLSearchParams(params).toString();
+      }
+      return url;
+    });
+    const __returned__ = { props, href };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$c(_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$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/CheckoutLink.vue");
+  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
+};
+const CheckoutLink = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["ssrRender", _sfc_ssrRender$c]]);
+
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "QuantitySelectorControl",
+  props: {
+    isMinus: { type: Boolean }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const {
+      value,
+      isBoundMin,
+      isBoundMax
+    } = inject(quantitySelectorKey);
+    const __returned__ = { value, isBoundMin, isBoundMax };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$b(_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",
+    "data-quantity-selector-control": $props.isMinus ? "minus" : "plus",
+    "aria-label": $props.isMinus ? "Menos" : "Mais",
+    disabled: $props.isMinus ? $setup.isBoundMin : $setup.isBoundMax
+  }, _attrs))}>`);
+  ssrRenderSlot(_ctx.$slots, "default", {}, () => {
+    if ($props.isMinus) {
+      _push(`<!--[-->\u2212<!--]-->`);
+    } else {
+      _push(`<!--[-->+<!--]-->`);
+    }
+  }, _push, _parent);
+  _push(`</button>`);
+}
+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/QuantitySelectorControl.vue");
+  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
+};
+const QuantitySelectorControl = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["ssrRender", _sfc_ssrRender$b]]);
+
+const quantitySelectorKey = Symbol("quantitySelector");
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "QuantitySelector",
+  props: /* @__PURE__ */ mergeModels({
+    min: { default: 1 },
+    max: {},
+    step: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean }
+  }, {
+    "modelValue": { default: 1 },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const input = ref(null);
+    const inputId = useId("NInput");
+    const value = computed({
+      get() {
+        return model.value;
+      },
+      set(_value) {
+        if (_value < props.min) {
+          _value = props.min;
+          input.value.value = `${_value}`;
+        } else if (props.max && _value > props.max) {
+          _value = props.max;
+          input.value.value = `${_value}`;
+        }
+        model.value = _value;
+      }
+    });
+    const isBoundMin = computed(() => {
+      return props.min >= value.value;
+    });
+    const isBoundMax = computed(() => {
+      return props.max <= value.value;
+    });
+    provide(quantitySelectorKey, {
+      value,
+      isBoundMin,
+      isBoundMax
+    });
+    const __returned__ = { quantitySelectorKey, props, model, input, inputId, value, isBoundMin, isBoundMax, QuantitySelectorControl };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$a(_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>`);
+  }, _push, _parent);
+  _push(`<div class="flex items-center"><input type="number"${ssrRenderAttr("id", $setup.inputId)}${ssrRenderAttr("value", $setup.value)}${ssrRenderAttr("min", $props.min)}${ssrRenderAttr("max", $props.max)}${ssrRenderAttr("step", $props.step)}${ssrIncludeBooleanAttr($props.disabled) ? " disabled" : ""}${ssrIncludeBooleanAttr($props.readonly) ? " readonly" : ""} class="h-12 w-14 border-transparent px-2 text-center text-lg [-moz-appearance:_textfield] [&amp;::-webkit-inner-spin-button]:m-0 [&amp;::-webkit-inner-spin-button]:appearance-none [&amp;::-webkit-outer-spin-button]:m-0 [&amp;::-webkit-outer-spin-button]:appearance-none">`);
+  ssrRenderSlot(_ctx.$slots, "controls", { value: $setup.value, isBoundMin: $setup.isBoundMin, isBoundMax: $setup.isBoundMax }, () => {
+    _push(ssrRenderComponent($setup["QuantitySelectorControl"], {
+      "is-minus": "",
+      class: "order-first"
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          ssrRenderSlot(_ctx.$slots, "minus", {}, null, _push2, _parent2, _scopeId);
+        } else {
+          return [
+            renderSlot(_ctx.$slots, "minus")
+          ];
+        }
+      }),
+      _: 3
+    }, _parent));
+    _push(ssrRenderComponent($setup["QuantitySelectorControl"], { class: "order-last" }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          ssrRenderSlot(_ctx.$slots, "plus", {}, null, _push2, _parent2, _scopeId);
+        } else {
+          return [
+            renderSlot(_ctx.$slots, "plus")
+          ];
+        }
+      }),
+      _: 3
+    }, _parent));
+  }, _push, _parent);
+  _push(`</div></div>`);
+}
+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/QuantitySelector.vue");
+  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
+};
+const QuantitySelector = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["ssrRender", _sfc_ssrRender$a]]);
+
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "ImagesGallery",
+  props: {
+    pictures: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const activeIndex = ref(0);
+    const psId = ref("");
+    let lightbox;
+    const isLoadingLightbox = ref(false);
+    const zoom = (index) => {
+      psId.value = `ps-${useId()}`;
+      if (!lightbox && !isLoadingLightbox.value) {
+        isLoadingLightbox.value = true;
+        const styleId = "photoswipe-style";
+        Promise.all([
+          // @ts-ignore
+          import('photoswipe/lightbox'),
+          import('photoswipe'),
+          !document.getElementById(styleId) && import('../photoswipe_wusPJBJF.mjs')
+        ]).then(([
+          { default: PhotoSwipeLightbox },
+          { default: pswpModule },
+          cssImport
+        ]) => {
+          if (cssImport) {
+            const { default: css } = cssImport;
+            const style = document.createElement("style");
+            style.id = styleId;
+            style.textContent = css;
+            document.head.appendChild(style);
+          }
+          lightbox = new PhotoSwipeLightbox({
+            gallery: `#${psId.value} > div`,
+            children: "a",
+            pswpModule,
+            showAnimationDuration: 300,
+            hideAnimationDuration: 300
+          });
+          lightbox.init();
+          lightbox.loadAndOpen(index);
+          isLoadingLightbox.value = false;
+        });
+      }
+    };
+    const __returned__ = { activeIndex, psId, get lightbox() {
+      return lightbox;
+    }, set lightbox(v) {
+      lightbox = v;
+    }, isLoadingLightbox, zoom, get getImgSizes() {
+      return imgSizes;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$9(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Carousel = resolveComponent("Carousel");
+  const _component_AImg = resolveComponent("AImg");
+  const _component_CarouselControl = resolveComponent("CarouselControl");
+  const _component_ALink = resolveComponent("ALink");
+  _push(`<div${ssrRenderAttrs(mergeProps({ class: "-mx-4 flex w-screen gap-3 sm:mx-0 sm:w-full md:h-[525px] 2xl:gap-5" }, _attrs))}>`);
+  if ($props.pictures.length > 1) {
+    _push(ssrRenderComponent(_component_Carousel, {
+      axis: "y",
+      class: "group hidden w-[300px] shrink-0 md:block"
+    }, {
+      controls: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(`<span${_scopeId}>`);
+          if ($props.pictures.length > 6) {
+            _push2(ssrRenderComponent(_component_CarouselControl, { class: "text-primary hover:bg-primary-300/60 !bottom-3 !left-1/2 -ml-5 size-10 rounded-full bg-white/60 text-xl opacity-0 shadow-sm ring-1 ring-black/5 group-hover:opacity-90" }, null, _parent2, _scopeId));
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`<span class="absolute bottom-0 block h-2 w-full bg-gradient-to-b from-transparent to-white"${_scopeId}></span></span>`);
+        } else {
+          return [
+            createVNode("span", null, [
+              $props.pictures.length > 6 ? (openBlock(), createBlock(_component_CarouselControl, {
+                key: 0,
+                class: "text-primary hover:bg-primary-300/60 !bottom-3 !left-1/2 -ml-5 size-10 rounded-full bg-white/60 text-xl opacity-0 shadow-sm ring-1 ring-black/5 group-hover:opacity-90"
+              })) : createCommentVNode("", true),
+              createVNode("span", { class: "absolute bottom-0 block h-2 w-full bg-gradient-to-b from-transparent to-white" })
+            ])
+          ];
+        }
+      }),
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(`<!--[-->`);
+          ssrRenderList(Math.ceil($props.pictures.length / 2), (i) => {
+            _push2(`<li class="${ssrRenderClass([i === 1 && "pt-1", "grid w-full grid-cols-2 gap-3 px-1 pb-3"])}"${_scopeId}><!--[-->`);
+            ssrRenderList([1, 2].map((ii) => (i - 1) * 2 + (ii - 1)), (index) => {
+              _push2(`<!--[-->`);
+              if (index < $props.pictures.length) {
+                _push2(`<button class="bg-secondary-100 block rounded md:h-[175px]"${_scopeId}>`);
+                _push2(ssrRenderComponent(_component_AImg, {
+                  picture: $props.pictures[index],
+                  class: ["ring-secondary/10 size-full rounded border-2 object-cover opacity-90 transition-colors", index === $setup.activeIndex ? "border-secondary/50 ring-4 cursor-auto" : "border-transparent hover:border-primary hover:ring-4 hover:ring-primary/20"]
+                }, null, _parent2, _scopeId));
+                _push2(`</button>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(`<!--]-->`);
+            });
+            _push2(`<!--]--></li>`);
+          });
+          _push2(`<!--]-->`);
+        } else {
+          return [
+            (openBlock(true), createBlock(Fragment, null, renderList(Math.ceil($props.pictures.length / 2), (i) => {
+              return openBlock(), createBlock("li", {
+                key: i,
+                class: ["grid w-full grid-cols-2 gap-3 px-1 pb-3", i === 1 && "pt-1"]
+              }, [
+                (openBlock(true), createBlock(Fragment, null, renderList([1, 2].map((ii) => (i - 1) * 2 + (ii - 1)), (index) => {
+                  return openBlock(), createBlock(Fragment, {
+                    key: `${i}-${index}`
+                  }, [
+                    index < $props.pictures.length ? (openBlock(), createBlock("button", {
+                      key: 0,
+                      class: "bg-secondary-100 block rounded md:h-[175px]",
+                      onClick: ($event) => $setup.activeIndex = index
+                    }, [
+                      createVNode(_component_AImg, {
+                        picture: $props.pictures[index],
+                        class: ["ring-secondary/10 size-full rounded border-2 object-cover opacity-90 transition-colors", index === $setup.activeIndex ? "border-secondary/50 ring-4 cursor-auto" : "border-transparent hover:border-primary hover:ring-4 hover:ring-primary/20"]
+                      }, null, 8, ["picture", "class"])
+                    ], 8, ["onClick"])) : createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ], 2);
+            }), 128))
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`<div class="relative aspect-square h-full grow md:aspect-auto">`);
+  _push(ssrRenderComponent(_component_Carousel, {
+    as: "div",
+    index: $setup.activeIndex,
+    "onUpdate:index": ($event) => $setup.activeIndex = $event,
+    class: ["text-base-600 [&_i]:i-arrow-right mx-auto size-full max-w-[525px] [&>*]:h-full [&_i]:mx-2 [&_i]:text-2xl", $setup.isLoadingLightbox && "opacity-80"],
+    id: $setup.psId
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(`<!--[-->`);
+        ssrRenderList($props.pictures, (picture, i) => {
+          _push2(ssrRenderComponent(_component_ALink, {
+            key: `big-${i}`,
+            href: picture.zoom?.size && picture.zoom.url,
+            "data-pswp-width": $setup.getImgSizes(picture.zoom || "").width,
+            "data-pswp-height": $setup.getImgSizes(picture.zoom || "").height,
+            target: "_blank",
+            rel: "noreferrer",
+            class: ["shrink-0 basis-full", picture.zoom?.size && "cursor-zoom-in"],
+            onClick: () => picture.zoom?.size && $setup.zoom(i)
+          }, {
+            default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+              if (_push3) {
+                _push3(ssrRenderComponent(_component_AImg, {
+                  picture,
+                  "preferred-size": "big",
+                  class: "size-full rounded object-cover",
+                  fetchpriority: i === 0 ? "high" : "low",
+                  loading: i === 0 ? "eager" : "lazy"
+                }, null, _parent3, _scopeId2));
+              } else {
+                return [
+                  createVNode(_component_AImg, {
+                    picture,
+                    "preferred-size": "big",
+                    class: "size-full rounded object-cover",
+                    fetchpriority: i === 0 ? "high" : "low",
+                    loading: i === 0 ? "eager" : "lazy"
+                  }, null, 8, ["picture", "fetchpriority", "loading"])
+                ];
+              }
+            }),
+            _: 2
+          }, _parent2, _scopeId));
+        });
+        _push2(`<!--]-->`);
+      } else {
+        return [
+          (openBlock(true), createBlock(Fragment, null, renderList($props.pictures, (picture, i) => {
+            return openBlock(), createBlock(_component_ALink, {
+              key: `big-${i}`,
+              href: picture.zoom?.size && picture.zoom.url,
+              "data-pswp-width": $setup.getImgSizes(picture.zoom || "").width,
+              "data-pswp-height": $setup.getImgSizes(picture.zoom || "").height,
+              target: "_blank",
+              rel: "noreferrer",
+              class: ["shrink-0 basis-full", picture.zoom?.size && "cursor-zoom-in"],
+              onClick: withModifiers(() => picture.zoom?.size && $setup.zoom(i), ["prevent"])
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_AImg, {
+                  picture,
+                  "preferred-size": "big",
+                  class: "size-full rounded object-cover",
+                  fetchpriority: i === 0 ? "high" : "low",
+                  loading: i === 0 ? "eager" : "lazy"
+                }, null, 8, ["picture", "fetchpriority", "loading"])
+              ]),
+              _: 2
+            }, 1032, ["href", "data-pswp-width", "data-pswp-height", "class", "onClick"]);
+          }), 128))
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  if ($setup.isLoadingLightbox) {
+    _push(`<i class="bg-base-200 i-arrow-path absolute left-1/2 top-1/2 -ml-7 -mt-7 size-14 animate-spin"${ssrRenderAttr("aria-label", "Carregando")}></i>`);
+  } else {
+    _push(`<!---->`);
+  }
+  if ($props.pictures.length > 1) {
+    _push(`<ul class="mt-2 flex justify-center gap-1.5 md:hidden"><!--[-->`);
+    ssrRenderList($props.pictures.length, (i) => {
+      _push(`<li><button class="${ssrRenderClass([$setup.activeIndex !== i - 1 && "opacity-40", "bg-base-700 block h-1.5 w-3 rounded-full"])}"${ssrRenderAttr("aria-label", `${"Imagem"} ${i}`)}></button></li>`);
+    });
+    _push(`<!--]--></ul>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div></div>`);
+}
+const _sfc_setup$9 = _sfc_main$9.setup;
+_sfc_main$9.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ImagesGallery.vue");
+  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
+};
+const ImagesGallery = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["ssrRender", _sfc_ssrRender$9]]);
+
+const useSkuSelector = (props) => {
+  const grids = shallowReactive(
+    props.grids || globalThis.$storefront.data.grids || []
+  );
+  if (!grids.length && false) {
+    window.addEventListener("storefront:data:grids", () => {
+      globalThis.$storefront.data.grids?.forEach((grid) => grids.push(grid));
+    }, { once: true });
+  }
+  const variationsGrids$1 = reactive({});
+  const activeVariationsGrids = reactive({});
+  watch(toRef(props, "variations"), () => {
+    Object.assign(activeVariationsGrids, variationsGrids(props, void 0, true));
+    const allVariationsGrids = variationsGrids(props);
+    Object.keys(allVariationsGrids).forEach((gridId) => {
+      if (activeVariationsGrids[gridId]) {
+        variationsGrids$1[gridId] = activeVariationsGrids[gridId];
+      } else {
+        delete variationsGrids$1[gridId];
+      }
+    });
+  }, { immediate: true });
+  const orderedGridIds = computed(() => Object.keys(variationsGrids$1));
+  const selectedOptions = reactive({});
+  const variationId = ref();
+  const selectOption = ({ optionText, gridId, gridIndex }) => {
+    selectedOptions[gridId] = optionText;
+    const filteredGrids = {};
+    for (let i = 0; i <= gridIndex; i++) {
+      const _gridId = orderedGridIds[i];
+      if (selectedOptions[_gridId]) {
+        filteredGrids[_gridId] = selectedOptions[_gridId];
+      }
+    }
+    const nextFilteredGrids = variationsGrids(props, filteredGrids, true);
+    for (let i = gridIndex + 1; i < orderedGridIds.value.length; i++) {
+      const _gridId = orderedGridIds[i];
+      const options = nextFilteredGrids[_gridId];
+      activeVariationsGrids[_gridId] = options;
+      if (selectedOptions[_gridId] && !options.includes(selectedOptions[_gridId])) {
+        delete selectedOptions[_gridId];
+      }
+    }
+    const variations = props.variations.slice(0);
+    for (let i = 0; i < variations.length; i++) {
+      const variation = variations[i];
+      const { specifications } = variation;
+      const gridIds = Object.keys(specifications);
+      for (let ii = 0; ii < gridIds.length; ii++) {
+        const _gridId = gridIds[ii];
+        if (selectedOptions[_gridId] !== specTextValue(variation, _gridId)) {
+          variations.splice(i, 1);
+          i -= 1;
+          break;
+        }
+      }
+    }
+    variationId.value = variations[0]?._id || null;
+  };
+  watch(toRef(props, "variationId"), (_variationId) => {
+    if (!_variationId || _variationId === variationId.value) {
+      return;
+    }
+    const selectedVariation = props.variations.find((variation) => {
+      return variation._id === _variationId;
+    });
+    if (!selectedVariation) {
+      variationId.value = null;
+      return;
+    }
+    const { specifications } = selectedVariation;
+    const specs = Object.keys(specifications);
+    const nextSpec = (specIndex = 0) => {
+      const gridId = specs[specIndex];
+      if (specs[specIndex] && specifications[gridId] && specifications[gridId].length === 1) {
+        const optionText = specifications[gridId][0].text;
+        if (variationsGrids$1[gridId].find((option) => option === optionText)) {
+          selectOption({
+            optionText,
+            gridId,
+            gridIndex: orderedGridIds.value.indexOf(gridId)
+          });
+          nextSpec(specIndex + 1);
+        }
+      }
+    };
+    nextSpec();
+  }, { immediate: true });
+  const getGridTitle = (gridId) => {
+    return gridTitle(gridId, grids);
+  };
+  const getColorOptionBg = (optionText) => {
+    const rgbs = optionText.split(",").map((colorName) => {
+      return specValueByText(props.variations, colorName.trim(), "colors");
+    });
+    return rgbs.length > 1 ? `background:linear-gradient(to right bottom, ${rgbs[0]} 50%, ${rgbs[1]} 50%)` : `background:${rgbs[0]}`;
+  };
+  return {
+    grids,
+    variationsGrids: variationsGrids$1,
+    activeVariationsGrids,
+    selectOption,
+    selectedOptions,
+    variationId,
+    getGridTitle,
+    getColorOptionBg
+  };
+};
+
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "SkuSelector",
+  props: {
+    variations: {},
+    variationId: {},
+    grids: {}
+  },
+  emits: ["update:variationId"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const {
+      variationsGrids,
+      activeVariationsGrids,
+      selectOption,
+      selectedOptions,
+      variationId,
+      getGridTitle,
+      getColorOptionBg
+    } = useSkuSelector(props);
+    watch(variationId, (_id) => {
+      emit("update:variationId", _id);
+    });
+    const __returned__ = { props, emit, variationsGrids, activeVariationsGrids, selectOption, selectedOptions, variationId, getGridTitle, getColorOptionBg };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$8(_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))}: `);
+    if ($setup.selectedOptions[gridId]) {
+      _push(`<strong class="text-base-800">${ssrInterpolate($setup.selectedOptions[gridId])}</strong>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</span>`);
+    if (options.length < 7) {
+      _push(`<ul class="mt-2 flex gap-2"><!--[-->`);
+      ssrRenderList(options, (optionText, i) => {
+        _push(`<li><button class="${ssrRenderClass([[
+          $setup.selectedOptions[gridId] === optionText ? "border-primary ring-2" : null,
+          gridId === "colors" ? "size-9 text-[0px]" : "px-2.5 py-2 leading-none",
+          $setup.activeVariationsGrids[gridId].includes(optionText) ? "border-primary-400 bg-primary-100 text-primary-950" : "border-primary-300 bg-primary-200 text-primary-600"
+        ], "ring-primary/60 rounded border"])}" style="${ssrRenderStyle(gridId === "colors" && $setup.getColorOptionBg(optionText))}">${ssrInterpolate(optionText)}</button></li>`);
+      });
+      _push(`<!--]--></ul>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</div>`);
+  });
+  _push(`<!--]--></div>`);
+}
+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/SkuSelector.vue");
+  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
+};
+const SkuSelector = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["ssrRender", _sfc_ssrRender$8]]);
+
+const localStorage$1 = typeof window === "object" && window.localStorage;
+const ZIP_STORAGE_KEY = "shipping-to-zip";
+const sortApps = (results, order) => {
+  return results.sort((a, b) => {
+    if (a.app_id === b.app_id) {
+      return 0;
+    }
+    const indexA = order.indexOf(a.app_id);
+    const indexB = order.indexOf(b.app_id);
+    if (indexA > -1) {
+      if (indexB > -1) {
+        return indexA < indexB ? -1 : 1;
+      }
+      return -1;
+    }
+    if (indexB > -1)
+      return 1;
+    return 0;
+  });
+};
+const reduceItemBody = (itemOrProduct) => {
+  if (!itemOrProduct.product_id) {
+    itemOrProduct.product_id = itemOrProduct._id;
+  }
+  const shippedItem = {};
+  const fields = [
+    "product_id",
+    "variation_id",
+    "sku",
+    "name",
+    "quantity",
+    "inventory",
+    "currency_id",
+    "currency_symbol",
+    "price",
+    "final_price",
+    "dimensions",
+    "weight"
+  ];
+  fields.forEach((field) => {
+    if (itemOrProduct[field] !== void 0) {
+      shippedItem[field] = itemOrProduct[field];
+    }
+  });
+  return shippedItem;
+};
+const useShippingCalculator = (props) => {
+  const zipCode = props.zipCode || ref("");
+  if (!zipCode.value && localStorage$1) {
+    const storedZip = localStorage$1.getItem(ZIP_STORAGE_KEY);
+    if (storedZip) {
+      zipCode.value = storedZip;
+    }
+  }
+  const countryCode = props.countryCode || config.get().countryCode;
+  const _shippedItems = toRef(props, "shippedItems");
+  const shippedItems = computed(() => {
+    return _shippedItems.value?.map(reduceItemBody) || [];
+  });
+  const amountSubtotal = computed(() => {
+    return shippedItems.value.reduce((subtotal, item) => {
+      return subtotal + price(item) * item.quantity;
+    }, 0);
+  });
+  const isFetching = ref(false);
+  const fetchShippingServices = useDebounceFn((isRetry) => {
+    if (isFetching.value) {
+      const unwatch = watch(isFetching, (_isFetching) => {
+        if (!_isFetching) {
+          fetchShippingServices();
+          unwatch();
+        }
+      });
+      return;
+    }
+    const body = {
+      ...props.baseParams,
+      to: {
+        ...props.baseParams?.to,
+        zip: zipCode.value
+      }
+    };
+    if (shippedItems.value.length) {
+      body.items = shippedItems.value;
+      body.subtotal = amountSubtotal.value;
+    }
+    isFetching.value = true;
+    fetchModule("calculate_shipping", {
+      method: "POST",
+      params: {
+        skip_ids: props.skippedAppIds
+      },
+      body
+    }).then(async (response) => {
+      if (response.status === 501)
+        return;
+      const data = await response.json();
+      parseShippingResult(data.result, isRetry);
+    }).catch((err) => {
+      if (!isRetry) {
+        scheduleRetry(4e3);
+      }
+      console.error(err);
+    }).finally(() => {
+      isFetching.value = false;
+    });
+  }, 100);
+  let retryTimer = null;
+  const scheduleRetry = (timeout = 1e4) => {
+    if (retryTimer)
+      clearTimeout(retryTimer);
+    retryTimer = setTimeout(() => {
+      fetchShippingServices(true);
+    }, timeout);
+  };
+  const shippingServices = shallowReactive([]);
+  const freeFromValue = ref(null);
+  const hasPaidOption = ref();
+  const parseShippingResult = (shippingResult = [], isRetry = false) => {
+    freeFromValue.value = null;
+    shippingServices.splice(0);
+    if (shippingResult.length) {
+      let hasSomeFailedApp = false;
+      shippingResult.forEach((appResult) => {
+        const { validated, error, response } = appResult;
+        if (!validated || error) {
+          hasSomeFailedApp = true;
+          return;
+        }
+        if (props.skippedAppIds?.includes(appResult.app_id)) {
+          return;
+        }
+        response.shipping_services.forEach((service) => {
+          shippingServices.push({
+            app_id: appResult.app_id,
+            ...service
+          });
+        });
+        const freeShippingFromValue = response.free_shipping_from_value;
+        if (freeShippingFromValue && (!freeFromValue.value || freeFromValue.value > freeShippingFromValue)) {
+          freeFromValue.value = freeShippingFromValue;
+        }
+      });
+      if (!shippingServices.length) {
+        if (hasSomeFailedApp) {
+          if (!isRetry) {
+            fetchShippingServices(true);
+          } else {
+            scheduleRetry();
+          }
+        }
+        return;
+      }
+      shippingServices.sort((a, b) => {
+        const lineA = a.shipping_line;
+        const lineB = b.shipping_line;
+        const priceDiff = lineA.total_price - lineB.total_price;
+        if (priceDiff < 0)
+          return -1;
+        if (priceDiff > 0)
+          return 1;
+        return lineA.delivery_time?.days < lineB.delivery_time?.days ? -1 : 1;
+      });
+      hasPaidOption.value = Boolean(shippingServices.find((service) => {
+        return service.shipping_line.total_price || service.shipping_line.price;
+      }));
+      const appIdsOrder = props.appIdsOrder || globalThis.ecomShippingApps || [];
+      if (Array.isArray(appIdsOrder) && appIdsOrder.length) {
+        sortApps(shippingServices, appIdsOrder);
+      }
+    }
+  };
+  const submitZipCode = () => {
+    const _zipCode = zipCode.value;
+    if (countryCode === "BR") {
+      if (_zipCode?.replace(/\D/g, "").length !== 8)
+        return;
+    } else if (!_zipCode) {
+      return;
+    }
+    if (localStorage$1) {
+      localStorage$1.setItem(ZIP_STORAGE_KEY, _zipCode);
+    }
+    fetchShippingServices();
+  };
+  watch(zipCode, (value) => {
+    if (value.length) {
+      if (countryCode === "BR") {
+        const fmt = value.replace(/\D/g, "");
+        if (fmt.length > 5) {
+          zipCode.value = fmt.substring(0, 5) + "-" + fmt.substring(5, 8);
+          if (props.canAutoSubmit)
+            submitZipCode();
+        }
+      } else {
+        zipCode.value = value.substring(0, 30);
+      }
+    }
+  }, {
+    immediate: !props.shippingResult
+  });
+  watch(toRef(props, "shippingResult"), (shippingResult) => {
+    if (!shippingResult?.length)
+      return;
+    parseShippingResult(shippingResult);
+  }, {
+    immediate: true
+  });
+  const productionDeadline = computed(() => {
+    let maxDeadline = 0;
+    _shippedItems.value?.forEach((item) => {
+      if (item.quantity && item.production_time) {
+        const { days, cumulative } = item.production_time;
+        const itemDeadline = cumulative ? days * item.quantity : days;
+        if (itemDeadline > maxDeadline) {
+          maxDeadline = itemDeadline;
+        }
+      }
+    });
+    return maxDeadline;
+  });
+  const getShippingDeadline = (shipping) => {
+    const isWorkingDays = Boolean(shipping.posting_deadline?.working_days || shipping.delivery_time?.working_days);
+    let days = shipping.posting_deadline?.days || 0;
+    if (shipping.delivery_time) {
+      days += shipping.delivery_time.days;
+    }
+    days += productionDeadline.value;
+    if (days > 1) {
+      return `${i19upTo} ${days} ` + (isWorkingDays ? i19workingDays : i19days).toLowerCase();
+    }
+    if (days === 1)
+      return i19untilTomorrow;
+    return shipping.pick_up ? i19pickUpToday : i19receiveToday;
+  };
+  const getShippingPrice = (shipping) => {
+    const freight = typeof shipping.total_price === "number" ? shipping.total_price : shipping.price;
+    if (freight)
+      return formatMoney(freight);
+    return shipping.pick_up ? i19free : i19freeShipping;
+  };
+  return {
+    zipCode,
+    shippedItems,
+    amountSubtotal,
+    submitZipCode,
+    fetchShippingServices,
+    isFetching,
+    freeFromValue,
+    shippingServices,
+    parseShippingResult,
+    productionDeadline,
+    getShippingDeadline,
+    getShippingPrice
+  };
+};
+
+const _sfc_main$7 = {};
+
+function _sfc_ssrRender$7(_ctx, _push, _parent, _attrs) {
+  _push(`<div${ssrRenderAttrs(mergeProps({ role: "status" }, _attrs))}><svg aria-hidden="true" class="size-8 max-h-full max-w-full animate-spin fill-secondary text-base-300" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div>`);
+}
+const _sfc_setup$7 = _sfc_main$7.setup;
+_sfc_main$7.setup = (props, ctx) => {
+  const ssrContext = useSSRContext()
+  ;(ssrContext.modules || (ssrContext.modules = new Set())).add("src/lib/components/Spinner.vue");
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : undefined
+};
+const Spinner = /*#__PURE__*/_export_sfc(_sfc_main$7, [['ssrRender',_sfc_ssrRender$7]]);
+
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "ShippingCalculator",
+  props: {
+    hasLabel: { type: Boolean },
+    zipCode: {},
+    canAutoSubmit: { type: Boolean },
+    countryCode: {},
+    shippedItems: {},
+    shippingResult: {},
+    baseParams: {},
+    skippedAppIds: {},
+    appIdsOrder: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const zipCode = ref("");
+    const zipInputId = useId("ZipInput");
+    const {
+      isFetching,
+      fetchShippingServices,
+      shippingServices,
+      getShippingDeadline,
+      getShippingPrice
+    } = useShippingCalculator({ ...props, zipCode });
+    const isMounted = ref(false);
+    onMounted(() => {
+      isMounted.value = true;
+    });
+    const __returned__ = { props, zipCode, zipInputId, isFetching, fetchShippingServices, shippingServices, getShippingDeadline, getShippingPrice, isMounted, Spinner };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$6(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_ALink = resolveComponent("ALink");
+  const _component_Fade = resolveComponent("Fade");
+  _push(`<div${ssrRenderAttrs(mergeProps({ class: "max-w-sm" }, _attrs))}><form class="group"><label${ssrRenderAttr("for", $setup.zipInputId)} class="${ssrRenderClass($props.hasLabel ? "lg:text-sm text-base-700 flex flex-wrap gap-x-5 items-center mb-1.5" : "sr-only")}"><span>${ssrInterpolate("Calcular frete")}</span>`);
+  if ($props.hasLabel && _ctx.$settings.countryCode === "BR") {
+    _push(ssrRenderComponent(_component_ALink, {
+      href: "https://buscacepinter.correios.com.br/app/endereco/index.php",
+      class: "ui-link text-base-500 text-xs font-normal"
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(` N\xE3o sei meu CEP <i class="i-arrow-top-right-on-square mr-1 opacity-50"${_scopeId}></i>`);
+        } else {
+          return [
+            createTextVNode(" N\xE3o sei meu CEP "),
+            createVNode("i", { class: "i-arrow-top-right-on-square mr-1 opacity-50" })
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</label><div class="relative max-w-52"><input${ssrRenderAttr("id", $setup.zipInputId)} type="tel"${ssrIncludeBooleanAttr($setup.isFetching) ? " readonly" : ""}${ssrRenderAttr("value", $setup.zipCode)} placeholder="12345-123" class="${ssrRenderClass([$setup.isFetching && "bg-base-50", "w-full"])}"><button class="${ssrRenderClass([$setup.isMounted && !$setup.shippingServices.length && $setup.zipCode.length > 1 ? "text-primary" : `${$props.hasLabel ? "text-base-400" : "text-base-600"}`, "hover:text-primary group-focus-within:text-primary absolute inset-y-0 end-0 grid w-12 place-content-center text-xl"])}"${ssrRenderAttr("aria-label", "Calcular frete")}>`);
+  if ($setup.isFetching) {
+    _push(ssrRenderComponent($setup["Spinner"], { class: "size-5" }, null, _parent));
+  } else {
+    _push(`<i class="i-truck"></i>`);
+  }
+  _push(`</button></div></form>`);
+  _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if (!$setup.isFetching && $setup.shippingServices.length) {
+          _push2(`<ul class="divide-base-200 bg-base-50/50 border-base-100 mt-2 grow divide-y rounded border px-3 py-1"${_scopeId}><!--[-->`);
+          ssrRenderList($setup.shippingServices, ({ label, shipping_line: shipping }, i) => {
+            _push2(`<li class="text-base-800 py-2.5 md:text-sm"${_scopeId}><div class="flex flex-wrap items-center"${_scopeId}><div class="grow"${_scopeId}><strong class="mr-2 font-semibold"${_scopeId}>${ssrInterpolate($setup.getShippingDeadline(shipping))}</strong><span class="mr-2"${_scopeId}>${ssrInterpolate($setup.getShippingPrice(shipping))}</span></div><small class="text-base-600"${_scopeId}>${ssrInterpolate(label)}</small></div>`);
+            if (shipping.delivery_instructions) {
+              _push2(`<small class="text-base-700"${_scopeId}>${ssrInterpolate(shipping.delivery_instructions)}</small>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`</li>`);
+          });
+          _push2(`<!--]--></ul>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          !$setup.isFetching && $setup.shippingServices.length ? (openBlock(), createBlock("ul", {
+            key: 0,
+            class: "divide-base-200 bg-base-50/50 border-base-100 mt-2 grow divide-y rounded border px-3 py-1"
+          }, [
+            (openBlock(true), createBlock(Fragment, null, renderList($setup.shippingServices, ({ label, shipping_line: shipping }, i) => {
+              return openBlock(), createBlock("li", {
+                key: `${$setup.zipCode}-${i}`,
+                class: "text-base-800 py-2.5 md:text-sm"
+              }, [
+                createVNode("div", { class: "flex flex-wrap items-center" }, [
+                  createVNode("div", { class: "grow" }, [
+                    createVNode("strong", { class: "mr-2 font-semibold" }, toDisplayString($setup.getShippingDeadline(shipping)), 1),
+                    createVNode("span", { class: "mr-2" }, toDisplayString($setup.getShippingPrice(shipping)), 1)
+                  ]),
+                  createVNode("small", { class: "text-base-600" }, toDisplayString(label), 1)
+                ]),
+                shipping.delivery_instructions ? (openBlock(), createBlock("small", {
+                  key: 0,
+                  class: "text-base-700"
+                }, toDisplayString(shipping.delivery_instructions), 1)) : createCommentVNode("", true)
+              ]);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</div>`);
+}
+const _sfc_setup$6 = _sfc_main$6.setup;
+_sfc_main$6.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ShippingCalculator.vue");
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
+};
+const ShippingCalculator = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["ssrRender", _sfc_ssrRender$6]]);
+
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "ProductDetails",
+  props: {
+    product: { default: () => globalThis.$storefront.apiContext?.doc },
+    cmsPreview: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      product,
+      title,
+      isActive
+    } = useProductCard(props);
+    const quantity = ref(product.min_quantity || 1);
+    const params = useUrlSearchParams("history");
+    const hasSkuSelectionAlert = ref(false);
+    const variationId = ref(null);
+    watch(variationId, (_variationId) => {
+      if (_variationId) {
+        params.var = _variationId;
+        hasSkuSelectionAlert.value = false;
+      }
+    });
+    onMounted(() => {
+      watch(params, ({ var: variation }) => {
+        if (typeof variation === "string" && variation) {
+          variationId.value = variation;
+        }
+      }, { immediate: true });
+    });
+    const isSkuSelected = computed(() => {
+      return Boolean(!product.variations?.length || variationId.value);
+    });
+    const checkVariation = (ev) => {
+      if (!isSkuSelected.value) {
+        if (ev)
+          ev.preventDefault();
+        hasSkuSelectionAlert.value = true;
+      } else {
+        hasSkuSelectionAlert.value = false;
+      }
+      return !hasSkuSelectionAlert.value;
+    };
+    const addToCart = () => {
+      if (!checkVariation())
+        return;
+      addProductToCart(product, variationId.value || void 0, quantity.value);
+    };
+    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__;
+  }
+});
+function _sfc_ssrRender$5(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Fade = resolveComponent("Fade");
+  _push(`<section${ssrRenderAttrs(mergeProps({ class: "relative grid grid-cols-1 items-start gap-x-5 ui-section lg:grid-cols-4 lg:gap-x-4 2xl:gap-x-6" }, _attrs))}><div class="w-full lg:col-span-3">`);
+  if ($setup.product.pictures?.length) {
+    _push(ssrRenderComponent($setup["ImagesGallery"], {
+      pictures: $setup.product.pictures,
+      class: "mb-5"
+    }, null, _parent));
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div><div class="top-0 pt-4 transition-transform lg:sticky lg:pb-4 lg:sticky-header:translate-y-14"><h1 class="text-lg text-secondary-900 ui-text-brand">${ssrInterpolate($setup.title)}</h1>`);
+  if ($setup.isActive) {
+    _push(`<div class="mt-5">`);
+    _push(ssrRenderComponent($setup["Prices"], {
+      product: $setup.product,
+      "is-big": "",
+      "is-literal": ""
+    }, null, _parent));
+    if ($setup.product.variations) {
+      _push(ssrRenderComponent($setup["SkuSelector"], {
+        variations: $setup.product.variations,
+        "variation-id": $setup.variationId,
+        "onUpdate:variationId": ($event) => $setup.variationId = $event,
+        class: "my-4"
+      }, null, _parent));
+    } else {
+      _push(`<!---->`);
+    }
+    _push(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          if ($setup.hasSkuSelectionAlert) {
+            _push2(`<div class="inline-block ui-alert"${_scopeId}>${ssrInterpolate("Por favor selecione uma op\xE7\xE3o em cada campo acima")} <i class="ml-1 -rotate-90 i-arrow-right"${_scopeId}></i></div>`);
+          } else {
+            _push2(`<!---->`);
+          }
+        } else {
+          return [
+            $setup.hasSkuSelectionAlert ? (openBlock(), createBlock("div", {
+              key: 0,
+              class: "inline-block ui-alert"
+            }, [
+              createTextVNode(toDisplayString("Por favor selecione uma op\xE7\xE3o em cada campo acima") + " "),
+              createVNode("i", { class: "ml-1 -rotate-90 i-arrow-right" })
+            ])) : createCommentVNode("", true)
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+    _push(`<div class="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2 md:flex-nowrap lg:mt-4 lg:flex-wrap">`);
+    _push(ssrRenderComponent($setup["QuantitySelector"], {
+      modelValue: $setup.quantity,
+      "onUpdate:modelValue": ($event) => $setup.quantity = $event,
+      min: $setup.product.min_quantity,
+      max: $setup.product.quantity,
+      class: "rounded border-base-100 md:mr-5 lg:mb-2 lg:mr-auto lg:border-2"
+    }, null, _parent));
+    _push(ssrRenderComponent($setup["CheckoutLink"], {
+      class: "grow text-center ui-btn-lg ui-btn-primary",
+      to: "checkout",
+      "cart-item": {
+        product_id: $setup.product._id,
+        quantity: $setup.quantity,
+        variation_id: $setup.variationId || void 0
+      },
+      "data-tooltip": !$setup.isSkuSelected ? "Escolha os detalhes do produto para comprar" : null,
+      onClick: $setup.checkVariation
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(`<i class="mr-1 i-chevron-double-right"${_scopeId}></i> ${ssrInterpolate("Comprar")}`);
+        } else {
+          return [
+            createVNode("i", { class: "mr-1 i-chevron-double-right" }),
+            createTextVNode(" " + toDisplayString("Comprar"))
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+    _push(`<button class="grow ui-btn-lg ui-btn-contrast"${ssrRenderAttr("data-tooltip", !$setup.isSkuSelected ? "Escolha os detalhes do produto para comprar" : null)}>${ssrInterpolate("Adicionar ao carrinho")}</button></div><div class="mt-6 rounded border-2 border-base-50 border-t-base-100 p-4 lg:mt-4">`);
+    _push(ssrRenderComponent($setup["ShippingCalculator"], {
+      "shipped-items": [{ ...$setup.product, quantity: $setup.quantity }],
+      "has-label": ""
+    }, null, _parent));
+    _push(`</div></div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div><div class="w-full lg:col-span-3">`);
+  ssrRenderSlot(_ctx.$slots, "description", {}, null, _push, _parent);
+  _push(`</div></section>`);
+}
+const _sfc_setup$5 = _sfc_main$5.setup;
+_sfc_main$5.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ProductDetails.vue");
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
+};
+const ProductDetails = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["ssrRender", _sfc_ssrRender$5]]);
+
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "ProductSpecifications",
+  props: {
+    product: { default: () => globalThis.$storefront.apiContext?.doc },
+    title: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const specifications = computed(() => props.product.specifications || {});
+    const hasSpecs = computed(() => Object.keys(specifications.value).length);
+    const { grids } = globalThis.$storefront.data;
+    const __returned__ = { props, specifications, hasSpecs, grids, get getGridTitle() {
+      return gridTitle;
+    }, get getSpecTextValue() {
+      return specTextValue;
+    }, Collapse };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  if ($setup.hasSpecs) {
+    _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
+    _push(ssrRenderComponent($setup["Collapse"], {
+      title: $props.title || "Especifica\xE7\xF5es"
+    }, {
+      default: withCtx((_, _push2, _parent2, _scopeId) => {
+        if (_push2) {
+          _push2(`<ul${_scopeId}><!--[-->`);
+          ssrRenderList($setup.specifications, (grid, gridId) => {
+            _push2(`<li class="border-base-200 grid grid-cols-2 border-dashed py-2 sm:grid-cols-3 [&amp;:not(:last-child)]:border-b"${_scopeId}><span class="text-base-700"${_scopeId}>${ssrInterpolate($setup.getGridTitle(`${gridId}`, $setup.grids || []))}</span><strong class="font-semibold sm:col-span-2"${_scopeId}>${ssrInterpolate($setup.getSpecTextValue($props.product, `${gridId}`, $setup.grids))}</strong></li>`);
+          });
+          _push2(`<!--]--></ul>`);
+        } else {
+          return [
+            createVNode("ul", null, [
+              (openBlock(true), createBlock(Fragment, null, renderList($setup.specifications, (grid, gridId) => {
+                return openBlock(), createBlock("li", {
+                  key: gridId,
+                  class: "border-base-200 grid grid-cols-2 border-dashed py-2 sm:grid-cols-3 [&:not(:last-child)]:border-b"
+                }, [
+                  createVNode("span", { class: "text-base-700" }, toDisplayString($setup.getGridTitle(`${gridId}`, $setup.grids || [])), 1),
+                  createVNode("strong", { class: "font-semibold sm:col-span-2" }, toDisplayString($setup.getSpecTextValue($props.product, `${gridId}`, $setup.grids)), 1)
+                ]);
+              }), 128))
+            ])
+          ];
+        }
+      }),
+      _: 1
+    }, _parent));
+    _push(`</section>`);
+  } else {
+    _push(`<!---->`);
+  }
+}
+const _sfc_setup$4 = _sfc_main$4.setup;
+_sfc_main$4.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ProductSpecifications.vue");
+  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+};
+const ProductSpecifications = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "SearchFilters",
+  props: {
+    searchEngine: {},
+    fixedParams: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      resultBuckets,
+      activeFilters,
+      filtersCount,
+      clearFilters,
+      priceRanges,
+      priceRangeKey,
+      getPriceRangeLabel,
+      filterOptions,
+      checkFilterOption,
+      toggleFilterOption
+    } = useSearchFilters(props);
+    const __returned__ = { props, resultBuckets, activeFilters, filtersCount, clearFilters, priceRanges, priceRangeKey, getPriceRangeLabel, filterOptions, checkFilterOption, toggleFilterOption, Collapse };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<aside${ssrRenderAttrs(mergeProps({ class: "bg-base-50/40 h-screen overflow-y-auto" }, _attrs))}><header class="px-6 pb-3 pt-5 text-center">`);
+  if ($setup.filtersCount) {
+    _push(`<button class="ui-btn-sm ui-btn-danger py-1">${ssrInterpolate("Limpar filtros")} <i class="i-trash ml-0.5"></i></button>`);
+  } else {
+    _push(`<p class="text-base-500 border border-transparent pb-1 text-base font-semibold">${ssrInterpolate("Filtrar resultados")}</p>`);
+  }
+  _push(`</header>`);
+  if ($setup.resultBuckets) {
+    _push(`<article class="px-6 pb-3">`);
+    if ($setup.priceRanges) {
+      _push(ssrRenderComponent($setup["Collapse"], {
+        title: "Pre\xE7o",
+        class: "[&>summary]:text-xl",
+        open: ""
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="space-y-1.5"${_scopeId}><!--[-->`);
+            ssrRenderList($setup.priceRanges, ({ range, key }) => {
+              _push2(`<div class="flex items-center"${_scopeId}><input type="radio"${ssrRenderAttr("id", `priceRange-${key}`)} name="priceRange"${ssrRenderAttr("value", key)}${ssrIncludeBooleanAttr(ssrLooseEqual($setup.priceRangeKey, key)) ? " checked" : ""}${_scopeId}><label${ssrRenderAttr("for", `priceRange-${key}`)} class="cursor-pointer px-3 text-sm"${_scopeId}>${ssrInterpolate($setup.getPriceRangeLabel(range))} <small class="text-base-500 font-medium"${_scopeId}> (${ssrInterpolate(range.count)}) </small></label></div>`);
+            });
+            _push2(`<!--]-->`);
+            if ($setup.activeFilters["price<"] || $setup.activeFilters["price>"]) {
+              _push2(`<div class="flex items-center"${_scopeId}><input type="radio" id="priceRange-null" name="priceRange"${ssrRenderAttr("value", null)}${ssrIncludeBooleanAttr(ssrLooseEqual($setup.priceRangeKey, null)) ? " checked" : ""}${_scopeId}><label for="priceRange-null" class="cursor-pointer px-3 text-sm"${_scopeId}>${ssrInterpolate("Qualquer pre\xE7o")}</label></div>`);
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`</div>`);
+          } else {
+            return [
+              createVNode("div", { class: "space-y-1.5" }, [
+                (openBlock(true), createBlock(Fragment, null, renderList($setup.priceRanges, ({ range, key }) => {
+                  return openBlock(), createBlock("div", {
+                    key: `prices-${key}`,
+                    class: "flex items-center"
+                  }, [
+                    withDirectives(createVNode("input", {
+                      type: "radio",
+                      id: `priceRange-${key}`,
+                      name: "priceRange",
+                      value: key,
+                      "onUpdate:modelValue": ($event) => $setup.priceRangeKey = $event
+                    }, null, 8, ["id", "value", "onUpdate:modelValue"]), [
+                      [vModelRadio, $setup.priceRangeKey]
+                    ]),
+                    createVNode("label", {
+                      for: `priceRange-${key}`,
+                      class: "cursor-pointer px-3 text-sm"
+                    }, [
+                      createTextVNode(toDisplayString($setup.getPriceRangeLabel(range)) + " ", 1),
+                      createVNode("small", { class: "text-base-500 font-medium" }, " (" + toDisplayString(range.count) + ") ", 1)
+                    ], 8, ["for"])
+                  ]);
+                }), 128)),
+                $setup.activeFilters["price<"] || $setup.activeFilters["price>"] ? (openBlock(), createBlock("div", {
+                  key: 0,
+                  class: "flex items-center"
+                }, [
+                  withDirectives(createVNode("input", {
+                    type: "radio",
+                    id: "priceRange-null",
+                    name: "priceRange",
+                    value: null,
+                    "onUpdate:modelValue": ($event) => $setup.priceRangeKey = $event
+                  }, null, 8, ["onUpdate:modelValue"]), [
+                    [vModelRadio, $setup.priceRangeKey]
+                  ]),
+                  createVNode("label", {
+                    for: "priceRange-null",
+                    class: "cursor-pointer px-3 text-sm"
+                  }, toDisplayString("Qualquer pre\xE7o"))
+                ])) : createCommentVNode("", true)
+              ])
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`<!--[-->`);
+    ssrRenderList($setup.filterOptions, ({ title, options, field }) => {
+      _push(ssrRenderComponent($setup["Collapse"], {
+        key: field,
+        title,
+        class: "[&>summary]:text-xl",
+        open: !!$setup.activeFilters[field]
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="space-y-1.5"${_scopeId}><!--[-->`);
+            ssrRenderList(options, (count, value, i) => {
+              _push2(`<div class="flex items-center"${_scopeId}><input type="checkbox"${ssrRenderAttr("id", `${field}-${value}`)}${ssrRenderAttr("value", value)}${ssrIncludeBooleanAttr($setup.checkFilterOption(field, value)) ? " checked" : ""}${_scopeId}><label${ssrRenderAttr("for", `${field}-${value}`)} class="cursor-pointer px-3 text-sm"${_scopeId}>${ssrInterpolate(value)} <small class="text-base-500 font-medium"${_scopeId}> (${ssrInterpolate(count)}) </small></label></div>`);
+            });
+            _push2(`<!--]--></div>`);
+          } else {
+            return [
+              createVNode("div", { class: "space-y-1.5" }, [
+                (openBlock(true), createBlock(Fragment, null, renderList(options, (count, value, i) => {
+                  return openBlock(), createBlock("div", {
+                    key: `${field}-${i}`,
+                    class: "flex items-center"
+                  }, [
+                    createVNode("input", {
+                      type: "checkbox",
+                      id: `${field}-${value}`,
+                      value,
+                      checked: $setup.checkFilterOption(field, value),
+                      onChange: ($event) => $setup.toggleFilterOption(field, value)
+                    }, null, 40, ["id", "value", "checked", "onChange"]),
+                    createVNode("label", {
+                      for: `${field}-${value}`,
+                      class: "cursor-pointer px-3 text-sm"
+                    }, [
+                      createTextVNode(toDisplayString(value) + " ", 1),
+                      createVNode("small", { class: "text-base-500 font-medium" }, " (" + toDisplayString(count) + ") ", 1)
+                    ], 8, ["for"])
+                  ]);
+                }), 128))
+              ])
+            ];
+          }
+        }),
+        _: 2
+      }, _parent));
+    });
+    _push(`<!--]--></article>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</aside>`);
+}
+const _sfc_setup$3 = _sfc_main$3.setup;
+_sfc_main$3.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/SearchFilters.vue");
+  return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
+};
+const SearchFilters = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
+
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "SearchShowcase",
+  props: {
+    term: {},
+    pageSize: {},
+    fixedParams: {},
+    products: {},
+    resultMeta: {},
+    ssrError: {},
+    canUseUrlParams: { type: Boolean, default: true },
+    showcase: {},
+    searchEngine: {},
+    cmsPreview: {}
+  },
+  async setup(__props, { expose: __expose }) {
+    __expose();
+    let __temp, __restore;
+    const props = __props;
+    const showcase = ref(null);
+    const {
+      searchEngine,
+      fetching,
+      isFetching,
+      products,
+      resultMeta,
+      totalPages,
+      filtersCount,
+      sortOptions,
+      sortOption
+    } = useSearchShowcase({ ...props, showcase });
+    {
+      [__temp, __restore] = withAsyncContext(() => fetching), await __temp, __restore();
+    }
+    const wasFetched = computed(() => searchEngine.wasFetched.value);
+    const searchTerm = computed(() => searchEngine.term.value);
+    const hasFiltersBar = computed(() => {
+      return wasFetched && !!(resultMeta.value.count > 4 || filtersCount.value);
+    });
+    const isFiltersOpen = ref(false);
+    const __returned__ = { props, showcase, searchEngine, fetching, isFetching, products, resultMeta, totalPages, filtersCount, sortOptions, sortOption, wasFetched, searchTerm, hasFiltersBar, isFiltersOpen, get Listbox() {
+      return Listbox;
+    }, get ListboxButton() {
+      return ListboxButton;
+    }, get ListboxOptions() {
+      return ListboxOptions;
+    }, get ListboxOption() {
+      return ListboxOption;
+    }, Drawer, Pagination, ProductShelf, SearchFilters };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  const _component_Skeleton = resolveComponent("Skeleton");
+  const _component_Fade = resolveComponent("Fade");
+  _push(`<!--[-->`);
+  if ($setup.searchTerm) {
+    _push(`<section class="${ssrRenderClass([$setup.hasFiltersBar ? "relative z-[14] -mb-4" : "mb-0", "px-6 text-center text-xl lowercase text-base-700 ui-section-slim"])}">${ssrInterpolate("Buscando por")} <h1 class="inline font-bold italic text-base-800">${ssrInterpolate($setup.searchTerm)}</h1></section>`);
+  } else {
+    _push(`<!---->`);
+  }
+  if ($setup.isFetching && !$setup.products.length) {
+    _push(`<div class="relative min-h-[300px] ui-section">`);
+    _push(ssrRenderComponent(_component_Skeleton, {
+      class: "absolute top-0 w-full px-5",
+      "is-bold": "",
+      "is-large": ""
+    }, null, _parent));
+    _push(`</div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`<article class="relative">`);
+  _push(ssrRenderComponent(_component_Fade, null, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.hasFiltersBar) {
+          _push2(`<section class="sticky top-0 z-[12] flex items-center justify-between rounded-b bg-white/80 to-base-100 px-6 py-4 shadow-sm backdrop-blur-sm transition-transform ui-section-slim sticky-header:translate-y-16 lg:sticky-header:translate-y-14"${_scopeId}><strong class="font-medium lowercase text-base-700"${_scopeId}>`);
+          if ($setup.resultMeta.count > 1) {
+            _push2(`<!--[-->${ssrInterpolate($setup.resultMeta.count)} <span class="hidden lg:inline"${_scopeId}>${ssrInterpolate("Itens encontrados")}</span><span class="lg:hidden"${_scopeId}>${ssrInterpolate("Produtos")}</span><!--]-->`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</strong><div class="flex items-center gap-4"${_scopeId}><span class="hidden text-xl leading-none md:block"${_scopeId}><i class="m-0 text-base-600 i-adjustments-horizontal"${_scopeId}></i></span><button class="relative ui-btn-sm ui-btn-secondary"${_scopeId}><span class="hidden md:inline"${_scopeId}>${ssrInterpolate("Filtrar produtos")}</span><span class="md:hidden"${_scopeId}><i class="mr-1 i-adjustments-horizontal"${_scopeId}></i> ${ssrInterpolate("Filtrar")}</span>`);
+          if ($setup.filtersCount) {
+            _push2(`<span class="outline-3 absolute -right-1.5 -top-1 outline outline-secondary/80 ui-badge-pill-sm"${_scopeId}>${ssrInterpolate($setup.filtersCount)}</span>`);
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</button>`);
+          if (!$props.fixedParams?.sort) {
+            _push2(ssrRenderComponent($setup["Listbox"], {
+              modelValue: $setup.sortOption,
+              "onUpdate:modelValue": ($event) => $setup.sortOption = $event,
+              as: "div",
+              class: "relative text-sm text-base-800"
+            }, {
+              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                if (_push3) {
+                  _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")}`);
+                      } else {
+                        return [
+                          createTextVNode(toDisplayString("Ordenar"))
+                        ];
+                      }
+                    }),
+                    _: 1
+                  }, _parent3, _scopeId2));
+                  _push3(ssrRenderComponent(_component_Fade, null, {
+                    default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                      if (_push4) {
+                        _push4(ssrRenderComponent($setup["ListboxOptions"], { class: "absolute right-0 mt-2 divide-y divide-base-100 rounded bg-white shadow ring-1 ring-black/5 focus:outline-none" }, {
+                          default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                            if (_push5) {
+                              _push5(`<!--[-->`);
+                              ssrRenderList($setup.sortOptions, ({ label, value }) => {
+                                _push5(ssrRenderComponent($setup["ListboxOption"], {
+                                  key: value || "sort",
+                                  value,
+                                  as: "template"
+                                }, {
+                                  default: withCtx(({ selected, active }, _push6, _parent6, _scopeId5) => {
+                                    if (_push6) {
+                                      _push6(`<li${_scopeId5}>`);
+                                      ssrRenderVNode(_push6, createVNode(resolveDynamicComponent(selected ? "div" : "button"), {
+                                        class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                      }, {
+                                        default: withCtx((_5, _push7, _parent7, _scopeId6) => {
+                                          if (_push7) {
+                                            _push7(`<div class="w-5"${_scopeId6}><i style="${ssrRenderStyle(selected ? null : { display: "none" })}" class="i-check"${_scopeId6}></i></div> ${ssrInterpolate(label)}`);
+                                          } else {
+                                            return [
+                                              createVNode("div", { class: "w-5" }, [
+                                                withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                                  [vShow, selected]
+                                                ])
+                                              ]),
+                                              createTextVNode(" " + toDisplayString(label), 1)
+                                            ];
+                                          }
+                                        }),
+                                        _: 2
+                                      }), _parent6, _scopeId5);
+                                      _push6(`</li>`);
+                                    } else {
+                                      return [
+                                        createVNode("li", null, [
+                                          (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                            class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                          }, {
+                                            default: withCtx(() => [
+                                              createVNode("div", { class: "w-5" }, [
+                                                withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                                  [vShow, selected]
+                                                ])
+                                              ]),
+                                              createTextVNode(" " + toDisplayString(label), 1)
+                                            ]),
+                                            _: 2
+                                          }, 1032, ["class"]))
+                                        ])
+                                      ];
+                                    }
+                                  }),
+                                  _: 2
+                                }, _parent5, _scopeId4));
+                              });
+                              _push5(`<!--]-->`);
+                            } else {
+                              return [
+                                (openBlock(true), createBlock(Fragment, null, renderList($setup.sortOptions, ({ label, value }) => {
+                                  return openBlock(), createBlock($setup["ListboxOption"], {
+                                    key: value || "sort",
+                                    value,
+                                    as: "template"
+                                  }, {
+                                    default: withCtx(({ selected, active }) => [
+                                      createVNode("li", null, [
+                                        (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                          class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                        }, {
+                                          default: withCtx(() => [
+                                            createVNode("div", { class: "w-5" }, [
+                                              withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                                [vShow, selected]
+                                              ])
+                                            ]),
+                                            createTextVNode(" " + toDisplayString(label), 1)
+                                          ]),
+                                          _: 2
+                                        }, 1032, ["class"]))
+                                      ])
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["value"]);
+                                }), 128))
+                              ];
+                            }
+                          }),
+                          _: 1
+                        }, _parent4, _scopeId3));
+                      } else {
+                        return [
+                          createVNode($setup["ListboxOptions"], { class: "absolute right-0 mt-2 divide-y divide-base-100 rounded bg-white shadow ring-1 ring-black/5 focus:outline-none" }, {
+                            default: withCtx(() => [
+                              (openBlock(true), createBlock(Fragment, null, renderList($setup.sortOptions, ({ label, value }) => {
+                                return openBlock(), createBlock($setup["ListboxOption"], {
+                                  key: value || "sort",
+                                  value,
+                                  as: "template"
+                                }, {
+                                  default: withCtx(({ selected, active }) => [
+                                    createVNode("li", null, [
+                                      (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                        class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                      }, {
+                                        default: withCtx(() => [
+                                          createVNode("div", { class: "w-5" }, [
+                                            withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                              [vShow, selected]
+                                            ])
+                                          ]),
+                                          createTextVNode(" " + toDisplayString(label), 1)
+                                        ]),
+                                        _: 2
+                                      }, 1032, ["class"]))
+                                    ])
+                                  ]),
+                                  _: 2
+                                }, 1032, ["value"]);
+                              }), 128))
+                            ]),
+                            _: 1
+                          })
+                        ];
+                      }
+                    }),
+                    _: 1
+                  }, _parent3, _scopeId2));
+                } else {
+                  return [
+                    createVNode($setup["ListboxButton"], {
+                      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: "absolute right-0 mt-2 divide-y divide-base-100 rounded bg-white shadow ring-1 ring-black/5 focus:outline-none" }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createBlock(Fragment, null, renderList($setup.sortOptions, ({ label, value }) => {
+                              return openBlock(), createBlock($setup["ListboxOption"], {
+                                key: value || "sort",
+                                value,
+                                as: "template"
+                              }, {
+                                default: withCtx(({ selected, active }) => [
+                                  createVNode("li", null, [
+                                    (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                      class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode("div", { class: "w-5" }, [
+                                          withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                            [vShow, selected]
+                                          ])
+                                        ]),
+                                        createTextVNode(" " + toDisplayString(label), 1)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["class"]))
+                                  ])
+                                ]),
+                                _: 2
+                              }, 1032, ["value"]);
+                            }), 128))
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })
+                  ];
+                }
+              }),
+              _: 1
+            }, _parent2, _scopeId));
+          } else {
+            _push2(`<!---->`);
+          }
+          _push2(`</div></section>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.hasFiltersBar ? (openBlock(), createBlock("section", {
+            key: 0,
+            class: "sticky top-0 z-[12] flex items-center justify-between rounded-b bg-white/80 to-base-100 px-6 py-4 shadow-sm backdrop-blur-sm transition-transform ui-section-slim sticky-header:translate-y-16 lg:sticky-header:translate-y-14"
+          }, [
+            createVNode("strong", { class: "font-medium lowercase text-base-700" }, [
+              $setup.resultMeta.count > 1 ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                createTextVNode(toDisplayString($setup.resultMeta.count) + " ", 1),
+                createVNode("span", { class: "hidden lg:inline" }, toDisplayString("Itens encontrados")),
+                createVNode("span", { class: "lg:hidden" }, toDisplayString("Produtos"))
+              ], 64)) : createCommentVNode("", true)
+            ]),
+            createVNode("div", { class: "flex items-center gap-4" }, [
+              createVNode("span", { class: "hidden text-xl leading-none md:block" }, [
+                createVNode("i", { class: "m-0 text-base-600 i-adjustments-horizontal" })
+              ]),
+              createVNode("button", {
+                onClick: ($event) => $setup.isFiltersOpen = !$setup.isFiltersOpen,
+                class: "relative ui-btn-sm ui-btn-secondary"
+              }, [
+                createVNode("span", { class: "hidden md:inline" }, toDisplayString("Filtrar produtos")),
+                createVNode("span", { class: "md:hidden" }, [
+                  createVNode("i", { class: "mr-1 i-adjustments-horizontal" }),
+                  createTextVNode(" " + toDisplayString("Filtrar"))
+                ]),
+                $setup.filtersCount ? (openBlock(), createBlock("span", {
+                  key: 0,
+                  class: "outline-3 absolute -right-1.5 -top-1 outline outline-secondary/80 ui-badge-pill-sm"
+                }, toDisplayString($setup.filtersCount), 1)) : createCommentVNode("", true)
+              ], 8, ["onClick"]),
+              !$props.fixedParams?.sort ? (openBlock(), createBlock($setup["Listbox"], {
+                key: 0,
+                modelValue: $setup.sortOption,
+                "onUpdate:modelValue": ($event) => $setup.sortOption = $event,
+                as: "div",
+                class: "relative text-sm text-base-800"
+              }, {
+                default: withCtx(() => [
+                  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: "absolute right-0 mt-2 divide-y divide-base-100 rounded bg-white shadow ring-1 ring-black/5 focus:outline-none" }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createBlock(Fragment, null, renderList($setup.sortOptions, ({ label, value }) => {
+                            return openBlock(), createBlock($setup["ListboxOption"], {
+                              key: value || "sort",
+                              value,
+                              as: "template"
+                            }, {
+                              default: withCtx(({ selected, active }) => [
+                                createVNode("li", null, [
+                                  (openBlock(), createBlock(resolveDynamicComponent(selected ? "div" : "button"), {
+                                    class: ["flex w-full py-2 pl-3 pr-6", !selected && active && "bg-secondary-100 text-secondary"]
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode("div", { class: "w-5" }, [
+                                        withDirectives(createVNode("i", { class: "i-check" }, null, 512), [
+                                          [vShow, selected]
+                                        ])
+                                      ]),
+                                      createTextVNode(" " + toDisplayString(label), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["class"]))
+                                ])
+                              ]),
+                              _: 2
+                            }, 1032, ["value"]);
+                          }), 128))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue", "onUpdate:modelValue"])) : createCommentVNode("", true)
+            ])
+          ])) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent($setup["ProductShelf"], {
+    products: $setup.products,
+    "is-grid": ""
+  }, {
+    append: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(ssrRenderComponent(_component_Fade, { slide: "down" }, {
+          default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            if (_push3) {
+              if (!$setup.isFetching && $setup.totalPages > 1) {
+                _push3(`<nav class="mt-3 lg:mt-4"${_scopeId2}>`);
+                _push3(ssrRenderComponent($setup["Pagination"], {
+                  page: $setup.searchEngine.pageNumber.value,
+                  "onUpdate:page": ($event) => $setup.searchEngine.pageNumber.value = $event,
+                  "total-pages": $setup.totalPages
+                }, null, _parent3, _scopeId2));
+                _push3(`</nav>`);
+              } else {
+                _push3(`<!---->`);
+              }
+            } else {
+              return [
+                !$setup.isFetching && $setup.totalPages > 1 ? (openBlock(), createBlock("nav", {
+                  key: 0,
+                  class: "mt-3 lg:mt-4"
+                }, [
+                  createVNode($setup["Pagination"], {
+                    page: $setup.searchEngine.pageNumber.value,
+                    "onUpdate:page": ($event) => $setup.searchEngine.pageNumber.value = $event,
+                    "total-pages": $setup.totalPages
+                  }, null, 8, ["page", "onUpdate:page", "total-pages"])
+                ])) : createCommentVNode("", true)
+              ];
+            }
+          }),
+          _: 1
+        }, _parent2, _scopeId));
+      } else {
+        return [
+          createVNode(_component_Fade, { slide: "down" }, {
+            default: withCtx(() => [
+              !$setup.isFetching && $setup.totalPages > 1 ? (openBlock(), createBlock("nav", {
+                key: 0,
+                class: "mt-3 lg:mt-4"
+              }, [
+                createVNode($setup["Pagination"], {
+                  page: $setup.searchEngine.pageNumber.value,
+                  "onUpdate:page": ($event) => $setup.searchEngine.pageNumber.value = $event,
+                  "total-pages": $setup.totalPages
+                }, null, 8, ["page", "onUpdate:page", "total-pages"])
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(ssrRenderComponent(_component_Fade, null, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        if ($setup.isFetching) {
+          _push2(`<div class="absolute left-0 top-0 z-[14] size-full bg-white/40"${_scopeId}></div>`);
+        } else {
+          _push2(`<!---->`);
+        }
+      } else {
+        return [
+          $setup.isFetching ? (openBlock(), createBlock("div", {
+            key: 0,
+            class: "absolute left-0 top-0 z-[14] size-full bg-white/40"
+          })) : createCommentVNode("", true)
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`</article>`);
+  _push(ssrRenderComponent($setup["Drawer"], {
+    modelValue: $setup.isFiltersOpen,
+    "onUpdate:modelValue": ($event) => $setup.isFiltersOpen = $event,
+    placement: "end",
+    "backdrop-target": null,
+    "can-lock-scroll": false,
+    class: "!z-[80] bg-white shadow [&_[data-drawer-close]]:bg-white/80"
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        _push2(ssrRenderComponent($setup["SearchFilters"], { "search-engine": $setup.searchEngine }, null, _parent2, _scopeId));
+      } else {
+        return [
+          createVNode($setup["SearchFilters"], { "search-engine": $setup.searchEngine }, null, 8, ["search-engine"])
+        ];
+      }
+    }),
+    _: 1
+  }, _parent));
+  _push(`<!--]-->`);
+}
+const _sfc_setup$2 = _sfc_main$2.setup;
+_sfc_main$2.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/SearchShowcase.vue");
+  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
+};
+const SearchShowcase = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["ssrRender", _sfc_ssrRender$2]]);
+
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "PageTitle",
+  props: {
+    apiDoc: { default: () => globalThis.$storefront.apiContext?.doc },
+    title: {},
+    description: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const title = computed(() => {
+      return props.title || props.apiDoc?.name;
+    });
+    const logo = computed(() => {
+      return props.apiDoc?.logo;
+    });
+    const description = computed(() => {
+      return props.description || props.apiDoc?.short_description;
+    });
+    const __returned__ = { props, title, logo, description };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+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: "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,
+        alt: $setup.logo.alt || $setup.title,
+        class: "h-auto max-w-[150px] xl:max-w-[200px]"
+      }, null, _parent));
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`<h1 class="ui-title text-secondary-800 text-center">${ssrInterpolate($setup.title)}</h1></div>`);
+    if ($setup.description) {
+      _push(`<p class="${ssrRenderClass($setup.description.length < 120 && "md:text-center")}">${ssrInterpolate($setup.description)}</p>`);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</div></article></section>`);
+  } else {
+    _push(`<!---->`);
+  }
+}
+const _sfc_setup$1 = _sfc_main$1.setup;
+_sfc_main$1.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/PageTitle.vue");
+  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+const PageTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender$1]]);
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ContentEntry",
+  props: {
+    title: {},
+    markdown: {}
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const html = computed(() => micromark(props.markdown, {
+      allowDangerousHtml: true
+    }));
+    const __returned__ = { props, html, ContentClearfix };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}><article class="prose"><h1 class="not-prose ui-title my-4">${ssrInterpolate($props.title)}</h1>`);
+  _push(ssrRenderComponent($setup["ContentClearfix"], { html: $setup.html }, null, _parent));
+  _push(`</article></section>`);
+}
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/ContentEntry.vue");
+  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+const ContentEntry = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+
+const $$Astro$2 = createAstro("https://demo.ecomplus.app");
+const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$2, $$props, $$slots);
+  Astro2.self = $$Sections;
+  const { routeContext } = Astro2.locals;
+  const { sections } = await usePageSections({
+    routeContext,
+    handleCustomSection: async (type, content) => {
+      if (type === "c:foo")
+        return { props: { ...content, foo: "bar" } };
+      return { props: content };
+    }
+  });
+  const { cmsContent } = routeContext;
+  return renderTemplate`${maybeRenderHead()}<article class="mb-9 mt-6 md:mb-12 md:mt-8">
+  ${sections.map(async ({ type, props }, index) => {
+    if (cmsContent?.$filename) {
+      props.cmsPreview = {
+        contentFilename: cmsContent.$filename,
+        sectionIndex: index
+      };
+    }
+    switch (type) {
+      case "product-shelf":
+      case "related-products":
+        props.isRelatedProducts = type === "related-products";
+        return renderTemplate`${renderComponent($$result, "ProductShelf", ProductShelf, { ...props, "client:sf": "lazy,interaction", "client:component-hydration": "sf", "client:component-path": "~/components/ProductShelf.vue", "client:component-export": "default" })}`;
+      case "banners-grid":
+        return renderTemplate`${renderComponent($$result, "BannersGrid", $$BannersGrid, { ...props })}`;
+      case "breadcrumbs":
+        return renderTemplate`${renderComponent($$result, "Breadcrumbs", Breadcrumbs, {})}`;
+      case "doc-description":
+        return renderTemplate`${renderComponent($$result, "DocDescription", DocDescription, {})}`;
+      case "doc-banners":
+        return renderTemplate`${renderComponent($$result, "DocBanners", DocBanners, {})}`;
+      case "product-details":
+        const { hasDescription, hasSpecifications, ...detailsProps } = props;
+        return renderTemplate`${renderComponent($$result, "Fragment", Fragment$1, {}, { "default": ($$result2) => renderTemplate`
+          ${renderComponent($$result2, "ProductDetails", ProductDetails, { ...detailsProps, "client:sf": "load", "client:component-hydration": "sf", "client:component-path": "~/components/ProductDetails.vue", "client:component-export": "default" }, { "description": ($$result3) => renderTemplate`${renderComponent($$result3, "Fragment", Fragment$1, { "slot": "description" }, { "default": ($$result4) => renderTemplate`${hasDescription && renderTemplate`${renderComponent($$result4, "DocDescription", DocDescription, {})}`}${hasSpecifications && renderTemplate`${renderComponent($$result4, "ProductSpecifications", ProductSpecifications, {})}`}` })}` })}
+        ` })}`;
+      case "search-showcase":
+      case "context-showcase":
+        return renderTemplate`${renderComponent($$result, "Fragment", Fragment$1, {}, { "default": ($$result2) => renderTemplate`
+          <article class="min-h-[500px]">
+            ${renderComponent($$result2, "SearchShowcase", SearchShowcase, { ...props, "client:sf": "load", "client:component-hydration": "sf", "client:component-path": "~/components/SearchShowcase.vue", "client:component-export": "default" })}
+          </article>
+        ` })}`;
+      case "page-title":
+        return renderTemplate`${renderComponent($$result, "PageTitle", PageTitle, { ...props })}`;
+      case "content-entry":
+        return renderTemplate`${renderComponent($$result, "ContentEntry", ContentEntry, { ...props })}`;
+      case "custom-html":
+        return renderTemplate`${renderComponent($$result, "ContentClearfix", ContentClearfix, { "html": props.html })}`;
+      case "c:foo":
+        return renderTemplate`<div${addAttribute(props.foo, "data-foo")}></div>`;
+      default:
+        return renderTemplate`<div${addAttribute(type, "data-section")}></div>`;
+    }
+  })}
+</article>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/content/Sections.astro", void 0);
+
+const $$Astro$1 = createAstro("https://demo.ecomplus.app");
+const $$Main = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$1, $$props, $$slots);
+  Astro2.self = $$Main;
+  const { routeContext } = Astro2.locals;
+  const { isSearchPage, fetchingApiContext } = routeContext;
+  const sharedData = {};
+  if (isSearchPage || fetchingApiContext) {
+    const [
+      { data: { result: grids } }
+    ] = await Promise.all([
+      api.get("grids"),
+      fetchingApiContext
+    ]);
+    sharedData.grids = grids;
+  }
+  return renderTemplate`${maybeRenderHead()}<main>
+  ${Object.entries(sharedData).map(([field, value]) => renderTemplate`${renderComponent($$result, "SharedData", $$SharedData, { "field": field, "value": value })}`)}
+  ${renderComponent($$result, "Hero", $$Hero, {})}
+  ${renderComponent($$result, "Sections", $$Sections, {})}
+</main>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Main.astro", void 0);
+
+const $$Astro = createAstro("https://demo.ecomplus.app");
+async function getStaticPaths() {
+  const paths = [{
+    params: { slug: void 0 }
+  }];
+  if (!{"BASE_URL": "/", "MODE": "production", "DEV": false, "PROD": true, "SSR": true, "SITE": "https://demo.ecomplus.app", "ASSETS_PREFIX": undefined}.BUILD_MINIMAL) {
+    const {
+      data: { result: products }
+    } = await api.get("products?fields=slug&sort=-sales&limit=2");
+    products.forEach(({ slug }) => {
+      if (slug)
+        paths.push({ params: { slug } });
+    });
+    const {
+      data: { result: categories }
+    } = await api.get("categories?fields=slug&sort=created_at&limit=1");
+    categories.forEach(({ slug }) => {
+      if (slug)
+        paths.push({ params: { slug } });
+    });
+    const pageSlugs = await getConfig().getContent("extra-pages/");
+    const postSlugs = await getConfig().getContent("blog/");
+    pageSlugs.slice(0, 2).map((slug) => `p/${slug}`).concat(postSlugs.slice(0, 2).map((slug) => `posts/${slug}`)).forEach((slug) => {
+      paths.push({ params: { slug } });
+    });
+  }
+  return paths;
+}
+const $$ = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
+  Astro2.self = $$;
+  const slug = Astro2.params.slug || "";
+  if (slug.endsWith(".map")) {
+    return new Response(null, { status: 404 });
+  }
+  let contentCollection;
+  if (slug.startsWith("p/")) {
+    contentCollection = "extra-pages";
+    Astro2.params.slug = slug.replace(/^p\//, "");
+  } else if (slug.startsWith("posts/")) {
+    contentCollection = "blog";
+    Astro2.params.slug = slug.replace(/^posts\//, "");
+  }
+  let routeContext;
+  let loadError;
+  try {
+    routeContext = await loadRouteContext(Astro2, { contentCollection });
+  } catch (err) {
+    if (err.astroResponse) {
+      return err.astroResponse;
+    }
+    loadError = err;
+  }
+  return renderTemplate`<html${addAttribute(routeContext?.lang.replace("_", "-"), "lang")}>
+${routeContext && renderTemplate`${renderComponent($$result, "Fragment", Fragment$1, {}, { "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$1, {}, { "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]";
+
+const ____slug_ = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: $$,
+  file: $$file,
+  getStaticPaths,
+  url: $$url
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { CheckoutLink as C, Pagination as P, QuantitySelector as Q, SearchEngine as S, ____slug_ as _, ProductShelf as a, Prices as b, ShippingCalculator as c, searchHistory as s };