import { u } from './Skeleton-DfjdyTna.mjs';
import { mergeProps, withCtx, createVNode, ref, computed, unref, useSSRContext, watch, nextTick, openBlock, createBlock, Fragment, renderList, withModifiers, toDisplayString, createCommentVNode, createTextVNode } from 'vue';
import { ssrRenderAttrs, ssrRenderComponent, ssrInterpolate, ssrRenderAttr, ssrRenderStyle, ssrRenderList, ssrRenderClass, ssrIncludeBooleanAttr, ssrRenderTeleport } from 'vue/server-renderer';
import { f as cf, u as Qt, i as Ma, d as gs, a as Ts, _ as Ds, h as $a } from './server.mjs';
import { a } from './NoData-IIg4-CUc.mjs';
import { g } from './SvgIcon-YE_5uJaI.mjs';
import { v } from './breadcrumb-DGU_YuMK.mjs';
import { t } from './client-only-CAHE6F0E.mjs';
import { m as me, v as ve, A, I, k, L } from './swiper-vue-DYDolirs.mjs';
import { $ } from './ProductCard-loKXjDvV.mjs';
import { n } from './Backdrop-CxzzDpnH.mjs';
import { p } from './Modal-C67xWHXr.mjs';
import { A as A$1, g as g$1 } from './star-mqjJGHgV.mjs';
import { p as pe$1 } from './index-Dj5w-pp2.mjs';
import '../_/nitro.mjs';
import 'node:http';
import 'node:https';
import 'node:fs';
import 'node:url';
import 'node:path';
import 'unhead';
import '@unhead/shared';
import 'vue-router';
import 'vue-rate';
import 'date-fns';
import '@hennge/vue3-pagination';
import 'axios';
import 'vue-social-sharing';

const W = {};
const X = W.setup;
W.setup = (e2, t2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/Shared/ProductDetailsSkelton.vue"), X ? X(e2, t2) : undefined;
};
const ee = cf(W, [["ssrRender", function(l2, s2, a2, i2) {
  const n2 = u;
  s2(`<div${ssrRenderAttrs(mergeProps({ class: "pb-6 lg:pb-14" }, i2))}>`), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[200px] mb-10" }, null, a2)), s2('<div class="grid grid-cols-1 lg:grid-cols-12 gap-10"><div class="lg:col-span-7 xl:col-span-6"><div class="gap-4 flex flex-col md:flex-row"><div class="order-2 md:order-1 md:block gap-2.5 flex w-full md:w-[128px]">'), s2(ssrRenderComponent(n2, { class: "h-[128px] flex-1 w-[128px] md:w-full mb-2" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[128px] flex-1 w-[128px] md:w-full mb-2" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[128px] flex-1 w-[128px] md:w-full mb-2" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[128px] flex-1 w-[128px] md:w-full mb-2" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[128px] hidden md:block w-[128px] md:w-full mb-2" }, null, a2)), s2('</div><div class="w-full order-1 md:order-2 h-[430px] md:h-[680px] max-w-[100%]">'), s2(ssrRenderComponent(n2, { class: "h-[100%] w-[100%]" }, null, a2)), s2('</div></div><div class="mt-8 space-y-4">'), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="space-y-6">'), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[400px] max-w-[100%]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[400px] max-w-[100%]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[400px] max-w-[100%]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[400px] max-w-[100%]" }, null, a2)), s2('</div></div></div><div class="flex flex-col lg:col-span-5 xl:col-span-6"><div class="mb-6 space-y-4 pb-6 border-b-2 border-[#DEE0EA]">'), s2(ssrRenderComponent(n2, { class: "h-[36px] w-[160px]" }, null, a2)), s2('<div class="flex items-center gap-4">'), s2(ssrRenderComponent(n2, { class: "h-[32px] w-[72px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[24px] w-[150px]" }, null, a2)), s2("</div>"), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[100px]" }, null, a2)), s2("</div>"), s2(ssrRenderComponent(n2, { class: "h-[24px] mb-4 w-[300px]" }, null, a2)), s2('<div class="mb-8 space-y-4">'), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="flex items-center gap-4">'), s2(ssrRenderComponent(n2, { class: "h-[40px] w-[100px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[40px] w-[100px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[40px] w-[100px]" }, null, a2)), s2('</div></div><div class="mb-8 space-y-4">'), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="flex items-center gap-4">'), s2(ssrRenderComponent(n2, { class: "h-[40px] w-[100px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[40px] w-[100px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[40px] w-[100px]" }, null, a2)), s2("</div></div>"), s2(ssrRenderComponent(n2, { class: "h-[50px] w-[100%]" }, null, a2)), s2('<div class="mt-8 pt-6 border-t-2 border-[#DEE0EA] space-y-4">'), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="space-y-6">'), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[240px]" }, null, a2)), s2('</div></div><div class="mt-8 pt-6 border-t-2 border-[#DEE0EA] space-y-4">'), s2(ssrRenderComponent(n2, { class: "bg-[#F9F9F9] p-4 w-full h-[200px] space-y-6" }, null, a2)), s2('</div><div class="mt-8 pt-6 border-t-2 border-[#DEE0EA] space-y-4">'), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[120px]" }, null, a2)), s2('<div class="space-y-6">'), s2(ssrRenderComponent(n2, { class: "h-[20px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[240px]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[16px] w-[240px]" }, null, a2)), s2('</div></div></div></div><div class="my-8 py-8 bg-[#F9F9F9] px-6">'), s2(ssrRenderComponent(n2, { class: "h-[24px] w-[200px]" }, null, a2)), s2('<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-4">'), s2(ssrRenderComponent(n2, { class: "h-[400px] w-[100%]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[400px] w-[100%]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[400px] w-[100%]" }, null, a2)), s2(ssrRenderComponent(n2, { class: "h-[400px] w-[100%]" }, null, a2)), s2("</div></div></div>");
}]]), le = { name: "ProductGallerySynced", components: { Swiper: me, SwiperSlide: ve }, props: { images: { type: Array, required: true } }, setup() {
  const e2 = ref(null), l2 = ref(null), t2 = ref(null), n2 = ref(false), o2 = ref(0);
  let d2 = null, r2 = null;
  const c2 = () => {
    var e3, l3;
    const s2 = (null == (e3 = t2.value) ? undefined : e3.$el) || (null == (l3 = t2.value) ? undefined : l3.el) || null;
    if (!s2) return;
    const a2 = (s2.querySelector(".swiper-slide-active .aspect-box") || s2).getBoundingClientRect().height || 0;
    o2.value = Math.max(0, Math.round(a2));
  }, u2 = () => {
    var e3, l3;
    const s2 = (null == (e3 = t2.value) ? undefined : e3.$el) || (null == (l3 = t2.value) ? undefined : l3.el) || null;
    if (!s2 || !("ResizeObserver" in undefined)) return;
    const a2 = s2.querySelector(".swiper-slide-active .aspect-box");
    a2 && a2 !== r2 && (d2 && (d2.disconnect(), d2 = null, r2 = null), d2 = new ResizeObserver(() => {
      c2(), p2();
    }), d2.observe(a2), r2 = a2);
  }, p2 = async () => {
    var l3;
    await nextTick(), (null == (l3 = e2.value) ? undefined : l3.update) && e2.value.update();
  }, v2 = async () => {
    c2(), await p2();
  };
  return watch(n2, async (l3) => {
    var t3;
    await nextTick();
    try {
      (null == (t3 = e2.value) ? void 0 : t3.changeDirection) && e2.value.changeDirection(l3 ? "vertical" : "horizontal");
    } catch {
    }
    v2();
  }), { modules: [A, I, k], thumbsSwiper: e2, thumbsSwiperEl: l2, mainSwiperEl: t2, isDesktop: n2, thumbsHeight: o2, setThumbsSwiper: (l3) => e2.value = l3, syncThumbsHeight: v2, onSlideChange: () => {
    u2(), v2();
  } };
} };
const te = le.setup;
le.setup = (e2, t2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/UI/CustomSwiper.vue"), te ? te(e2, t2) : undefined;
};
const se = cf(le, [["ssrRender", function(l2, s2, a2, i2, d2, r2, c2, u2) {
  const p2 = t, v2 = u;
  s2(`<div${ssrRenderAttrs(mergeProps({ class: "custom-swiper gap-2 flex flex-col sm:flex-row" }, i2))}>`), s2(ssrRenderComponent(p2, null, { fallback: withCtx((e2, l3, t2, s3) => {
    if (!l3) return [createVNode("div", { class: "gap-2 w-full flex flex-col sm:flex-row" }, [createVNode("div", { class: "order-2 sm:order-1 w-full sm:w-[128px] max-w-[100%]" }, [createVNode("div", { class: "flex sm:block gap-2" }, [createVNode(v2, { class: "relative aspect-[3/4] flex-1 sm:w-full mb-2" }), createVNode(v2, { class: "relative aspect-[3/4] flex-1 sm:w-full mb-2" }), createVNode(v2, { class: "relative aspect-[3/4] flex-1 sm:w-full mb-2" }), createVNode(v2, { class: "relative aspect-[3/4] flex-1 sm:w-full mb-2" }), createVNode(v2, { class: "relative aspect-[3/4] sm:w-full mb-2 hidden sm:block" })])]), createVNode("div", { class: "w-full order-1 sm:order-2" }, [createVNode("div", { class: "relative aspect-box aspect-[3/4] w-full" }, [createVNode(v2, { class: "absolute inset-0 w-full h-full" })])])])];
    l3(`<div class="gap-2 w-full flex flex-col sm:flex-row"${s3}><div class="order-2 sm:order-1 w-full sm:w-[128px] max-w-[100%]"${s3}><div class="flex sm:block gap-2"${s3}>`), l3(ssrRenderComponent(v2, { class: "relative aspect-[3/4] flex-1 sm:w-full mb-2" }, null, t2, s3)), l3(ssrRenderComponent(v2, { class: "relative aspect-[3/4] flex-1 sm:w-full mb-2" }, null, t2, s3)), l3(ssrRenderComponent(v2, { class: "relative aspect-[3/4] flex-1 sm:w-full mb-2" }, null, t2, s3)), l3(ssrRenderComponent(v2, { class: "relative aspect-[3/4] flex-1 sm:w-full mb-2" }, null, t2, s3)), l3(ssrRenderComponent(v2, { class: "relative aspect-[3/4] sm:w-full mb-2 hidden sm:block" }, null, t2, s3)), l3(`</div></div><div class="w-full order-1 sm:order-2"${s3}><div class="relative aspect-box aspect-[3/4] w-full"${s3}>`), l3(ssrRenderComponent(v2, { class: "absolute inset-0 w-full h-full" }, null, t2, s3)), l3("</div></div></div>");
  }) }, a2)), s2("</div>");
}]]), ae = (e2) => {
  const l2 = $a(), t2 = Ma(), i2 = ref(null), n2 = ref(null), o2 = ref(false), r2 = ref(false), c2 = computed(() => {
    var l3;
    return (null == (l3 = e2.value) ? undefined : l3.details) ? e2.value.details.reduce((e3, l4) => (e3.find((e4) => e4.id === l4.color.id) || e3.push({ ...l4.images[0], ...l4.color }), e3), []) : [];
  }), u2 = computed(() => {
    var l3;
    return (null == (l3 = e2.value) ? undefined : l3.details) ? e2.value.details.reduce((e3, l4) => (e3.find((e4) => e4.id === l4.size.id) || e3.push(l4.size), e3), []) : [];
  }), p2 = computed(() => {
    var l3;
    return (null == (l3 = e2.value) ? undefined : l3.details) && e2.value.details.length ? e2.value.details.find((e3) => {
      var l4;
      return !(i2.value && e3.color.id !== i2.value.id || n2.value && (null == (l4 = e3.size) ? undefined : l4.id) !== n2.value.id);
    }) || e2.value.details[0] : null;
  }), v2 = () => {
    var e3, s2;
    l2.push({ query: { ...t2.query, color: (null == (e3 = i2.value) ? undefined : e3.id) || null, size: (null == (s2 = n2.value) ? undefined : s2.id) || null } });
  };
  return watch(() => e2.value, (l3) => {
    (null == l3 ? undefined : l3.details) && (() => {
      var l4, s2, a2, o3;
      const d2 = t2.query.color, r3 = t2.query.size;
      if (d2 && (null == (l4 = e2.value) ? undefined : l4.details)) {
        const l5 = null == (s2 = e2.value.details.find((e3) => e3.color.id == d2)) ? undefined : s2.color;
        i2.value = l5 || null;
      }
      if (r3 && (null == (a2 = e2.value) ? undefined : a2.details)) {
        const l5 = null == (o3 = e2.value.details.find((e3) => e3.size.id == r3)) ? undefined : o3.size;
        n2.value = l5 || null;
      }
    })();
  }, { immediate: true }), { selectedColor: i2, selectedSize: n2, colorIsOpen: o2, sizeIsOpen: r2, availableColors: c2, availableSizes: u2, selectedDetail: p2, selectColor: (l3) => {
    var t3;
    i2.value = l3, n2.value = (null == (t3 = e2.value.details.find((e3) => e3.color.id === l3.id)) ? undefined : t3.size) || null, v2();
  }, selectSize: (l3) => {
    var t3;
    n2.value = l3, i2.value = (null == (t3 = e2.value.details.find((e3) => e3.size.id === l3.id)) ? undefined : t3.color) || null, v2();
  }, toggleColorDropdown: (e3) => {
    e3.stopPropagation(), o2.value = !o2.value, o2.value && (r2.value = false);
  }, toggleSizeDropdown: (e3) => {
    e3.stopPropagation(), r2.value = !r2.value, r2.value && (o2.value = false);
  } };
}, ie = { __name: "ProductDetails", __ssrInlineRender: true, props: { data: { type: Object, required: true } }, setup(e2) {
  const l2 = e2, { locale: a2 } = gs(), i2 = A;
  Qt().$axios, ref(null);
  const S2 = (e3) => `${e3.getFullYear()}/${String(e3.getMonth() + 1).padStart(2, "0")}/${String(e3.getDate()).padStart(2, "0")}`, C2 = computed(() => S2(/* @__PURE__ */ new Date())), I2 = computed(() => {
    const e3 = /* @__PURE__ */ new Date();
    return e3.setDate(e3.getDate() + 10), S2(e3);
  }), A2 = computed(() => l2.data), { selectedColor: F2, selectedSize: j2, colorIsOpen: B2, sizeIsOpen: R2, availableColors: V2, availableSizes: q2, selectedDetail: Q2, selectColor: Z2, selectSize: W2, toggleColorDropdown: X2, toggleSizeDropdown: ee2 } = ae(A2), le2 = ref(false), te2 = ref(false), ie2 = ref(false), ne2 = ref(false), oe2 = ref(false), de2 = ref(false), re2 = ref(false), ce2 = ref(false), ue2 = ref(""), pe2 = ref(""), ve$1 = (e3) => {
    var t2, s2, a3, i3, n2, o2, d2;
    const r2 = encodeURIComponent((undefined).location.href), c2 = encodeURIComponent(null == (t2 = l2.data) ? undefined : t2.title), u2 = encodeURIComponent(null == (s2 = l2.data) ? undefined : s2.short_desc);
    if (encodeURIComponent(null == (a3 = l2.data) ? undefined : a3.main_image), "linkedin" === e3) (undefined).open(`https://www.linkedin.com/shareArticle?url=${r2}`, "_blank");
    else if ("facebook" === e3) (undefined).open(`https://www.facebook.com/sharer/sharer.php?u=${r2}`, "_blank");
    else if ("twitter" === e3) {
      const e4 = `${c2} - ${u2}`;
      (undefined).open(`https://twitter.com/intent/tweet?text=${e4}&url=${r2}&hashtags=yumeii`, "_blank");
    } else if ("whatsapp" === e3) {
      const e4 = `${null == (i3 = l2.data) ? undefined : i3.title} - ${null == (n2 = l2.data) ? undefined : n2.short_desc}
    ${(undefined).location.href}`;
      (undefined).open(`https://wa.me/?text=${encodeURIComponent(e4)}`, "_blank");
    } else if ("snapchat" === e3) {
      const e4 = `${null == (o2 = l2.data) ? undefined : o2.title} - ${null == (d2 = l2.data) ? undefined : d2.short_desc} - ${(undefined).location.href}`;
      (undefined).open(`https://www.snapchat.com/share?text=${encodeURIComponent(e4)}`, "_blank");
    } else if ("telegram" === e3) {
      const e4 = `${c2} - ${u2}`;
      (undefined).open(`https://t.me/share/url?url=${r2}&text=${e4}`, "_blank");
    }
  }, me$1 = (e3) => {
    if ((undefined).clipboard) (undefined).clipboard.writeText(e3).then(() => {
      pe$1.success("Copied to clipboard");
    });
    else {
      const l3 = (undefined).createElement("textarea");
      l3.value = e3, (undefined).body.appendChild(l3), l3.select(), (undefined).execCommand("copy"), (undefined).body.removeChild(l3), pe$1.success("Copied to clipboard");
    }
  };
  return (l3, s2, d2, S3) => {
    var _a, _b, _c, _d, _e2;
    var A3, z2, L2, F3, j3, O2, N2, Z3, W3, X3, ee3, ae2, xe, fe, ge, be, he, we, $e, ye, _e, Ee, Te, ke, Se, Ce, Ie, Ae, ze, Le, Fe, je, Pe, De, Be, Re, Me, Ue, Oe, Ve, qe, Qe, Ye, Je, Ge, He, Ke, Ne, Ze, We, Xe, el, ll, tl, sl, al, il, nl, ol, dl, rl, cl, ul, pl, vl, ml, xl, fl, gl, bl, hl, wl, $l, yl, _l, El, Tl, kl, Sl;
    const Cl = se, Il = g, Al = $, zl = n, Ll = a, Fl = p, jl = g;
    e2.data ? (s2(`<div${ssrRenderAttrs(mergeProps({ class: "pb-6 lg:pb-14" }, S3))}><div class="grid grid-cols-1 lg:grid-cols-12 gap-y-4 gap-x-10"><div class="lg:col-span-7 xl:col-span-6">`), s2(ssrRenderComponent(Cl, { images: [e2.data.main_image, ...null == (A3 = unref(Q2)) ? undefined : A3.images, ...null == (z2 = unref(Q2)) ? undefined : z2.videos], videoFirst: unref(Q2).is_video_first }, null, d2)), s2(`<div class="mt-8 hidden lg:block"><div class="py-4 mb-8 px-5 flex items-center gap-4 bg-[#FAFAFA]"><h3 class="text-xl underline font-semibold">${ssrInterpolate(l3.$t("TITLES.reviews"))} (${ssrInterpolate(null == (F3 = null == (L2 = unref(Q2)) ? undefined : L2.reviews) ? undefined : F3.length)}) </h3><div class="flex items-center gap-1.5"><img${ssrRenderAttr("src", A$1)} alt="star" class="w-6 h-6"><span class="font-medium text-lg">${ssrInterpolate((_a = null == (j3 = unref(Q2)) ? undefined : j3.rate_avg) != null ? _a : "0")}</span></div></div><div class="space-y-6"><span class="text-primary text-lg font-semibold">${ssrInterpolate(l3.$t("TITLES.general_size"))}</span><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(l3.$t("TITLES.runs_small"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).smallPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).smallPercentage)}%</span></div><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(l3.$t("TITLES.true_to_size"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).fitPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).fitPercentage)}%</span></div><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(l3.$t("TITLES.runs_large"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).bigPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).bigPercentage)}%</span></div></div><div class="h-2 bg-[#F1F1F1] w-full rounded-full my-6"></div><div class="space-y-6"><!--[-->`), ssrRenderList(null == (O2 = unref(Q2)) ? undefined : O2.reviews, (e3, t2) => {
      var a3;
      s2(`<div class="border border-[#E1E1E1] p-6"><div class="flex items-center justify-between mb-4"><div class="font-bold text-xl">${ssrInterpolate(e3.user_name)}</div><div class="flex items-center gap-1"><!--[-->`), ssrRenderList(5, (l4) => {
        s2('<span class="cursor-pointer transition duration-300 hover:scale-110">'), l4 <= Math.floor(e3.rate || 0) ? s2(`<img${ssrRenderAttr("src", A$1)} alt="star" class="w-6 h-6">`) : s2(`<img${ssrRenderAttr("src", g$1)} alt="star" class="w-6 h-6">`), s2("</span>");
      }), s2(`<!--]--></div></div><div class="text-lg font-medium text-[#505050] mb-4"><span>${ssrInterpolate(l3.$t("TITLES.color"))}: ${ssrInterpolate(null == e3 ? undefined : e3.color)} / ${ssrInterpolate(l3.$t("TITLES.size"))}: ${ssrInterpolate(null == e3 ? undefined : e3.size)}</span></div><div class="text-lg font-medium text-[##03030]">${ssrInterpolate(e3.review)}</div>`), e3.image ? s2(`<div class="flex gap-4 mt-4 items-center flex-wrap"><div class="relative group"><img${ssrRenderAttr("src", null == (a3 = e3.image) ? undefined : a3.media)} alt="star" width="120" height="120" class="w-[120px] h-[120px] object-cover"><button class="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-3 opacity-0 transition-all group-hover:opacity-100 hover:bg-gray-100"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg></button></div></div>`) : s2("<!---->"), s2("</div>");
    }), s2(`<!--]--></div></div></div><div class="flex flex-col lg:col-span-5 xl:col-span-6"><div class="mb-4 pb-4 border-b-2 border-[#DEE0EA]"><div class="flex mb-3 lg:mb-4 gap-4 items-center flex-wrap"><div class="text-primary font-medium text-3xl"><span class="font-bold">${ssrInterpolate((null == (N2 = unref(Q2)) ? undefined : N2.price_after_offer) > 0 ? null == (Z3 = unref(Q2)) ? undefined : Z3.price_after_offer : null == (W3 = unref(Q2)) ? undefined : W3.price)}</span> ${ssrInterpolate(null == (X3 = unref(Q2)) ? undefined : X3.currency)}</div>`), (null == (ee3 = unref(Q2)) ? undefined : ee3.best_deal_voucher) ? s2(`<div class="flex justify-between items-center gap-2"><div class="flex items-center gap-4"><div class="${ssrRenderClass(["percentage" === (null == (xe = null == (ae2 = unref(Q2)) ? undefined : ae2.best_deal_voucher) ? undefined : xe.discount_type) ? "text-xl" : "text-base", "text-white font-medium relative"])}"><img${ssrRenderAttr("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAoCAYAAABdGbwdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADySURBVHgB7dk9CsIwGIfxRCM4dOgNxJspqKseQU8g7op4I4/gETrYqWJ8S/0otfUPzs9vKnm3h6YNxO+TJDp06jn8RCCBQAKBBAIJBBIIJBBIINC3zE7Om+J2G8+uVx8c3mKMpzAYrKZZlr3WCPSxm+f5qrnIFivFeOmHsG4bEcjc7ZtT31Z1BKqcuwYEMos8J9C/CGT2w+Goa0YgE0OYds0IZLxzy2Oapm0zAlXSe1Fs2wYEeoreTw5Jsm2+SZ5bjQY7VZcHR3s6l79/AglsMYFAAoEEAgkEEggkEEggkEAggUACgQQCCQQSCCQQSCCQ8ADgxDaouwwUPgAAAABJRU5ErkJggg==")} alt="Subtract" class="${ssrRenderClass(["percentage" === (null == (ge = null == (fe = unref(Q2)) ? undefined : fe.best_deal_voucher) ? undefined : ge.discount_type) ? "w-16 lg:w-[72px]" : "w-[84px]", "h-8 lg:h-10"])}"><span class="absolute top-1/2 start-1/2 transform rtl:translate-x-1/2 -translate-x-1/2 -translate-y-1/2">${ssrInterpolate((_b = null == (he = null == (be = unref(Q2)) ? undefined : be.best_deal_voucher) ? undefined : he.discount) != null ? _b : "0")}${ssrInterpolate("percentage" === (null == ($e = null == (we = unref(Q2)) ? undefined : we.best_deal_voucher) ? undefined : $e.discount_type) ? "%" : null == (ye = unref(Q2)) ? undefined : ye.currency)}</span></div><p class="text-[#9C0C0C] font-semibold">${ssrInterpolate(l3.$t("TITLES.off_with_voucher"))}</p></div></div>`) : s2("<!---->"), s2(`<div class="flex ms-auto items-center gap-4"><div class="flex items-center text-desc gap-1"><span class="text-lg font-medium">SKU</span><span class="text-xl text-desc"> - </span><span class="text-lg font-medium">${ssrInterpolate(null == (_e = unref(Q2)) ? undefined : _e.sku)}</span></div><div class="flex lg:hidden items-center gap-1.5"><img${ssrRenderAttr("src", A$1)} alt="star" class="w-6 h-6"><span class="font-medium text-lg">${ssrInterpolate((_c = null == (Ee = unref(Q2)) ? undefined : Ee.rate_avg) != null ? _c : "0")}</span></div></div></div><div class="flex items-center justify-between"><div class="flex items-center gap-4">`), (null == (Te = unref(Q2)) ? undefined : Te.discount_offer) ? s2(`<div class="text-[#7C7E80] line-through font-medium text-2xl"><span class="font-bold">${ssrInterpolate(null == (ke = unref(Q2)) ? undefined : ke.price)}</span> ${ssrInterpolate(null == (Se = unref(Q2)) ? undefined : Se.currency)}</div>`) : s2("<!---->"), (null == (Ce = unref(Q2)) ? undefined : Ce.discount_offer) ? s2(`<div class="bg-[#DB4444] px-2 py-1 !text-xs text-white animate-bounce-in">${ssrInterpolate(null == (Ie = unref(Q2)) ? undefined : Ie.discount_offer)}% ${ssrInterpolate(l3.$t("TITLES.off"))}</div>`) : s2("<!---->"), s2(`</div><div class="lg:flex hidden items-center gap-1.5"><img${ssrRenderAttr("src", A$1)} alt="star" class="w-6 h-6"><span class="font-medium text-lg">${ssrInterpolate((_d = null == (Ae = unref(Q2)) ? undefined : Ae.rate_avg) != null ? _d : "0")}</span></div></div></div><div class="border-b-2 border-[#DEE0EA] mb-4"><p class="text-xl text-primary mb-4">${ssrInterpolate(null == (ze = e2.data) ? undefined : ze.short_desc)}</p>`), (null == (Le = unref(Q2)) ? undefined : Le.discount_offer) ? s2(`<div class="px-2 mb-4 lg:px-4 py-2 flex items-center gap-2 bg-[#FCE9E9]"><span class="font-medium !text-sm lg:!text-lg text-[#DC6E07]">Yumeii</span><span class="!text-sm lg:!text-lg">${ssrInterpolate(l3.$t("TITLES.save"))} <span class="text-[#DC6E07] !text-sm lg:!text-lg">${ssrInterpolate(null == (Fe = unref(Q2)) ? undefined : Fe.discount_offer)} ${ssrInterpolate(null == (je = unref(Q2)) ? undefined : je.currency)}</span> ${ssrInterpolate(l3.$t("TITLES.saveWithJoin"))}</span></div>`) : s2("<!---->"), s2(`</div><div class="pb-6 border-b-2 border-[#DEE0EA] mb-4"><div class="mb-8"><div class="flex items-center gap-4 mb-4"><span class="text-primary font-medium text-xl">${ssrInterpolate(l3.$t("TITLES.color"))}</span><div class="relative"><button class="py-2 px-5 !text-sm lg:!text-base font-light rounded-full transition-all flex items-center gap-2 bg-[#F5F5F5] duration-300 text-center text-primary">${ssrInterpolate((null == (De = null == (Pe = unref(Q2)) ? undefined : Pe.color) ? undefined : De.title) || l3.$t("TITLES.selectColor"))} `), s2(ssrRenderComponent(Il, { name: "chevron-down", class: "scale-[1.2]" }, null, d2)), s2("</button>"), unref(B2) ? (s2('<div class="absolute end-0 z-50 mt-0.5 min-w-full w-[140px] bg-white ring-1 ring-black ring-opacity-5"><ul class="px-2.5" role="menu" aria-orientation="vertical"><!--[-->'), ssrRenderList(unref(V2), (e3) => {
      var l4, t2;
      s2(`<li class="block w-full border-b border-[#E1E1E1] last:border-b-0 !text-sm text-primary" role="menuitem"><button class="w-full gap-1 flex items-center justify-between py-3 text-start"><div class="flex items-center gap-1 lg:gap-2"><span class="size-4 lg:size-6 flex-shrink-0 rounded-full" style="${ssrRenderStyle(`background-color: ${e3.hex};`)}"></span><span class="!text-xs lg:!text-sm">${ssrInterpolate(e3.title)}</span></div>`), (null == (t2 = null == (l4 = unref(Q2)) ? undefined : l4.color) ? undefined : t2.id) === e3.id ? s2(ssrRenderComponent(Il, { name: "check" }, null, d2)) : s2("<!---->"), s2("</button></li>");
    }), s2("<!--]--></ul></div>")) : s2("<!---->"), s2('</div></div><div class="flex gap-3 flex-wrap"><!--[-->'), ssrRenderList(unref(V2), (e3) => {
      var l4, t2, a3, i3;
      s2(`<button type="button" class="${ssrRenderClass([{ "border-primary": (null == (t2 = null == (l4 = unref(Q2)) ? undefined : l4.color) ? undefined : t2.id) === e3.id, "border-transparent": (null == (i3 = null == (a3 = unref(Q2)) ? undefined : a3.color) ? undefined : i3.id) !== e3.id }, "flex flex-col items-center rounded-md border-2 min-w-[100px] max-w-[100%] cursor-pointer"])}"><div class="aspect-box rounded-t-md h-[124px] relative aspect-[3/4] w-full select-none">`), e3.media.includes("mp4") ? s2("<!---->") : s2(`<img${ssrRenderAttr("src", e3.media)}${ssrRenderAttr("alt", e3.title || "")} class="absolute inset-0 h-full rounded-t-md w-full object-cover" loading="lazy" decoding="async">`), s2(`</div><span class="block px-2 py-1 !text-sm text-black text-center">${ssrInterpolate(e3.title)}</span></button>`);
    }), s2(`<!--]--></div></div><div class="lg:mb-10"><div class="flex items-center gap-2 justify-between mb-4"><div class="flex items-center gap-4"><span class="text-primary font-medium text-xl">${ssrInterpolate(l3.$t("TITLES.size"))}</span><div class="relative"><button class="py-2 px-5 rounded-full transition-all flex items-center gap-2 bg-[#F5F5F5] duration-300 text-center font-light text-primary"><span class="!text-sm lg:!text-base">${ssrInterpolate((null == (Re = null == (Be = unref(Q2)) ? undefined : Be.size) ? undefined : Re.title) || l3.$t("TITLES.selectSize"))}</span>`), s2(ssrRenderComponent(Il, { name: "chevron-down", class: "scale-[1.2] flex-shrink-0" }, null, d2)), s2("</button>"), unref(R2) ? (s2('<div class="absolute max-w-[100%] start-0 z-50 mt-0.5 w-full bg-white ring-1 ring-black ring-opacity-5"><ul class="px-2.5" role="menu" aria-orientation="vertical"><!--[-->'), ssrRenderList(unref(q2), (e3) => {
      var l4, t2;
      s2(`<li class="block w-full border-b border-[#E1E1E1] last:border-b-0 !text-sm text-primary" role="menuitem"><button class="w-full !text-xs lg:!text-sm gap-1 flex items-center justify-between py-3 text-start">${ssrInterpolate(e3.title)} `), (null == (t2 = null == (l4 = unref(Q2)) ? undefined : l4.size) ? undefined : t2.id) === e3.id ? s2(ssrRenderComponent(Il, { name: "check" }, null, d2)) : s2("<!---->"), s2("</button></li>");
    }), s2("<!--]--></ul></div>")) : s2("<!---->"), s2("</div></div>"), e2.data.size_guide_image ? (s2(`<button class="flex items-center gap-3"><span class="text-primary font-medium !text-sm lg:!text-lg">${ssrInterpolate(l3.$t("TITLES.size_guide"))}</span>`), s2(ssrRenderComponent(Il, { class: ["ar" === unref(a2) ? "rotate-180" : "", "scale-[0.8] [&_path]:fill-primary"], name: "chevron-right" }, null, d2)), s2("</button>")) : s2("<!---->"), s2('</div><div class="flex gap-2"><!--[-->'), ssrRenderList(unref(q2), (e3) => {
      var l4, t2, a3, i3;
      s2(`<button class="${ssrRenderClass([{ "border-black bg-black text-white": (null == (t2 = null == (l4 = unref(Q2)) ? undefined : l4.size) ? undefined : t2.id) === e3.id, "border-[#E1E1E1] text-gray-700": (null == (i3 = null == (a3 = unref(Q2)) ? undefined : a3.size) ? undefined : i3.id) !== e3.id }, "px-6 py-1 border rounded-full font-semibold !text-sm lg:!text-base"])}">${ssrInterpolate(e3.tag)}</button>`);
    }), s2(`<!--]--></div></div><div class="space-y-4 mt-8 lg:hidden"><span class="text-primary text-lg font-semibold">${ssrInterpolate(l3.$t("TITLES.general_size"))}</span><div class="flex flex-wrap items-center gap-2"><p>${ssrInterpolate(l3.$t("TITLES.runs_small"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).smallPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).smallPercentage)}%</span></div><div class="flex flex-wrap items-center gap-2"><p>${ssrInterpolate(l3.$t("TITLES.true_to_size"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).fitPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).fitPercentage)}%</span></div><div class="flex flex-wrap items-center gap-2"><p>${ssrInterpolate(l3.$t("TITLES.runs_large"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).bigPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).bigPercentage)}%</span></div></div><div class="hidden lg:flex flex-wrap items-center gap-4"><button${ssrIncludeBooleanAttr(unref(le2)) ? " disabled" : ""} class="justify-center disabled:opacity-70 disabled:cursor-not-allowed transition-all duration-300 border-[#E1E1E1] border group hover:border-primary hover:bg-primary size-14 rounded-full bg-white flex items-center text-center">`), e2.data.is_fave ? s2(ssrRenderComponent(Il, { name: "fill-heart", class: "text-2xl transition-all duration-300" }, null, d2)) : s2(ssrRenderComponent(Il, { name: "heart", class: "text-2xl transition-all duration-300 [&_path]:fill-primary group-hover:[&_path]:!fill-white" }, null, d2)), s2('</button><button class="justify-center transition-all duration-300 border-[#E1E1E1] border group hover:border-primary hover:bg-primary size-14 rounded-full bg-white flex items-center text-center">'), s2(ssrRenderComponent(Il, { name: "share", class: "text-2xl transition-all duration-300 [&_path]:fill-primary group-hover:[&_path]:!fill-white" }, null, d2)), s2(`</button><button class="base-btn flex-1 !font-medium"${ssrIncludeBooleanAttr(!e2.data.details || !e2.data.details.length || !(null == (Me = unref(Q2)) ? undefined : Me.in_stock) || unref(te2)) ? " disabled" : ""}>`), (null == (Ue = unref(Q2)) ? undefined : Ue.in_stock) ? s2(ssrRenderComponent(Il, { name: "cart" }, null, d2)) : s2("<!---->"), s2(` ${ssrInterpolate((null == (Oe = unref(Q2)) ? undefined : Oe.in_stock) ? l3.$t("TITLES.addToCart") : l3.$t("TITLES.outOfStock"))}</button></div></div>`), (null == (qe = null == (Ve = unref(Q2)) ? undefined : Ve.coupons) ? undefined : qe.length) && (null == (Qe = unref(Q2)) ? undefined : Qe.best_deal_voucher) ? (s2('<div class="py-4 mb-4 px-6 relative bg-[#f1f7ff]"><div class="absolute top-1/2 size-10 -translate-y-1/2 -start-5 rounded-full bg-white"></div><div class="absolute top-1/2 size-10 -translate-y-1/2 -end-5 rounded-full bg-white"></div><div class="flex flex-wrap mb-4 items-center gap-4"><div class="py-2 px-6 bg-[#DBE6F4] flex items-center justify-center gap-2">'), s2(ssrRenderComponent(Il, { name: "coupon", class: "flex-shrink-0" }, null, d2)), s2(`<span class="font-medium lg:!text-base !text-sm">${ssrInterpolate(l3.$t("TITLES.bestDeal"))}</span></div>`), "percentage" === (null == (Je = null == (Ye = unref(Q2)) ? undefined : Ye.best_deal_voucher) ? undefined : Je.discount_type) ? s2(`<span class="font-medium lg:!text-lg !text-sm">${ssrInterpolate(null == (He = null == (Ge = unref(Q2)) ? undefined : Ge.best_deal_voucher) ? undefined : He.discount)}% ${ssrInterpolate(l3.$t("TITLES.off"))}</span>`) : s2(`<span class="font-medium lg:!text-lg !text-sm">${ssrInterpolate(null == (Ne = null == (Ke = unref(Q2)) ? undefined : Ke.best_deal_voucher) ? undefined : Ne.discount)} ${ssrInterpolate(null == (Ze = unref(Q2)) ? undefined : Ze.currency)} ${ssrInterpolate(l3.$t("TITLES.off"))}</span>`), (null == (Xe = null == (We = unref(Q2)) ? undefined : We.coupons) ? undefined : Xe.length) > 1 ? (s2(`<button class="ms-auto flex items-center gap-3"><span class="text-primary font-medium lg:!text-lg !text-sm">+${ssrInterpolate(null == (el = unref(Q2).coupons) ? undefined : el.length)} ${ssrInterpolate(l3.$t("TITLES.vouchers"))}</span>`), s2(ssrRenderComponent(Il, { class: ["ar" === unref(a2) ? "rotate-180" : "rotate-0", "scale-[0.8] [&_path]:fill-primary"], name: "chevron-right" }, null, d2)), s2("</button>")) : s2("<!---->"), s2('</div><div class="pt-8 flex items-center flex-wrap justify-between gap-2 border-dashed border-t border-[#949EAC]"><button class="flex items-center gap-2">'), s2(ssrRenderComponent(Il, { name: "copy" }, null, d2)), s2(`<span class="font-medium lg:!text-lg !text-sm">${ssrInterpolate(null == (ll = unref(Q2).best_deal_voucher) ? undefined : ll.code)}</span></button><span class="font-medium lg:!text-lg !text-sm">${ssrInterpolate(l3.$t("TITLES.validTill"))}: <span class="font-normal">${ssrInterpolate(null == (tl = unref(Q2).best_deal_voucher) ? undefined : tl.end_at)}</span></span></div></div>`)) : (null == (al = null == (sl = unref(Q2)) ? undefined : sl.coupons) ? undefined : al.length) && !(null == (il = unref(Q2)) ? undefined : il.best_deal_voucher) ? (s2('<div class="py-4 mb-4 px-6 relative bg-[#f1f7ff]"><div class="absolute top-1/2 size-10 -translate-y-1/2 -start-5 rounded-full bg-white"></div><div class="absolute top-1/2 size-10 -translate-y-1/2 -end-5 rounded-full bg-white"></div><div class="flex flex-wrap mb-4 items-center gap-4">'), "percentage" === (null == (ol = null == (nl = unref(Q2)) ? undefined : nl.coupons[0]) ? undefined : ol.discount_type) ? s2(`<span class="font-medium lg:!text-lg !text-sm">${ssrInterpolate(null == (rl = null == (dl = unref(Q2)) ? undefined : dl.coupons[0]) ? undefined : rl.discount)}% ${ssrInterpolate(l3.$t("TITLES.off"))}</span>`) : s2(`<span class="font-medium lg:!text-lg !text-sm">${ssrInterpolate(null == (ul = null == (cl = unref(Q2)) ? undefined : cl.coupons[0]) ? undefined : ul.discount)} ${ssrInterpolate(null == (pl = unref(Q2)) ? undefined : pl.currency)} ${ssrInterpolate(l3.$t("TITLES.off"))}</span>`), (null == (vl = unref(Q2).coupons) ? undefined : vl.length) > 1 ? (s2(`<button class="ms-auto flex items-center gap-3"><span class="text-primary font-medium lg:!text-lg !text-sm">+${ssrInterpolate(null == (ml = unref(Q2).coupons) ? undefined : ml.length)} ${ssrInterpolate(l3.$t("TITLES.vouchers"))}</span>`), s2(ssrRenderComponent(Il, { class: ["ar" === unref(a2) ? "rotate-180" : "rotate-0", "scale-[0.8] [&_path]:fill-primary"], name: "chevron-right" }, null, d2)), s2("</button>")) : s2("<!---->"), s2('</div><div class="pt-8 flex items-center flex-wrap justify-between gap-2 border-dashed border-t border-[#949EAC]"><button class="flex items-center gap-2">'), s2(ssrRenderComponent(Il, { name: "copy" }, null, d2)), s2(`<span class="font-medium lg:!text-lg !text-sm">${ssrInterpolate(null == (xl = unref(Q2).coupons[0]) ? undefined : xl.code)}</span></button><span class="font-medium lg:!text-lg !text-sm">${ssrInterpolate(l3.$t("TITLES.validTill"))}: <span class="font-normal">${ssrInterpolate(null == (fl = unref(Q2).coupons[0]) ? undefined : fl.end_at)}</span></span></div></div>`)) : s2("<!---->"), s2(`<div class="${ssrRenderClass({ "border-t-2 border-[#DEE0EA] pt-6": null == (bl = null == (gl = unref(Q2)) ? undefined : gl.coupons) ? undefined : bl.length })}"><h4 class="text-primary text-lg font-semibold mb-5">${ssrInterpolate(l3.$t("TITLES.shippingToEgypt"))}</h4><div class="flex items-center gap-4 mb-8">`), s2(ssrRenderComponent(Il, { name: "truck", class: "flex-shrink-0" }, null, d2)), s2(`<div class="flex-1 font-medium text-[#333232]"><div class="flex items-center justify-between gap-2 flex-wrap"><span>${ssrInterpolate(l3.$t("TITLES.estimatedDelivery"))}</span><span class="text-[#606060] !text-sm font-normal">${ssrInterpolate(unref(C2))} - ${ssrInterpolate(unref(I2))}</span></div></div></div><div class="flex cursor-pointer mb-8 items-center gap-2 flex-wrap">`), s2(ssrRenderComponent(Il, { name: "return-policy", class: "flex-shrink-0" }, null, d2)), s2(`<h5 class="font-medium text-lg">${ssrInterpolate(l3.$t("TITLES.returnPolicy"))}</h5><button class="${ssrRenderClass(["ar" === unref(a2) ? "rotate-180" : "", "flex-shrink-0 ms-auto inline-block"])}">`), s2(ssrRenderComponent(Il, { name: "chevron-right", class: "[&_path]:fill-primary" }, null, d2)), s2('</button></div><div class="flex cursor-pointer items-center gap-2 flex-wrap">'), s2(ssrRenderComponent(Il, { name: "description", class: "flex-shrink-0" }, null, d2)), s2(`<h5 class="font-medium text-lg">${ssrInterpolate(l3.$t("TITLES.description"))}</h5><button class="${ssrRenderClass(["ar" === unref(a2) ? "rotate-180" : "", "flex-shrink-0 ms-auto inline-block"])}">`), s2(ssrRenderComponent(Il, { name: "chevron-right", class: "[&_path]:fill-primary" }, null, d2)), s2(`</button></div></div><div class="mt-8 lg:hidden"><div class="py-4 mb-8 px-5 flex items-center gap-4 bg-[#FAFAFA]"><h3 class="text-xl underline font-semibold">${ssrInterpolate(l3.$t("TITLES.reviews"))} (${ssrInterpolate(null == (wl = null == (hl = unref(Q2)) ? undefined : hl.reviews) ? undefined : wl.length)}) </h3><div class="flex items-center gap-1.5"><img${ssrRenderAttr("src", A$1)} alt="star" class="w-6 h-6"><span class="font-medium text-lg">${ssrInterpolate((_e2 = null == ($l = unref(Q2)) ? undefined : $l.rate_avg) != null ? _e2 : "0")}</span></div></div><div class="hidden lg:block space-y-6"><span class="text-primary text-lg font-semibold">${ssrInterpolate(l3.$t("TITLES.general_size"))}</span><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(l3.$t("TITLES.runs_small"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).smallPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).smallPercentage)}%</span></div><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(l3.$t("TITLES.true_to_size"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).fitPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).fitPercentage)}%</span></div><div class="flex flex-wrap items-center gap-4"><p>${ssrInterpolate(l3.$t("TITLES.runs_large"))}</p><div class="h-2 w-[240px] max-w-[100%] bg-[#F0F0F0] rounded-full"><div class="h-2 bg-primary rounded-full" style="${ssrRenderStyle(`width: ${unref(Q2).bigPercentage}%`)}"></div></div><span class="font-medium text-xl">${ssrInterpolate(unref(Q2).bigPercentage)}%</span></div></div><div class="mb-4 space-y-6"><!--[-->`), ssrRenderList(null == (yl = unref(Q2)) ? undefined : yl.reviews, (e3, t2) => {
      var a3;
      s2(`<div class="border border-[#E1E1E1] p-6"><div class="flex items-center justify-between mb-4"><div class="font-bold text-xl">${ssrInterpolate(e3.user_name)}</div><div class="flex items-center gap-1"><!--[-->`), ssrRenderList(5, (l4) => {
        s2('<span class="cursor-pointer transition duration-300 hover:scale-110">'), l4 <= Math.floor(e3.rate || 0) ? s2(`<img${ssrRenderAttr("src", A$1)} alt="star" class="w-6 h-6">`) : s2(`<img${ssrRenderAttr("src", g$1)} alt="star" class="w-6 h-6">`), s2("</span>");
      }), s2(`<!--]--></div></div><div class="text-lg font-medium text-[#505050] mb-4"><span>${ssrInterpolate(l3.$t("TITLES.color"))}: ${ssrInterpolate(null == e3 ? undefined : e3.color)} / ${ssrInterpolate(l3.$t("TITLES.size"))}: ${ssrInterpolate(null == e3 ? undefined : e3.size)}</span></div><div class="text-lg font-medium text-[##03030]">${ssrInterpolate(e3.review)}</div>`), e3.image ? s2(`<div class="flex gap-4 mt-4 items-center flex-wrap"><div class="relative group"><img${ssrRenderAttr("src", null == (a3 = e3.image) ? undefined : a3.media)} alt="star" width="120" height="120" class="w-[120px] h-[120px] object-cover"><button class="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-3 opacity-0 transition-all group-hover:opacity-100 hover:bg-gray-100"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg></button></div></div>`) : s2("<!---->"), s2("</div>");
    }), s2(`<!--]--></div><div class="h-2 bg-[#F1F1F1] w-full rounded-full my-6"></div></div><div class="flex mt-2 lg:hidden flex-wrap items-center gap-4"><button${ssrIncludeBooleanAttr(unref(le2)) ? " disabled" : ""} class="justify-center disabled:opacity-70 disabled:cursor-not-allowed transition-all duration-300 border-[#E1E1E1] border group hover:border-primary hover:bg-primary size-14 rounded-full bg-white flex items-center text-center">`), e2.data.is_fave ? s2(ssrRenderComponent(Il, { name: "fill-heart", class: "text-2xl transition-all duration-300" }, null, d2)) : s2(ssrRenderComponent(Il, { name: "heart", class: "text-2xl transition-all duration-300 [&_path]:fill-primary group-hover:[&_path]:!fill-white" }, null, d2)), s2('</button><button class="justify-center transition-all duration-300 border-[#E1E1E1] border group hover:border-primary hover:bg-primary size-14 rounded-full bg-white flex items-center text-center">'), s2(ssrRenderComponent(Il, { name: "share", class: "text-2xl transition-all duration-300 [&_path]:fill-primary group-hover:[&_path]:!fill-white" }, null, d2)), s2(`</button><button class="base-btn flex-1 !font-medium"${ssrIncludeBooleanAttr(!e2.data.details || !e2.data.details.length || !(null == (_l = unref(Q2)) ? undefined : _l.in_stock) || unref(te2)) ? " disabled" : ""}>`), (null == (El = unref(Q2)) ? undefined : El.in_stock) ? s2(ssrRenderComponent(Il, { name: "cart" }, null, d2)) : s2("<!---->"), s2(` ${ssrInterpolate((null == (Tl = unref(Q2)) ? undefined : Tl.in_stock) ? l3.$t("TITLES.addToCart") : l3.$t("TITLES.outOfStock"))}</button></div>`), (null == (Sl = null == (kl = e2.data) ? undefined : kl.complete_outfit) ? undefined : Sl.length) ? (s2(`<div class="my-8 py-6 bg-[#F9F9F9] ps-4 xl:ps-6"><h2 class="text-xl font-bold mb-8">${ssrInterpolate(l3.$t("TITLES.matchingChoices"))}</h2>`), s2(ssrRenderComponent(unref(me), { modules: [unref(i2)], "slides-per-view": 1.3, "space-between": 12, "free-mode": true, breakpoints: { 0: { slidesPerView: 1.3 }, 576: { slidesPerView: 2.2 }, 768: { slidesPerView: 3.2 }, 992: { slidesPerView: 1.5 }, 1200: { slidesPerView: 2.5 }, 1400: { slidesPerView: 3.1 } }, class: "related-products-swiper !pe-4 xl:!pe-6" }, { default: withCtx((l4, t2, s3, a3) => {
      var i3, d3;
      if (!t2) return [(openBlock(true), createBlock(Fragment, null, renderList(null == (d3 = e2.data) ? undefined : d3.complete_outfit, (e3, l5) => (openBlock(), createBlock(unref(ve), { key: l5 }, { default: withCtx(() => [createVNode(Al, { product: e3 }, null, 8, ["product"])]), _: 2 }, 1024))), 128))];
      t2("<!--[-->"), ssrRenderList(null == (i3 = e2.data) ? undefined : i3.complete_outfit, (e3, l5) => {
        t2(ssrRenderComponent(unref(ve), { key: l5 }, { default: withCtx((l6, t3, s4, a4) => {
          if (!t3) return [createVNode(Al, { product: e3 }, null, 8, ["product"])];
          t3(ssrRenderComponent(Al, { product: e3 }, null, s4, a4));
        }), _: 2 }, s3, a3));
      }), t2("<!--]-->");
    }), _: 1 }, d2)), s2("</div>")) : s2("<!---->"), s2("</div></div>"), ssrRenderTeleport(s2, (e3) => {
      unref(de2) ? e3(ssrRenderComponent(zl, { onClose: (e4) => de2.value = false }, { default: withCtx((e4, l4, t2, s3) => {
        if (!l4) return [createVNode("img", { src: unref(pe2), "data-aos": "zoom-in", "data-aos-duration": "800", alt: "review image", class: "max-w-[90%] max-h-[95vh] object-cover" }, null, 8, ["src"])];
        l4(`<img${ssrRenderAttr("src", unref(pe2))} data-aos="zoom-in" data-aos-duration="800" alt="review image" class="max-w-[90%] max-h-[95vh] object-cover"${s3}>`);
      }), _: 1 }, d2)) : e3("<!---->");
    }, "body", false, d2), ssrRenderTeleport(s2, (t2) => {
      unref(oe2) ? t2(ssrRenderComponent(zl, { onClose: (e3) => oe2.value = false }, { default: withCtx((t3, s3, a3, i3) => {
        var _a2;
        if (!s3) return [createVNode("div", { onClick: withModifiers(() => {
        }, ["stop"]), class: "bg-white w-[1000px] overflow-y-auto max-w-[95%] max-h-[90%] lg:p-14 px-4 py-6", "data-aos": "zoom-in", "data-aos-duration": "800" }, [createVNode("div", { class: "relative" }, [createVNode("h4", { class: "text-3xl text-center mb-8 font-bold" }, toDisplayString(l3.$t("TITLES.description")), 1), createVNode("button", { class: "absolute top-1/2 -translate-y-1/2 end-0", onClick: (e3) => oe2.value = false }, [createVNode(Il, { name: "big-close", class: "scale-75 lg:scale-100" })], 8, ["onClick"])]), createVNode("div", { class: "!text-sm lg:text-base", innerHTML: e2.data.long_desc }, null, 8, ["innerHTML"])], 8, ["onClick"])];
        s3(`<div class="bg-white w-[1000px] overflow-y-auto max-w-[95%] max-h-[90%] lg:p-14 px-4 py-6" data-aos="zoom-in" data-aos-duration="800"${i3}><div class="relative"${i3}><h4 class="text-3xl text-center mb-8 font-bold"${i3}>${ssrInterpolate(l3.$t("TITLES.description"))}</h4><button class="absolute top-1/2 -translate-y-1/2 end-0"${i3}>`), s3(ssrRenderComponent(Il, { name: "big-close", class: "scale-75 lg:scale-100" }, null, a3, i3)), s3(`</button></div><div class="!text-sm lg:text-base"${i3}>${(_a2 = e2.data.long_desc) != null ? _a2 : ""}</div></div>`);
      }), _: 1 }, d2)) : t2("<!---->");
    }, "body", false, d2), ssrRenderTeleport(s2, (e3) => {
      unref(ne2) ? e3(ssrRenderComponent(zl, { onClose: (e4) => ne2.value = false }, { default: withCtx((e4, t2, s3, a3) => {
        var i3, n2;
        if (!t2) return [createVNode("div", { onClick: withModifiers(() => {
        }, ["stop"]), class: "bg-white lg:p-14 py-6 px-4 w-[1000px] overflow-y-auto max-w-[95%] max-h-[90%]", "data-aos": "zoom-in", "data-aos-duration": "800" }, [createVNode("div", { class: "relative border-b-2 border-[#909EAC] pb-4 lg:pb-8" }, [createVNode("h4", { class: "text-3xl text-center font-bold" }, toDisplayString(l3.$t("TITLES.returnPolicy")), 1), createVNode("button", { class: "absolute top-4 -translate-y-1/2 end-0", onClick: (e5) => ne2.value = false }, [createVNode(Il, { name: "big-close", class: "scale-75 lg:scale-100" })], 8, ["onClick"])]), (openBlock(true), createBlock(Fragment, null, renderList(null == (n2 = unref(Q2)) ? undefined : n2.return_policy, (e5) => (openBlock(), createBlock("div", { key: e5.id, class: "pt-5 lg:pt-8" }, [createVNode("h4", { class: "text-primary text-lg font-semibold mb-4" }, toDisplayString(e5.title), 1), createVNode("div", { class: "text-[#909EAC]", innerHTML: e5.desc }, null, 8, ["innerHTML"])]))), 128))], 8, ["onClick"])];
        t2(`<div class="bg-white lg:p-14 py-6 px-4 w-[1000px] overflow-y-auto max-w-[95%] max-h-[90%]" data-aos="zoom-in" data-aos-duration="800"${a3}><div class="relative border-b-2 border-[#909EAC] pb-4 lg:pb-8"${a3}><h4 class="text-3xl text-center font-bold"${a3}>${ssrInterpolate(l3.$t("TITLES.returnPolicy"))}</h4><button class="absolute top-4 -translate-y-1/2 end-0"${a3}>`), t2(ssrRenderComponent(Il, { name: "big-close", class: "scale-75 lg:scale-100" }, null, s3, a3)), t2("</button></div><!--[-->"), ssrRenderList(null == (i3 = unref(Q2)) ? undefined : i3.return_policy, (e5) => {
          var _a2;
          t2(`<div class="pt-5 lg:pt-8"${a3}><h4 class="text-primary text-lg font-semibold mb-4"${a3}>${ssrInterpolate(e5.title)}</h4><div class="text-[#909EAC]"${a3}>${(_a2 = e5.desc) != null ? _a2 : ""}</div></div>`);
        }), t2("<!--]--></div>");
      }), _: 1 }, d2)) : e3("<!---->");
    }, "body", false, d2), ssrRenderTeleport(s2, (e3) => {
      unref(ie2) ? e3(ssrRenderComponent(zl, { onClose: (e4) => ie2.value = false }, { default: withCtx((e4, t2, s3, a3) => {
        var i3, n2;
        if (!t2) return [createVNode("div", { onClick: withModifiers(() => {
        }, ["stop"]), class: "bg-white lg:p-14 p-6 w-[840px] overflow-y-auto max-h-[90%] max-w-[95%]", "data-aos": "zoom-in", "data-aos-duration": "800" }, [createVNode("div", { class: "relative" }, [createVNode("h4", { class: "text-3xl text-center mb-12 font-bold" }, toDisplayString(l3.$t("TITLES.vouchers")), 1), createVNode("button", { class: "absolute top-1/2 -translate-y-1/2 end-0", onClick: (e5) => ie2.value = false }, [createVNode(Il, { name: "big-close", class: "scale-75 lg:scale-100" })], 8, ["onClick"])]), (null == (n2 = unref(Q2).coupons) ? undefined : n2.length) ? (openBlock(), createBlock("div", { key: 0, class: "flex flex-col gap-8" }, [(openBlock(true), createBlock(Fragment, null, renderList(unref(Q2).coupons, (e5, t3) => {
          var s4, a4, i4;
          return openBlock(), createBlock("div", { key: t3, class: "py-4 mb-4 px-6 relative bg-[#f1f7ff]" }, [createVNode("div", { class: "absolute top-1/2 size-10 -translate-y-1/2 -start-5 rounded-full bg-white" }), createVNode("div", { class: "absolute top-1/2 size-10 -translate-y-1/2 -end-5 rounded-full bg-white" }), createVNode("div", { class: "flex flex-wrap mb-4 items-center gap-4" }, [(null == (a4 = null == (s4 = unref(Q2)) ? undefined : s4.best_deal_voucher) ? undefined : a4.id) == e5.id ? (openBlock(), createBlock("div", { key: 0, class: "py-2 px-6 bg-[#DBE6F4] flex items-center justify-center gap-2" }, [createVNode(Il, { name: "coupon", class: "flex-shrink-0" }), createVNode("span", { class: "font-medium lg:!text-base !text-sm" }, toDisplayString(l3.$t("TITLES.bestDeal")), 1)])) : createCommentVNode("", true), "percentage" === (null == e5 ? undefined : e5.discount_type) ? (openBlock(), createBlock("span", { key: 1, class: "font-medium lg:!text-lg !text-sm" }, toDisplayString(null == e5 ? undefined : e5.discount) + "% " + toDisplayString(l3.$t("TITLES.off")), 1)) : (openBlock(), createBlock("span", { key: 2, class: "font-medium lg:!text-lg !text-sm" }, toDisplayString(null == e5 ? undefined : e5.discount) + " " + toDisplayString(null == (i4 = unref(Q2)) ? undefined : i4.currency) + " " + toDisplayString(l3.$t("TITLES.off")), 1))]), createVNode("div", { class: "pt-8 flex items-center flex-wrap justify-between gap-2 border-dashed border-t border-[#949EAC]" }, [createVNode("button", { class: "flex items-center gap-2", onClick: (l4) => me$1(e5.code) }, [createVNode(Il, { name: "copy" }), createVNode("span", { class: "font-medium lg:!text-lg !text-sm" }, toDisplayString(e5.code), 1)], 8, ["onClick"]), createVNode("span", { class: "font-medium lg:!text-lg !text-sm" }, [createTextVNode(toDisplayString(l3.$t("TITLES.validTill")) + ": ", 1), createVNode("span", { class: "font-normal" }, toDisplayString(e5.end_at), 1)])])]);
        }), 128))])) : (openBlock(), createBlock("div", { key: 1 }, [createVNode(Ll, { class: "!min-h-[320px]" })]))], 8, ["onClick"])];
        t2(`<div class="bg-white lg:p-14 p-6 w-[840px] overflow-y-auto max-h-[90%] max-w-[95%]" data-aos="zoom-in" data-aos-duration="800"${a3}><div class="relative"${a3}><h4 class="text-3xl text-center mb-12 font-bold"${a3}>${ssrInterpolate(l3.$t("TITLES.vouchers"))}</h4><button class="absolute top-1/2 -translate-y-1/2 end-0"${a3}>`), t2(ssrRenderComponent(Il, { name: "big-close", class: "scale-75 lg:scale-100" }, null, s3, a3)), t2("</button></div>"), (null == (i3 = unref(Q2).coupons) ? undefined : i3.length) ? (t2(`<div class="flex flex-col gap-8"${a3}><!--[-->`), ssrRenderList(unref(Q2).coupons, (e5, i4) => {
          var n3, o2, d3;
          t2(`<div class="py-4 mb-4 px-6 relative bg-[#f1f7ff]"${a3}><div class="absolute top-1/2 size-10 -translate-y-1/2 -start-5 rounded-full bg-white"${a3}></div><div class="absolute top-1/2 size-10 -translate-y-1/2 -end-5 rounded-full bg-white"${a3}></div><div class="flex flex-wrap mb-4 items-center gap-4"${a3}>`), (null == (o2 = null == (n3 = unref(Q2)) ? undefined : n3.best_deal_voucher) ? undefined : o2.id) == e5.id ? (t2(`<div class="py-2 px-6 bg-[#DBE6F4] flex items-center justify-center gap-2"${a3}>`), t2(ssrRenderComponent(Il, { name: "coupon", class: "flex-shrink-0" }, null, s3, a3)), t2(`<span class="font-medium lg:!text-base !text-sm"${a3}>${ssrInterpolate(l3.$t("TITLES.bestDeal"))}</span></div>`)) : t2("<!---->"), "percentage" === (null == e5 ? undefined : e5.discount_type) ? t2(`<span class="font-medium lg:!text-lg !text-sm"${a3}>${ssrInterpolate(null == e5 ? undefined : e5.discount)}% ${ssrInterpolate(l3.$t("TITLES.off"))}</span>`) : t2(`<span class="font-medium lg:!text-lg !text-sm"${a3}>${ssrInterpolate(null == e5 ? undefined : e5.discount)} ${ssrInterpolate(null == (d3 = unref(Q2)) ? undefined : d3.currency)} ${ssrInterpolate(l3.$t("TITLES.off"))}</span>`), t2(`</div><div class="pt-8 flex items-center flex-wrap justify-between gap-2 border-dashed border-t border-[#949EAC]"${a3}><button class="flex items-center gap-2"${a3}>`), t2(ssrRenderComponent(Il, { name: "copy" }, null, s3, a3)), t2(`<span class="font-medium lg:!text-lg !text-sm"${a3}>${ssrInterpolate(e5.code)}</span></button><span class="font-medium lg:!text-lg !text-sm"${a3}>${ssrInterpolate(l3.$t("TITLES.validTill"))}: <span class="font-normal"${a3}>${ssrInterpolate(e5.end_at)}</span></span></div></div>`);
        }), t2("<!--]--></div>")) : (t2(`<div${a3}>`), t2(ssrRenderComponent(Ll, { class: "!min-h-[320px]" }, null, s3, a3)), t2("</div>")), t2("</div>");
      }), _: 1 }, d2)) : e3("<!---->");
    }, "body", false, d2), ssrRenderTeleport(s2, (t2) => {
      unref(re2) ? t2(ssrRenderComponent(zl, { onClose: (e3) => re2.value = false }, { default: withCtx((t3, s3, a3, i3) => {
        var n2, d3;
        if (!s3) return [createVNode("div", { onClick: withModifiers(() => {
        }, ["stop"]), class: "bg-white p-4 max-w-[95%] w-[614px] max-h-[90%] lg:p-10", "data-aos": "zoom-in", "data-aos-duration": "800" }, [createVNode("div", { class: "relative" }, [createVNode("h4", { class: "text-3xl text-center font-bold mb-10" }, toDisplayString(l3.$t("TITLES.sizeGuide")), 1), createVNode("button", { class: "absolute top-1/2 -translate-y-1/2 end-0", onClick: withModifiers((e3) => re2.value = false, ["stop"]) }, [createVNode(Il, { name: "big-close", class: "scale-75 lg:scale-100" })], 8, ["onClick"])]), createVNode("div", { class: "p-5 bg-[#F6F6F6]" }, [createVNode("img", { src: null == (d3 = e2.data.size_guide_image) ? undefined : d3.media, alt: "size-gide", class: "object-contain size-full select-none max-w-[100%] max-h-[100%]" }, null, 8, ["src"])])], 8, ["onClick"])];
        s3(`<div class="bg-white p-4 max-w-[95%] w-[614px] max-h-[90%] lg:p-10" data-aos="zoom-in" data-aos-duration="800"${i3}><div class="relative"${i3}><h4 class="text-3xl text-center font-bold mb-10"${i3}>${ssrInterpolate(l3.$t("TITLES.sizeGuide"))}</h4><button class="absolute top-1/2 -translate-y-1/2 end-0"${i3}>`), s3(ssrRenderComponent(Il, { name: "big-close", class: "scale-75 lg:scale-100" }, null, a3, i3)), s3(`</button></div><div class="p-5 bg-[#F6F6F6]"${i3}><img${ssrRenderAttr("src", null == (n2 = e2.data.size_guide_image) ? undefined : n2.media)} alt="size-gide" class="object-contain size-full select-none max-w-[100%] max-h-[100%]"${i3}></div></div>`);
      }), _: 1 }, d2)) : t2("<!---->");
    }, "body", false, d2), unref(ce2) ? s2(ssrRenderComponent(Fl, { title: l3.$t("TITLES.share_product"), onClose: (e3) => ce2.value = false }, { default: withCtx((e3, l4, t2, s3) => {
      if (!l4) return [createVNode("div", { class: "bg-primary mb-5 rounded-lg bg-opacity-10 p-3 text-primary flex items-center justify-between gap-2" }, [createVNode("p", { class: "max-w-[80%] truncate" }, toDisplayString(unref(ue2)), 1), createVNode("button", { class: "text-primary", onClick: (e4) => me$1(unref(ue2)) }, [createVNode(jl, { name: "copy" })], 8, ["onClick"])]), createVNode("div", { class: "flex items-center justify-center gap-4 flex-wrap" }, [createVNode("button", { type: "button", onClick: (e4) => ve$1("facebook") }, [createVNode(jl, { name: "facebook" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => ve$1("twitter") }, [createVNode(jl, { name: "x" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => ve$1("linkedin"), class: "scale-[1.15]" }, [createVNode(jl, { name: "linkedin" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => ve$1("whatsapp") }, [createVNode(jl, { name: "whatsapp-2" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => ve$1("snapchat"), class: "scale-[1.25]" }, [createVNode(jl, { name: "snapchat" })], 8, ["onClick"]), createVNode("button", { type: "button", onClick: (e4) => ve$1("telegram") }, [createVNode(jl, { name: "telegram" })], 8, ["onClick"])])];
      l4(`<div class="bg-primary mb-5 rounded-lg bg-opacity-10 p-3 text-primary flex items-center justify-between gap-2"${s3}><p class="max-w-[80%] truncate"${s3}>${ssrInterpolate(unref(ue2))}</p><button class="text-primary"${s3}>`), l4(ssrRenderComponent(jl, { name: "copy" }, null, t2, s3)), l4(`</button></div><div class="flex items-center justify-center gap-4 flex-wrap"${s3}><button type="button"${s3}>`), l4(ssrRenderComponent(jl, { name: "facebook" }, null, t2, s3)), l4(`</button><button type="button"${s3}>`), l4(ssrRenderComponent(jl, { name: "x" }, null, t2, s3)), l4(`</button><button type="button" class="scale-[1.15]"${s3}>`), l4(ssrRenderComponent(jl, { name: "linkedin" }, null, t2, s3)), l4(`</button><button type="button"${s3}>`), l4(ssrRenderComponent(jl, { name: "whatsapp-2" }, null, t2, s3)), l4(`</button><button type="button" class="scale-[1.25]"${s3}>`), l4(ssrRenderComponent(jl, { name: "snapchat" }, null, t2, s3)), l4(`</button><button type="button"${s3}>`), l4(ssrRenderComponent(jl, { name: "telegram" }, null, t2, s3)), l4("</button></div>");
    }), _: 1 }, d2)) : s2("<!---->"), s2("</div>")) : s2("<!---->");
  };
} }, ne = ie.setup;
ie.setup = (e2, t2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/Shared/ProductDetails.vue"), ne ? ne(e2, t2) : undefined;
};
const oe = { __name: "Recommended", __ssrInlineRender: true, props: { data: Array, required: true }, setup(e2) {
  const { locale: l2 } = gs();
  return (s2, a2, i2, d2) => {
    var m2;
    const f2 = $, g2 = Ds, $2 = g, y2 = a;
    a2(`<section${ssrRenderAttrs(mergeProps({ class: "bg-[#FAFCFF] my-6 py-6 lg:py-14" }, d2))}><div class="container"><h2 data-aos="fade-up" class="mb-10 text-center !text-2xl sm:text-4xl lg:text-5xl font-semibold animate-fade-in">${ssrInterpolate(s2.$t("TITLES.recommended"))}</h2>`), (null == (m2 = e2.data) ? undefined : m2.length) ? (a2("<div>"), a2(ssrRenderComponent(unref(me), { modules: ["SwiperAutoplay" in s2 ? s2.SwiperAutoplay : unref(L), "SwiperFreeMode" in s2 ? s2.SwiperFreeMode : unref(A)], "slides-per-view": 2, "free-mode": true, autoplay: { delay: 5e3, disableOnInteraction: false }, breakpoints: { 0: { slidesPerView: 2, spaceBetween: 10 }, 576: { slidesPerView: 2, spaceBetween: 10 }, 768: { slidesPerView: 3, spaceBetween: 24 }, 992: { slidesPerView: 4, spaceBetween: 24 }, 1200: { slidesPerView: 5, spaceBetween: 24 } }, class: "mySwiper" }, { default: withCtx((l3, t2, s3, a3) => {
      if (!t2) return [(openBlock(true), createBlock(Fragment, null, renderList(e2.data, (e3) => (openBlock(), createBlock(unref(ve), { key: e3.id }, { default: withCtx(() => [createVNode(f2, { product: e3 }, null, 8, ["product"])]), _: 2 }, 1024))), 128))];
      t2("<!--[-->"), ssrRenderList(e2.data, (e3) => {
        t2(ssrRenderComponent(unref(ve), { key: e3.id }, { default: withCtx((l4, t3, s4, a4) => {
          if (!t3) return [createVNode(f2, { product: e3 }, null, 8, ["product"])];
          t3(ssrRenderComponent(f2, { product: e3 }, null, s4, a4));
        }), _: 2 }, s3, a3));
      }), t2("<!--]-->");
    }), _: 1 }, i2)), a2('<div class="mt-10 flex items-center justify-center">'), a2(ssrRenderComponent(g2, { to: s2.localePath("/categories") }, { default: withCtx((e3, t2, a3, i3) => {
      if (!t2) return [createVNode("button", { class: "w-[320px] max-w-[100%] bg-black justify-center flex items-center gap-1 px-8 py-3 text-white transition hover:bg-opacity-80 hover:scale-105" }, [createVNode("span", { class: "text-xl font-medium" }, toDisplayString(s2.$t("TITLES.viewAll")), 1), createVNode($2, { class: ["ar" === unref(l2) ? "rotate-180" : "", "scale-75"], name: "arrow-right" }, null, 8, ["class"])])];
      t2(`<button class="w-[320px] max-w-[100%] bg-black justify-center flex items-center gap-1 px-8 py-3 text-white transition hover:bg-opacity-80 hover:scale-105"${i3}><span class="text-xl font-medium"${i3}>${ssrInterpolate(s2.$t("TITLES.viewAll"))}</span>`), t2(ssrRenderComponent($2, { class: ["ar" === unref(l2) ? "rotate-180" : "", "scale-75"], name: "arrow-right" }, null, a3, i3)), t2("</button>");
    }), _: 1 }, i2)), a2("</div></div>")) : (a2("<div>"), a2(ssrRenderComponent(y2, { class: "!min-h-[35vh]" }, null, i2)), a2("</div>")), a2("</div></section>");
  };
} }, de = oe.setup;
oe.setup = (e2, t2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/Shared/Recommended.vue"), de ? de(e2, t2) : undefined;
};
const re = { __name: "MayLike", __ssrInlineRender: true, props: { data: Array, required: true }, setup(e2) {
  const l2 = ref(5);
  return gs(), (t2, s2, a2, i2) => {
    var n2;
    const o2 = $, d2 = g, c2 = a;
    (null == (n2 = e2.data) ? undefined : n2.length) ? (s2(`<div${ssrRenderAttrs(i2)}><div class="grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-2.5 xl:gap-x-6 gap-y-8 grid"><!--[-->`), ssrRenderList(e2.data.slice(0, unref(l2)), (e3) => {
      s2("<div>"), s2(ssrRenderComponent(o2, { product: e3 }, null, a2)), s2("</div>");
    }), s2("<!--]--></div>"), unref(l2) < e2.data.length ? (s2(`<div class="mt-10 hidden lg:flex items-center justify-center"><button class="w-[320px] h-16 max-w-[100%] bg-black justify-center flex items-center gap-2 px-8 py-3 text-white transition hover:bg-opacity-80 hover:scale-105"><span class="text-xl font-medium">${ssrInterpolate(t2.$t("TITLES.viewMore"))}</span>`), s2(ssrRenderComponent(d2, { name: "chevron-down", class: "scale-[1.5] [&_path]:fill-white" }, null, a2)), s2("</button></div>")) : s2("<!---->"), s2("</div>")) : (s2(`<div${ssrRenderAttrs(i2)}>`), s2(ssrRenderComponent(c2, { class: "!min-h-[35vh]" }, null, a2)), s2("</div>"));
  };
} }, ce = re.setup;
re.setup = (e2, t2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("components/Shared/MayLike.vue"), ce ? ce(e2, t2) : undefined;
};
const ue = { __name: "[slug]", __ssrInlineRender: true, setup(e2) {
  const l2 = Qt().$axios, a2 = Ma(), { locale: i2, t: c2 } = gs(), { data: u2, status: p2 } = Ts("products", () => l2.get(`web_product/${a2.params.slug}`).then((e3) => e3.data.data).catch((e3) => e3.response)), v2 = ref(false), m2 = computed(() => {
    var e3;
    return [{ name: c2("NAV.home"), to: "/" }, { name: null == (e3 = u2.value) ? undefined : e3.title, to: `/product/${a2.params.slug}`, disabled: true }];
  });
  return (e3, l3, s2, a3) => {
    var d2, c3, x2, f2, g2, $2, y2, _2;
    const E2 = ee, T2 = a, k2 = Ds, S2 = g, C2 = v, I2 = ie, A2 = oe, z2 = re;
    "pending" === unref(p2) ? (l3(`<div${ssrRenderAttrs(mergeProps({ class: "container my-6 lg:my-10" }, a3))}>`), l3(ssrRenderComponent(E2, null, null, s2)), l3("</div>")) : "success" === unref(p2) ? (l3(`<div${ssrRenderAttrs(mergeProps({ class: "container my-6 lg:my-10" }, a3))}>`), 404 === (null == (d2 = unref(u2)) ? undefined : d2.status) ? l3(ssrRenderComponent(T2, null, null, s2)) : (l3('<!--[--><div class="flex mb-6 lg:mb-10 items-center lg:gap-5 gap-3 flex-wrap">'), l3(ssrRenderComponent(k2, { to: e3.localePath("/"), class: "justify-center flex items-center border border-[#E1E1E1] size-12 rounded-full" }, { default: withCtx((e4, l4, t2, s3) => {
      if (!l4) return [createVNode(S2, { name: "arrow-left", class: ["ar" === unref(i2) ? "rotate-180" : "", "[&_path]:fill-primary scale-[.60]"] }, null, 8, ["class"])];
      l4(ssrRenderComponent(S2, { name: "arrow-left", class: ["ar" === unref(i2) ? "rotate-180" : "", "[&_path]:fill-primary scale-[.60]"] }, null, t2, s3));
    }), _: 1 }, s2)), l3(ssrRenderComponent(C2, { items: unref(m2) }, null, s2)), l3("</div>"), l3(ssrRenderComponent(I2, { data: unref(u2) }, null, s2)), (null == (x2 = null == (c3 = unref(u2)) ? undefined : c3.recommended) ? undefined : x2.length) ? l3(ssrRenderComponent(A2, { data: null == (f2 = unref(u2)) ? undefined : f2.recommended }, null, s2)) : l3("<!---->"), (null == ($2 = null == (g2 = unref(u2)) ? undefined : g2.also_may_like) ? undefined : $2.length) ? (l3(`<div class="my-6 py-6 lg:py-8"><div class="container"><h2 data-aos="fade-up" class="mb-10 text-center !text-2xl sm:text-4xl lg:text-5xl font-semibold animate-fade-in">${ssrInterpolate(e3.$t("TITLES.mayAlsoLike"))}</h2>`), (null == (y2 = unref(u2)) ? undefined : y2.also_may_like) ? l3(ssrRenderComponent(z2, { data: null == (_2 = unref(u2)) ? undefined : _2.also_may_like }, null, s2)) : l3("<!---->"), l3("</div></div>")) : l3("<!---->"), unref(v2) ? (l3('<div class="fixed lg:block hidden end-2 bottom-2 z-[999]"><button class="rounded-full hover:bg-primary hover:text-white transition-all duration-300 bg-white border border-primary flex items-center justify-center w-12 h-12">'), l3(ssrRenderComponent(S2, { name: "arrow-up", class: "scale-[60%]" }, null, s2)), l3("</button></div>")) : l3("<!---->"), l3("<!--]-->")), l3("</div>")) : l3("<!---->");
  };
} }, pe = ue.setup;
ue.setup = (e2, t2) => {
  const s2 = useSSRContext();
  return (s2.modules || (s2.modules = /* @__PURE__ */ new Set())).add("pages/product/[slug].vue"), pe ? pe(e2, t2) : undefined;
};

export { ue as default };
//# sourceMappingURL=_slug_-CPSieq6q.mjs.map
