hey-pharmacist-ecommerce 1.1.11 → 1.1.13

package/dist/index.js

@@ -6799,7 +6799,24 @@ function CartProvider({ children }) {
   const addToCart = async (productId, quantity = 1, variantId) => {
     setIsLoading(true);
     try {
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items: [{ productVariantId: variantId || productId, quantity }] });
+      const currentItems = cart?.cartBody?.items || [];
+      const targetVariantId = variantId || productId;
+      const existingItemIndex = currentItems.findIndex(
+        (item) => item.productVariantId === targetVariantId
+      );
+      const items = [...currentItems];
+      if (existingItemIndex >= 0) {
+        items[existingItemIndex] = {
+          ...items[existingItemIndex],
+          quantity: (items[existingItemIndex].quantity || 0) + quantity
+        };
+      } else {
+        items.push({
+          productVariantId: targetVariantId,
+          quantity
+        });
+      }
+      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
       sonner.toast.success("Added to cart!");
     } catch (error) {
@@ -6812,7 +6829,17 @@ function CartProvider({ children }) {
   const updateQuantity = async (productId, quantity) => {
     setIsLoading(true);
     try {
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items: [{ productVariantId: productId, quantity }] });
+      const currentItems = cart?.cartBody?.items || [];
+      const items = currentItems.map((item) => {
+        if (item.productVariantId === productId) {
+          return {
+            ...item,
+            quantity
+          };
+        }
+        return item;
+      });
+      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error) {
       sonner.toast.error(error.response?.data?.message || "Failed to update cart");
@@ -6824,7 +6851,9 @@ function CartProvider({ children }) {
   const removeFromCart = async (productId) => {
     setIsLoading(true);
     try {
-      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items: [{ productVariantId: productId, quantity: 0 }] });
+      const currentItems = cart?.cartBody?.items || [];
+      const items = currentItems.filter((item) => item.productVariantId !== productId);
+      const response = await new CartApi(getApiConfiguration()).handleUserCart({ items });
       setCart(response.data);
     } catch (error) {
       sonner.toast.error(error.response?.data?.message || "Failed to remove from cart");
@@ -7090,8 +7119,11 @@ function ProductCard({
   const { buildPath } = useBasePath();
   const [isFavorite, setIsFavorite] = React21.useState(isFavorited);
   const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist();
+  const { addToCart, isLoading: isAddingToCart } = useCart();
   const [isHovered, setIsHovered] = React21.useState(false);
   const [isImageLoaded, setIsImageLoaded] = React21.useState(false);
+  const [selectedVariantImage, setSelectedVariantImage] = React21.useState(null);
+  const [selectedVariantId, setSelectedVariantId] = React21.useState(null);
   const handleImageLoad = React21.useCallback(() => {
     setIsImageLoaded(true);
   }, []);
@@ -7122,22 +7154,51 @@ function ProductCard({
   React21.useEffect(() => {
     setIsFavorite(isInWishlist(product?._id || "") || isFavorited);
   }, [isFavorited, isInWishlist, product?._id]);
+  React21.useEffect(() => {
+    setSelectedVariantImage(null);
+    setSelectedVariantId(null);
+    setIsImageLoaded(false);
+  }, [product._id]);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       handleCardClick(e);
     }
   };
-  React21.useMemo(() => {
+  const variantImages = React21.useMemo(() => {
+    if (!product.productVariants || product.productVariants.length === 0) {
+      return [];
+    }
+    return product.productVariants.filter((variant) => variant.productMedia && variant.productMedia.length > 0).map((variant) => ({
+      variantId: variant.id || variant._id,
+      variantName: variant.name,
+      image: variant.productMedia[0].file,
+      color: variant.attribute?.color || variant.attribute?.Color || null
+    }));
+  }, [product.productVariants]);
+  const selectedVariant = React21.useMemo(() => {
+    if (!selectedVariantId || !product.productVariants) return null;
+    return product.productVariants.find(
+      (variant) => (variant.id || variant._id) === selectedVariantId
+    );
+  }, [selectedVariantId, product.productVariants]);
+  const displayName = React21.useMemo(() => {
+    return selectedVariant?.name || product.name;
+  }, [selectedVariant, product.name]);
+  const imageSource = React21.useMemo(() => {
+    const src = selectedVariantImage || product.productMedia?.[0]?.file || "/placeholder-product.jpg";
     return {
-      src: product.productMedia?.[0]?.file || "/placeholder-product.jpg",
+      src,
       alt: product.name || "Product image"
     };
-  }, [product.productMedia, product.name]);
+  }, [product.productMedia, product.name, selectedVariantImage]);
+  React21.useEffect(() => {
+    setIsImageLoaded(false);
+  }, [imageSource.src]);
   return /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.article,
     {
-      className: "relative group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-gray-200 flex h-[420px] flex-col",
+      className: "relative group bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-gray-200 flex flex-col",
       whileHover: { y: -4 },
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
@@ -7147,7 +7208,7 @@ function ProductCard({
       onClick: handleCardClick,
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative h-48 w-full overflow-hidden bg-gray-50" }, /* @__PURE__ */ React21__default.default.createElement(framerMotion.AnimatePresence, null, !isImageLoaded && /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50" }, /* @__PURE__ */ React21__default.default.createElement(framerMotion.AnimatePresence, null, !isImageLoaded && /* @__PURE__ */ React21__default.default.createElement(
       framerMotion.motion.div,
       {
         className: "absolute inset-0 bg-gray-200 animate-pulse",
@@ -7155,16 +7216,18 @@ function ProductCard({
         exit: { opacity: 0 },
         transition: { duration: 0.2 }
       }
-    )), product.productMedia?.[0]?.file && /* @__PURE__ */ React21__default.default.createElement(
+    )), /* @__PURE__ */ React21__default.default.createElement(
       Image3__default.default,
       {
-        src: product.productMedia?.[0]?.file || "/placeholder-product.jpg",
-        alt: product.name || "Product image",
+        src: imageSource.src,
+        alt: imageSource.alt,
         fill: true,
         className: `h-full w-full object-cover object-center transition-opacity duration-300 ${product.inventoryCount === 0 ? "opacity-60" : ""} ${isImageLoaded ? "opacity-100" : "opacity-0"}`,
         sizes: "(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw",
         priority: false,
-        onLoad: handleImageLoad
+        onLoad: handleImageLoad,
+        onError: () => setIsImageLoaded(true),
+        key: imageSource.src
       }
     ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute top-3 left-3 flex flex-col gap-2 z-10" }, product.isDiscounted && /* @__PURE__ */ React21__default.default.createElement(
       framerMotion.motion.span,
@@ -7189,51 +7252,80 @@ function ProductCard({
       {
         type: "button",
         onClick: handleFavorite,
-        className: `absolute top-2 right-2 p-2 rounded-full z-10 transition-colors bg-white/90 backdrop-blur-sm shadow-md hover:shadow-lg ${isFavorite ? "text-red-500" : "text-primary-600 hover:text-red-500"} ${isHovered || isFavorite ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`,
+        className: "absolute top-2 right-2 p-2 rounded-full z-10 transition-colors bg-white shadow-md hover:shadow-lg text-primary-600 hover:text-red-500",
         whileHover: { scale: 1.1 },
         whileTap: { scale: 0.95 },
         "aria-label": isFavorite ? "Remove from wishlist" : "Add to wishlist"
       },
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: `w-5 h-5 ${isFavorite ? "fill-current" : ""}` })
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: `w-5 h-5 ${isFavorite ? "fill-red-500 text-red-500" : ""}` })
     )),
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute top-4 left-4 flex flex-col gap-2" }, product.inventoryCount === 0 && /* @__PURE__ */ React21__default.default.createElement("span", { className: "px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-800" }, "Out of Stock")),
-    showFavoriteButton && /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "p-4" }, product.parentCategories && product.parentCategories?.length > 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500 uppercase tracking-wider mb-1" }, product.parentCategories?.map((category) => category?.name).join(", ") || "No categories"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-gray-900 line-clamp-1 group-hover:text-primary-600 transition-colors" }, displayName)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-2xl font-bold text-gray-900" }, formatPrice(product.finalPrice)), product.inventoryCount > 0 && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-xs text-gray-500" }, product.inventoryCount > 0 ? "In Stock" : "Out of Stock")), product.priceBeforeDiscount && product.priceBeforeDiscount > product.finalPrice && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm text-gray-500 line-through" }, formatPrice(product.priceBeforeDiscount))), variantImages.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2 mt-3" }, variantImages.map((variant, index) => /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
+        key: variant.variantId || index,
         type: "button",
-        onClick: handleFavorite,
-        className: `absolute top-2 right-2 p-2 rounded-full transition-colors ${isFavorite ? "text-red-500" : "text-gray-400 hover:text-red-500"}`,
-        "aria-label": isFavorite ? "Remove from wishlist" : "Add to wishlist"
+        onClick: (e) => {
+          e.stopPropagation();
+          if (selectedVariantId === variant.variantId) {
+            setSelectedVariantImage(null);
+            setSelectedVariantId(null);
+          } else {
+            setSelectedVariantImage(variant.image);
+            setSelectedVariantId(variant.variantId || null);
+          }
+          setIsImageLoaded(false);
+        },
+        className: `relative w-8 h-8 rounded-full overflow-hidden border-2 transition-all ${selectedVariantId === variant.variantId ? "border-primary-500 ring-2 ring-primary-200" : "border-gray-200 hover:border-primary-300"}`,
+        "aria-label": `Select ${variant.color || "variant"} color`
       },
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: `w-5 h-5 ${isFavorite ? "fill-current" : ""}` })
-    ),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "p-4" }, product.parentCategories && product.parentCategories?.length > 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500 uppercase tracking-wider mb-2" }, product.parentCategories?.map((category) => category?.name).join(", ") || "No categories"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-gray-900 line-clamp-1 group-hover:text-primary-600 transition-colors" }, product.name), product?.sku && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-400 mt-1" }, "SKU: ", product.sku)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-baseline gap-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-2xl font-bold text-gray-900" }, formatPrice(product.finalPrice)), product.inventoryCount > 0 && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-xs text-gray-500" }, product.inventoryCount > 0 ? "In Stock" : "Out of Stock")), product.priceBeforeDiscount && product.priceBeforeDiscount > product.finalPrice && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm text-gray-500 line-through" }, formatPrice(product.priceBeforeDiscount)))),
+      /* @__PURE__ */ React21__default.default.createElement(
+        Image3__default.default,
+        {
+          src: variant.image,
+          alt: variant.color || `Variant ${index + 1}`,
+          fill: true,
+          className: "object-cover",
+          sizes: "32px"
+        }
+      )
+    )))),
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-auto p-4 pt-0" }, /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         type: "button",
-        onClick: (e) => {
+        onClick: async (e) => {
           e.stopPropagation();
-          router.push(buildPath(`/products/${product._id}`));
+          if (!selectedVariantId && variantImages.length > 0) {
+            sonner.toast.error("Please select a variant");
+            return;
+          }
+          try {
+            await addToCart(
+              product._id || product.id,
+              1,
+              selectedVariantId || void 0
+            );
+          } catch (error) {
+            console.error("Failed to add to cart", error);
+          }
         },
-        className: `w-full flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium  bg-primary-600 hover:bg-primary-700 text-white`
+        disabled: isAddingToCart || variantImages.length > 0 && !selectedVariantId,
+        className: "w-full flex items-center justify-center gap-2 rounded-full px-3 py-2.5 text-sm font-medium bg-primary-400 hover:bg-primary-500 text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
       },
-      "View Product"
-    ), showFavoriteButton && /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingCart, { className: "h-4 w-4" }),
+      "Add to Cart"
+    ), /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         type: "button",
-        onClick: handleFavorite,
-        className: "mt-2 w-full flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-primary-600 hover:bg-gray-50",
-        "aria-label": isFavorite ? "Remove from wishlist" : "Add to wishlist"
+        onClick: (e) => {
+          e.stopPropagation();
+          router.push(buildPath(`/products/${product._id}`));
+        },
+        className: "mt-2 w-full flex items-center justify-center rounded-full border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
       },
-      /* @__PURE__ */ React21__default.default.createElement(
-        lucideReact.Heart,
-        {
-          className: `mr-2 h-4 w-4 ${isFavorite ? "fill-red-500 text-red-500" : "text-primary-600"}`
-        }
-      ),
-      isFavorite ? "Saved" : "Save for later"
+      "View More"
     ))
   );
 }
@@ -7445,8 +7537,12 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     max: ""
   });
   const [expandedCategories, setExpandedCategories] = React21.useState({});
+  const [expandedFilterSections, setExpandedFilterSections] = React21.useState({
+    category: true
+    // Category section starts expanded
+  });
   const { products, isLoading, pagination } = useProducts(filters, page, 20);
-  const { categories } = useCategories();
+  const { categories, isLoading: isLoadingCategories } = useCategories();
   const handleSearch = (e) => {
     e.preventDefault();
     if (searchQuery.trim()) {
@@ -7516,7 +7612,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     });
     return { newArrivals: newArrivals2, inStockCount };
   }, [products]);
-  const insightCards = React21.useMemo(
+  React21.useMemo(
     () => [
       {
         id: "new",
@@ -7559,8 +7655,11 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
       const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1e3;
       items = items.filter((p) => new Date(p.createdAt).getTime() >= thirtyDaysAgo);
     }
+    if (filters.brand) {
+      items = items.filter((p) => p.brand && p.brand.trim().toLowerCase() === filters.brand.toLowerCase());
+    }
     return items;
-  }, [isLoading, products, filters.tags, filters.newArrivals]);
+  }, [isLoading, products, filters.tags, filters.newArrivals, filters.brand]);
   const sortedProducts = React21.useMemo(() => {
     if (isLoading) {
       return filteredProducts;
@@ -7580,14 +7679,23 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     }
   }, [isLoading, filteredProducts, sortOption]);
   const displayedProducts = sortedProducts;
-  const quickSearches = React21.useMemo(() => {
+  const availableBrands = React21.useMemo(() => {
+    const brandSet = /* @__PURE__ */ new Set();
+    products.forEach((product) => {
+      if (product.brand && product.brand.trim()) {
+        brandSet.add(product.brand.trim());
+      }
+    });
+    return Array.from(brandSet).sort();
+  }, [products]);
+  React21.useMemo(() => {
     const counts = /* @__PURE__ */ new Map();
     products.forEach((p) => {
       (p.tags || []).forEach((t) => counts.set(t, (counts.get(t) || 0) + 1));
     });
     return Array.from(counts.entries()).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([tag]) => tag);
   }, [products]);
-  const handleQuickSearch = React21.useCallback((term) => {
+  React21.useCallback((term) => {
     setSearchQuery("");
     setFilters((current) => ({
       ...current,
@@ -7643,6 +7751,13 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     });
     setPage(1);
   }, []);
+  const handleClearCategory = React21.useCallback(() => {
+    setFilters((current) => {
+      const { category, subCategory, ...rest } = current;
+      return rest;
+    });
+    setPage(1);
+  }, []);
   const handleClearFilters = React21.useCallback(() => {
     setFilters({});
     setSearchQuery("");
@@ -7705,6 +7820,23 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     });
     setPage(1);
   }, []);
+  const handleBrandChange = React21.useCallback((brand) => {
+    setFilters((current) => {
+      if (current.brand === brand) {
+        const { brand: _, ...rest } = current;
+        return rest;
+      }
+      return { ...current, brand };
+    });
+    setPage(1);
+  }, []);
+  const handleRemoveBrand = React21.useCallback(() => {
+    setFilters((current) => {
+      const { brand, ...rest } = current;
+      return rest;
+    });
+    setPage(1);
+  }, []);
   const handlePriceRangeSelect = React21.useCallback(
     (value) => {
       const range = priceRanges.find((item) => item.value === value);
@@ -7779,7 +7911,8 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     minPrice,
     maxPrice,
     tags,
-    newArrivals
+    newArrivals,
+    brand: brandFilter
   } = filters;
   const activeFilterChips = React21.useMemo(() => {
     const chips = [];
@@ -7853,6 +7986,13 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         onRemove: handleToggleNewArrivals
       });
     }
+    if (brandFilter) {
+      chips.push({
+        key: "brand",
+        label: `Brand: ${brandFilter}`,
+        onRemove: handleRemoveBrand
+      });
+    }
     return chips;
   }, [
     categories,
@@ -7864,53 +8004,87 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
     handleRemovePrice,
     handleRemoveSearch,
     handleRemoveTag,
+    handleRemoveBrand,
     inStockOnly,
     maxPrice,
     minPrice,
     searchFilter,
     tags,
-    newArrivals
+    newArrivals,
+    brandFilter
   ]);
   const hasActiveFilters = activeFilterChips.length > 0;
   const isCustomPriceDirty = customPrice.min.trim() !== "" || customPrice.max.trim() !== "";
-  const renderFiltersPanel = () => /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Refine results"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, "Filter by category, price, and availability to find the perfect fit faster.")), hasActiveFilters && /* @__PURE__ */ React21__default.default.createElement(
+  const toggleFilterSection = React21.useCallback((section) => {
+    setExpandedFilterSections((prev) => ({
+      ...prev,
+      [section]: !prev[section]
+    }));
+  }, []);
+  const getCategoryIconForFilter = (categoryName2) => {
+    const name = categoryName2.toLowerCase();
+    if (name.includes("scrub") || name.includes("uniform")) return lucideReact.Shirt;
+    if (name.includes("vitamin") || name.includes("supplement")) return lucideReact.Pill;
+    if (name.includes("medicine") || name.includes("medication")) return lucideReact.Box;
+    if (name.includes("care") || name.includes("personal")) return lucideReact.Heart;
+    return lucideReact.Package;
+  };
+  const renderFiltersPanel = () => /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-bold text-slate-900" }, "Filters"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "text-sm font-medium text-slate-600" }, "Search Products"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" }), /* @__PURE__ */ React21__default.default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Search...",
+      value: searchQuery,
+      onChange: handleInputChange,
+      className: "w-full rounded-lg border border-slate-200 bg-white pl-10 pr-4 py-2 text-sm text-slate-900 placeholder-slate-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+    }
+  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
       type: "button",
-      onClick: handleClearFilters,
-      className: "text-sm font-semibold text-primary-600 hover:text-primary-700"
+      onClick: () => toggleFilterSection("category"),
+      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+    },
+    /* @__PURE__ */ React21__default.default.createElement("span", null, "Category"),
+    expandedFilterSections.category ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  ), expandedFilterSections.category && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleClearCategory,
+      className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition ${!categoryFilter ? "bg-primary-600 text-white" : "bg-white text-slate-700 border border-slate-200 hover:border-primary-300"}`
     },
-    "Clear all"
-  )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("h4", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-gray-500" }, "Categories"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, sortedCategories.length === 0 && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm text-gray-500" }, "No categories available yet."), sortedCategories.map((category) => {
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: `flex h-6 w-6 items-center justify-center rounded ${!categoryFilter ? "bg-white/20" : "bg-slate-100"}` }, !categoryFilter ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: "h-4 w-4 text-slate-600" })),
+    /* @__PURE__ */ React21__default.default.createElement("span", null, "All Products")
+  ), sortedCategories.map((category) => {
     const isCategoryActive = categoryFilter === category.id;
     const isExpanded = !!expandedCategories[category.id];
-    return /* @__PURE__ */ React21__default.default.createElement("div", { key: category.id, className: "rounded-xl  border-gray-100 bg-white/50" }, /* @__PURE__ */ React21__default.default.createElement(
-      "div",
+    const Icon = getCategoryIconForFilter(category.name ?? "");
+    return /* @__PURE__ */ React21__default.default.createElement("div", { key: category.id, className: "space-y-1" }, /* @__PURE__ */ React21__default.default.createElement(
+      "button",
       {
-        role: "button",
-        tabIndex: 0,
+        type: "button",
         onClick: () => {
           if (!isExpanded) toggleCategoryExpand(category.id ?? "");
           handleCategoryChange(category.id ?? "");
         },
-        className: `flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition ${isCategoryActive ? "text-primary-700 bg-primary-50" : "text-gray-700 hover:text-primary-700 hover:bg-primary-50/50"}`
+        className: `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition ${isCategoryActive ? "bg-primary-600 text-white" : "bg-white text-slate-700 border border-slate-200 hover:border-primary-300"}`
       },
-      /* @__PURE__ */ React21__default.default.createElement("span", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium" }, category.name), category.productCount > 0 && /* @__PURE__ */ React21__default.default.createElement("span", { className: `ml-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs ${isCategoryActive ? "text-primary-700" : "text-gray-500"}` }, category.productCount)),
-      /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: `flex h-6 w-6 items-center justify-center rounded ${isCategoryActive ? "bg-white/20" : "bg-slate-100"}` }, /* @__PURE__ */ React21__default.default.createElement(Icon, { className: `h-4 w-4 ${isCategoryActive ? "text-white" : "text-slate-600"}` })),
+      /* @__PURE__ */ React21__default.default.createElement("span", { className: "flex-1 text-left" }, category.name),
+      Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement(
         "button",
         {
           type: "button",
           onClick: (e) => {
-            e.preventDefault();
             e.stopPropagation();
             toggleCategoryExpand(category.id ?? "");
           },
-          className: "rounded-md p-1 hover:bg-gray-100",
-          "aria-label": isExpanded ? "Collapse" : "Expand"
+          className: "p-1"
         },
-        /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-180 text-primary-600" : "rotate-0 text-gray-400"}` })
+        /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-180" : ""} ${isCategoryActive ? "text-white" : "text-slate-400"}` })
       )
-    ), isExpanded && Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-1  border-gray-100 px-2 pb-2 pl-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "divide-y divide-gray-100" }, category.categorySubCategories.map((sub) => {
+    ), isExpanded && Array.isArray(category.categorySubCategories) && category.categorySubCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "ml-9 space-y-1" }, category.categorySubCategories.map((sub) => {
       const isSubActive = subCategoryFilter === sub.id;
       return /* @__PURE__ */ React21__default.default.createElement(
         "button",
@@ -7918,12 +8092,61 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
           key: sub.id,
           type: "button",
           onClick: () => handleSubCategoryChange(category.id ?? "", sub.id),
-          className: `block w-full px-2 py-2 text-sm text-start transition ${isSubActive ? "text-primary-700" : "text-gray-600 hover:text-primary-700 "}`
+          className: `block w-full rounded-lg px-3 py-2 text-sm text-left transition ${isSubActive ? "bg-primary-50 text-primary-700 font-medium" : "text-slate-600 hover:bg-slate-50"}`
         },
         sub.name
       );
-    }))));
-  }))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("h4", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-gray-500" }, "Price"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, priceRanges.map((range) => {
+    })));
+  }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => toggleFilterSection("brand"),
+      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+    },
+    /* @__PURE__ */ React21__default.default.createElement("span", null, "Brand"),
+    expandedFilterSections.brand ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  ), expandedFilterSections.brand && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-1.5 max-h-64 overflow-y-auto" }, availableBrands.length === 0 ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-xs text-slate-500" }, "No brands available") : availableBrands.map((brand) => {
+    const isSelected = brandFilter === brand;
+    return /* @__PURE__ */ React21__default.default.createElement(
+      "button",
+      {
+        key: brand,
+        type: "button",
+        onClick: () => handleBrandChange(brand),
+        className: `flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-xs font-medium transition ${isSelected ? "border-primary-500 bg-primary-50 text-primary-700" : "border-slate-200 bg-white text-slate-600 hover:border-primary-300"}`
+      },
+      /* @__PURE__ */ React21__default.default.createElement("span", { className: "truncate" }, brand),
+      isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-3 w-3 text-primary-600 flex-shrink-0 ml-2" })
+    );
+  }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => toggleFilterSection("availability"),
+      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+    },
+    /* @__PURE__ */ React21__default.default.createElement("span", null, "Availability"),
+    expandedFilterSections.availability ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  ), expandedFilterSections.availability && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleToggleStock,
+      className: `flex w-full items-center justify-between rounded-lg border px-3 py-2.5 text-sm font-medium transition ${inStockOnly ? "border-primary-500 bg-primary-50 text-primary-700" : "border-slate-200 bg-white text-slate-600 hover:border-primary-300"}`
+    },
+    /* @__PURE__ */ React21__default.default.createElement("span", null, "In stock only"),
+    inStockOnly && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4 text-primary-600" })
+  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => toggleFilterSection("price"),
+      className: "flex w-full items-center justify-between text-sm font-medium text-slate-600"
+    },
+    /* @__PURE__ */ React21__default.default.createElement("span", null, "Price Range"),
+    expandedFilterSections.price ? /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  ), expandedFilterSections.price && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, priceRanges.map((range) => {
     const isActive = selectedPriceRange === range.value;
     return /* @__PURE__ */ React21__default.default.createElement(
       "button",
@@ -7931,27 +8154,29 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
         type: "button",
         key: range.value,
         onClick: () => handlePriceRangeSelect(range.value),
-        className: `rounded-full border px-3 py-1.5 text-sm font-medium transition ${isActive ? "border-secondary-600 bg-secondary-600 text-white shadow-lg shadow-secondary-500/30" : "border-gray-200 bg-white text-gray-600 hover:border-secondary-300 hover:text-secondary-600"}`
+        className: `rounded-lg border px-3 py-1.5 text-sm font-medium transition ${isActive ? "border-primary-600 bg-primary-600 text-white" : "border-slate-200 bg-white text-slate-600 hover:border-primary-300"}`
       },
       range.label
     );
-  })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-2 gap-3" }, /* @__PURE__ */ React21__default.default.createElement(
+  })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React21__default.default.createElement(
     Input,
     {
       type: "number",
       min: "0",
-      placeholder: "Custom min",
+      placeholder: "Min",
       value: customPrice.min,
-      onChange: (event) => setCustomPrice((current) => ({ ...current, min: event.target.value }))
+      onChange: (event) => setCustomPrice((current) => ({ ...current, min: event.target.value })),
+      className: "text-sm"
     }
   ), /* @__PURE__ */ React21__default.default.createElement(
     Input,
     {
       type: "number",
       min: "0",
-      placeholder: "Custom max",
+      placeholder: "Max",
       value: customPrice.max,
-      onChange: (event) => setCustomPrice((current) => ({ ...current, max: event.target.value }))
+      onChange: (event) => setCustomPrice((current) => ({ ...current, max: event.target.value })),
+      className: "text-sm"
     }
   )), /* @__PURE__ */ React21__default.default.createElement(
     "button",
@@ -7959,118 +8184,91 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
       type: "button",
       onClick: applyCustomPrice,
       disabled: !isCustomPriceDirty,
-      className: "w-full rounded-xl border border-primary-500 bg-primary-500/10 px-4 py-2.5 text-sm font-semibold text-primary-700 transition hover:bg-primary-500/20 disabled:cursor-not-allowed disabled:border-gray-200 disabled:text-gray-400"
-    },
-    "Apply price range"
-  )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("h4", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-gray-500" }, "Availability"), /* @__PURE__ */ React21__default.default.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: handleToggleStock,
-      className: `flex w-full items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium transition ${inStockOnly ? "border-primary-500 bg-primary-50 text-primary-700" : "border-gray-200 bg-white text-gray-600 hover:border-primary-300 hover:text-primary-600"}`
-    },
-    /* @__PURE__ */ React21__default.default.createElement("span", null, "In stock only"),
-    /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4 text-primary-500" })
-  ), /* @__PURE__ */ React21__default.default.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: handleToggleNewArrivals,
-      className: `mt-2 flex w-full items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium transition ${newArrivals ? "border-secondary-500 bg-secondary-50 text-secondary-700" : "border-gray-200 bg-white text-gray-600 hover:border-secondary-300 hover:text-secondary-600"}`
+      className: "w-full rounded-lg border border-primary-500 bg-primary-500/10 px-4 py-2 text-sm font-medium text-primary-700 transition hover:bg-primary-500/20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
     },
-    /* @__PURE__ */ React21__default.default.createElement("span", null, "New arrivals (last 30 days)"),
-    /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4 text-secondary-500" })
-  ))));
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white" }, /* @__PURE__ */ React21__default.default.createElement(
-    "div",
-    {
-      className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]",
-      "aria-hidden": "true"
-    }
-  ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_rgba(94,234,212,0.35),_transparent_55%)] opacity-60" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-24" }, /* @__PURE__ */ React21__default.default.createElement(
+    "Apply"
+  )))));
+  const displayCategories = React21.useMemo(() => {
+    return topCategories.slice(0, 5);
+  }, [topCategories]);
+  const getCategoryIcon = (categoryName2) => {
+    const name = categoryName2.toLowerCase();
+    if (name.includes("scrub") || name.includes("uniform")) return lucideReact.Shirt;
+    if (name.includes("vitamin") || name.includes("supplement")) return lucideReact.Pill;
+    if (name.includes("medicine") || name.includes("medication")) return lucideReact.Box;
+    if (name.includes("care") || name.includes("personal")) return lucideReact.Heart;
+    return lucideReact.Package;
+  };
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-[#F9FAFB]" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-[#E6EBF0] py-16 md:py-24" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
-      className: "max-w-3xl space-y-8 text-center md:mx-auto md:text-left"
+      className: "max-w-4xl mx-auto space-y-6 text-center"
     },
-    /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm font-semibold tracking-wide text-white/80 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4" }), "Wellness products, curated for you"),
-    /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold leading-tight md:text-6xl" }, "Find pharmacy favorites crafted to keep your family thriving"),
-    /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-lg text-white/80 md:text-xl" }, "Explore a modern storefront with real-time inventory, smart filters, and rich product details designed to make healthier choices easier."),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-center gap-2 mb-4" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Star, { className: "h-5 w-5 text-orange-500 fill-orange-500" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-semibold uppercase tracking-wider text-orange-500" }, "COMPLETE PHARMACY SHOP")),
+    /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-slate-900 leading-tight" }, "Medical Supplies & Wellness Products"),
+    /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base md:text-lg text-slate-600 max-w-2xl mx-auto" }, "From professional scrubs to vitamins, medicines to personal care - everything you need for health and wellness."),
     /* @__PURE__ */ React21__default.default.createElement(
       "form",
       {
         onSubmit: handleSearch,
-        className: "mx-auto max-w-2xl md:mx-0"
+        className: "max-w-2xl mx-auto mt-8"
       },
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Search, { className: "absolute left-5 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400 pointer-events-none" }), /* @__PURE__ */ React21__default.default.createElement(
         "input",
         {
           type: "search",
-          placeholder: "Search for products, categories, or symptoms...",
+          placeholder: "Search for products, brands, or categories...",
           value: searchQuery,
           onChange: handleInputChange,
           onKeyDown: handleKeyDown,
-          className: "flex h-12 w-full rounded-xl border border-white/20 bg-white/10 px-4 py-2 pr-14 text-lg text-white placeholder-white/60 shadow-2xl shadow-primary-900/20 backdrop-blur focus:border-white/30 focus:outline-none focus:ring-2 focus:ring-white/20 disabled:opacity-50",
+          className: "flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30 disabled:opacity-50",
           disabled: isSearching
         }
-      ), /* @__PURE__ */ React21__default.default.createElement(
-        "button",
-        {
-          type: "submit",
-          className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-xl bg-white/20 p-3 text-white transition hover:bg-white/30 disabled:opacity-50",
-          disabled: !searchQuery.trim() || isSearching
-        },
-        isSearching ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" }) : /* @__PURE__ */ React21__default.default.createElement(lucideReact.Search, { className: "h-5 w-5" })
       ))
     )
-  ), /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      transition: { delay: 0.15 },
-      className: "mt-12 flex flex-col gap-6 rounded-3xl border border-white/20 bg-white/10 p-6 backdrop-blur md:flex-row md:items-center md:justify-between"
-    },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.3em] text-white/60" }, "Explore popular searches"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, quickSearches.map((term) => /* @__PURE__ */ React21__default.default.createElement(
-      "button",
-      {
-        key: term,
-        type: "button",
-        onClick: () => handleQuickSearch(term),
-        className: "rounded-full border border-white/30 bg-white/10 px-4 py-2 text-sm font-medium text-white transition hover:border-white/50 hover:bg-white/20"
-      },
-      term
-    )))),
-    topCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3 md:text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.3em] text-white/60" }, "Trending categories"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap justify-start gap-2 md:justify-end" }, topCategories.map((category) => /* @__PURE__ */ React21__default.default.createElement(
-      "button",
+  ))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "bg-white py-8 " }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl md:text-3xl font-bold text-slate-900 mb-8" }, "Shop by Category"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6" }, isLoadingCategories ? (
+    // Skeleton loaders
+    /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(
+      "div",
       {
-        key: category.id,
-        type: "button",
-        onClick: () => handleCategoryChange(category.id ?? ""),
-        className: "rounded-full bg-white/15 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-white/25"
+        key: index,
+        className: "rounded-xl border border-slate-200 bg-white p-8"
       },
-      category.name
-    ))))
-  ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-10 grid gap-4 md:grid-cols-3" }, insightCards.map((card, index) => {
-    const Icon = card.icon;
+      /* @__PURE__ */ React21__default.default.createElement(Skeleton, { className: "h-10 w-10 mb-4 rounded-lg" }),
+      /* @__PURE__ */ React21__default.default.createElement(Skeleton, { className: "h-6 w-3/4 mb-2 rounded" }),
+      /* @__PURE__ */ React21__default.default.createElement(Skeleton, { className: "h-4 w-1/2 rounded" })
+    )))
+  ) : /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement(
+    framerMotion.motion.button,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      onClick: handleClearCategory,
+      className: `group relative overflow-hidden rounded-xl p-8 text-left transition ${!categoryFilter ? "bg-gradient-to-b from-primary-500 to-primary-300 text-white shadow-lg scale-105" : "border border-slate-200 bg-white hover:border-primary-300 hover:shadow-md"}`
+    },
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: `h-10 w-10 mb-4 ${!categoryFilter ? "text-white" : "text-primary-500"}` }),
+    /* @__PURE__ */ React21__default.default.createElement("h3", { className: `text-xl font-bold mb-2 ${!categoryFilter ? "text-white" : "text-slate-900 group-hover:text-primary-600"}` }, "All Products"),
+    /* @__PURE__ */ React21__default.default.createElement("p", { className: `text-sm ${!categoryFilter ? "text-white/90" : "text-slate-500"}` }, "Browse everything")
+  ), displayCategories.map((category, index) => {
+    const Icon = getCategoryIcon(category.name ?? "");
+    const isSelected = categoryFilter === category.id;
     return /* @__PURE__ */ React21__default.default.createElement(
-      framerMotion.motion.div,
+      framerMotion.motion.button,
       {
-        key: card.id,
+        key: category.id,
         initial: { opacity: 0, y: 20 },
         animate: { opacity: 1, y: 0 },
-        transition: { delay: 0.2 + index * 0.05 },
-        className: `rounded-2xl border p-5 backdrop-blur ${card.id === "new" && newArrivals ? "border-white/40 bg-white/25 ring-2 ring-white/30" : "border-white/20 bg-white/15"} ${card.id === "new" ? "cursor-pointer hover:bg-white/20" : ""}`,
-        onClick: card.id === "new" ? handleToggleNewArrivals : void 0,
-        role: card.id === "new" ? "button" : void 0,
-        "aria-pressed": card.id === "new" ? newArrivals ? "true" : "false" : void 0,
-        title: card.id === "new" ? newArrivals ? "Filter active: showing products from the last 30 days" : "Click to filter products from the last 30 days" : void 0
+        transition: { delay: index * 0.1 },
+        onClick: () => handleCategoryChange(category.id ?? ""),
+        className: `group rounded-xl p-8 text-left transition ${isSelected ? "bg-gradient-to-b from-primary-500 to-primary-300 text-white shadow-lg" : "border border-slate-200 bg-white hover:border-primary-300 hover:shadow-md"}`
       },
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.3em] text-white/60" }, card.label), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 text-3xl font-semibold text-white" }, card.value)), /* @__PURE__ */ React21__default.default.createElement("span", { className: "rounded-full bg-white/20 p-3 text-white" }, /* @__PURE__ */ React21__default.default.createElement(Icon, { className: "h-5 w-5" }))),
-      /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-3 text-sm text-white/70" }, card.helper)
+      /* @__PURE__ */ React21__default.default.createElement(Icon, { className: `h-10 w-10 mb-4 ${isSelected ? "text-white" : "text-primary-500"}` }),
+      /* @__PURE__ */ React21__default.default.createElement("h3", { className: `text-xl font-bold mb-2 transition-colors ${isSelected ? "text-white" : "text-slate-900 group-hover:text-primary-600"}` }, category.name),
+      /* @__PURE__ */ React21__default.default.createElement("p", { className: `text-sm ${isSelected ? "text-white/90" : "text-slate-500"}` }, category.name?.toLowerCase().includes("scrub") ? "Professional uniforms" : category.name?.toLowerCase().includes("vitamin") ? "Health supplements" : category.name?.toLowerCase().includes("medicine") ? "OTC medications" : category.name?.toLowerCase().includes("care") ? "Daily essentials" : "Shop now")
     );
-  })))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative z-10 -mt-12 pb-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-8 lg:flex-row" }, /* @__PURE__ */ React21__default.default.createElement("aside", { className: "hidden w-72 flex-shrink-0 lg:block" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "sticky top-24 rounded-3xl border border-gray-100 bg-white p-6 shadow-xl shadow-gray-200/40" }, renderFiltersPanel())), /* @__PURE__ */ React21__default.default.createElement("main", { className: "flex-1 space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-gray-100 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "All products"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, "Browse a pharmacy-grade catalogue with smart merchandising and modern UI.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-3 md:flex-row md:items-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowUpDown, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), /* @__PURE__ */ React21__default.default.createElement(
+  }))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative z-10  pb-16 mt-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-8 lg:flex-row" }, /* @__PURE__ */ React21__default.default.createElement("aside", { className: "hidden w-72 flex-shrink-0 lg:block" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "sticky top-24 rounded-lg bg-white p-6" }, renderFiltersPanel())), /* @__PURE__ */ React21__default.default.createElement("main", { className: "flex-1 space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-gray-100 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-base font-medium text-gray-700" }, isLoading ? "Loading products..." : `Showing ${displayedProducts.length} of ${pagination.total || displayedProducts.length} products`)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-3 md:flex-row md:items-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowUpDown, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }), /* @__PURE__ */ React21__default.default.createElement(
     "select",
     {
       value: sortOption,
@@ -8131,7 +8329,7 @@ function ShopScreen({ initialFilters = {}, categoryName }) {
       className: "text-sm font-semibold text-gray-500 hover:text-gray-700"
     },
     "Reset all"
-  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-gray-100 bg-white p-6 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-3 text-sm text-gray-600 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, isLoading ? "Loading products..." : `Showing ${displayedProducts.length} of ${pagination.total || displayedProducts.length} products`), /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 text-gray-400" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Clock, { className: "h-4 w-4" }), "Updated a moment ago")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6" }, isLoading ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3" }, Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(ProductCardSkeleton, { key: index }))) : displayedProducts.length > 0 ? viewMode === "grid" ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3" }, displayedProducts.map((product) => /* @__PURE__ */ React21__default.default.createElement("div", { key: product.id, className: "h-full" }, /* @__PURE__ */ React21__default.default.createElement(
+  ))), /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6" }, isLoading ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" }, Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(ProductCardSkeleton, { key: index }))) : displayedProducts.length > 0 ? viewMode === "grid" ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" }, displayedProducts.map((product) => /* @__PURE__ */ React21__default.default.createElement("div", { key: product.id, className: "h-full" }, /* @__PURE__ */ React21__default.default.createElement(
     ProductCard,
     {
       product,
@@ -8303,6 +8501,16 @@ function ProductDetailScreen({ productId }) {
         url: media.file
       }));
     }
+    if (product?.productMedia?.length) {
+      return product.productMedia.map((media) => ({
+        src: media.file,
+        width: 800,
+        height: 1e3,
+        alt: product?.name || "Product image",
+        ...media,
+        url: media.file
+      }));
+    }
     if (product?.images?.length) {
       return product.images.map((image) => ({
         src: image,
@@ -8365,6 +8573,7 @@ function ProductDetailScreen({ productId }) {
   }, [product?.id]);
   const handleVariantSelect = async (variant) => {
     setSelectedVariant(variant);
+    setActiveImageIndex(0);
   };
   const handleAddToCart = async () => {
     if (!product || !selectedVariant) return;
@@ -8413,76 +8622,45 @@ function ProductDetailScreen({ productId }) {
   if (!product) {
     return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl bg-white p-10 text-center shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "mx-auto h-10 w-10 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "mt-6 text-2xl font-semibold text-gray-900" }, "Product not found"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 text-gray-600" }, "It may have been removed or is temporarily unavailable. Discover other pharmacy essentials in our catalogue."), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: "/shop", className: "inline-block" }, /* @__PURE__ */ React21__default.default.createElement(Button, null, "Browse products"))))));
   }
-  product.tags && product.tags.length > 0 ? product.tags.slice(0, 6) : ["Pharmacist approved", "Gentle on daily routines", "Backed by real customers"];
-  const highlightCards = [
-    {
-      icon: lucideReact.ShieldCheck,
-      title: "Pharmacy grade assurance",
-      description: "Sourced from trusted suppliers and reviewed by licensed professionals."
-    },
-    {
-      icon: lucideReact.Truck,
-      title: "Fast, cold-chain ready shipping",
-      description: "Carefully packed and dispatched within 24 hours on business days."
-    },
-    {
-      icon: lucideReact.Award,
-      title: "Loved by patients",
-      description: "Average rating 4.8/5 with over 120 verified customer experiences."
-    }
-  ];
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8" }, /* @__PURE__ */ React21__default.default.createElement(
-    "div",
-    {
-      className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]",
-      "aria-hidden": "true"
-    }
-  ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_rgba(255,255,255,0.25),_transparent_55%)] opacity-70" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white max-w-7xl mx-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative pb-20 pt-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement(
     Button,
     {
       variant: "ghost",
-      className: "text-white hover:bg-white/10",
+      className: "text-slate-600 hover:text-slate-900 hover:bg-slate-100",
       onClick: () => router.push(buildPath("/shop"))
     },
-    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowLeft, { className: "h-5 w-5" }),
-    "Continue shopping"
-  ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "hidden items-center gap-3 text-sm text-white/80 md:flex" }, /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: buildPath("/"), className: "transition hover:text-white" }, "Home"), /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronRight, { className: "h-4 w-4" }), /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: buildPath("/shop"), className: "transition hover:text-white" }, "Shop"), /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronRight, { className: "h-4 w-4" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "truncate font-medium text-white" }, product.name))), /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "max-w-3xl space-y-4"
-    },
-    product.category && /* @__PURE__ */ React21__default.default.createElement(
-      Badge,
-      {
-        variant: "secondary",
-        className: "bg-white/15 text-white backdrop-blur-sm"
-      },
-      product.category
-    ),
-    /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold leading-tight md:text-5xl" }, product.name),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3 text-sm text-white/80" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 font-medium text-white" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4" }), "Ready to ship today"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 font-medium text-white" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Shield, { className: "h-4 w-4" }), "30-day happiness guarantee"))
-  )))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative -mt-16 pb-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-10" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "rounded-3xl border border-white bg-white/70 p-6 shadow-xl shadow-primary-100/40 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_220px]" }, /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowLeft, { className: "h-4 w-4 mr-2" }),
+    "Back to Shop"
+  )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,50fr)_minmax(0,50fr)]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-10" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "rounded-3xl " }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
-      key: variantImages[activeImageIndex],
+      key: selectedVariant?.id || "default",
       initial: { opacity: 0.4, scale: 0.98 },
       animate: { opacity: 1, scale: 1 },
       transition: { duration: 0.35 },
       className: "relative overflow-hidden rounded-3xl bg-slate-100 h-[420px] md:h-[560px]"
     },
-    /* @__PURE__ */ React21__default.default.createElement(
+    variantImages.length > 0 && variantImages[activeImageIndex] ? /* @__PURE__ */ React21__default.default.createElement(
       Image3__default.default,
       {
-        src: variantImages[activeImageIndex],
+        src: variantImages[activeImageIndex].src || variantImages[activeImageIndex].url || variantImages[activeImageIndex].file,
         alt: currentVariant.name || product.name,
         fill: true,
         priority: true,
         sizes: "(max-width: 1024px) 100vw, 800px",
         className: "object-contain"
       }
-    ),
+    ) : product?.productMedia?.[0]?.file ? /* @__PURE__ */ React21__default.default.createElement(
+      Image3__default.default,
+      {
+        src: product.productMedia[0].file,
+        alt: product.name,
+        fill: true,
+        priority: true,
+        sizes: "(max-width: 1024px) 100vw, 800px",
+        className: "object-contain"
+      }
+    ) : null,
     discount > 0 && /* @__PURE__ */ React21__default.default.createElement(
       Badge,
       {
@@ -8501,90 +8679,106 @@ function ProductDetailScreen({ productId }) {
       },
       "Out of Stock"
     )
-  ), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4" }, product?.productVariants?.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "mb-2 text-sm font-semibold uppercase tracking-[0.25em] text-slate-400" }, "Variant"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, product?.productVariants?.map((variant, index) => /* @__PURE__ */ React21__default.default.createElement(
-    "button",
-    {
-      key: variant.id,
-      type: "button",
-      onClick: () => handleVariantSelect(variant),
-      className: `rounded-full px-4 py-2 text-sm font-medium transition ${selectedVariant?.id === variant.id ? "bg-primary-600 text-white" : "bg-slate-100 text-slate-700 hover:bg-slate-200"}`
-    },
-    variant.name
-  )))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-3 gap-3" }, variantImages.map((image, index) => /* @__PURE__ */ React21__default.default.createElement(
+  ), variantImages.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-8 gap-2" }, variantImages.map((image, index) => /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
       key: image.src + index,
       type: "button",
       onClick: () => setActiveImageIndex(index),
-      className: `relative aspect-square overflow-hidden rounded-2xl border transition ${activeImageIndex === index ? "border-primary-500 shadow-lg shadow-primary-200/60" : "border-transparent hover:border-primary-200"}`
+      className: `relative aspect-square overflow-hidden rounded-lg border-2 transition-all ${activeImageIndex === index ? "border-primary-500 ring-2 ring-primary-200 ring-offset-2 shadow-md" : "border-slate-200 hover:border-primary-300"}`
     },
     /* @__PURE__ */ React21__default.default.createElement(
       Image3__default.default,
       {
-        src: image.src,
+        src: image?.src,
         alt: image.alt || `Product image ${index + 1}`,
         className: "h-full w-full object-cover object-center",
-        width: 200,
-        height: 200,
+        width: 80,
+        height: 80,
         unoptimized: true
       }
     )
-  )))))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "grid gap-6 lg:grid-cols-3" }, highlightCards.map((card) => {
-    const Icon = card.icon;
+  )))))), /* @__PURE__ */ React21__default.default.createElement("aside", { className: "space-y-6 lg:sticky lg:top-24" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "" }, product.parentCategories && product.parentCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-sm text-slate-600" }, product.parentCategories.map((cat, index) => /* @__PURE__ */ React21__default.default.createElement("span", { key: cat.id || index }, cat.name, index < product.parentCategories.length - 1 && " \u2022 ")), product.parentSubCategories && product.parentSubCategories.length > 0 && /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, " \u2022 ", product.parentSubCategories.map((subCat, index) => /* @__PURE__ */ React21__default.default.createElement("span", { key: subCat.id || index }, subCat.name, index < product.parentSubCategories.length - 1 && " \u2022 ")))), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900 mb-6" }, product.name), product?.productVariants && product.productVariants.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "block text-sm font-medium text-slate-700 mb-3" }, "Select Variant"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, product.productVariants.map((variant) => {
+    const isSelected = selectedVariant?.id === variant.id;
+    const variantImage = variant.productMedia?.[0]?.file || product.productMedia?.[0]?.file || product.images?.[0] || "/placeholder-product.jpg";
     return /* @__PURE__ */ React21__default.default.createElement(
-      "div",
+      "button",
       {
-        key: card.title,
-        className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
+        key: variant.id,
+        type: "button",
+        onClick: () => handleVariantSelect(variant),
+        className: `flex w-full items-center gap-3 rounded-lg border-2 px-4 py-3 text-left transition ${isSelected ? "border-primary-500 bg-primary-50" : "border-slate-200 bg-white hover:border-primary-300"}`
       },
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "rounded-2xl bg-primary-50 p-3 text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(Icon, { className: "h-5 w-5" })), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-base font-semibold text-slate-900" }, card.title)),
-      /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-3 text-sm leading-relaxed text-slate-600" }, card.description)
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: `relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? "border-primary-500" : "border-slate-200"}` }, /* @__PURE__ */ React21__default.default.createElement(
+        Image3__default.default,
+        {
+          src: variantImage,
+          alt: variant.name || "Variant image",
+          fill: true,
+          className: "object-cover",
+          sizes: "48px"
+        }
+      )),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: `text-sm font-medium ${isSelected ? "text-primary-700" : "text-slate-900"}` }, variant.name), variant.sku && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-slate-500 mt-0.5" }, "SKU: ", variant.sku)),
+      isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-5 w-5 text-primary-600 flex-shrink-0" })
     );
-  })), /* @__PURE__ */ React21__default.default.createElement("section", { className: "grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-8 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-4 pb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-1 text-amber-500" }, Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(lucideReact.Star, { key: index, className: "h-4 w-4 fill-current" }))), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-500" }, "Rated 4.8 \u2022 Patients love the results")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-8" }, product.description && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, "Description"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base leading-relaxed text-slate-600", dangerouslySetInnerHTML: { __html: product.description } })))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "h-full rounded-3xl border border-slate-100 bg-gradient-to-br from-primary-50 via-white to-secondary-50 p-8 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-sm font-semibold uppercase tracking-[0.3em] text-primary-500" }, "Care tips"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-4 space-y-4 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "leading-relaxed" }, "Store in a cool, dry place away from direct sunlight. Check packaging for allergen statements."), /* @__PURE__ */ React21__default.default.createElement("p", { className: "leading-relaxed" }, "Consult with your local pharmacist if you are combining with other treatments or have chronic conditions."), /* @__PURE__ */ React21__default.default.createElement("p", { className: "rounded-2xl bg-white/60 p-4 leading-relaxed text-primary-700" }, "Questions? Our care team is on standby \u2014 reach us via chat for tailored support before you checkout.")))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "rounded-3xl border border-slate-100 bg-white p-8 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-xl font-semibold text-slate-900" }, "Product insights"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 grid gap-6 md:grid-cols-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/60 p-5" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-slate-500" }, "Availability"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-3 flex items-center gap-2 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4 text-primary-500" }), product.inStock ? "Available for dispatch today" : "Currently restocking"), product.stock !== void 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 text-xs text-slate-500" }, product.stock > 0 ? `${product.stock} units remaining in inventory` : "Join the waitlist to be notified first")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/60 p-5" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-slate-500" }, "Product details"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-3 space-y-2 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Variant:"), " ", currentVariant.name), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "SKU:"), " ", variantSku), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Status:"), " ", /* @__PURE__ */ React21__default.default.createElement("span", { className: variantInStock ? "text-green-600" : "text-amber-600" }, variantInStock ? "In Stock" : "Out of Stock")), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Last updated:"), " ", lastUpdatedLabel), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Ships from:"), " Local pharmacy distribution center")))))), /* @__PURE__ */ React21__default.default.createElement("aside", { className: "space-y-6 lg:sticky lg:top-24" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-8 shadow-lg shadow-primary-100/40" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-baseline gap-3" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-3xl font-bold text-slate-900" }, selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.price)), variantComparePrice && variantComparePrice > variantPrice && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base text-slate-400 line-through" }, formatPrice(variantComparePrice)), discount > 0 && /* @__PURE__ */ React21__default.default.createElement(Badge, { variant: "danger", size: "sm" }, "-", discount, "%")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 rounded-2xl bg-primary-50/80 px-4 py-3 text-sm font-medium text-primary-700" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-4 w-4" }), "Pharmacist verified product"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-600" }, "Qty"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center rounded-full border border-slate-200 bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement(
+  }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-baseline gap-3 mb-6" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-3xl font-bold text-orange-600" }, selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.finalPrice || product.price || 0)), variantComparePrice && variantComparePrice > variantPrice && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base text-slate-400 line-through" }, formatPrice(variantComparePrice)), discount > 0 && /* @__PURE__ */ React21__default.default.createElement(Badge, { variant: "danger", size: "sm" }, "-", discount, "%")), selectedVariant && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-sm" }, selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ || selectedVariant.inventoryStatus === "LOW_STOCK" /* LOWSTOCK */ ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-red-600 font-medium" }, "Out of Stock") : /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-orange-600 font-medium" }, "Only ", selectedVariant.inventoryCount || product.inventoryCount || 0, " left in stock - Order soon!")), variantSku !== "N/A" && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium" }, "SKU:"), " ", variantSku), product.description && /* @__PURE__ */ React21__default.default.createElement("p", { className: "mb-6 text-sm text-slate-600" }, product.description.replace(/<[^>]*>/g, "").substring(0, 150), product.description.length > 150 && "..."), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "block text-sm font-medium text-slate-700 mb-2" }, "Quantity"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center rounded-lg border border-slate-200 bg-white" }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
       type: "button",
       onClick: () => setQuantity((current) => Math.max(1, current - 1)),
-      className: "rounded-l-full p-2 hover:bg-primary-100/60",
+      className: "px-3 py-2 hover:bg-slate-50",
       "aria-label": "Decrease quantity"
     },
-    /* @__PURE__ */ React21__default.default.createElement(lucideReact.Minus, { className: "h-4 w-4" })
-  ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "w-12 text-center text-sm font-semibold text-slate-700" }, quantity), /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.Minus, { className: "h-4 w-4 text-slate-600" })
+  ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "w-12 text-center text-sm font-semibold text-slate-900" }, quantity), /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
       type: "button",
-      onClick: () => setQuantity((current) => current + 1),
-      className: "rounded-r-full p-2 hover:bg-primary-100/60",
+      onClick: () => setQuantity((current) => {
+        const maxQty = selectedVariant?.inventoryCount || product.inventoryCount || 999;
+        return Math.min(maxQty, current + 1);
+      }),
+      className: "px-3 py-2 hover:bg-slate-50",
       "aria-label": "Increase quantity"
     },
-    /* @__PURE__ */ React21__default.default.createElement(lucideReact.Plus, { className: "h-4 w-4" })
-  )))), selectedVariant && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-4 text-sm" }, selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ || selectedVariant.inventoryStatus === "LOW_STOCK" /* LOWSTOCK */ ? /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-red-600 font-medium" }, "Out of Stock") : /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-green-600 font-medium" }, "In Stock")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 space-x-3" }, /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.Plus, { className: "h-4 w-4 text-slate-600" })
+  )), selectedVariant && /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm text-slate-500" }, selectedVariant.inventoryCount || product.inventoryCount || 0, " available"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React21__default.default.createElement(
     Button,
     {
-      size: "lg",
-      className: "w-full",
+      size: "md",
+      className: "w-full bg-orange-500 hover:bg-orange-600 text-white py-2.5",
       onClick: handleAddToCart,
       isLoading: isAddingToCart,
       disabled: !selectedVariant || selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */
     },
-    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingCart, { className: "h-5 w-5" }),
-    !selectedVariant ? "Select a variant" : selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ ? "Out of Stock" : `Add to Cart`
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingCart, { className: "h-4 w-4" }),
+    !selectedVariant ? "Select a variant" : selectedVariant.inventoryStatus === "OUT_OF_STOCK" /* OUTOFSTOCK */ ? "Out of Stock" : "Add to Cart"
   ), /* @__PURE__ */ React21__default.default.createElement(
     Button,
     {
-      size: "lg",
+      size: "md",
       variant: "outline",
-      className: "w-full",
+      className: "w-full py-2.5",
       onClick: handleToggleFavorite
     },
     /* @__PURE__ */ React21__default.default.createElement(
       lucideReact.Heart,
       {
-        className: `h-5 w-5 ${isFavorited ? "fill-red-500 text-red-500" : "text-slate-500"}`
+        className: `h-4 w-4 mr-2 ${isFavorited ? "fill-red-500 text-red-500" : "text-slate-500"}`
       }
     ),
     isFavorited ? "Saved" : "Save for later"
-  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold uppercase tracking-[0.25em]" }, "Need advice?"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 leading-relaxed" }, "Chat with a pharmacist in real time before completing your purchase. We will help you choose supporting supplements and answer dosing questions.")))), relatedProducts.length > 0 && /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-semibold text-slate-900" }, "You may also like"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-1 text-sm text-slate-500" }, "Hand-picked recommendations that pair nicely with this product.")), /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: "/shop", className: "hidden md:inline-flex" }, /* @__PURE__ */ React21__default.default.createElement(Button, { variant: "ghost", className: "text-primary-600" }, "View all products"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4" }, relatedProducts?.map((relatedProduct) => /* @__PURE__ */ React21__default.default.createElement(ProductCard, { key: relatedProduct.id, product: relatedProduct })))))));
+  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold uppercase tracking-[0.25em]" }, "Need advice?"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 leading-relaxed" }, "Chat with a pharmacist in real time before completing your purchase. We will help you choose supporting supplements and answer dosing questions.")))), /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-10" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-8 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-4 pb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-1 text-amber-500" }, Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(lucideReact.Star, { key: index, className: "h-4 w-4 fill-current" }))), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-500" }, "Rated 4.8 \u2022 Patients love the results")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-8" }, product.description && /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-slate-900" }, "Description"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-base leading-relaxed text-slate-600", dangerouslySetInnerHTML: { __html: product.description } }))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-slate-50/60 p-5 mt-10" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text- font-semibold uppercase tracking-[0.3em] text-slate-500" }, "Product details"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-3 space-y-2 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Variant:"), " ", currentVariant.name), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "SKU:"), " ", variantSku), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Status:"), " ", /* @__PURE__ */ React21__default.default.createElement("span", { className: variantInStock ? "text-green-600" : "text-amber-600" }, variantInStock ? "In Stock" : "Out of Stock")), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Last updated:"), " ", lastUpdatedLabel), /* @__PURE__ */ React21__default.default.createElement("p", null, /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-medium text-slate-700" }, "Ships from:"), " Local pharmacy distribution center"))), relatedProducts.length > 0 && /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-semibold text-slate-900" }, "You may also like"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-1 text-sm text-slate-500" }, "Hand-picked recommendations that pair nicely with this product.")), /* @__PURE__ */ React21__default.default.createElement(Link8__default.default, { href: buildPath("/shop"), className: "hidden md:inline-flex" }, /* @__PURE__ */ React21__default.default.createElement(Button, { variant: "ghost", className: "text-primary-600" }, "View all products"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" }, relatedProducts?.map((relatedProduct) => /* @__PURE__ */ React21__default.default.createElement(
+    ProductCard,
+    {
+      key: relatedProduct.id || relatedProduct._id,
+      product: relatedProduct,
+      onClickProduct: (item) => {
+        router.push(buildPath(`/products/${item._id || item.id}`));
+      }
+    }
+  ))))))));
 }
 function CartItem({ item }) {
   const { updateQuantity, removeFromCart } = useCart();
@@ -8602,6 +8796,16 @@ function CartItem({ item }) {
     await removeFromCart(item.productVariantId);
   };
   const itemTotal = item.productVariantData.finalPrice * item.quantity;
+  const unitPrice = item.productVariantData.finalPrice;
+  const attributes = [];
+  if (item.productVariantData.attribute) {
+    if (item.productVariantData.attribute.color) {
+      attributes.push(`Color: ${item.productVariantData.attribute.color}`);
+    }
+    if (item.productVariantData.attribute.size) {
+      attributes.push(`Size: ${item.productVariantData.attribute.size}`);
+    }
+  }
   return /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
@@ -8609,43 +8813,43 @@ function CartItem({ item }) {
       initial: { opacity: 0, y: 20 },
       animate: { opacity: 1, y: 0 },
       exit: { opacity: 0, x: -100 },
-      className: "flex gap-4 bg-white p-4 rounded-xl border border-gray-200 hover:border-primary-300 transition-colors"
+      className: "relative bg-white rounded-lg shadow-sm border border-gray-200 p-4"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100" }, /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement(
+      "button",
+      {
+        onClick: handleRemove,
+        className: "absolute top-4 right-4 p-1 text-gray-400 hover:text-red-600 transition-colors",
+        "aria-label": "Remove item"
+      },
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Trash2, { className: "w-5 h-5" })
+    ),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex gap-4 pr-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-20 h-24 rounded-md overflow-hidden flex-shrink-0 bg-gray-100" }, /* @__PURE__ */ React21__default.default.createElement(
       Image3__default.default,
       {
         src: item.productVariantData.productMedia[0]?.file || "/placeholder-product.jpg",
         alt: item.productVariantData.name,
         fill: true,
-        className: "object-cover"
+        className: "object-cover",
+        sizes: "80px"
       }
-    )),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-semibold text-gray-900 truncate" }, item.productVariantData.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, formatPrice(item.productVariantData.finalPrice), " each"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 mt-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center border-2 border-gray-200 rounded-lg" }, /* @__PURE__ */ React21__default.default.createElement(
+    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-base font-bold text-gray-900" }, item.productVariantData.name), attributes.length > 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, attributes.join(" ")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2 mt-3" }, /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         onClick: () => handleUpdateQuantity(item.quantity - 1),
-        disabled: isUpdating || item.quantity <= 0,
-        className: "p-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        disabled: isUpdating || item.quantity <= 1,
+        className: "p-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors rounded"
       },
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Minus, { className: "w-4 h-4" })
-    ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "px-4 font-medium min-w-[3rem] text-center" }, isUpdating ? /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-block h-4 w-4 align-middle animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" }) : item.quantity), /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Minus, { className: "w-4 h-4 text-gray-600" })
+    ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "px-3 font-medium min-w-[2rem] text-center text-gray-900" }, isUpdating ? /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-block h-4 w-4 align-middle animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" }) : item.quantity), /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         onClick: () => handleUpdateQuantity(item.quantity + 1),
-        disabled: isUpdating || item.quantity >= item.productVariantData.inventoryCount,
-        className: "p-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-      },
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Plus, { className: "w-4 h-4" })
-    )), /* @__PURE__ */ React21__default.default.createElement(
-      "button",
-      {
-        onClick: handleRemove,
-        className: "p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors",
-        "aria-label": "Remove item"
+        disabled: isUpdating || item.quantity >= (item.productVariantData.inventoryCount || 999),
+        className: "p-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors rounded"
       },
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Trash2, { className: "w-5 h-5" })
-    ))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xl font-bold text-gray-900" }, formatPrice(itemTotal)))
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.Plus, { className: "w-4 h-4 text-gray-600" })
+    ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right flex-shrink-0" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-lg font-bold text-orange-600" }, formatPrice(itemTotal)), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, formatPrice(unitPrice), " each")))
   );
 }
 function CartScreen() {
@@ -8653,137 +8857,68 @@ function CartScreen() {
   const { cart, isLoading } = useCart();
   const { buildPath } = useBasePath();
   if (!cart || cart.cartBody.items.length === 0) {
-    const highlights = [
-      {
-        icon: lucideReact.ShieldCheck,
-        title: "Pharmacist approved",
-        description: "Every product passes pharmacist review and cold-chain handling standards."
-      },
-      {
-        icon: lucideReact.BadgePercent,
-        title: "Bundle savings",
-        description: "Unlock tiered discounts when you combine vitamins, OTC, and wellness kits."
-      },
-      {
-        icon: lucideReact.HeartPulse,
-        title: "Personalized guidance",
-        description: "Follow curated collections tailored to your health goals and routines."
-      }
-    ];
-    return /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative min-h-screen overflow-hidden bg-slate-950" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))]" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "pointer-events-none absolute -top-24 -left-20 h-96 w-96 rounded-full bg-white/20 blur-3xl opacity-60" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "pointer-events-none absolute bottom-0 right-0 h-[28rem] w-[28rem] rounded-full bg-secondary-500/40 blur-[220px] opacity-70" })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative z-10 flex min-h-screen items-center px-6 py-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mx-auto grid w-full max-w-6xl gap-12 lg:grid-cols-[minmax(0,1.25fr)_minmax(0,1fr)] lg:items-center" }, /* @__PURE__ */ React21__default.default.createElement(
+    return /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Shopping Cart"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, "0 items in your cart")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-center justify-center py-20" }, /* @__PURE__ */ React21__default.default.createElement(
       framerMotion.motion.div,
       {
         initial: { opacity: 0, y: 24 },
         animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.4 },
-        className: "space-y-8 text-white"
+        className: "text-center space-y-6 max-w-md"
       },
-      /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-1 text-sm font-semibold uppercase tracking-[0.3em] text-white/80 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: "h-4 w-4" }), "Cart status"),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Your wellness cart is waiting for a refill"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "max-w-xl text-lg text-white/75" }, "Build a pharmacist-curated bundle with fast shipping, personalized recommendations, and exclusive member perks designed to keep you feeling your best.")),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-4" }, /* @__PURE__ */ React21__default.default.createElement(
-        Button,
-        {
-          size: "lg",
-          className: "bg-white text-primary-700 shadow-xl shadow-white/30 hover:bg-white/90 hover:text-primary-700",
-          onClick: () => router.push(buildPath("/shop"))
-        },
-        "Discover products",
-        /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowRight, { className: "h-5 w-5" })
-      ), /* @__PURE__ */ React21__default.default.createElement(
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: "h-12 w-12 text-gray-400" }))),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Your cart is empty"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500" }, "Start adding products to your cart to see them here.")),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-3 justify-center" }, /* @__PURE__ */ React21__default.default.createElement(
         "button",
         {
           type: "button",
-          onClick: () => router.push(buildPath("/categories")),
-          className: "inline-flex items-center gap-2 rounded-full border border-white/40 px-5 py-3 text-sm font-semibold text-white/80 transition hover:border-white hover:bg-white/10"
-        },
-        "Browse categories",
-        /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowRight, { className: "h-4 w-4" })
-      )),
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-4 sm:grid-cols-2" }, highlights.map(({ icon: Icon, title, description }) => /* @__PURE__ */ React21__default.default.createElement(
-        "div",
-        {
-          key: title,
-          className: "rounded-2xl border border-white/15 bg-white/10 p-5 backdrop-blur transition hover:border-white/25 hover:bg-white/15"
-        },
-        /* @__PURE__ */ React21__default.default.createElement(Icon, { className: "h-6 w-6 text-white/90" }),
-        /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-3 text-sm font-semibold text-white" }, title),
-        /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-1 text-xs text-white/70" }, description)
-      )))
-    ), /* @__PURE__ */ React21__default.default.createElement(
-      framerMotion.motion.div,
-      {
-        initial: { opacity: 0, y: 24 },
-        animate: { opacity: 1, y: 0 },
-        transition: { delay: 0.1, duration: 0.4 },
-        className: "rounded-[32px] border border-white/10 bg-white/10 p-10 backdrop-blur-2xl shadow-[0_40px_120px_-45px_rgba(12,5,40,0.6)]"
-      },
-      /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl bg-white/20" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShoppingBag, { className: "h-8 w-8 text-white" })),
-      /* @__PURE__ */ React21__default.default.createElement("h2", { className: "mt-6 text-3xl font-semibold text-white" }, "Still building your bag?"),
-      /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-3 text-sm text-white/80" }, "Add supplements, wellness tools, and everyday pharmacy favorites to personalize your routine. We'll keep them chilled, curated, and ready for doorstep delivery."),
-      /* @__PURE__ */ React21__default.default.createElement("ul", { className: "mt-6 space-y-3 text-sm text-white/80" }, /* @__PURE__ */ React21__default.default.createElement("li", { className: "flex items-center gap-2 rounded-xl bg-white/10 px-4 py-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-5 w-5 text-white" }), "Pharmacist oversight on every order"), /* @__PURE__ */ React21__default.default.createElement("li", { className: "flex items-center gap-2 rounded-xl bg-white/10 px-4 py-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.BadgePercent, { className: "h-5 w-5 text-white" }), "Member-only savings unlock at checkout"), /* @__PURE__ */ React21__default.default.createElement("li", { className: "flex items-center gap-2 rounded-xl bg-white/10 px-4 py-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.HeartPulse, { className: "h-5 w-5 text-white" }), "Personalized care plans for each purchase")),
-      /* @__PURE__ */ React21__default.default.createElement(
-        Button,
-        {
-          size: "lg",
-          variant: "outline",
-          className: "mt-8 w-full border-white/40 text-white hover:border-white hover:bg-white/10",
-          onClick: () => router.push(buildPath("/shop"))
+          onClick: () => router.push(buildPath("/shop")),
+          className: "rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
         },
-        "Start building my cart",
+        "Discover products",
         /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowRight, { className: "h-5 w-5" })
-      )
-    ))));
+      )),
+      /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-8 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Free shipping on all orders")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Secure checkout process")))
+    )))));
   }
   const subtotal = cart.total;
   const shipping = 0;
   const tax = 0;
   const total = subtotal + shipping + tax;
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-16 mb-8" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "flex flex-col gap-6 md:flex-row md:items-center md:justify-between"
-    },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-2xl space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold tracking-wide text-white/80 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.HeartPulse, { className: "h-4 w-4" }), "Wellness essentials, ready when you are"), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Your curated cart"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-white/75 md:text-lg" }, "Review your selections, unlock exclusive perks, and check out with pharmacist-backed confidence.")),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl bg-white/15 p-6 backdrop-blur-md" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.35em] text-white/70" }, "Cart summary"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-4 text-4xl font-semibold" }, formatPrice(total)), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-white/70" }, "Taxes and shipping calculated below"))
-  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative -mt-16 pb-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement(
+  const itemCount = cart.cartBody.items.length;
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Shopping Cart"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, itemCount, " ", itemCount === 1 ? "item" : "items", " in your cart")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_1fr]" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.section,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
-      transition: { delay: 0.05 },
-      className: "space-y-6 rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50"
+      className: "space-y-6"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center justify-between gap-4" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-xl font-semibold text-slate-900" }, "Items (", cart.cartBody.items.length, ")"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "inline-flex items-center gap-2 rounded-full bg-primary-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-primary-700" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-4 w-4" }), "Guaranteed cold-chain handling")),
-    isLoading && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-block h-3 w-3 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600" }), "Updating cart\u2026"),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-5" }, cart.cartBody.items.map((item) => /* @__PURE__ */ React21__default.default.createElement(CartItem, { key: item.productVariantId, item })))
+    isLoading && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600" }), "Updating cart\u2026"),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, cart.cartBody.items.map((item) => /* @__PURE__ */ React21__default.default.createElement(CartItem, { key: item.productVariantId, item })))
   ), /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.aside,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
       transition: { delay: 0.1 },
-      className: "space-y-6 lg:sticky lg:top-28"
+      className: "space-y-6 lg:sticky lg:top-8 h-fit"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-xl font-semibold text-slate-900" }, "Checkout summary"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary-50 px-3 py-1 text-xs font-semibold text-primary-700" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.BadgePercent, { className: "h-4 w-4" }), "Savings applied")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 space-y-4 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Subtotal"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-slate-900" }, formatPrice(subtotal))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Shipping"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold" }, "Will be calculated at checkout")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-2xl bg-slate-50 p-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-base font-semibold text-slate-900" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Order total"), /* @__PURE__ */ React21__default.default.createElement("span", null, formatPrice(total))), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 text-xs text-slate-500" }, "Prices include pharmacy-grade quality control and packaging."))), /* @__PURE__ */ React21__default.default.createElement(
-      Button,
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-xl border-2 border-primary-200 bg-white p-6 shadow-md" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-xl font-bold text-slate-900 mb-6" }, "Order Summary"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4 mb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-gray-600" }, "Subtotal (", itemCount, " ", itemCount === 1 ? "item" : "items", ")"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-slate-900" }, formatPrice(subtotal))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-gray-600" }, "Shipping"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-green-600" }, "Will be calculated at checkout")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "border-t border-gray-200 pt-4 mt-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-lg font-bold text-slate-900" }, "Total"), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-2xl font-bold text-orange-600" }, formatPrice(total))))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React21__default.default.createElement(
+      "button",
       {
-        size: "lg",
-        className: "mt-6 w-full",
-        onClick: () => router.push(buildPath("/checkout"))
+        type: "button",
+        onClick: () => router.push(buildPath("/checkout")),
+        className: "w-full rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
       },
-      "Secure checkout",
+      "Proceed to Checkout",
       /* @__PURE__ */ React21__default.default.createElement(lucideReact.ArrowRight, { className: "h-5 w-5" })
     ), /* @__PURE__ */ React21__default.default.createElement(
       "button",
       {
         type: "button",
         onClick: () => router.push(buildPath("/shop")),
-        className: "mt-4 w-full text-sm font-semibold text-primary-600 transition hover:text-primary-700"
+        className: "w-full rounded-full border-2 border-primary-300 bg-white px-4 py-3 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors"
       },
-      "Continue shopping"
-    )),
+      "Continue Shopping"
+    )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 space-y-3 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Easy returns within 30 days")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-3 text-sm text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-primary-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Secure checkout process")))),
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold uppercase tracking-[0.3em]" }, "Need help?"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 leading-relaxed" }, "Chat with a pharmacist to optimize your regimen or discuss substitutions before you check out."))
   )))));
 }
@@ -9182,9 +9317,12 @@ function CheckoutScreen() {
     }
     const rates = response.data.rates || [];
     if (rates.length > 0) {
+      const sortedRates = [...rates].sort((a, b) => parseFloat(a.amount) - parseFloat(b.amount));
+      const cheapestRate = sortedRates[0];
       setShippingRates(rates);
       setShippingRatesError(null);
-      setSelectedShippingRateId(rates[0].objectId);
+      setSelectedShippingRateId(cheapestRate.objectId);
+      setShippingPrice(parseFloat(cheapestRate.amount));
       return;
     }
     const messages = response.data.messages || [];
@@ -9238,11 +9376,6 @@ function CheckoutScreen() {
       setSelectedStoreAddressId(null);
     }
   }, [isDelivery]);
-  const checkoutSteps = [
-    { id: 1, label: "Cart", status: "complete" },
-    { id: 2, label: "Details", status: "current" },
-    { id: 3, label: "Payment", status: "upcoming" }
-  ];
   const onSubmit = async (data) => {
     setError(null);
     if (!isAuthenticated) {
@@ -9336,8 +9469,20 @@ function CheckoutScreen() {
       if (paymentMethod === "Card") {
         const paymentUrl = response?.data?.payment?.hostedInvoiceUrl;
         if (paymentUrl && paymentUrl !== "INSUFFICIENT_CREDIT") {
-          window.open(paymentUrl, "_blank");
-          await clearCart();
+          const newWindow = window.open("", "_blank");
+          if (newWindow) {
+            newWindow.location.href = paymentUrl;
+            await clearCart();
+            return;
+          } else {
+            window.location.href = paymentUrl;
+            await clearCart();
+            return;
+          }
+        } else if (!paymentUrl) {
+          console.error("No payment URL received in response:", response.data);
+          setError("Failed to initiate payment. Please try again or contact support.");
+          sonner.toast.error("Failed to initiate payment");
           return;
         }
         sonner.toast.success("Order placed successfully!");
@@ -9363,26 +9508,7 @@ function CheckoutScreen() {
   const subtotal = cart.total;
   const tax = 0;
   const total = subtotal + shippingPrice + tax;
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "space-y-6"
-    },
-    /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-4 w-4" }), "Secure checkout"),
-    /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "Provide delivery details"),
-    /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-white/75 md:text-lg" }, "Our pharmacists handle every package with care. Share your shipping and billing information so we can dispatch your order within the next 12 hours."),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-3" }, checkoutSteps.map((step) => /* @__PURE__ */ React21__default.default.createElement(
-      "div",
-      {
-        key: step.id,
-        className: `flex items-center gap-3 rounded-2xl px-4 py-2 text-sm font-semibold ${step.status === "complete" ? "bg-white/20 text-white" : step.status === "current" ? "bg-white text-primary-700" : "bg-white/10 text-white/60"}`
-      },
-      /* @__PURE__ */ React21__default.default.createElement("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-white/20 text-xs font-bold" }, step.id),
-      step.label
-    )))
-  )))), /* @__PURE__ */ React21__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit) }, error && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-red-600 font-semibold" }, error), /* @__PURE__ */ React21__default.default.createElement("div", { className: "pt-12 container mx-auto grid gap-10 px-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50 mb-16" }, /* @__PURE__ */ React21__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit) }, error && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 text-red-600 font-semibold" }, error), /* @__PURE__ */ React21__default.default.createElement("div", { className: "pt-12 container mx-auto grid gap-10 px-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 24 },
@@ -9480,9 +9606,10 @@ function CheckoutScreen() {
         "div",
         {
           key: rate.objectId,
-          onClick: () => setSelectedShippingRateId(rate.objectId),
-          onMouseEnter: () => setShippingPrice(parseFloat(rate.amount)),
-          onMouseLeave: () => setShippingPrice(parseFloat(rate.amountLocal)),
+          onClick: () => {
+            setSelectedShippingRateId(rate.objectId);
+            setShippingPrice(parseFloat(rate.amount));
+          },
           className: `relative p-5 border-2 rounded-xl cursor-pointer transition-all duration-200 hover:shadow-md ${isSelected ? "border-primary-500 bg-primary-50 ring-2 ring-primary-200" : "border-gray-200 hover:border-gray-300"}`
         },
         /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-start gap-4 flex-1" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-shrink-0" }, /* @__PURE__ */ React21__default.default.createElement(
@@ -9569,7 +9696,7 @@ function CheckoutScreen() {
         ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-900" }, pm.label)),
         active && /* @__PURE__ */ React21__default.default.createElement("div", { className: "w-4 h-4 rounded-full bg-primary-500 flex items-center justify-center text-white shadow-sm" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "w-2.5 h-2.5" }))
       );
-    })), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-slate-500 mt-2 pl-1 leading-relaxed" }, paymentMethod === "Card" && "You will be redirected to a secure payment page.", paymentMethod === "Cash" && "Pay with cash at the time of delivery or pickup.", paymentMethod === "Credit" && "Use your available account credit for this order.")), /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-8 pt-6 border-t border-slate-100" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-h-60 space-y-4 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-slate-200 hover:scrollbar-thumb-slate-300" }, cart?.cartBody?.items?.map((item) => /* @__PURE__ */ React21__default.default.createElement(
+    })), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-slate-500 mt-2 pl-1 leading-relaxed" }, paymentMethod === "Card" && "You will be redirected to a secure payment page.", paymentMethod === "Cash" && "Pay with cash at the time of delivery or pickup.", paymentMethod === "Credit" && "Use your available account credit for this order.")), /* @__PURE__ */ React21__default.default.createElement("section", { className: "mt-8 pt-6 border-t border-slate-100" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-xs font-semibold text-slate-700 uppercase tracking-wider" }, "Cart Summary"), /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-h-60 space-y-4 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-slate-200 hover:scrollbar-thumb-slate-300" }, cart?.cartBody?.items?.map((item) => /* @__PURE__ */ React21__default.default.createElement(
       "div",
       {
         key: item.productId,
@@ -9661,7 +9788,7 @@ function LoginScreen() {
       initial: { opacity: 0, x: -24 },
       animate: { opacity: 1, x: 0 },
       transition: { duration: 0.4 },
-      className: "relative flex flex-col justify-between bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] px-10 py-14 text-white"
+      className: "relative flex flex-col justify-between bg-gradient-to-br from-slate-700 via-slate-600 to-slate-700 px-10 py-14 text-white"
     },
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.HeartPulse, { className: "h-4 w-4" }), "Hey Pharmacist"), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold leading-tight lg:text-5xl" }, "Pharmacy-grade care for your household"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "max-w-xl text-white/80" }, "Log in to unlock personalized regimens, pharmacist support, and fast delivery on wellness essentials curated just for you.")),
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid gap-4 rounded-3xl bg-white/10 p-6 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.ShieldCheck, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-white/80" }, "HIPAA-compliant security keeps your health information protected.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-white/80" }, "Pharmacists ready to chat in under 10 minutes for medication support."))),
@@ -9787,7 +9914,7 @@ function RegisterScreen() {
       initial: { opacity: 0, x: -24 },
       animate: { opacity: 1, x: 0 },
       transition: { duration: 0.4 },
-      className: "flex flex-col justify-between bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] px-10 py-14 text-white"
+      className: "flex flex-col justify-between bg-gradient-to-br from-slate-700 via-slate-600 to-slate-700 px-10 py-14 text-white"
     },
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.HeartPulse, { className: "h-4 w-4" }), "Join Hey Pharmacist"), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold leading-tight lg:text-5xl" }, "Create your wellness account"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "max-w-xl text-white/80" }, "Unlock concierge-level pharmacy support, curated product recommendations, and smarter refills designed for busy families.")),
     /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4 rounded-3xl bg-white/10 p-6 backdrop-blur" }, BENEFITS.map((benefit) => /* @__PURE__ */ React21__default.default.createElement("div", { key: benefit, className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CheckCircle2, { className: "h-5 w-5 text-white" }), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-white/85" }, benefit)))),
@@ -10089,29 +10216,43 @@ function ProfileScreen() {
   )))));
 }
 function OrderCard({ order }) {
-  const { buildPath } = useBasePath();
   const config = order.orderStatus;
+  const itemCount = order.items?.length || 0;
+  const showPriceBreakdown = order.shippingCost && order.shippingCost > 0 || order.tax && order.tax > 0 || order.discountedAmount && order.discountedAmount > 0;
   return /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 20 },
       animate: { opacity: 1, y: 0 },
-      whileHover: { y: -4 },
-      className: "bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100"
+      className: "rounded-lg border border-slate-200 bg-white p-4 shadow-sm hover:shadow-md transition-shadow"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between items-start mb-4" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-lg font-bold text-gray-900 flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "w-5 h-5 text-primary-600" }), "Order #", order?._id?.slice(0, 6) || ""), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1 flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Calendar, { className: "w-4 h-4" }), formatDate(order.createdAt || /* @__PURE__ */ new Date(), "long"))), /* @__PURE__ */ React21__default.default.createElement(Badge, { variant: config }, config)),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2 mb-4" }, order.items?.slice(0, 2).map((item) => /* @__PURE__ */ React21__default.default.createElement("div", { key: item.productVariantId, className: "flex items-center gap-3 text-sm" }, /* @__PURE__ */ React21__default.default.createElement(Image3__default.default, { src: item?.productVariantData?.productMedia?.[0]?.file || "/placeholder-product.jpg", alt: item?.productVariantData?.name || "Product image", width: 48, height: 48, className: "w-12 h-12 rounded-lg bg-gray-100 flex-shrink-0" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-medium text-gray-900 truncate" }, item.productVariantData.name), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500" }, "Qty: ", item.quantity)), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold text-gray-900" }, formatPrice(item.productVariantData.finalPrice)))), order.items?.length && order.items?.length > 2 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 pl-15" }, "+", order.items.length - 2, " more item", order.items.length - 2 > 1 ? "s" : "")),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between items-center pt-4 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", null, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500" }, "Total Amount"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-2xl font-bold text-gray-900" }, formatPrice(order.grandTotal || 0))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex gap-2" }, order.payment.paymentStatus !== "Paid" /* Paid */ && order.payment.paymentMethod === "Card" /* Card */ && /* @__PURE__ */ React21__default.default.createElement(
-      "a",
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between mb-4 pb-4 border-b border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("h3", { className: "text-base font-bold text-slate-900" }, "Order #", order?._id?.slice(0, 8) || ""), /* @__PURE__ */ React21__default.default.createElement(Badge, { variant: config }, config), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-xs text-gray-500" }, formatDate(order.createdAt || /* @__PURE__ */ new Date(), "short"))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-lg font-bold text-slate-900" }, formatPrice(order.grandTotal || 0)), itemCount > 0 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500" }, itemCount, " ", itemCount === 1 ? "item" : "items"))),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2 mb-4" }, order.items && order.items.length > 0 ? order.items.slice(0, 3).map((item) => {
+      const itemPrice = item.productVariantData?.finalPrice || 0;
+      const itemTotal = itemPrice * item.quantity;
+      return /* @__PURE__ */ React21__default.default.createElement("div", { key: item.productVariantId || item._id, className: "flex items-center gap-2 text-sm" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative w-12 h-12 rounded bg-gray-100 flex-shrink-0 overflow-hidden" }, /* @__PURE__ */ React21__default.default.createElement(
+        Image3__default.default,
+        {
+          src: item?.productVariantData?.productMedia?.[0]?.file || "/placeholder-product.jpg",
+          alt: item?.productVariantData?.name || "Product image",
+          fill: true,
+          className: "object-cover",
+          sizes: "48px"
+        }
+      )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-medium text-slate-900 truncate text-sm" }, item.productVariantData?.name || "Unknown Product"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500" }, "Qty: ", item.quantity)), /* @__PURE__ */ React21__default.default.createElement("p", { className: "font-semibold text-slate-900 text-sm" }, formatPrice(itemTotal)));
+    }) : /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 text-center py-2" }, "No items found"), order.items && order.items.length > 3 && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-xs text-gray-500 text-center pt-1" }, "+", order.items.length - 3, " more ", order.items.length - 3 === 1 ? "item" : "items")),
+    showPriceBreakdown && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-4 pb-4 border-b border-gray-200 space-y-1 text-xs" }, order.shippingCost !== void 0 && order.shippingCost > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between text-gray-600" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Shipping"), /* @__PURE__ */ React21__default.default.createElement("span", null, formatPrice(order.shippingCost))), order.tax !== void 0 && order.tax > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between text-gray-600" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Tax"), /* @__PURE__ */ React21__default.default.createElement("span", null, formatPrice(order.tax))), order.discountedAmount !== void 0 && order.discountedAmount > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-between text-green-600" }, /* @__PURE__ */ React21__default.default.createElement("span", null, "Discount"), /* @__PURE__ */ React21__default.default.createElement("span", null, "-", formatPrice(order.discountedAmount)))),
+    order.payment?.paymentStatus !== "Paid" /* Paid */ && order.payment?.paymentMethod === "Card" /* Card */ && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React21__default.default.createElement(
+      "button",
       {
-        href: order?.payment?.paymentIntent?.hostedInvoiceUrl || "",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "inline-flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        onClick: () => {
+          window.open(order?.payment?.hostedInvoiceUrl || "", "_blank");
+        },
+        className: "inline-flex items-center gap-2 rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 text-sm font-medium transition-colors"
       },
       /* @__PURE__ */ React21__default.default.createElement(lucideReact.CreditCard, { className: "w-4 h-4" }),
       "Pay Now"
-    )))
+    ))
   );
 }
 function useOrders(page = 1, limit = 10, orderStatus, paymentStatus) {
@@ -10141,6 +10282,7 @@ function useOrders(page = 1, limit = 10, orderStatus, paymentStatus) {
         resolvedUserId
       );
       setOrders(response.data.data || []);
+      console.log(response.data);
       setPagination({
         page: response.data.page || page,
         limit: response.data.limit || limit,
@@ -10218,9 +10360,7 @@ function FilterChips({
   variant = "primary"
 }) {
   const [isOverflowOpen, setIsOverflowOpen] = React21.useState(false);
-  const [filterSearchTerm, setFilterSearchTerm] = React21.useState("");
   const overflowMenuRef = React21.useRef(null);
-  const color = variant === "primary" ? "primary" : "secondary";
   const { visibleFilters, overflowFilters } = React21.useMemo(() => {
     const basePrimary = filters.slice(0, maxVisible);
     if (basePrimary.includes(selected)) {
@@ -10241,17 +10381,6 @@ function FilterChips({
       overflowFilters: filters.filter((filter) => !uniquePrimary.includes(filter))
     };
   }, [filters, maxVisible, selected]);
-  const filteredOverflowFilters = React21.useMemo(() => {
-    if (!filterSearchTerm.trim()) return overflowFilters;
-    return overflowFilters.filter(
-      (filter) => filter.toLowerCase().includes(filterSearchTerm.toLowerCase())
-    );
-  }, [filterSearchTerm, overflowFilters]);
-  React21.useEffect(() => {
-    if (!isOverflowOpen) {
-      setFilterSearchTerm("");
-    }
-  }, [isOverflowOpen]);
   React21.useEffect(() => {
     function handleClickOutside(event) {
       if (overflowMenuRef.current && !overflowMenuRef.current.contains(event.target)) {
@@ -10265,69 +10394,63 @@ function FilterChips({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOverflowOpen]);
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:gap-4" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-600" }, /* @__PURE__ */ React21__default.default.createElement(Icon, { className: "h-4 w-4" }), label), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:gap-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap gap-2" }, visibleFilters.map((filter) => /* @__PURE__ */ React21__default.default.createElement(
+  const isPrimary = variant === "primary";
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React21__default.default.createElement(Icon, { className: "h-4 w-4 text-slate-500" }), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-700" }, label), selected !== "All" && /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
-      key: filter,
       type: "button",
-      onClick: () => onSelect(filter),
-      className: `rounded-full border px-3 py-1 text-sm font-medium transition ${selected === filter ? `border-${color}-600 bg-${color}-600 text-white shadow-lg shadow-${color}-500/30` : `border-slate-200 bg-slate-50 text-slate-600 hover:border-${color}-300 hover:text-${color}-600`}`
+      onClick: () => onSelect("All"),
+      className: "ml-auto text-xs text-primary-600 hover:text-primary-700 font-medium"
     },
-    filter
-  ))), overflowFilters.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative", ref: overflowMenuRef }, /* @__PURE__ */ React21__default.default.createElement(
+    "Clear"
+  )), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-2" }, visibleFilters.map((filter) => {
+    const isSelected = selected === filter;
+    return /* @__PURE__ */ React21__default.default.createElement(
+      "button",
+      {
+        key: filter,
+        type: "button",
+        onClick: () => onSelect(filter),
+        className: `inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${isSelected ? isPrimary ? "border-primary-500 bg-primary-500 text-white shadow-sm" : "border-secondary-500 bg-secondary-500 text-white shadow-sm" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"}`
+      },
+      filter,
+      isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.X, { className: "h-3.5 w-3.5" })
+    );
+  }), overflowFilters.length > 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative", ref: overflowMenuRef }, /* @__PURE__ */ React21__default.default.createElement(
     "button",
     {
       type: "button",
       onClick: () => setIsOverflowOpen((prev) => !prev),
-      className: `flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium transition ${overflowFilters.includes(selected) ? `border-${color}-600 bg-${color}-50 text-${color}-700 shadow-lg shadow-${color}-500/20` : "border-slate-200 bg-white text-slate-600 hover:border-slate-300"}`
+      className: `inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${overflowFilters.includes(selected) ? isPrimary ? "border-primary-500 bg-primary-50 text-primary-700" : "border-secondary-500 bg-secondary-50 text-secondary-700" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"}`
     },
     /* @__PURE__ */ React21__default.default.createElement("span", null, overflowFilters.includes(selected) ? selected : "More"),
-    /* @__PURE__ */ React21__default.default.createElement("span", { className: `inline-flex h-5 min-w-[1.5rem] items-center justify-center rounded-full bg-${color}-100 px-1 text-xs font-semibold text-${color}-600` }, overflowFilters.length)
+    /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronDown, { className: `h-3.5 w-3.5 transition-transform ${isOverflowOpen ? "rotate-180" : ""}` })
   ), /* @__PURE__ */ React21__default.default.createElement(framerMotion.AnimatePresence, null, isOverflowOpen && /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
-      initial: { opacity: 0, y: 8 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: 8 },
+      initial: { opacity: 0, y: 8, scale: 0.95 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: 8, scale: 0.95 },
       transition: { duration: 0.15 },
-      className: "absolute right-0 z-50 mt-2 w-64 rounded-2xl border border-slate-100 bg-white shadow-xl shadow-primary-50"
+      className: "absolute left-0 top-full z-50 mt-2 w-56 rounded-lg border border-slate-200 bg-white shadow-lg"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "border-b border-slate-100 px-4 py-3" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" }), /* @__PURE__ */ React21__default.default.createElement(
-      "input",
-      {
-        type: "text",
-        placeholder: `Search ${label.toLowerCase()}`,
-        value: filterSearchTerm,
-        onChange: (event) => setFilterSearchTerm(event.target.value),
-        className: "w-full rounded-full border border-slate-200 bg-slate-50 py-2 pl-9 pr-3 text-sm text-slate-600 outline-none transition focus:border-primary-300 focus:bg-white focus:ring-2 focus:ring-primary-200"
-      }
-    ))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-h-60 overflow-y-auto px-2 py-2" }, filteredOverflowFilters.length > 0 ? filteredOverflowFilters.map((filter) => /* @__PURE__ */ React21__default.default.createElement(
-      "button",
-      {
-        key: filter,
-        type: "button",
-        onClick: () => {
-          onSelect(filter);
-          setIsOverflowOpen(false);
-        },
-        className: `flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition ${selected === filter ? `bg-${color}-600 text-white shadow-lg shadow-${color}-500/30` : "text-slate-600 hover:bg-slate-100"}`
-      },
-      /* @__PURE__ */ React21__default.default.createElement("span", null, filter),
-      selected === filter && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4" })
-    )) : /* @__PURE__ */ React21__default.default.createElement("p", { className: "px-3 py-4 text-sm text-slate-500" }, "No items found.")),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-4 py-3" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-xs font-semibold uppercase tracking-wide text-slate-400" }, "Quick actions"), /* @__PURE__ */ React21__default.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          onSelect("All");
-          setIsOverflowOpen(false);
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-h-64 overflow-y-auto p-1.5" }, overflowFilters.map((filter) => {
+      const isSelected = selected === filter;
+      return /* @__PURE__ */ React21__default.default.createElement(
+        "button",
+        {
+          key: filter,
+          type: "button",
+          onClick: () => {
+            onSelect(filter);
+            setIsOverflowOpen(false);
+          },
+          className: `flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition ${isSelected ? isPrimary ? "bg-primary-500 text-white" : "bg-secondary-500 text-white" : "text-slate-700 hover:bg-slate-100"}`
         },
-        className: "text-xs font-semibold uppercase tracking-wide text-primary-600 hover:text-primary-700"
-      },
-      "Reset to All"
-    ))
+        /* @__PURE__ */ React21__default.default.createElement("span", null, filter),
+        isSelected && /* @__PURE__ */ React21__default.default.createElement(lucideReact.Check, { className: "h-4 w-4" })
+      );
+    }))
   )))));
 }
 var STATUS_FILTERS = ["All", ...Object.values(ManualOrderDTOOrderStatusEnum)];
@@ -10344,9 +10467,6 @@ function OrdersScreen() {
     selectedFilter,
     selectedPaymentFilter
   );
-  const [isOverflowOpen, setIsOverflowOpen] = React21.useState(false);
-  const [filterSearchTerm, setFilterSearchTerm] = React21.useState("");
-  const overflowMenuRef = React21.useRef(null);
   const filteredOrders = React21.useMemo(() => {
     return orders.filter((order) => {
       const matchesStatus = selectedFilter === "All" || order?.orderStatus?.toLowerCase() === selectedFilter.toLowerCase();
@@ -10356,44 +10476,18 @@ function OrdersScreen() {
   }, [orders, selectedFilter, selectedPaymentFilter]);
   const hasOrders = filteredOrders.length > 0;
   const MAX_VISIBLE_FILTERS = 4;
-  React21.useEffect(() => {
-    if (!isOverflowOpen) {
-      setFilterSearchTerm("");
-    }
-  }, [isOverflowOpen]);
-  React21.useEffect(() => {
-    function handleClickOutside(event) {
-      if (overflowMenuRef.current && !overflowMenuRef.current.contains(event.target)) {
-        setIsOverflowOpen(false);
-      }
-    }
-    if (isOverflowOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOverflowOpen]);
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen  bg-slate-50" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative  overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white mb-8" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4 py-16" }, /* @__PURE__ */ React21__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8 max-w-6xl" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
       className: "space-y-6"
     },
-    /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.CalendarDays, { className: "h-4 w-4" }), "Order history"),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold md:text-5xl" }, "All of your pharmacy orders"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "max-w-2xl text-white/80 md:text-lg" }, "Access receipts, shipping statuses, and reorder suggestions in one organized timeline curated by our pharmacists.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-3xl bg-white/15 p-6 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm font-semibold uppercase tracking-[0.35em] text-white/70" }, "Quick tip"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-3 text-sm text-white/80" }, "Use filters to review previous prescriptions, reorder favorites, or download invoices for insurance claims.")))
-  ))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative -mt-16 pb-16 container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement(
-    framerMotion.motion.div,
-    {
-      initial: { opacity: 0, y: 24 },
-      animate: { opacity: 1, y: 0 },
-      className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-lg shadow-primary-50"
-    },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex items-center gap-3 text-sm text-slate-500" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-4 w-4 text-primary-500" }), /* @__PURE__ */ React21__default.default.createElement("span", null, "Explore your complete order archive with pharmacist notes.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 md:items-end" }, /* @__PURE__ */ React21__default.default.createElement(
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Orders"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, filteredOrders.length, " ", filteredOrders.length === 1 ? "order" : "orders")),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6" }, /* @__PURE__ */ React21__default.default.createElement(
       FilterChips,
       {
-        label: "Status filters",
+        label: "Order Status",
         icon: lucideReact.Filter,
         filters: STATUS_FILTERS,
         selected: selectedFilter,
@@ -10407,7 +10501,7 @@ function OrdersScreen() {
     ), /* @__PURE__ */ React21__default.default.createElement(
       FilterChips,
       {
-        label: "Payment status",
+        label: "Payment Status",
         icon: lucideReact.CreditCard,
         filters: PAYMENT_FILTERS,
         selected: selectedPaymentFilter,
@@ -10418,8 +10512,8 @@ function OrdersScreen() {
         maxVisible: MAX_VISIBLE_FILTERS,
         variant: "primary"
       }
-    ))),
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-6 space-y-4" }, isLoading ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(OrderCardSkeleton, { key: index })) : hasOrders ? filteredOrders.map((order) => /* @__PURE__ */ React21__default.default.createElement(OrderCard, { key: order.id, order })) : /* @__PURE__ */ React21__default.default.createElement(
+    )),
+    /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-4" }, isLoading ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ React21__default.default.createElement(OrderCardSkeleton, { key: index })) : hasOrders ? filteredOrders.map((order) => /* @__PURE__ */ React21__default.default.createElement(OrderCard, { key: order.id, order })) : /* @__PURE__ */ React21__default.default.createElement(
       EmptyState,
       {
         icon: lucideReact.Package,
@@ -10429,26 +10523,28 @@ function OrdersScreen() {
         onAction: () => router.push(buildPath("/shop"))
       }
     )),
-    !isLoading && pagination.totalPages > 1 && hasOrders && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-10 flex flex-wrap items-center justify-center gap-4" }, /* @__PURE__ */ React21__default.default.createElement(
+    !isLoading && pagination.totalPages > 1 && hasOrders && /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-4 pt-6 border-t border-gray-200" }, /* @__PURE__ */ React21__default.default.createElement(
       Button,
       {
         variant: "outline",
         onClick: () => setPage((current) => Math.max(1, current - 1)),
-        disabled: page === 1
+        disabled: page === 1,
+        className: "rounded-full border-2 border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
       },
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronLeft, { className: "h-5 w-5" }),
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronLeft, { className: "h-4 w-4 mr-2" }),
       "Previous"
-    ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-semibold text-slate-600" }, "Page ", page, " of ", pagination.totalPages), /* @__PURE__ */ React21__default.default.createElement(
+    ), /* @__PURE__ */ React21__default.default.createElement("span", { className: "text-sm font-medium text-slate-600" }, "Page ", page, " of ", pagination.totalPages), /* @__PURE__ */ React21__default.default.createElement(
       Button,
       {
         variant: "outline",
         onClick: () => setPage((current) => Math.min(pagination.totalPages, current + 1)),
-        disabled: page === pagination.totalPages
+        disabled: page === pagination.totalPages,
+        className: "rounded-full border-2 border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
       },
       "Next",
-      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronRight, { className: "h-5 w-5" })
+      /* @__PURE__ */ React21__default.default.createElement(lucideReact.ChevronRight, { className: "h-4 w-4 ml-2" })
     ))
-  ))));
+  )));
 }
 function CurrentOrdersScreen() {
   const router = navigation.useRouter();
@@ -10987,14 +11083,23 @@ function WishlistScreen() {
     return list;
   }, [wishlistProducts, onlyInStock, sortOption]);
   const emptyAfterFiltering = !isLoading && wishlistProducts.length > 0 && processedProducts.length === 0;
-  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-slate-50 pb-16" }, /* @__PURE__ */ React21__default.default.createElement("section", { className: "relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] pb-32 pt-16 text-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute inset-0 opacity-40 mix-blend-soft-light", "aria-hidden": "true" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute -top-1/2 right-1/2 h-[40rem] w-[40rem] rounded-full bg-white/10 blur-3xl" }), /* @__PURE__ */ React21__default.default.createElement("div", { className: "absolute left-1/4 top-1/4 h-48 w-48 rounded-full bg-white/20 blur-2xl" })), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-3xl space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("span", { className: "inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-4 w-4" }), "Wishlist"), /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-4xl font-bold leading-tight md:text-5xl" }, "Curate your pharmacy must-haves in one calming space"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "max-w-2xl text-white/80 md:text-lg" }, "We keep your favourite products ready for reorder, refill reminders, and quick checkout\u2014exactly when you need them.")))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "relative -mt-20" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4" }, /* @__PURE__ */ React21__default.default.createElement(
+  return /* @__PURE__ */ React21__default.default.createElement("div", { className: "bg-white" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "min-h-screen bg-white max-w-6xl mx-auto" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React21__default.default.createElement(
     framerMotion.motion.div,
     {
       initial: { opacity: 0, y: 24 },
       animate: { opacity: 1, y: 0 },
-      className: "rounded-3xl border border-slate-100 bg-white p-6 shadow-xl shadow-primary-50"
+      className: "space-y-6"
     },
-    /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-6" }, !isAuthenticated && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex min-h-[40vh] items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-lg rounded-3xl border border-slate-100 bg-white p-10 text-center shadow-lg shadow-primary-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-8 w-8" })), /* @__PURE__ */ React21__default.default.createElement("h2", { className: "mt-6 text-3xl font-bold text-slate-900" }, "Sign in to see your favourites"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-3 text-slate-500" }, "Create your curated shelf of products and we'll keep them ready whenever you return."), /* @__PURE__ */ React21__default.default.createElement(Button, { className: "mt-6", onClick: () => router.push(buildPath("/login")) }, "Sign In"))), isAuthenticated && /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-semibold text-slate-900" }, "Your saved collection"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-slate-500" }, "Total value: ", /* @__PURE__ */ React21__default.default.createElement("span", { className: "font-semibold text-primary-600" }, formatPrice(totalValue)), onlyInStock && " \u2022 Showing items ready to ship")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-primary-200 hover:text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(
+    !isAuthenticated && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex min-h-[40vh] items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-lg text-center space-y-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-12 w-12 text-gray-400" }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Sign in to see your favourites"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500" }, "Create your curated shelf of products and we'll keep them ready whenever you return.")), /* @__PURE__ */ React21__default.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => router.push(buildPath("/login")),
+        className: "rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 text-sm font-medium transition-colors"
+      },
+      "Sign In"
+    ))),
+    isAuthenticated && /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21__default.default.createElement("h1", { className: "text-2xl font-bold text-slate-900" }, "Wishlist"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, wishlistCount, " ", wishlistCount === 1 ? "item" : "items", " saved", wishlistCount > 0 && ` \u2022 Total value: ${formatPrice(totalValue)}`)), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-1" }, onlyInStock && /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-sm text-gray-500" }, "Showing items ready to ship")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement("label", { className: "inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-primary-200 hover:text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(
       "input",
       {
         type: "checkbox",
@@ -11043,7 +11148,15 @@ function WishlistScreen() {
         key: index,
         className: "h-72 animate-pulse rounded-2xl border border-slate-200 bg-slate-100"
       }
-    ))), !isLoading && wishlistCount === 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex min-h-[30vh] items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "max-w-2xl rounded-3xl border border-slate-100 bg-white p-12 text-center shadow-xl shadow-primary-50" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary-100 text-primary-600" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Sparkles, { className: "h-10 w-10" })), /* @__PURE__ */ React21__default.default.createElement("h2", { className: "mt-6 text-4xl font-bold text-slate-900" }, "Start your wellness wishlist"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-4 text-lg text-slate-500" }, "Bookmark pharmacy essentials, supplements, or skincare picks and we'll keep them safe until you're ready to checkout."), /* @__PURE__ */ React21__default.default.createElement("div", { className: "mt-8 flex flex-wrap justify-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(Button, { onClick: () => router.push(buildPath("/shop")) }, "Discover products"), /* @__PURE__ */ React21__default.default.createElement(Button, { variant: "outline", onClick: () => router.push(buildPath("/categories")) }, "Browse categories")))), !isLoading && processedProducts.length > 0 && /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, viewMode === "grid" ? /* @__PURE__ */ React21__default.default.createElement(
+    ))), !isLoading && wishlistCount === 0 && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex min-h-[30vh] items-center justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "text-center space-y-6 max-w-md" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "rounded-full bg-gray-100 p-6" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Heart, { className: "h-12 w-12 text-gray-400" }))), /* @__PURE__ */ React21__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React21__default.default.createElement("h2", { className: "text-2xl font-bold text-slate-900" }, "Your wishlist is empty"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "text-gray-500" }, "Start adding products to your wishlist to see them here.")), /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-wrap justify-center gap-3" }, /* @__PURE__ */ React21__default.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => router.push(buildPath("/shop")),
+        className: "rounded-full border-2 border-primary-500 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
+      },
+      "Discover products"
+    )))), !isLoading && processedProducts.length > 0 && /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, viewMode === "grid" ? /* @__PURE__ */ React21__default.default.createElement(
       framerMotion.motion.div,
       {
         layout: true,
@@ -11106,7 +11219,15 @@ function WishlistScreen() {
         },
         "Remove"
       )))
-    ))))), isAuthenticated && emptyAfterFiltering && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50 p-12 text-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-slate-200 text-slate-500" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "h-8 w-8" })), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "mt-6 text-2xl font-semibold text-slate-900" }, "Nothing matches those filters"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 max-w-md text-sm text-slate-500" }, "Try showing out-of-stock items or adjust your sort order to revisit everything you\u2019ve saved."), /* @__PURE__ */ React21__default.default.createElement(Button, { className: "mt-6", variant: "outline", onClick: () => setOnlyInStock(false) }, "Show all saved products"))))
+    ))))), isAuthenticated && emptyAfterFiltering && /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 p-12 text-center" }, /* @__PURE__ */ React21__default.default.createElement("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500" }, /* @__PURE__ */ React21__default.default.createElement(lucideReact.Package, { className: "h-8 w-8" })), /* @__PURE__ */ React21__default.default.createElement("h3", { className: "mt-6 text-xl font-semibold text-slate-900" }, "Nothing matches those filters"), /* @__PURE__ */ React21__default.default.createElement("p", { className: "mt-2 max-w-md text-sm text-gray-500" }, "Try showing out-of-stock items or adjust your sort order to revisit everything you've saved."), /* @__PURE__ */ React21__default.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: "mt-6 rounded-full border-2 border-primary-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors",
+        onClick: () => setOnlyInStock(false)
+      },
+      "Show all saved products"
+    )))
   ))));
 }
 function SearchPage() {